Tuesday, October 28, 2014

Detecting the input device (C2/HTML5)

While getting familiar with the Construct 2, I started to wonder would it be possible somehow detect what kind of a device is used as an input device for HTML5 game. In principle, HTML5 will run on almost all platforms, so it would be very useful to see whether the player is using mouse or touch screen as a input device.

I created a simple Breakout game clone to find out how the control method could be detected easily. You can load the Construct 2 .capx file from our server, if willing to see the full example game and want to try it yourself.

Breakout clone















Game is very simple one, and it has no extra features included. I also tried to add some comments to ease up understanding what has been done and why. I am not too sure if everything is done "correct" way, but anyways this example is working somehow with my own devices (Android tablet, Lumia phone, Linux and windows computers).

Game events 2-4 are the most interesting ones from this article point of view. Please see the .capx or the picture below to see how detection was done in this case.

Detect whether mouse or touchscreen is used as input device














controlMethod variale is used to store the information about the input device.

When game is in "init" state game will wait for user input. If Touch event is triggered, game gets hint that touch screen is used as an input device and controlMethod variable value is set to "touch". Mouse detection works similar way, except it is triggered by mouse LMB release and controlMethod variable value is set to "mouse".

After mouse is clicked or touchscreen touched, the game will move to "run" state and ball starts moving. Bat object is moved horizontally towards the targetX X-coordinate on every tick. controlMethod variable is used to decide whether the bat targetX position will be based on mouse cursor position (Mouse.X), or last known touch position (Touch.X). Details can be seen from the .capx project file or the figure below.

controlMethod variable usage in "run" state

















So when the gameState is "run", loop is executed on every tick (approx. 60 times per second). When mouse cursor (of touch) is between left and right boundaries, targetX value will be set to Mouse.X or Touch.X, depending on the value of controlMethod variable. If cursor (or touch) is not between the boundaries, targetX is fixed close to left or right boundary.

Bat movement is done in events 11-14, using the "bullet" behavior. Nothing special, just defining the bat direction and then enabling/disabling the "bullet" behavior as needed.

That's it. I hope this example is useful for you.

-Jussi

Wednesday, October 8, 2014

Example Construct 2 game (html5)

Introduction

I received some questions concerning my previous blog post on Construct 2 if-statement. Therefore I decided to put the project file (.capx) available to everyone who needs it. This game is very simple one, but I think it is just suitable for getting familiar with the tool.

Load Construct 2 capx file for "shootTheBox" game.

The HTML5 version of game can be found from our server.


shootTheBox.capx file usage

You will need Construct 2 for opening this file. Free version can be downloaded from https://www.scirra.com/.

.capx file can be opened by double-clicking it, or alternatively from C2 menu (file -> open).


shootTheBox game events

Since this is a simple game with just one layout, there is only one event page too. The screenshot is attached below. I added some comments to describe what each event block is supposed to do.

shootTheBox in Construct 2 event editor (with comments added)
















There are handful of global variables in this game. One of them is the "gameState" variable, that holds the information whether the game is in "init" or "run" mode. In "init" mode game is not running and "Click to Start" text is visible.

When mouse is clicked (or screen touched) game state changes to "run", and game starts to spawn coins and boxes on every second. The starting location of coins and boxes are defined by using random() function. Box color selection structure is explained in detail here.

If mouse cursor is over a box and it is clicked, the box is destroyed and Score counter is increased by 10 points.

If coin hits a box, the coin is destroyed and Lives counter is decreased by 1. When lives run out (<=0) game ends and state is changed to "init".

The values of score and lives counters are updated to HUD on every tick (about 60 times per second).

There are certain behaviors attached on box and coin objects, e.g. bullet, destroy outside layout, sine, etc. The parameters can be tuned by selecting the object and then using the panel on left hand side of the screen. 

That's it. I am sure I missed something, but please have a look to the contents of .capx file, make your own modifications, and try how the game works with them.

