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.

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

Comments

Post a Comment

Popular posts from this blog

Unity3D mirror using camera and RenderTexture

Image
There are several ways to create mirror in Unity3D. Some of them require more scripting than others, but I will now present an easy way using just one extra camera and RenderTexture.  In this solution you will use RenderTexture on an object and place camera behind that object. This is easy option that does not require scripting. Alternatively you can use reflective shader, but it requires some more work. Seven small steps to create object with mirror RenderTexture: Create new Unity project. It is recommended to use latest LTS version (Long Term Support).I was using Unity 2020.1.3f1 version for this example.   Create plane object for ground and Cube for the mirror object. Scale both objects to match your needs.  Create new camera for attaching the RenderTexture. Position it inside recently created cube and adjust direction so that it is pointing out to the direction where mirror should be reflecting the image.  Create RenderTexture. Name it as you wish. No need to modify any other setti
Read more

Construct 2: if-then-elseif-else statement

Image
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 t
Read more

Unity3D: Convert Seconds to hh:mm:ss Format

Image
Update 17.8.2021: Replaced obsolete Monodevelop with Visual Studio where applicable.  I have gradually started to use Unity3D for game development. So far I have been doing very small and simple test codes just to learn how certain things should be done with Unity. But now I have an example that might be of interest for other wannabe-Unity3D users, at least those who are struggling with converting seconds to HH:MM:SS format. :) So lets begin with this example. First of all, start Unity3D and create new project. This example uses the console only for outputting result, so project can be either 2D or 3D. Whichever you prefer. Create empty object to your scene ( ctrl+shift+N ), or use pulldown menu ( GameObject->Create Empty ). Select empty object and rename it e.g. to " Timer ". Add new C# script component to empty object and name it as " TimerActions " ( Add Component->New Script->write name and select Csharp as script type ): Open TimerAction
Read more