Category Archives: Tutorial

Tutorial for making application (games) using Construct2®

Behaviors

Now we will talk about object behaviors. With this properties an object could perform some action such a real stuff. Get on this properties by selecting the object, and then click on “Behaviors” which color is blue and have an underline on it. Same window appearance with Instance Variable will pop up.
SS019

I have a plane here, and now I will give it an “ability” to move by 8 direction. A real aircraft must be a solid stuff, right? So, I will also give it a “solid” stance. In other words, this properties will make your object as real as it is.SS020

Add new behaviors by clicking on (+) button. Usage of Behaviors window is the same with Instance Variable window (click link to go back and see details).

When you click on add button, there are a lot of behaviors type will appear. I will tell you some type of behavior which very common used in a game application.
SS021
*See picture above

1. Solid
This type of behavior will give it an ability to become a solid things, which stand on solid platforms, slide on tilted platforms, affect with collisions, and gravity, etc.

2. Bound to layout
In some game application, creator has restrict players to move outside layout. Use this to limit player movement, so it will still remain inside.

3. Fade and Flash
A simple fade out and fade in animation. For flash type behavior, it will be a bit different. Flash behavior usually used to make collision effect or restart effect of an object. I.e, when a player dies and re-spawn, it will flashing to avoid sudden attack. Use flash behavior to make this kind of effect.

4. 8 Direction
It is a basic movement control for player to control object. Can be change to just 4 Direction setting further. Configuration for this behavior and some of other behavior will appears in “Object Type Properties” > “Behaviors” > “(behavior type)” as additional properties, so it will be more complex and longer after you input some behavior.
SS022

5. Bullet
As its name, bullet. This behavior have additional properties / configuration to make an object move like a bullet. Needed for shooter game like what I have made recently “Aircraft Takedown“.

6. Platform
Like “Mario Bros”, he walks on land that we called here as platform. In this type, you will make an object as a walking side

If you have all of your object ready with their variables and behaviors. Follow this LINK to go to advance setting of your application, algorithm.

 

 

Instance Variable

Each one of object name have their own properties of variable to holds some value. Value of these variable can be a number, text and boolean (true or false). Variable in an object works as “Local Variable”, so it will not interrupt another variable (in different object) which have the same name.
*Note : Even though its “Local”, but please use different keywords with Global Variable (if you already have it) to avoid unexpected error.

1. Make an Instance Variable by open this window. Left click on your object and then choose “Instance Variable” from object type properties. An Instance Variable window will pop up like this. Look at the picture, I already give some unique mark on it. There are red, green, and blue mark which have different action for each. Red mark is for add a new variable, green mark for edit the selected variable, and blue mark is for delete the selected variable. List of variable you have made will be displayed on a table below.
SS016

*In this tutorial I will only use number for the object variable type, because it can represent both boolean or text.
SS017

2. Give your variable a name that represent the usage of variable. Mention initial value for your variable if needed.  Example, I have an aircraft (plane) here which have health point as one of its element so I will named these variable as “health”. Initial “health point” for fresh and mint condition is 100 points, so I will put 100 as it “Initial Value”.
SS018

You can close this window if you have finished editing variable inside. If there any missed variable, you can simply open this window again by following step 1.

Object Type Properties (Sprite and Text)

Each object have their own properties. When you click on the object, properties window will appear on your left side screen.
SS014SS015
*Sprite properties window (left), text properties window (right).

The different between them is only on their “Properties”. Maybe it will make you confused “So which one is the properties?” The answer is simple, there is an “Object Type Properties”, and we have a “Properties” inside it. I will explain some things you need to know about Object Type Properties.

1. General Information
Name : Is the name of your object.
Plugin : Type of your object.
UID : Unique IDentity, every object have their own UID that can not be changed by user. This number will always be different compared with the same sprite if you have 1 or more copy in the project.
Global : This setting will let you make all object by the same sprite name have the same properties. So, turn it “NO”.

2. Common
Layer : Change object location by layer (upper / lower / middle / somewhere else).
Angle : Angle of your object in degree (xxx°).
Opacity : Transparency of your object.
Position : Position of the object at current layer in pixel. For the best result, use this properties to place your object smoothly.
Size : Size of your object.

3. Properties (Sprite)
Animations : Editing your animation can be access by here or just  right clicking on the object and choose “Edit Animations”.
Size : It will make the image size scale by 1:1 to the layer size
Initial Visibility : You can change the visibility of your object at the beginning and later on “Event Sheet”. But, usually turn it to “Visible”.
Initial Animation : Which “type” of your animation appear for the first time in the layout. (Default is “Default”, you can change it but, not really important for now).
Initial Frame : Which “move” of your animation appear for the first time in the layout. It is not really important if the animation run fast, people will not recognize it.
Collisions : Each object have their own collision point, just turn it to “Enable” for now, you will know the usage later.

4. Properties (Text)
Text : Type your text here.
Initial Visibility : (same as sprite type properties)
Font, color and alignment : (I think it’s already familiar with you).
Hotspot, Wrapping and Line Height : (better not to change this one, keep it default).

5. Instance Variables and Behaviors will explained separately. There is no difference of usage and meaning between sprite and text on these properties. Click on link above for details.

Creating Object (Miscellaneous)

Since in this tutorial we are using template. What if we create the project without template (using an Empty Project), and what if we delete some important object by accident without conscious? Well, check this out.

1. Open “Insert New Object” window. If you don’t know how to do it, get back to this PAGE. As you see, there’s much more object types when I create a new empty project than using template.
SS011
SS012

2. For this tutorial, we need some of these object types (Web Storage, Keyboard, Mouse, Touch, Audio, and Windows 8).
SS013

3. Forget about giving each of this object type a name, because you will only need it one (in this tutorial). Just click the object type and insert.

Creating Object (Text and Sprite)

There are so many types of object that contributes in your application. In this tutorial we will try to input “text” and “sprite” objects into our project.

1. Have you ever seen an application without a text? I don’t think so XD . In this first section we are going to input a “text” into our project. Right click on a blank area (no object selected), and see these options below and choose “Insert new object”.
SS007

2. A new window will pop up. Like I said before, there are a lot of object type there. One of them is “Text” object type, but I prefer to choose “Sprite” instead of “Text”, why? Because I am going to use unsupported font style. It will impact the result when rendering. If you use unsupported font, a font that you have selected will go back into it’s basic font “Times New Roman”.
SS008
You can named your object on “Name when inserted” properties (from picture above). Press “Insert” and click on an empty space where you want to drop the sprite.

3. Another window will pop up after you click “Insert” button.
SS009
Import your “text” object by click on an object by red mark from picture above (Load an image from a file). Actually, you can make object directly on this window, but I not recommended you to do that. For the best result,  I use “Adobe Photoshop CS 6”  to create what we called as sprite. Close “Edit image” window and the text sprite will appear on your layout.
SS010

4. Repeat step 1 up to 3 in order to insert new object into your layout. To Import another graphical object (It can be another text, sprite, background, button, etc.) No matter what type of object you want to input, as long as you choose “sprite” it will treat it as a sprite.