Introduction to Construct 2 Algorithm

In this post, I will not directly go to the algorithm. First thing I want to do is make the same definition and perception of algorithm. So, algorithm is the way of thought step by step procedure to solve a problem. Using Construct 2, you will solve “the problem” with just single click.

In order to make your project easy to read and understand by the creator (you), I suggest you to create the framework first by creating groups for each layout.

I have 5 different groups here for “inGame” layout. Player, enemy, power-up, score, and background divide by their role in this layout. Its better to rename the event sheet with the same name of your layout. Try to think about you application elements for each layouts.

Now, to create a group for each layouts. Choose the proper “Event Sheet” of your layout. Right click on empty space and choose “Add Group”, give it a name based on their role. Keep thick “Active on start” option, to make this group always active.

After making some groups for your layout make sure you have event number 58 and 59 from picture above (required for in-game condition and another time-based action). This setting will make your application state “Paused” when you snap the application. If you create the project using template that I have had mentioned before, this setting should have been there.

If not, add a new event, click “Add event”  text on your “Event sheet” window. Choose “Windows8” object type > “Compare view state” > “snapped”.

After that, create the action by click “Add action” text in line with current event. There are some action need to set on this action.

1. “System” > “Set layer visible” > (choose which layer will be active when snapped, create a new one if you are not have it) > (set visibility to “Visible”) > Done.
2. “System” > “Set time scale” > (input “0”) > Done.

Settings for snapped view is done, now we will turn it back when user back to the application. Step is same as before when you create snapped view feature.
1. Add an event from system “Else”.
2. Add an action from system, “Set layer visible”, turn paused layer to invisible.
3. Set time scale of your layout to “1”.

*Picture of event window for “System” configuration

Now, you have known how to add an “Event” and “Action” indirectly when you make snapped view settings for the application. The last thing that you have to know for basic is how to create “Global Variable” and “Comments”.

Do not use Global Variable too often, only use if you need it for global usage. Right click and choose “Add global variable” to use it. Same way with “Comments”, this action will appear with yellow background. It will not affect your application, just for a little note. After you have known the basic, now we can continue to the real thing. Follow links below to go to certain function you might be interested.

1. Player Control (Touch Device)
2. Scoreboard
3. Player Bar Indicator (Health Bar)

After finish with your project, now it’s time to upload it to store. See the REQUIREMENT to upload an application to Windows Store.

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.

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.

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.

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

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.

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

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

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.

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

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

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.

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.

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.

Getting Started

What is Construct 2?
Construct 2 ” Is a powerful ground breaking HTML5 game creator designed specifically for 2D games. It allows anyone to build games — no coding required!” (https://www.scirra.com/construct2).

Why Construct 2?
It has special feature and template that suit for Windows 8 game development, less worry being rejected when submitting application to Windows Store.

Where to get Construct 2?
You can download free version of Construct 2 here. How does it works? Single click, drag and drop with a simple and short algorithm.

————

1. Start a New Project.

2. Create new project using “Windows 8 Project” template.

3. Click on New Project* (default project name before you change the properties)at “Project” window,  then a “Properties” window will occur on the left side. Change Window Size Properties to 1366 x 768 (default size of Windows 8 resolution screen). Rename your project name, fill the author, version, email and website(recommended) column as your project details. Highly recommended using Internet Explorer (IE 11) as your Preview Browser, using another browser may cause unwanted things happen to your project.

4. Expand Layout folder, click Layout 1 (you can rename it later). There is “Layout” properties on the right side, change the Layout Size and Margins as you needed. (I’am using 1366 x 768 for layout size and 500, 500 for margins). You can add more layer by right clicking on Layout folder and choose “Add layout”, don’t forget to add “Event Sheet” too!

5. Now, I’am going to remove some objects (DescriptionText, PausedText, PurchaseButton, PurchaseStatus and ShareButton) that created by default. (You don’t need it too i think). To remove unwanted objects, expand “Object types” from Project window, right click on the object that you want to remove and delete it.

*Here is the Project window

6. Now we have clean layout, let’s move to “Event sheet 1” tab.

7. Let’s clear out some unnecessary things in this window, press “Ctrl + Left Click” to pick some of these “Event”
(Unselected event)
(Selected event) It will turn into Yellow if you have select an event or more.
Delete these events because you are not need it for now. That is all you need to do for now, see you at next session. 😀

1. Creating Object (Text and Sprite).
2. Creating Object (Miscellaneous).