How to build twin-stick top-down shooting with Phaser 3
--
This blog is a tutorial on how to create the basic mechanics of a twin-stick top-down shooter.
Source: https://github.com/allardvanderouw/phaser3-twin-stick-shooting
Demo: https://phaser3-twin-stick-shooting.netlify.com/
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.
You can use the template below to get you started.
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 :)
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!
Source: https://github.com/allardvanderouw/phaser3-twin-stick-shooting
Demo: https://phaser3-twin-stick-shooting.netlify.com/
