Phaser 3 - Starter Templates with ES6+ (ESNext) or TypeScript

Showcase
1

Phaser 3 Starter Templates (ES6/TypeScript)

I have made 2 Advanced Starter Template for Phaser 3.

One with ES6 and the other with TypeScript.

Key Features

  • ESNext features ready (async/await, Rest/Spread operators)
  • Easy to use
  • Code Splitting
  • Image Optimization
  • Obfuscation
  • Development Server with SourceMap and Live-Reload
  • PWA ready with offline support and “Add to Home screen” install prompt
  • Easy to build Native App using Capacitor
  • Includes Phaser 3 TypeScript typings
  • For development and production builds
  • Adds a webpack ContentHash to the JavaScript files (in production)

I hope you like them and can use it in your own projects :hugs:

18 Likes
2

Looks great! Thanks for sharing.

1 Like
3

Awesome job, thanks !

1 Like
4

Amazing Job!

I was curious if there are examples on PWA enabled HTML5 games. Also nice to see a boilerplate making it easier to build native apps.

I think the only thing missing is ESNext support, there are stuff like async/await became available after ES2017. Also would be nice to see a multiplayer enabled boilerplate with one click heroku deploy support. I can help out with that!

2 Likes
5

Thanks @yigitusta9

This platformer example is based on the TypeScript Template. It is a PWA (try to add it to your homescreen on your phone; It should also work offline on Android and iOS). It also uses Async/Await on this line.

You can use async/await is both, the ES6 and the TypeScript template.

Additional you can add all Babel Plugins you want to the ES6 template, or tweak the lib[] in the TypeScript Compiler options for the TypeScript template.

I can try to make a boilerplate for PhoneGap Build if you like.

2 Likes
6

I already tried out the platformer example’s PWA feature on my phone, it works wonderful. Definitely going to make a cross platform game using that.

If ES6 template supports ES2017 stuff maybe it would be better to name it ESNext, considering the repo will be updated to match the latest ES.

Regarding PhoneGap Build, I haven’t heard it before and I honestly don’t know much about mobile web dev and game dev, I recently began HTML5 game development. It would be cool to see a tutorial on shipping cross platform mobile HTML5 games though!

1 Like
7

You’re right. But I called is es6 because most people only make the difference between es5 and es6. This is why I called it like this.

PhoneGap Build is very simple, since you do not have to compile any code on your computer, instead it is being compiled for you on PhoneGap’s servers.

Actually I just figured out that PhoneGap has many starter templates. I will download a basic one and modify it for Phaser Games.

Maybe there are PhoneGap tutorial out there for Phaser. I don’t know.

8

Thank you,

It will help me a lot when i’ll start coding with Phaser3, btw, it’s added to my Awsome Phaser

which still have a conflict about PLATEFORMS SECTION with the original repository here if you want to fix the problem you’re really welcome

9

I actually just notices that the es6 version was not async/await compatible. I have made the modification. Now it works :smiley:

Thanks :smiley:
You mean the missing platforms section in your version? Just copy and past it manually, or not?

10

The list of Plateforms are in my version unfortunately I hope to make a unique version the original one of GH/Raiper34 but he won’t add them even if itch.io for example is very important for a game developer with Phaser

11

Ooh, I see the pull request. Unfortunately I can’t help you with this.

1 Like
12

Looks great! Thanks, will try it out in my fresh project!

1 Like
13

I have just added support for Code Splitting in both templates :star_struck:

Here an example for importing and starting a scene dynamically:

if (condition)
  import(/* webpackChunkName: "mainScene" */ './mainScene').then(mainScene => {
    this.scene.add('MainScene', mainScene.default, true)
  })

If the the condition is true, the browser will load the the mainScene.chunk.js file and Phaser will add the scene to the sceneManager and start it.

Hope you can use it. I personally think this is pretty cooool :sunglasses:

2 Likes
14

May I reference your example in my new book “Phaser Game Starter Kit Collections”? It’s simply brilliant!

1 Like
15

Hi. Thanks :smiley:

Of course! Feel free to reference all you need. Examples, Templates and even my newest and coolest project enable3d.io (3D objects and physics for Phaser).

If you wish, I could update some examples to the latest Phaser version?

Here’s a list of cool stuff I’ve done.

2 Likes
16

Extremely useful, I use these repos all the time. Thanks!

1 Like
17

I’ve linked in my books to your superior examples. Thanks for permission to credit you.

1 Like
18

Thanks for keeping this template up to date!

1 Like
19

My pleasure!

btw, thanks for being my sponsor! It helps a lot :slight_smile: