Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Controlling a space shooter with touch

A topic by Tadgames created Feb 02, 2021 Views: 271 Replies: 3
Viewing posts 1 to 4
(1 edit) (+1)

So I've got a space shooter demo working for the most part, the player rotation will work when at no scale or at full scale.
And works great on desktop/laptop.

The problems arise when trying to play the game on phones/touch devices. It works but most will rotate strangely.
My idea is to create a rotation controller, much like the normal controller that is there now, except it will take in rotation and apply that to the player. My thoughts on how the controller should be laid out is that it would have rotation on the right and directionals on the left, with perhaps two buttons above the directionals as a and b buttons, with start and select/back in the middle. 

When finished, I'll include it as part of my JavaScript library that anyone will be able to use in their games.


Update: I've got it finished, it works well on my touch devices. I would love feedback from people who try it on their phones.

(1 edit) (+1)

It will be interesting to see how this works out on phones/touch devices. Hard to visualize without a screenshot, but it sounds promising. A lot of touch-controlled space shooters I've played make the mistake of allowing the player ship fly into/overlap the area where the touch controls are. As a result, one's thumb often ends up covering the very sprite you're trying to control.

(1 edit)

I've got it finished pretty much, I am now looking for a few good images to put together a better looking controller.

The controller appears at the bottom of the game, so the whole game play area remains visible not needing to be touched.

At first I tried having a circle of html divs, one for each rotation value, such that I would just have to detect which div the touch is moving over,
instead of doing any math. But touchmove events don't cross over, if the move started on one div, even though the finger moves over another,
it still registers as the same div being touched, until the finger is let go. So it has to be done with one div and Math.atan2. It's not so bad, I thought it would be,
the scale of the screen has to be accounted for, you have to convert the touch cords into cords that match the width height of your game not the screen,
figure a middle point to rotate around, and then use atan2 to rotate around it. My library already has a Class that calculates screen to game cord offsets, so I did not have to recreate that it was already there.  In an hour or so I should be back to update the demo.

It's finished. And it works rather well on a galaxy. And on my cheap walmart go edition tablet it also works rather well.





I put the rotation control on the left and directionals on the right, to me it feels better that way.
This controller is now also part of my open source tabageos library, the source code for this demo is the best place as of now,
to see how to use it in a real life example. 

The middle of the circle is the controller rotation point, and the circle is in a html div that gets touched,
and that div is inside of a whole controller div that gets resized to the screen, and therefore all divs inside it automatically resize.
Touch move events are captured and then the points translated to the game size points,
so i'm able to calculate things from my graphics editor as if the game is always the width and height made in the graphics.

Then its basic geometry,  Math.atan2(), to get the rotation  in the circle, then that rotation value is applied to the players ship.