User Tools

Site Tools


gettingstarted

Getting Started

Overview

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 KIS_Resource package.
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.

Preparation of framework

First, we need to add framework to our level. Follow Setting up editor instructions and create empty project with debug cursor enabled.

Framework - quick overview

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.

  • Scenes represent transparent layer where components can be placed. It is similar to Adobe Photoshop layer.
  • Components are objects that process input from player but do not contain references to any graphics. They contain only empty lists for canvas objects. Various components use various lists. For example, component button uses three lists: Idle, Hover, Clicked. Every list is rendered in some other situation.
  • Canvas Objects define only references to graphics but do not do anything interactive or dynamic because components are there for their management.

First scene

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.

First component

Find 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.

You can then launch game and check if you can see output position of your component. It indicates that component is ready for further work.

First canvas object

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 KISCanvasObject_Image.

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

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.

Conclusion

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!

gettingstarted.txt · Last modified: 2015/05/27 19:23 by admin