How to set up and run the Phaser 3 framework

Phaser 3
1

Hi guys,
I am new to Phaser 3 and fairly new to JavaScript. I have looked on the Phaser official website as well as many YouTube videos to set up Phaser 3 with my IDE (Visual Studio Code or Brackets) but I am still confused. I download the js framework, but I don’t know where to put it in my code, and when I open it, it is a really big block of code. If anyone could help, that would be great. Thank you!

2

Hi @23Aferg8,
You generally won’t need to open the Phaser file. One simple way to use Phaser is using the script tag in your html:

<body>

<!-- div to add phaser canvas-->
<div id="phaser"></div>

<!-- phaser script must be in first place -->
<script src="pathToPhaserFile/phaser.js"></script>
<script src="pathToYourFile/game.js"></script>
</body>

You don’t even need to download phaser, you can import it from its cdn:

<script src="https://cdn.jsdelivr.net/npm/phaser@3.24.0/dist/phaser.js"></script>

Regards.

3

Hi @jjcapellan,
Thanks so much for you help! I really appreciate it! One question though, what is the Phaser canvas?

4

Hi guys,
I tried the method by @jjcapellan, and my html looks like this:

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="https://cdn.jsdelivr.net/npm/phaser@3.24.0/dist/phaser.js"></script>

<script src="game.js"></script>

And my game.js file is this:
var game = new Phaser.Game(640, 360, Phaser.AUTO);

var GameState = {
preload: function() {
this.load.image(‘sky’, ‘assets/sky.png’);
},
create: function() {
this.background = this.game.add.sprite(0, 0, ‘sky’);
},
update: function() {

}

};

game.state.add(‘GameState’, GameState);
game.state.start(‘GameState’);

But when I open this with Live Server on VS Code, I just see a black square and not my background image.

5

Do you have something like:

<body>
    <div id="phaser-game"></div>
 </body>

in your HTML file?

6

No, What does that do?

7

Look in the browser’s console for errors.

8

This is Phaser 2 code so it will definitely give an error.

Try the First Phaser 3 Game tutorial instead.

9

Is a type of HTML element Phaser creates in which draws the game.

10

Thank you all so much for your help! It worked, and I can get started making my game now!