In this short tutorial we will show you how to create simple scene with one image and one button. We will use default textures included in
Purpose of this tutorial is not to learn you how framework works but show you how creation of GUI looks. We will talk more about framework later.
First, we need to add framework to our level. Follow Setting up editor instructions and create empty project with debug cursor enabled.
Working with Kiscan is very easy. In this section we will talk about some most basic fundamentals of framework.
Our objects are divided into three levels: Scenes, Components, Canvas Objects.
In Content Browser we can create templates (archetypes) of these object and then link them each other. When game starts, real objects are created from these templates.
Clicked. Every list is rendered in some other situation.
Find KISScene in Actor Classes and
Create Archetype. Open it and set
Draw Tag to true. This will help us to see if scene work as expected because it will display tag (name) of scene on screen.
Create new sequence
Scene > Create New and connect it with
Main > Init Kiscan. Then, create new string variable and connect it to
New Scene Tags. Enter there name for your scene which will be created on start of game from our archetype/template, for example MyScene. Set
Scene Archetype to your newly created scene.
When you are done, you can launch game and check if you see tag of your scene in top left corner.
KISComponent in Actor Classes and create new archetype. Open it and set
Draw OutputPosition to true, this will draw current position of component, so we will be able to see if component works as expected. We will also move it a bit to the left, so set
Position > Dynamic > X to 150.
Now we need to assign our newly created component to our scene. Open our scene and find line
Component Archetype. Click on green plus to create new slot for component. Assign there our component using green arrow and set some tag for it, for example MyComponent.
Now when we have working component we can attach some graphics to it. We will start with simple image which will use default kiscan texture (yellow checker). Open our component and expand
CO List - Static line. Create new slot and specify some
Tag, for example MyImage. Click blue arrow and select
Launch game and see ! Our new image is there with default yellow texture. You can play a bit with canvas object and change texture or some other properties if you want, however we will cover this in part later.
Making of button is very easy and you already know how to do it!
Create new component
KISComponent_Button, assign it to scene, and create three different canvas objects (you can change their color in properties of each canvas object) in three lists -
CO List - Idle,
CO List - Hover,
CO List - Clicked.
Tags of canvas objects have to be unique, for example Image1, Image2, Image3. You can also move your button a bit down by
Position > Dynamic > Y. When you did all this steps, set value
Shape Enabled in every canvas object to true. This will allow our button to process input and make it “visible” for input processing.
You can launch game and test your button. If you move cursor on your button it should change its visual to
Hover list. When you click it, it should change to canvas object specified in
COList - Clicked.
Now, we need to link this button with some kismet action. Open kismet and create new event
Comp > Button > Activated and link it with some action, for example
Log. Create new string variable and link it to our event. Write tag of your button component to this variable.
We are done ! When you press button it will print your log to screen.
You should now understand how GUI creation in kiscan looks. Feel free to experiment with all available properties because experimentíng is best way how to learn something. Almost all properties have tooltips available!