-Jussi

Tuesday, October 7, 2014

Construct 2: if-then-elseif-else statement

Do you have an idea how to implement IF-THEN-ELSEIF-ELSE statement with Construct 2? At least I had to think for a while how to do it. It seems that this basic structure is not so straightforward to implement in C2.

I was creating a very simple game where boxes were moving from left to right. See example below:


The color of each box is chosen randomly, so it required the usage of random() function and if-then-else statement. There are probably several ways to do this, but I wanted to make this as simple as possible inside one single event and action box. 

Normally I would create a if-then-elseif-else structure like this to select color for the box (pseudo-code just for an example):

if randomNumber == 0
      set colorOfBox = "red"
else if randomNumber == 1
      set colorOfBox = "yellow"
else if randomNumber == 2
      set colorOfBox = "green"
else
      set colorOfBox = "blue"
end if

But when using Construct 2 things were bit more complicated for me: tool is event based and I don't have deep knowledge about the possibilities of it. So I decided to find out a solution that fits for me.

In my implementation the output of random(0,4) function was stored to randomNumber variable and the color of the next box to be created was chosen according to this table:
value  color
  0    red
  1    yellow
  2    green
  3    blue

If you want to use if-then-else statement in the parameter field of some action box (like Animation field inside Set animation action), the syntax to be used is like this:
condition ? if_true : if_false

For example, the return value of statement is set to "true" if a<10. Otherwise return value is "false":
a<10 ? "true" : "false"

As you might notice, the statement above implements just the regular if-then-else structure. But how to make the "else-if" part, if such is required? My answer is to use nested statements, so if-then-else structures are chained like in following figure:


Interesting part is surrounded with red box. There are total of three chained if-then-else statements, which will select the color of the box according to the value of randomNumber variable (see the table above). The else branch of each if statement will be executed if the condition is false. True condition will return the value from "true" branch. I tried to clarify this a bit with the following figure:


Figure shows how the randomNumber value is checked in the if-then-elseif-else statement. Different stages of statement are marked with different colors.

If the value of randomNumber is 0, the color of the box will be red. If value is something else (not 0), execution moves to second stage and will check if the value is 1. If that is true, then the color of the box will be yellow. If value is still something else than 0 or 1, the third statement checks whether the value is 2. if that is true, box color is green. Any other value will make next box to be blue (This is so-called "else" -branch, that covers all condifions that have not been met in previous stage).

Everything is done inside one event, so my target was achieved with this solution. There are probably more clever ways to do this, so please let me know if you know one. :)

-Jussi

Thursday, October 2, 2014

Testing and polishing

I've been bit busy with my daily work for last couple of weeks, so gamedev activities have got less attention than normally. But still there has been some progress since my last update.

My original plan was to finish and release "Dualball" flash game in the end of September, but now it seems to take some more time. Game itself is in pretty good shape: the mechanics works, there are no detected major flaws currently, and 75% of planned levels are ready and tested quite well. 

We have done thorough testing ourselves and a number of serious bugs have been found and corrected during the process. Gameplay tests have been run on both computer and touch-screen tablet to get some extra coverage. It has been interesting to see that some bugs are not easily visible on both platforms: E.g. "ball ground check" routine worked fine on computer, but on tablet there were strange malfunction with it. So I strongly recommend you to test your games on multiple platforms in early development phase also, if possible.  

I have tried to have more focus on graphics than with my previous games. So most of the sprites, backgrounds and UI buttons are ready-made open-source assets found from the internet. 

Here is the latest preview video of "Dualball" game:

Video has been captured using my Linux laptop that clearly has not enough computing power for the task. So the framerate and quality is not the best possible. But anyways, I believe you will get the idea. 

Now it seems that this game will be released just for Flash. I will probably skip the Android version, because it would require buying the Stencyl Studio version and I have already decided to switch to Construct 2 tool after this project. 

-Jussi