This blog is a tutorial on how to create the basic mechanics of a twin-stick top-down shooter.
The source is explained if you read on :)
If you are new to Phaser 3, then you might want to read up on Phaser 3 first a bit more. There is plenty to find online or you can read the blog below which is written by Mariya Davydova.
How to build a simple game in the browser with Phaser 3 and TypeScript
I’m a developer advocate and a backend developer, and my frontend development expertise is relatively weak. A while ago…
You can use the template below to get you started.
A Phaser 3 Project Template. Contribute to photonstorm/phaser3-project-template development by creating an account on…
The index.html needs to be adjusted a bit to support mobile views and to remove the spacing.
On the game file (`/src/index.js`), we will first import the assets and set some constants. All the assets are provided by Kenney. Many great assets can be found at Kenney and they are all free to use :)
Kenney * Home
We've created over 40,000 images, audio files and 3D models for you to use in your projects. Thanks to our public…
It also imports the Virtual Joystick Plugin by Rex (source). Rex also created various other plugins where are all open-source, you might want to take a look at them too :)
Next we will define the
Bullet class. Which will be implemented later. The bullet is automatically destroyed after some time (1500 update ticks).
The config of the game is slightly modified. The
activePointers attribute is one I didn’t see a lot on other examples. As Phaser states in its documentation, “By default Phaser creates 2 pointer objects: mousePointer and pointer1.”. We need one more to be able to support dual touch on mobile devices.
The preload loads the assets into the game.
The create function adds the player, the joysticks and the bullets group.
On the update we control the player according to the joysticks.
So there it is, the basic controls of a top-down twin-stick shooter.
Many thanks to Rex and Kenney for their open-source assets!
I have created this blog because I had to put several sources of information together before I had this working. I hope this how-to is useful for you and will save you some time. Any feedback is highly appreciated!