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.

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!





Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What’s New in Typescript 3.4

How to use redux thunk in React and React Native

Recomposing Redux

One Button To Edit Any Site Freely

Simple Example of State in ReactJS

Flutter vs Nativescript: Everything You Need To Know

How To Run MERN Stack on Docker Compose

Learn How To Build APIs With Next.js


Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Allard van der Ouw

Allard van der Ouw

More from Medium

Building CRM: The Portfolio Project Idea

Construct week project at Masai School Orbitz Clone

How to import a glTF file into your React application using React Three Fiber

Firebase and React Blog— Read From Firestore