Infinite Runner in Phaser 3
with TypeScript

Have you done the basic Phaser 3 tutorials like our Infinite Jumper with Modern JavaScript book?

You’ve made some simple games and generally understand how Phaser 3 works. 👍

Now… are you looking to improve the quality of your code and make a bigger game that might take several months?

That kind of project will benefit from code that is easy to maintain over months. Life is unpredictable and might cause you to miss a week or two of development.

How can you set yourself up to be able to jump back into coding after a couple of weeks without wasting hours getting back up to speed?

How can you limit the amount of frustration from not being able to quickly see what your code intended or how the data was structured?

We always intend to write quality code but the reality is that we have many other responsibilities and time constraints.

A built-in way that helps create understandable code by default will perform better in reality than any amount of willpower to write comments, documentation, or always adhere to best practices.

You want those things to add extra quality but not rely on them for all of the quality.

This is where TypeScript comes in. 🤓

It has language features that encourage you to write safer code that is easier to maintain over long periods by default.

Of course, you can still write terrible code with TypeScript.

A modern car can help you navigate, warn you of cars in blind spots, and let you know when you drift out of lane but you can still drive into a tree or a lake. 🤷‍♂️ Still, you want those features because it adds a base level of safety and quality to your driving.

TypeScript can do that for your Phaser 3 game code!

Phaser 3 comes with TypeScript support but it was not created for TypeScript. Parts of the design don’t fit nicely with TypeScript expectations and may result in confusion for you and errors from the compiler.

We’ll show you how to work around those problems to maintain all the great benefits of using TypeScript to make your game in Phaser 3!

What You’ll Learn

This book will walk you through 90+ pages over 11 chapters in creating an infinite runner like Jetpack Joyride.

It will feature a jetpack-wearing mouse running and flying through an infinite house avoiding lasers and collecting coins.

This is more advanced than our Infinite Jumper with Modern JavaScript book so we will be using Node.js, NPM, and modern web development tooling.

The topics we cover include:

• installing Node.js and using basic npm commands
• creating and using sprite sheets or atlases
• Arcade Physics for jetpack control and collisions
• infinitely scrolling background
• decorating an infinite world programatically
• using enums
• Object Pools for efficiently reusing GameObjects
• creating and using Animations
• Game Over and Play Again logic
• keeping track of a score
• organizing code in a logical way
• simulating a truly infinite world that can be played forever
• basic poor man’s State Machine
• designing text and UI

All that plus general programming and game development topics will be discussed in the context of using TypeScript with Phaser 3.

Get the Book

Get a PDF copy of the book for free! It is only available at Ourcade.

We’re not talking about a free preview or a free chapter. The whole book is free as a PDF.

Just drop your email into the box below and we’ll send it to you!

More Resources

We've got a lot more resources for you within Ourcade.

If video is more your thing then check out our YouTube Channel.

We have a quick 3 part series that shows you how to create the Phaser 3 getting started tutorial with TypeScript.

And for those looking to make a more complex game we have an 8.5 part Dungeon Crawler series.

Go to the YouTube Channel for more videos!

If you prefer to read then there's a wealth of information on our blog.

Check out the articles to help you add more features to Rocket Mouse after you've finished reading the book!