Tutorial - How to make a game in Phaser 3

[fariazz]

Hi everyone, just wanted to share my tutorial on how to make a simple frogger-style game in Phaser 3 (including some camera shake and fadeout effect)

Hope you like it!

How to make a game in Phaser 3

[PBMCube]

I discovered running this tutorial and others that brackets does not load assets correctly. It`s possibly my default settings. Yet, when I use XAMPP ,this tutorial works as designed. 

Thanks for your insight on Phaser3

[fariazz]

On 3/31/2018 at 12:42 PM, PBMCube said:

I discovered running this tutorial and others that brackets does not load assets correctly. It`s possibly my default settings. Yet, when I use XAMPP ,this tutorial works as designed. 

Thanks for your insight on Phaser3

That's strange to hear, Brackets works well on my end for Phaser. I prefer turning the auto-reload feature off and refresh manually.

Another option for a web server is to install Node.js and the http-server package:

1) download and install Node.js

2) on command line, install the http-server package globally:   npm install http-server -g

3) navigate to the folder where your Phaser project is located, type:   http-server   , that will launch a local web server for that folder

[PBMCube]

No, that's wasn't it. I discovered that 

On 4/9/2018 at 6:03 PM, fariazz said:

That's strange to hear, Brackets works well on my end for Phaser. I prefer turning the auto-reload feature off and refresh manually.

Another option for a web server is to install Node.js and the http-server package:

1) download and install Node.js

2) on command line, install the http-server package globally:   npm install http-server -g

3) navigate to the folder where your Phaser project is located, type:   http-server   , that will launch a local web server for that folder

No that wasn't it. I found that ...

Phaser v3.x.x (20180322); REMOVE ANTI-PATTERN
 CORS: Remove anti-pattern!
 - https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
 - https://enable-cors.org/
 Avoid this anti-pattern of omitting the protocols schemes in script "src";
 Cross origin requests are only supported for protocol schemes:
 http, data, chrome, chrome-extension, https.
 - ***the anti-pattern is this:***
 <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
 - use this: <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>

 

When I inserted the protocol everything worked perfectly.  Great tutorial now that everything is working.

[stahlmandesign]

In the tutorial, this.scene.restart() does not work correctly with Phaser 3.4. Change it to 3.12 and it is fine:

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>