Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Phaser games are JavaScript-powered web apps that run in a browser.
Your Phaser game will consist of an HTML file, a CSS file, and a JS file. The JavaScript file will contain your game code. You'll also have a folder containing the asset files (images, animated sprites, sound effects, etc.) for your game.
Your game will also need to load the Phaser CE game framework, which is a JavaScript file named phaser.min.js that defines classes for JS objects you'll use in your game code. You can either load this Phaser CE file from a local copy (placed in the same location as your HTML, CSS, and JS files) or by linking to a URL from a CDN (Content Delivery Network).
Using a code editor (such as repl.it), create a new project (or folder) named hello-phaser containing three new files:
HTML file namedindex.html
CSS file named style.css
JS file named script.js
Depending on the code editor you're using, these new files might be completely blank — or they might have starter code that was automatically inserted by the code editor. Either way is fine. In the next few steps of this tutorial, you'll add new code to each of these files.
JS FILENAME: This code guidebook will refer to script.js as the name of the JS file containing your Phaser game code. However, you can choose a different name for this file (such as code.js or game.js). You'll just need to be sure the <script> tag in your HTML lists the correct filename for your JS game code.
In your code editor, create a new folder named assets in the same location as your HTML, CSS, and JS files. This folder will contain asset files used in your game, such as images, animated sprites, sound effects, etc.
Right now, this folder is empty, but in a later step, you'll upload an image file to this folder, so the image can be used in your Hello Phaser game.
In this first tutorial, you'll code a "Hello World" game that displays the Phaser logo and changes the game's background color when the spacebar is pressed.
This won't be a true game (because it will lack an objective, rules, challenge, etc.). However, it will introduce you to coding with the Phaser CE game framework.
The goals of this tutorial are to help you:
Understand the basic code structure of a Phaser CE game
Code a "Hello World" game with a simple player interaction
When learning a new programming language, the first step that many people take is to create what is called a "Hello World" program. Traditionally, this program simply displays the text "Hello World" on the screen and only requires a few lines of code. The purpose is to demonstrate that you can create a simple yet functional program in the new coding language. It's a first step before creating more complex programs with the new language.
A Phaser game can display text, so you could create a traditional "Hello World" message on the game screen. However, since video games typically use lots of images, you'll instead display an image on the screen. In addition, since video games require player interaction, you'll add the ability to detect input from the keyboard.
Finally, let's add a way for a player to interact with the game by pressing a key.
Phaser CE supports the ability to detect input through a keyboard, mouse, touchscreen, or gamepad. If necessary, you can have multiple inputs (e.g., several keys plus mouse, etc.).
You'll have the player use the spacebar key as an input to interact with the game. To do this, you'll first need to declare a global variable to represent this input key.
Copy this JS code, and paste it on a new line after line 5 (which created the global variable named logo):
This JS code statement declares (creates) a new global variable named spacebar, which will be used to represent the spacebar key on the keyboard.
The next step is to add the spacebar key as an input for the game, which will allow your game to detect when this specific key is pressed by the player.
For Phaser CE games, input controls are added within the create() function as part of creating your game world.
Copy this Phaser CE code statement, and insert it within the create() function by pasting it on a new line after the line of code that set the anchor for the logo image:
This code statement actually does two things:
It adds an input key to the game using a specific key code.
It assigns that input key to your global variable named spacebar.
The game.input.keyboard.addKey() method requires one parameter inside its parentheses:
Key Code — which is a code that represents a specific key on the computer keyboard. The Phaser CE API reference has a complete list of key codes. Some examples include:
Letter Keys: Phaser.KeyCode.A = letter A key
Number Keys: Phaser.KeyCode.ONE = number 1 key
Symbol Keys: Phaser.KeyCode.PLUS = plus symbol key
Arrow Keys: Phaser.KeyCode.UP = up arrow key
Function Keys: Phaser.KeyCode.F1 = F1 function key
Special Keys: Phaser.KeyCode.TAB = tab key
Each input key that is added to your game has several properties that be checked to determine if and when the key is pressed (or released):
isDown — value is true if key is currently pressed down
isUp — value is true if key is currently released up (i.e., not being pressed)
justDown — value is true only when key has just been pressed down
justUp — value is true only when key has just been released up
For this game, you'll change the background color of the game canvas if the spacebar key has just been pressed down (meaning the player will have to release the spacebar key and press it again, in order to change the background color again).
You can use an if conditional statement to check if a specific condition is true or false:
If the condition is true, whatever code statements you've listed within the if statement will be performed.
If the condition is false, those code statements will not be performed.
Copy this code, and paste it on the blank line within the update() function:
The if statement checks whether the spacebar.justDown property is currently true or false. If this condition is true, the code listed within the curly braces will be performed.
The code statement within the curly braces is a Phaser CE code statement that will set the background color of the game canvas (game.stage) to a random color.
Because the update() function runs repeatedly in a loop, the game will keep checking the spacebar key to see if it has just been pressed down.
Preview the game in your code editor. Depending on your code editor, you might need to refresh its preview pane. If necessary, open the preview in a new tab or window to view it in fullscreen.
Your game's background should change to a random color each time you've just pressed the spacebar key (you'll have to release the key and press it again to change the color again).
If so, congratulations — you've successfully completed the Hello Phaser tutorial!
(Otherwise, if not, double-check your code to see where you might have a mistake.)
Let's add the starter HTML needed for a Phaser game.
HOW TO COPY CODE: In this guidebook, you can click the copy icon displayed in the upper right of a code block to copy all the code to the clipboard for pasting.
Copy this HTML, and paste it into your index.html file (replacing any other starter HTML that might already be present):
This is the basic HTML required for a Phaser CE game. All of your games will start with this HTML (though you can also insert additional HTML to customize the game's webpage).
Here is an explanation of the key things this HTML does:
STYLESHEET: The <link> tag on line 7 loads your CSS stylesheet file named style.css, which can be used to style the webpage your game is embedded within.
GAME CANVAS CONTAINER: The <div> element on line 10 will contain your game canvas, which will literally be a <canvas> element that will be inserted by your Phaser game code. This <div> element has been given an id name of my-game, so your Phaser game code can identify where to insert the canvas for your game.
PHASER CE FRAMEWORK: The <script> tag on line 11 loads the Phaser CE game framework JS file named phaser.min.js. In this case, the file is being loaded remotely from a CDN (Content Delivery Network) using a URL. However, if necessary, this <script> tag can be modified to load a local copy of the Phaser CE JS file.
YOUR GAME CODE: The <script> tag on line 12 loads your JS file named script.js, which will contain your Phaser game code. You can use a different name for this file (such as: code.js or game.js) as long as the <script> tag matches the filename of your game code.
IMPORTANT: Be sure the <script> tag that loads the Phaser CE game framework (phaser.min.js) is listed before the <script> tag that loads your game code (script.js). If their order is reversed, your game won't work.
Let's add some more HTML to display the game's title and your name on the webpage containing your game.
Modify the <title> element on line 6 to list Hello Phaser as the webpage title. This title is displayed at the top of the browser window (or tab) — but not on the webpage itself. This would be used as the webpage's title if it were bookmarked in your browser or listed on a search engine's results page.
On your game's webpage, you'll use a heading (<h1>) to display the game title and a paragraph (<p>) to display your name. Let's display this information below your game. Remember that the <div> element on line 10 will eventually contain your game canvas, so you'll want to add this new HTML after the <div> element.
Create a blank line (using the return key) between line 10 (<div> element) and line 11 (first <script> tag). Then copy this HTML, and paste it into the blank line:
Now modify the text within the <p> element to list your actual first and last names.
Preview the webpage in your code editor. Depending on your code editor, you might need to refresh its preview pane.
At this point, your webpage will look very plain (because there's no CSS listed yet in the style.css file) — and it won't have a game canvas yet (because there's no JS listed yet in the script.js file).
You'll simply see the game title (<h1> element) and your name (<p> element) listed in the browser's default serif font with the text left-aligned and displayed at the top of the webpage. There won't be any visible game canvas yet.
Next, let's add some CSS to style the appearance of your game's webpage.
A Phaser CE game does not require any special CSS in order for the game to work.
However, you'll add some optional CSS to style the <div> element that will contain your game canvas. Remember that this <div> element was given an id name of my-game which can be used to select this element with your CSS.
Copy this CSS, and paste it into your style.css file (replacing any other starter CSS that might already be present):
Here is an explanation of what this CSS does:
Lines 3 and 4 set the width and height (in pixels) for the <div> element that will contain the game canvas. Later in your JS game code, you'll set your game canvas to these same exact dimensions.
Line 5 sets the margins around the <div> element. The top and bottom margins have been set to zero. The left and right margins have been set to auto, which will center the game canvas horizontally on the webpage.
Line 6 displays a border around the <div> element.
Let's add some other optional CSS to style some of the other elements of the webpage.
Copy this CSS, and paste it into your style.css file after your existing CSS:
As you can see, this CSS styles some of the properties for several elements on the webpage:
The <body> element is given a light blue background color and is set to use a sans-serif font for all text, which will also be center-aligned on the webpage.
The <h1> element is set to use a purple text color (instead of the default color of black).
The <p> element is set to use a larger font size (instead of the default size of 1em, which is typically 16 pixels tall — so 1.25em should be equal to 20px).
Again, all of this CSS is optional. If you wanted, you could modify this CSS — or add other CSS to style additional properties for the elements on the webpage.
Preview the webpage in your code editor. Depending on your code editor, you might need to refresh its preview pane. If necessary, open the preview in a new tab or window to view it in fullscreen.
Your webpage should have a light blue background, and you should see a black border outlining where the game canvas will eventually be inserted (once you add the proper JS code to the script.js file). Below that you should see the game's title (in purple text) and your name. Everything should be centered horizontally.
Next, let's add the starter JS code needed for a Phaser CE game.
Copy this JS, and paste it into your script.js file (replacing any other starter JS that might already be present):
This is the core JS required in all Phaser CE games. Your game code will always start with this JS (though you will need to add more code to actually complete your game).
There are comments embedded in the JS to help explain the code. Here's a more detailed explanation of what this JS does:
PHASER GAME OBJECT: Line 2 creates a Phaser.Game object (using a class defined in the phaser.min.js file) and assigns it to a global variable named game. This also sets the width and height (in pixels) for the game canvas. In this case, the game will be 800 pixels wide and 600 pixels tall. This also specifies the id name of the <div> container where the game canvas will be inserted. In this case, the id name used in your HTML is my-game. (If you were to change the width or height of your game canvas, just be sure to also adjust the size of my-game in your CSS, so they match.)
GLOBAL VARIABLES: Line 5 is an empty placeholder where you will eventually add code to declare other global variables needed for your game. For example, you might need to declare a global variable to store the player's score. You'll also need to declare global variables for images, sprites, sound effects, player input controls, etc.
PRELOAD FUNCTION: Line 8 defines a function named preload() that will run one time when the webpage first loads (or is refreshed). At the moment, there are no code statements inside the curly braces of the preload() function. However, you will eventually add Phaser code to load your game assets into memory (such as: images, sprites, sounds, etc.).
CREATE FUNCTION: Line 13 defines a function named create() that will run one time after the preload() function has finished. At the moment, there are no code statements inside the curly braces of the create() function. However, you will eventually add Phaser code to create your game world by adding images, sprites, sound effects, input controls, etc.
UPDATE FUNCTION: Line 18 defines a function named update() that will run repeatedly in a loop after the create() function has finished running. At the moment, there are no code statements inside the curly braces of the update() function. However, you will eventually add Phaser code to update your game by checking for player input, checking for collisions between sprites, etc.
CUSTOM FUNCTIONS: Line 23 is an empty placeholder where you will eventually add code to define your own custom functions needed for your game. For example, you might need to define a custom function to perform certain actions when the player's sprite collides with an enemy sprite. These custom functions will only run if and when they're specifically called within other functions (such as the update() function, etc.).
Preview the webpage in your code editor. Depending on your code editor, you might need to refresh its preview pane. If necessary, open the preview in a new tab or window to view it in fullscreen.
Your webpage should now display a solid black game canvas. If so, your next step is to start adding features to your game. If not, either the Phaser CE game framework failed to load, or you have a mistake somewhere in your code.
Next, let's add an image to the game. We'll use the Phaser logo as the image.
named phaser.png to your computer.
Next, add (or upload) the image file into the assets folder in your code editor.
In order to use this image in your game, you'll first need to declare a global variable in your JS game code to represent the image.
In a Phaser CE game, you'll typically have to declare variables for each image, sprite, sound effect, input control, etc. In addition, your game might need variables to track things like the player's score, the time remaining in the game, etc.
Copy this JS code, and paste it into your script.js file on line 5 (which should be blank):
This JS code statement declares (creates) a new global variable named logo, which will be used to represent the Phaser logo image.
When coding in JavaScript, you get to decide your own names for your variables — but here are a few rules and recommendations to follow:
RULE: Each global variable needs to have a unique name.
RULE: Variable names cannot be a .
RULE: A variable name should start with a letter and cannot contain spaces. The name can include letters, digits, underscores, and dollar signs.
RULE: Variable names are case-sensitive (e.g., logo and LOGO are different names).
RECOMMENDATION: Use camelCase for variable names, which means use all lowercase letters, and only use an uppercase letter if you to start a new word in the name (but don't include spaces between words). For example: enemyShip
RECOMMENDATION: Variable names should be clear and concise, so they'll make sense to anyone reviewing your code.
The next step is to load the image into the game's memory cache, which is required before you can display the image.
To do this, you'll start using Phaser CE code in your JS file. Remember that your HTML loaded the Phaser CE game framework (phaser.min.js), which defines classes for objects you can use in your game code. Each Phaser game object has a set of properties (variables) and methods (functions) that you can use to modify the object.
Phaser CE games use the preload() function to load all game assets (images, sprites, sound effects, etc.) into a memory cache at the start of the game. This helps prevent delays or errors during gameplay.
Copy this Phaser CE code statement, and insert it within the preload() function by pasting it on line 9 (which should be blank):
Let's explain how this Phaser code statement works:
Notice that the first part of the code statement starts with game, which is the name of the global variable representing your Phaser.Game object (i.e., your entire game).
Within your game object, there is another object called load that is used to load game assets. The load object is one of many objects within your game that were created automatically by phaser.min.js when you created your game object.
The load object has a method (i.e., function) called image() that is specifically used to load an image asset file into your game's cache memory.
Note that two parameters are listed inside the parentheses of the game.load.image() method (in this order):
Asset Key — which is a unique name that will represent the asset file, sort of like a variable name. In this case, 'phaser-logo' is the asset key. Each asset key should be a unique text string listed within quotes. You'll use this asset key to refer to this specific asset file in other Phaser code statements (e.g., when you add the image to your game).
Asset URL — which is the web address (including folder path and filename) to locate the asset file. In this case, 'assets/phaser.png' is the URL for the a specific image file stored within your assets folder. The URL should be listed within quotes.
The next step is to add the image to the game world, which will display the image on the canvas.
Phaser CE games use the create() function to create your game world by adding images, sprites, sound effects, input controls, etc.
Copy this Phaser CE code statement, and insert it within the create() function by pasting it on line 14 (which should be blank):
This code statement actually does two things:
It adds an image to the game using the asset key named 'phaser-logo'.
It assigns that image to your global variable named logo.
If necessary, you can simply add an image to your game without assigning the image to a global variable. However, you won't be able to change any of the image's properties later.
By assigning the image to a variable when the image is first added, you'll gain the ability to change the image's properties later in your game code.
Note that three parameters are listed inside the parentheses of the game.add.image() method (in this order):
X-Coordinate — which will be the horizontal position (in pixels) of the image within the game world. In this case, 400 will be the x-coordinate. This is the horizontal center of your game, since you set your canvas to 800 pixels wide on line 2 of your game code.
Y-Coordinate — which will be the vertical position (in pixels) of the image within the game world. In this case, 300 will be the y-coordinate. This is the vertical center of your game, since you set your canvas to 600 pixels tall on line 2 of your game code.
Asset Key — which represents an asset file previously loaded into the game memory. In this case, 'phaser-logo' is the asset key.
Here's an summary of the x-y coordinate system in a Phaser game:
The x-coordinate increases from left to right. By default, the left edge of your game world represents the 0 position for the x-coordinate.
The y-coordinate increases from top to bottom. By default, the top edge of your game world represents the 0 position for the y-coordinate.
GAME WORLD VS. GAME CANVAS: By default, the game world is set to the same size as the game canvas. However, you can make your game world larger than your game canvas (and make the game canvas scroll automatically as the player moves through the game world).
Preview the game in your code editor. Depending on your code editor, you might need to refresh its preview pane. If necessary, open the preview in a new tab or window to view it in fullscreen.
Your game should display the Phaser logo image on the game canvas. Even though the image was added to the center position of the game, the image will not appear to be visually centered. Instead, the image will appear in the lower-right quadrant of the game canvas. We'll fix this by adding some more Phaser code.
Next, you'll change one of the image's properties, in order to visually center the image on your game canvas.
Phaser game objects that are displayed (such as images, sprites, text, etc.) have a property called anchor, which is used as the reference point for positioning the object in the game world. By default, an object's anchor point is set to its top-left corner.
So if you look at your Phaser logo image again, you'll see that its top-left corner is actually located in the center of the game canvas. However, what we really want is to have the logo image visually centered on the canvas.
Let's change the anchor point for the Phaser logo image to its center, instead of its top-left corner. We won't change the position of the image, which will still be (400, 300). We'll simply change the anchor point used to determine how it is positioned.
Copy this Phaser CE code statement, and insert it within the create() function by pasting it on a new line immediately after line 14 (which added the image):
Let's explain how this Phaser code statement works:
Notice that the first part of the code statement starts with logo, which is the name of the global variable representing your image.
Within your image, there is a property called anchor that is used to position the image. The anchor property is one of many properties within your logo image that were created automatically by phaser.min.js when you added the image.
The anchor property can be modified using a method called setTo().
Note that two parameters are listed inside the parentheses of the logo.anchor.setTo() method (in this order):
Horizontal Anchor — which is a decimal value between 0-1, representing the horizontal anchor position (0 = left edge, 1 = right edge). In this case, 0.5 represents the image's horizontal center.
Vertical Anchor — which is a decimal value between 0-1, representing the vertical anchor position (0 = top edge, 1 = bottom edge). In this case, 0.5 represents the image's vertical center.
Again, the default anchor point used to position objects in the game world is the object's top-left corner (0,0). However, you'll find that it will make more sense to position certain objects with the object's anchor point set to the object's center (0.5, 0.5).
Preview the game in your code editor. Depending on your code editor, you might need to refresh its preview pane. If necessary, open the preview in a new tab or window to view it in fullscreen.
Your game should display the Phaser logo image visually centered on the game canvas.
HTML: If you want to learn more about HTML or need a quick reference, check out the .
CSS: If you want to learn more about CSS or need a quick reference, check out the .
PHASER CE REFERENCE: The describes all of the properties and methods for each class of Phaser game objects.
