The references in this section can help with:

• introducing you to Phaser (what is it, where to download, etc.)

• creating a Phaser game template (HTML, CSS, and JS files with starter code)

• finding and creating visual assets (animated sprites, etc.)

• finding and creating audio assets (sound effects, etc.)

• coding common game features using Phaser (adding objects, detecting collisions, etc.)

In addition, there are many other Phaser references, examples, and tutorials available online. If you're not sure where to look, try this.

This reference section will help with finding and creating visual assets to use in your Phaser games.

Visual assets might include:

• Background images

• Spritesheets for characters

• Images or spritesheets for objects and user interface elements (icons, etc.)

• Tileset (if using tilemaps to create your game levels)

What is a Spritesheet?

A spritesheet is an image typically used for characters or objects that are animated.

The spritesheet is a set of smaller images called frames that have been combined into one large image. The frames are images of the character or object in a different position (or at a different point in time).

Each frame within a particular spritesheet has the same width and same height.

An animation is represented by a specific sequence of frames within the spritesheet. A spritesheet can contain one or more animation sequences.

An animation is played by displaying its sequence of frames in rapid succession. The animation can be played just once and then stopped — or the animation can play over and over in a continuous loop.

Spritesheet images must use the PNG format. PNG allows for transparent areas within an image.

This example spritesheet contains 9 frames for an animated character.

• The first four frames show the animation sequence for running to the left (imagine these four frames playing over and over again in a loop).

• The fifth frame shows the character standing still.

• The last four frames show the the animation sequence for running to the right.

What is a Tileset?

A tileset is an image used for creating tilemaps of the level(s) in your game.

A tileset is similar to a spritesheet. The tileset is a set of smaller images called tiles that have been combined into one large image. Each tile is an image of a different object or background that can be used to create the game level. The tileset is not the actual level — instead, a tilemap represents the actual layout of the level.

Each tile within a tileset has the same width and same height. Tiles are typically square (such as 32 pixels by 32 pixels, etc.).

Tileset images should use the PNG format. PNG allows for transparent areas within an image.

This example tileset contains 264 tiles (12 rows each containing 22 tiles across). Each tile is 32 pixels by 32 pixels. Some of the tiles have transparent areas.

What is a Tilemap?

A Phaser game level can be built as a grid of different tiles. A tilemap is a data file that indicates which particular tile from the tileset should be displayed in each grid square of the game level.

The tilemap can also be used to identify certain properties of each tile. For example, the tilemap can identify which tiles the player should collide with (versus tiles that the player can walk through).

A tilemap can be created using an array, a CSV file, or a JSON file.

Tiled is a free-to-download tile map editor. You import your tileset image into the editor, create the map of your game level as a grid, and then export a JSON tilemap that can be used in your Phaser game.

• Tiled Map Editor — User Manual

Screenshot of Tiled map editor showing a game level being created using tiles (from a tileset)

Finding or Creating Images

• Piskel is a sprite editor (available as web app) that can be used to create, edit, and save your own spritesheets.

• Pixlr Editor is an image editor (available as web app or Google Drive app) that can be used to create, edit, and save images.

• Kenney is a game development studio that offers free image assets for download as PNG files. Downloaded assets will include individual images, spritesheets (for animated sprites), and tilesets (for creating tilemaps).

• Open Game Art is a website used to share, find, and download open-source game art (as well as music and sound effects).

• Other websites or apps may allow you to find, create, or edit image files.

  • Avoid using copyrighted images.

  • Be careful when downloading files from unknown (and potentially malicious) sites.

Recommendations for Image Files

• Image files will typically be JPG, GIF, or PNG format. Both GIF and PNG formats allow transparent areas in images.

• Spritesheet images must be PNG format.

• Be aware that animated GIF images will not play within a Phaser game — only the first frame of the GIF will be displayed (even if you try to use the GIF as a spritesheet and add an animation). You must use a PNG spritesheet to play animations in Phaser.

• Avoid using images with large file sizes, as it could slow down your game. Most of your image files should probably be less than 50 KB. Certain images (such as: backgrounds, tilesets, texture atlases, etc.) might be larger.

• If an image file size is large ( > 250 KB), see if the image size (width and height) is larger than what you actually need. If so, use an image editor (such as: Pixlr Editor, etc.) to resize the image down to the actual size needed, and resave the file.

• If an image does not contain any transparent areas, you may be able to reduce the file size by resaving it as a compressed JPG at a lower quality (such as: 70%).

• Be sure the image file names make it easy to identify each image. If necessary, rename the files. (Reminder: File names should not have blank spaces in them.)

• Be sure your final image files are uploaded into the assets/images subfolder of your team's game folder.

Create or Modify Animated Sprites Using Piskel

Piskel is a web app that allows you to create, preview, save, and download your own animated sprites (as spritesheets). You can also import existing images or spritesheets, and modify them.

• You will need to create a free account in order to save your sprites. The easiest way to do so is to sign in with your Google account.

• Be sure to sign in to your Piskel account before creating a sprite, so you don't lose your work.

• Be sure to periodically save your sprite as you work. (Piskel does not auto-save.)

• Be aware that it can take a fair amount of time to create or modify animation frames, since you are typically drawing or editing them manually pixel-by-pixel.

VIDEO: Piskel Quick Tutorial

Create New Spritesheet in Piskel

1. Sign in to your Piskel account (or create an account if you haven’t already done so).

2. Click Create Sprite button at top-right of screen. The sprite editor screen will appear, showing a single blank frame.

   • The default frame size for a new sprite is 32 pixels in width and 32 pixels in height (unless you've changed your default size).

3. To change the frame size, click Resize icon at right (looks like an arrow pulling a corner).

4. In "Resize" section at top, enter the desired width and height (in pixels) for your frame size. (All frames in this new sprite will use this same size.)

   • If your frame size is not supposed to be a perfect square, then be sure Maintain Aspect Ratio is unchecked. This will allow you to enter different numbers for the width and height.

5. Click Resize button to finish. Your existing blank frame will change to your new size.

To change the default size for new sprites:

• Click Resize icon.

• In "Default Size" section at bottom, enter the desired width and height (in pixels) for your default frame size. (All new sprites will use this default size.)

• Click Set Default button to save this setting. (However, it will not change the frame size of the sprite that is currently open.)

Import Existing Image or Spritesheet into Piskel

You can import an existing image or spritesheet into Piskel, and then modify it to create a revised sprite.

1. Be sure the existing image or spritesheet is saved on your computer (where you can find it).

2. Sign in to your Piskel account (or create an account if you haven’t already done so).

3. Click Create Sprite button at top-right of screen. The sprite editor screen will appear, showing a single blank frame.

4. Click Import icon at right (looks like an open file folder).

5. Click Browse Images button (under “Import From Picture”).

6. A file browser window will appear. Navigate to where the existing image or spritesheet is saved on your computer, select the file, and click Open button.

7. A new pop-up called “Import and Merge” appears.

   • It defaults to Import as Single Image. If the file is actually just one image (one frame), simply click Next button (and go to Step 8).

   • If the file is a spritesheet (with multiple frames), click the radio button for Import as Spritesheet. Next enter the width and height (in that order) for the Frame Size. (In most cases, you will leave the "Offset" as zero for both the x and y directions.) Once you enter the frame size, you will see the spritesheet get divided into frames in the image preview, which helps visually confirm you’ve entered the correct numbers. Click Next button.

8. In the next screen, click Replace button to have your existing sprite (which is just a blank frame) replaced by the imported spritesheet. Piskel will then ask you to confirm that you want to replace your existing (blank) sprite. Click OK to proceed.

   • NOTE: The other option is to Merge the imported sprite with existing frames that you've already created.

9. The imported file should now appear in the sprite editor.

   • If you imported a single image, you should see a single frame.

   • If you imported a spritesheet, you should see all its frames.

10. Now you can edit the frame(s) for the sprite. Remember to save your edits as you go because Piskel does not auto-save.

11. When you’re done making changes, you can export your revised sprite as a PNG spritesheet, and then use it in your game.

Export Spritesheet from Piskel

You can export your sprite from Piskel, and then use it in your Phaser game.

1. Click Export icon at right (looks like a picture of mountains with the Sun).

2. Select tab for PNG, and then change the Spritesheet Layout Options so the number of columns equals the number of frames in the sprite. (The number of rows will automatically become 1 when you do this correctly.)

3. Click Download button to save the PNG spritesheet file to your computer.

4. Add the downloaded spritesheet file into the assets/images subfolder of your Phaser game folder.

Recommended Process for Creating Animated Sprites

1. Sketch out each of the new or modified frames for your animation sequence(s).

   • Include enough frames so that the animation will be recognizable — but try to limit how many unique frames you need to create.

   • For example, a simple walking animation could be created using just 2 frames (though you may want more frames to make the animation smoother and more realistic).
2. Decide on the best size (width and height) to use for all the frames.

   • Use the size of other objects in the game as a guide, so your new sprite isn't too large or too small compared to these objects.

   • Make the frames large enough to fit the maximum width and maximum height needed for your animation sequence. Kind in mind that all the frames in the spritesheet will end up using this same size.

   • Try to minimize the amount of unused transparent area in your frames.

3. It may help to first draw each frame to scale using graph paper and colored pencils.

4. Create the digital frames in Piskel using your drawings as a reference.

   • Piskel has a set of basic drawing and editing tools.

   • You can start with a blank frame — or you can import an existing image or spritesheet, and then modify it.

   • Click Resize tool (at right) to change the width and height of your frames.

   • You can add, delete, duplicate, and reorder frames.

   • You can use the Duplication tool to make copies of existing frames, and you can use the Transform tool to flip frames horizontally (creating mirror images).

     • For example, if you’ve created the first frame in the “left” animation, you can duplicate this frame, and then modify the copy to create the next frame in the “left” animation.

     • For example, if you’ve created all the frames for the “left” animation, you can duplicate each of these frames, and then flip them horizontally to instantly create all the necessary frames for the “right” animation.

   • Piskel shows a preview of your animated sprite in the upper right. You can change the speed (frames per second) to see which looks the best. The preview plays all the frames (in order) — unfortunately, there isn't a way to select a subset representing a single animation sequence.

   • Remember to periodically save your sprite as you work.

   • Download your completed spritesheet by exporting it.

RECOMMENDED: After creating just one frame for a sprite, export the spritesheet, and add it to your game to double-check the frame size. Verify the sprite's size is appropriate relative to the other objects in your game. If the sprite is too small or too large, you can make adjustments in your frame size in Piskel before you create the rest of the frames. If absolutely necessary, you can use your game code to scale sprites (to make them larger or smaller), but it is better to create the sprites at the actual size you want them to be in your game (without having to scale them with Phaser).

This section provides instructions and starter code to create a Phaser game template (HTML, CSS, and JS files with starter code).

NOTE: Your Phaser game has to run on a web server, which means you need to have your HTML, CSS, and JS files hosted online. There are several options:

• use an online code editor that allows you to upload asset files (for images & sounds), such as: repl.it, etc.

• use a desktop code editor and open your HTML file in a web browser (however, some browsers prevent local JS files from loading - if so, try using Google Chrome)

• use a desktop code editor and upload your files to your own web host

• use a desktop code editor and create a local web server on your computer (MAMP, etc.)

1. Create a new folder for your game containing a new HTML file (index.html), new CSS file (style.css), and new JS file (code.js). Be sure to give your game folder a unique name.

2. Add a copy of Phaser (phaser.min.js) into your game folder. If necessary, download the latest version of Phaser CE from Phaser.io.

   • If you cannot access Phaser.io, you can download this archived version of Phaser CE (version 2.13.1 — released May 15, 2019) from Google Drive. Click the download icon to save the file to your computer (and then add a copy of the file to your game folder in your code editor).

3. Inside your game folder, create another folder called assets (for images, sounds, tilemaps, etc.).

4. RECOMMENDED: Inside the assets folder, create subfolders (with names such as images and sounds) to keep your asset files better organized.

   • EXCEPTION: For the Practice assignments (1-5, 1-6, 1-7), you do not need to create an assets folder. Instead, you will download a zip file of a provided assets folder, and place the extracted folder (which will contain image files and sound files) inside your game folder.

5. Copy-and-paste the starter code provided below into your blank HTML, CSS, and JS files. This represents the "bare bones" code needed to create a webpage with a blank Phaser game canvas.

   • If your HTML, CSS, or JS files already have code in them, delete the code, and replace it with the starter code provided below.

6. Preview your HTML file in an online web editor to verify that a blank Phaser game canvas appears (i.e., a solid black box). If so, you can start coding your game in the JS file by adding Phaser commands inside the preload(), create(), and update() functions.

   • Be sure to add your game asset files (i.e., images, sounds, etc.) into the assets folder (or the appropriate subfolder within this folder).

HTML file (index.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="my-game"></div>
    <script src="phaser.min.js"></script>
    <script src="code.js"></script>
</body>
</html>

• Phaser will insert your game into <div id="my-game></div>. You can change the id name, but be sure that your CSS and the Phaser.Game object in your JS use the same id name as your HTML.

• Be sure that the Phaser <script> tag is listed before your game code <script> tag, so they will load in that order (otherwise, your game won't work).

• If you want, you can add other content (text, images, etc.) to the webpage by inserting other HTML elements within the body before or after <div id="my-game></div>.

CSS file (style.css)

#my-game {
    /* optional */
    width: 800px;
    height: 600px;
    margin: 0 auto;
    border: 1px solid black;
}

• The CSS shown above is optional, but this styling will center the game display horizontally within the webpage and add a thin black border around it.

• If your CSS lists a width and height for your game, be sure it matches the width and height used to create the Phaser Game object in your JS.

• If you want, you can add CSS to style other elements on the webpage around the game display (e.g., set a background color for the body, etc.).

JS file (code.js)

// create Phaser.Game object named "game"
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'my-game',
    { preload: preload, create: create, update: update });

// declare global variables for game


// preload game assets - runs once at start
function preload() {

}

// create game world - runs once after "preload" finished
function create() {

}

// update gameplay - runs in continuous loop after "create" finished
function update() {

}

// add custom functions (for collisions, etc.)

• You set the width and height (in order) of the game display when you create the Phaser.Game object. In the code above, the game display will be 800 pixels in width by 600 pixels in height. You can change these numbers for your game.

• The size of the game world (which can extend beyond the game display) can be set using a separate command (not shown above).

• You will need to declare global variables for certain game objects (e.g., the player, a group of enemies, the score, etc.). These global variables are traditionally listed at or near the top of your JS code before the preload() function.

  • If desired, you can avoid global variables by creating variables inside the game object functions using the this keyword. (However, if you are a beginning programmer, it will be simpler to just use global variables.)

• A basic Phaser game has 3 core functions: preload(), create(), and update(). You will add your own Phaser code inside these functions:

  • PRELOAD: The preload() function is used to load game assets (such as images, sounds, etc.) into the game's memory, so they are all ready at the same time to be used. The preload() function runs one time at the start of the game (i.e., when the webpage is loaded or refreshed).

  • CREATE: The create() function is used to create your game world and its user interface by adding images and sounds into the game, adding player input controls, adding text, etc. The create() function runs one time after the preload() function is finished.

  • UPDATE: The update() function is used to update the gameplay by checking for player input, checking for conditions or events, updating objects in the game, etc. The update() function runs in a continuous loop after the create() function is finished. The update() function loops many times per second, allowing for smooth animations and responsive interactions.

• Most Phaser games will also have custom functions that you create to do certain things based on conditions or events that occur in the game (such as the player colliding with an enemy, etc.). These custom functions are traditionally listed at the bottom of your JS code after the update() function.

GAME STATES: Phaser allows you to break up your game into different states. For example, you could have separate game states for: loading, menu, level 1, level 2, level 3, game over, etc. This template is for a single-state game, which is simpler to code if you are new to creating games.

Troubleshooting

After preparing your Phaser game template, you should see a solid black game canvas when you preview your webpage in an online web editor.

PHASER NOT LOADING? If you only see a black outline (or see nothing at all), then Phaser isn't loading correctly. Try these troubleshooting tips:

• Be sure you downloaded the correct Phaser JS file: phaser.min.js

• Be sure you placed phaser.min.js into the same folder that has your HTML, CSS, and JS files. If Phaser is in a different folder (or inside a subfolder), it will not load (unless you modify the <script> tag in your HTML file to load Phaser from its correct location).

• Be sure your index.html file includes <script> tags to load phaser.min.js and code.js (in that order) from your game folder. Also be sure the filename listed in the second HTML <script> tag matches the actual name of the JS file containing your game code. For example, instead of code.js, you could use a different name for your JS file, such as: script.js or game.js (etc.)

• Be sure your code.js file lists the command to create a Phaser.Game object and includes the preload(), create(), and update() functions (must be present even if empty at first)

• Be sure your HTML, CSS, and JS files are running on a web server (such as: Editey web editor in Google Drive, CodePen, Codeanywhere, repl.it, etc.).

• Check your browser's JavaScript console to see if there are errors listed.

The following Phaser coding references are provided in this GitBook:

• Game Display

• Game World

• Game Camera

• Text

• Images

• Sprites, Animations, and Health

• Group of Sprites

• Tilesprite Scrolling

• Audio

• Input

• Physics and Collisions

• Weapon

• Particles

• Tweens

• Timers

• Random Numbers

• Enemy Behavior

• Miscellaneous Game Features

External Resources

There are many other Phaser references, examples, and tutorials available online. Here's some you may find particularly useful:

• Phaser CE API documentation (provides details for every Phaser CE command)

• Phaser CE code examples on Phaser.io (Phaser 2 = Phaser CE)

• Phaser CE code examples on CodePen

• Phaser community tutorials on Phaser.io (older examples prior to 2018 use Phaser 2, but newer examples use Phaser 3)

• Phaser game examples by Emanuele Feronato (her older examples prior to 2018 use Phaser 2, but newer examples use Phaser 3)

The game world contains all of your game objects. Your game world can extend beyond the game display, and the game camera can follow the player's sprite as it moves through your game world.

Phaser coding references in this section:

• Set Size of Game World

• Positions of Objects in Game World

• Change Anchor for Object's Position

• Get Current Position of Object

• Change Position of Object

• Layering of Objects in Game World

• Change Order of Object's Layer

• Get Center Position of Game World

• Get Random Position in Game World

• Get Boundaries of Game World

• Make Sprite Wrap Around World

Phaser API Documentation:

Properties and Methods for Game World

Set Size of Game World

By default, Phaser will set your game world to be the same size as your game display. However, you can set the boundaries of your game world to be larger than your game display.

game.world.setBounds(0, 0, 3000, 600);

This Phaser command should be placed near the beginning of your create() function.

• The first two numbers 0, 0 represent (in order) the x and y coordinates of the top-left corner of your game world. Typically, you'll use 0, 0 for your top-left corner.

• The next two numbers 3000, 600 represent (in order) the width and height (in pixels) of your game world. Change these to any values that you want (as long as they are equal to or greater than the size of your game display).

Side-Scrolling Game: Make the width of the game world larger than the width of the game display. Keep the height of the game world the same as the height of the game display.

Vertically-Scrolling Game: Keep the width of the game world the same as the width of the game display. Make the height of the game world larger than the height of the game display.

Top-Down Scrolling Game: Make both the width and height of the game world larger than the width and height of the game display.

Positions of Objects in Game World

Every display object (images, sprites, text, etc.) in the game world has a position defined by its x and y coordinates: x, y

The x and y coordinates represent pixel positions, relative to the top-left corner of the game world (which is 0, 0).

• The x coordinates start at 0 (left boundary) and increase as you move from left to right.

• The y coordinates start at 0 (top boundary) and increase as you move from top to bottom.

For example, an object placed at coordinates 250, 100 will be positioned 250 pixels to the right and 100 pixels down, relative to the top-left corner.

Change Anchor for Object's Position

The x and y coordinates of a display object (image, sprite, text, etc.) represent the position of the object's anchor.

By default, an object's anchor is its top-left corner. However, you can change the anchor for an object (e.g., to make the object's center become its anchor for positioning).

For example, to change the anchor of a sprite named player:

player.anchor.set(0.5, 0.5);

• The first number represents the horizontal position of the anchor, as a number between 0-1 (0 = left edge, 0.5 = horizontal center, 1 = right edge).

• The second number represents the vertical position of the anchor, as a number between 0-1 (0 = top edge, 0.5 = vertical center, 1 = bottom edge).

For some objects, it will make sense to leave the anchor as the object's top-left corner (the default).

For other objects (especially sprites), it will make more sense to set an object's anchor to its center (0.5, 0.5).

For certain objects, it might even make sense to set the object's anchor to its top-middle (0.5, 0) or its bottom-middle (0.5, 1).

Get Current Position of Object

The current x and y coordinates of an object's position (based on its anchor) are stored as properties of the object.

For example, to get the current position of a sprite named player:

• player.x represents its current x coordinate

• player.y represents its current y coordinate

Change Position of Object

You can also set or modify the x and/or y coordinates of an object to change its position in the game world.

For example, you could change the position of a sprite named enemy by assigning it specific x and y coordinates:

enemy.x = 300;
enemy.y = 500;

As another example, you could move a sprite named player relative to its current position:

player.x = player.x + 5;
player.y = player.y - 5;

In the example above, the player sprite would be moved 5 pixels to the right and 5 pixels up from its current position.

• Increasing the x coordinate moves an object to the right, while decreasing x moves the object to the left.

• Increasing the y coordinate moves an object down, while decreasing y moves the object up.

Layering of Objects in Game World

Every display object (images, sprites, text, etc.) is added to the game world as a layer (using the CSS z-index property). These object layers are stacked on top of each other, meaning they can overlap (and hide) other objects behind them.

IMPORTANT: The order in which game objects are added in the create() function determines the stacking of these layers in the game world.

So if you have an image that is supposed to be a background for your game, that image should be added first in the create() function, so it will be the farthest back layer. Each new display object (image, sprite, text, etc.) that is added in the code will appear in front of the previous layers.

For example, if you added the player's sprite first and then added the background image, the player's sprite would be hidden behind the background. To fix this, change the order of the code, so the background image is added first and then the player's sprite is added.

TIP: You can use the layering of the game objects to help create a sense of depth within your otherwise flat 2D game world. For example, if your game takes place in a forest, you could add images of trees in the background, then add the player's sprite, and then add more trees in the foreground. As the player's sprite moves through the game world, it will pass in front of the background trees but behind the foreground trees — giving the illusion of depth within your virtual forest.

Change Order of Object's Layer

Your Phaser game maintains a display list of the stacking order of every object in your game world. If necessary, you can modify the relative order of an object's layer within this list.

For example, the following could be used to modify the stacking order of a sprite named enemy:

• enemy.moveDown(); would move this sprite farther back by one layer

• enemy.moveUp(); would move this sprite closer to the front by one layer

• enemy.sendToBack(); would make this sprite the farthest back layer

• enemy.bringToTop(); would make this sprite the closest layer

Get Center Position of Game World

• game.world.centerX is the center x coordinate

• game.world.centerY is the center y coordinate

Get Random Position in Game World

• game.world.randomX is a random x coordinate (will be different every time you use it)

• game.world.randomY is a random y coordinate (will be different every time you use it)

Get Boundaries of Game World

• game.world.left is the left x boundary (typically equals 0)

• game.world.right is the right x boundary (typically equals width of game world)

• game.world.top is the top y boundary (typically equals 0)

• game.world.bottom is the bottom y boundary (typically equals height of game world)

Make Sprite Wrap Around World

You can make a sprite (or a member of a sprite group) wrap around to the opposite side of world if it moves outside of the game world boundaries.

For example, if the sprite moves out of the world across the right boundary, the sprite will reappear at the left boundary of the world (and vice versa). The same is true for the top and bottom boundaries.

This feature is typically used for single-screen games. For example, in Asteroids, the asteroids and the player's ship wrap around the world. However, this feature can be used for any size of game world.

To make an individual sprite wrap around the world:

game.world.wrap(player, 32);

The code example above must be placed in the update() function (otherwise, it will not work).

• player represents the sprite's variable name. Change this to the name of your sprite.

• 32 represents the amount of padding (in pixels) to allow before wrapping the sprite. In this case, the sprite can move 32 pixels outside of the world before the sprite will be wrapped around to the other side. Change this to any value you want (including 0 for no padding).

Use Padding to Prevent Visual Splitting of Sprite

The advantage of using padding is that it can prevent the sprite from appearing to be visually split — i.e., part of the sprite shown on one side of the world and the rest of the sprite shown on the opposite side of the world.

To prevent this visual split, use a padding value that is at least half the width or height of the sprite (whichever is greater).

Make Each Member of Group Wrap Around World

To make each member of a sprite group wrap around the world:

asteroidGroup.forEach(function (asteroid) {
    game.world.wrap(asteroid, 20);
});

Again, the code example above must be placed in the update() function (otherwise, it will not work).

• asteroidGroup represents the group's variable name. Change this to the name of your sprite group.

• asteroid is a local variable used in the function to represent an individual member of the group. Change this to any local variable name that makes sense.

• 20 represents the amount of padding to allow before wrapping the sprite. Change this to any value you need.

Make Sprite Only Wrap Horizontally

If you only want the sprite to wrap around the world horizontally between left and right (but not between top and bottom):

game.world.wrap(player, 32, true, false);

Make Sprite Only Wrap Vertically

If you only want the sprite to wrap around the world vertically between top and bottom (but not between left and right):

game.world.wrap(player, 32, false, true);

This reference section will help with finding and creating audio assets to use in your Phaser games.

Audio assets might include:

• Sound effects

• Background music

• Voice-over tracks

Finding or Creating Audio Files

• ChipTone can be used to create and save your own sound effects as WAV files.

• Kenney is a game development studio that offers free audio assets for download. Downloaded assets will be WAV, MP3, or OGG format.

• Freesound can be used to search, preview, and download open-source audio files.

  • You will need to create a free account in order to download files.

  • Files will vary in length, format, and size — so check before downloading.

• Other websites or apps may allow you to find, create, or edit audio files.

  • Avoid using copyrighted audio.

  • Be careful when downloading files from unknown (and potentially malicious) sites.

Recommendations for Audio Files

• Audio files can be WAV, OGG, or MP3 format.

• Avoid using audio with large file sizes, as it will slow down your game. Most of your audio files should probably be less than 100 KB. Music files will typically be much larger (several MB).

• If necessary, you can convert an audio file from an unsupported format (AAC, AIFF, etc.) into WAV or MP3 format using Zamzar (file conversion web app).

• Be sure the audio file names make it easy to identify each sound. If necessary, rename the files. (Reminder: File names should not have blank spaces in them.)

• Be sure your final audio files are uploaded into the assets/sounds subfolder of your team's game folder.

Create Your Own Sound Effects Using ChipTone

ChipTone is a web app that allows you to create and download your own sound effects as WAV files.

ChipTone has lots of features, but the best way to learn how to use it is to simply play around with different settings:

• You can change the sound type (such as: coin, zap, boom, etc.).

• You can change the wave form. Clicking a second time on the same wave form will reverse its shape.

• You can select a different note (tone) on the keyboard.

• You can turn various effects (vibrato, harmony, etc.) on or off. Each effect has its own settings that can be adjusted. You can combine effects.

Once you have a sound that you want to use, click the "Save .WAV" button in the lower-right to download the sound file.

NOTE: The ChipTone website requires the Adobe Flash plug-in. Google Chrome has Flash built-in, but you might need to grant access for ChipTone to use Flash. If ChipTone doesn't load:

• Open the Settings for Chrome (click 3-dot icon at upper-right, and select Settings).

• At the bottom of the Settings, click Advanced.

• In the Privacy and Security section, click Content Settings. Then click Flash.

• Be sure "Allow sites to run Flash" is toggled on (to the right).

• Add sfbgames.com to your list of allowed websites for Flash.

You can create a group of sprites. You can have different groups for different types of sprites. The members of a particular group should be related in some way, such as a group containing enemies, a group containing platforms, etc. The members of a group typically have many similarities — but they can also have differences.

The main advantage of using a group is that is makes it easier to perform checks or actions on each member of the group.

Another advantage is that your code can recycle "dead" members of a group (which helps save memory and make your game run faster).

Phaser coding references in this section:

• Add New Group

• Create New Member in Group

• Set Property for Specific Member of Group

• Set Property for All Members of Group

• Create Multiple Members Using For Loop

  • Position Members at Regular Intervals

  • Position Members at Random Locations

  • Position Members at Specific Locations

• Call Function for Each Member of Group

• Call Function for Each Alive (or Dead) Member of Group

• Count Members of Group

• Get Specific Member of Group

• Recycle Dead Members of Group

• Freeze or Hide Group (and Undo)

• Kill All Members of Group

• Created Nested Group Containing Other Groups

• Sort Members of Group for Pseudo Depth Effect

Phaser API Documentation:

Add New Group

You can add a new group to your game by assigning it to a variable. Use a global variable if you will need to refer to the group or its members in your update() function or in a custom function.

For example, to add a group to a global variable named platformGroup:

This command would be placed in your create() function.

Create New Member in Group

Once a group has been added, you can then create a new member in the group, and add the member to the game world at a specific position.

Adding new members to a group is typically done in the game's create() function. However, it can also be done in the update() function if you need to add new members as the game proceeds.

For example, to create a new member in a group named platformGroup:

• 200, 500 represent the x and y coordinates where the member will be positioned in the game world (based on the member's anchor, which is its top-left corner by default). Change these values to the position you need.

• 'platform-100' is the asset key of the image or spritesheet to use for this member. Change this to the asset you want to use.

If you need to create more members in the group, just repeat the command, and change the x, y position and/or asset key for each new member:

Set Property for Specific Member of Group

The members of a group are sprites, so each member of a group can have its sprite properties set, can have physics properties enabled and set, and can have animations added.

If you need to change the value of a property for a specific member of the group (but not the other members), first create the new member by assigning it to a local variable. Then change the property for that specific member by referring to its variable name.

• bottomPlatform represents a local variable name for the new member. Change this to a variable name that makes sense to you.

The second line of code in the example changes a property (the scale property) only for this specific member of the group. Change this to list the property and value that you want to set. If necessary, you can modify multiple properties for this specific member of the group.

Set Property for All Members of Group

You can use the setAll() method to change the value of a property for all members of a group. Inside the parentheses, you first list the name of the property (in quotes) and then list the value that you want to set for the property.

For example, this command will set a property for all members of a group named platformGroup:

• true represents the value for the property. Some properties use true or false for their value. Some properties use a number for their value. Some properties use a string (text) for their value (if so, list the string within quotes). List the value you want to use for your property.

Create Multiple Members using For Loop

You can use a for loop to create multiple new members in a group. If you do this, you have several options for positioning the new members:

• position the members at regular intervals (such as: every 200 pixels, etc.)

• position the members at random locations

• position the members at specific locations using JSON data array

Position Members at Regular Intervals

In order to position the new members at regular intervals in the game world, you need to create a calculation that will space the members horizontally (in the x direction) and/or vertically (in the y direction). Typically, these calculations use the i variable that the for loop uses to count iterations.

For example, this code would create 10 new members in the coinGroup located at regular intervals in the game world:

The for loop shown above will create 10 new members in the group.

• var i = 0 creates a local variable named i that starts at zero and will be used as the "counter" for the number of times to iterate (repeat) the loop.

• i < 10 sets a condition to decide when the loop should stop iterating (repeating). In this case, the number 10 controls the number of members that will be created. Change this to the number that you need to create.

• i++ changes the local variable at the end of each iteration by increasing its value by one (i++ is shorthand for i = i + 1).

The x position of each new member will be calculated using i * 200 + 100.

• 200 represents how far apart (in pixels) the members will be positioned.

• 100 represents the position of the first member.

• As the value of

  The first new member (when i = 0) will have an x position of 100 (0 200 + 100 = 100). The next member (when i = 1) will have an x position of 300 (1 200 + 100 = 300). The next member (when i = 2) will have an x position of 500 (2 * 200 + 100 = 500) - and so on.

The y position of each new member will simply be set as 0 (top of game world). Presumably, each coin will have a gravity value set that will make it fall down.

Modify the code to use your own calculations (and/or numbers) for the x and y positions.

Position Members at Random Locations

You can also just position each new member at a random location.

For example, this code would create 10 new members in the coinGroup at random locations in the game world:

Position Members at Specific Locations (JSON Data)

You can also create a JSON data array that contains specific x and y positions for the new members to be created. Then you would use a for loop to iterate through the JSON data array to create the new members, and add them into the game world at their specific positions.

For example, here is a JSON data array that list positions that will be used to create new members in a group:

Square brackets [ ] are used to contain the items in an array. Within the array, the JSON data for each item is listed inside curly braces { } using name-value pairs: the name of a variable followed by its value. A colon is used to separate the variable name and its value. If you were using variables that have strings (text) for their values, then list the values within quotes.

Within the JSON data for an item, a comma is used to separate different name-value pairs (so you can list multiple variables for each item). As you can see, the JSON data list an x and y variable for each coin.

Commas are also used to separate the different items within the array (i.e., the comma that appears after the right-hand curly brace). Notice that you don't include a comma after the last item in the array.

Each item in an array is identified using an index number, which is based on the order in which the items are listed. The first item in an array is always numbered as index 0. Since there are 10 items listed in the coinData array, they are numbered in order as 0-9. For example, coinData[1] actually refers to the 2nd item in the array, which is the data: { x:150, y:0 }

The variable values for an item in an array can be referenced by using the item's array index number followed by a period and then the variable name. For example, coinData[1].x is 150 and coinData[1].y is 0.

Now you're going to loop through this array to use the JSON data to create the new members in coinGroup.

This for loop will iterate through the entire coinData array, using i to represent the index number of the current item: i will start at 0 and increase by one after each loop (i++) until it reaches the end of the array (which is represented by coinData.length).

Inside the for loop a local variable named coin is created as a new member in the coinGroup using the x and y values stored in coinData[i]. You can add optional code to set other properties for each member (e.g., set its anchor, add animations, etc.).

Call Function for Each Member of Group

You can use the forEach() method to call a function for each member of a group. Inside the function, you can list whatever commands you need to perform for each member. The forEach() method will iterate through each member of the group, performing the commands you listed.

For example, this would call an inline function for each member of a group named enemyGroup:

• enemy represents a local variable name that will be used within the function to refer to a member of the group. Change this to a variable name that makes sense for the group.

• Within the curly braces { }, list one or more commands to be performed for the member. In this example, the code sets the anchor for the member, adds an animation to the member, and starts playing the member's animation. Change these to whatever commands you need.

The forEach() method can be used in your create() method to set properties of each member before the game starts.

You can also use the forEach() method in your update() function (or in a custom function) to perform commands on each member during gameplay.

Call Function For Each Alive (or Dead) Member of Group

You can use the forEachAlive() or forEachDead() methods to call a function only for the "alive" (or "dead") members of the group. Inside the function, you can list whatever commands you need to perform for each alive (or dead) member.

For example, this would call an inline function only for each "alive" member of a group named enemyGroup:

For example, this would call an inline function only for each "dead" member of a group named enemyGroup:

These methods would typically be used during gameplay in your update() function (or in a custom function).

Count Members of Group

If your game needs to know how many members are in a specific group, there are several options available to get a count.

For example, if the name of your group were enemyGroup:

• enemyGroup.total would be the total number of members in the group, including both "alive" and "dead" members

• enemyGroup.countLiving() will return the number of "alive" members in the group

• enemyGroup.countDead() will return the number of "dead" members in the group

Get Specific Member of Group

If your game needs to get a specific member of a group (in order to do something with that member), there are several methods available to select a member.

For example, if the name of your group were enemyGroup:

• enemyGroup.getFirstAlive() will return the first "alive" member of the group that it finds.

• enemyGroup.getFirstDead() will return the first "dead" member of the group that it finds.

• enemyGroup.getRandomExists() will return a random existing member of the group.

• enemyGroup.getClosestTo(player) will return the member of the group that is closest in distance to the player sprite. Change player to whichever sprite or display object that you want.

• enemyGroup.getFurthestFrom(player) return the member of the group that is farthest in distance from the player sprite. Change player to whichever sprite or display object that you want.

In order to use of the methods above, you will want to create a local variable to store the result (the member) returned by the function. Then you will be able to add commands to do something with that specific member.

For example, the following code will get a random member of the enemyGroup, assign the member to a local variable named enemy, and the make that enemy move towards the player:

Recycle Dead Members of Group

You can recycle "dead" members of a group by adding them back to the game (making them "alive" again). By recycling dead members (instead of constantly creating new members), your game will use less memory and run faster.

For example, your game might be designed to add back members of an enemy group that have been removed using the kill() method. Since the members are sprites, you can add a "dead" member back into the game using the revive() or reset() method.

To do this, you would need to find the first dead member of the group, and assign this member to a local variable. Then you can revive or reset the member and change any of its properties (position, velocity, etc.).

For example, add this code to your update() function to immediately recycle a dead member of a group named enemyGroup:

This code tries to find the first dead member of the group, and assigns this member to a local variable called enemy (change to a name that makes sense for your group).

• If a dead member was found, then it will run the code inside the if statement — this is where you would either revive or reset the member to make it alive again. You can add other code to change the member's properties or perform other actions.

• If there weren't any dead members (i.e., every member of the group is already alive), then the local variable will be assigned a value of null and the code inside the if statement will not be performed.

Check for Dead Member at Random Interval

If you want to add a brief random interval before recycling a dead member of the group, use this slightly modified code:

This modified code will only check for a dead member to recycle if it generates a random number below a certain value (0.01 in this case). Increasing this value will make it more likely that recycling will occur during any specific game loop — the intervals between recycling will still be random, but recycling will occur more frequently on average. (Decreasing the value has the opposite effect.)

Check for Dead Member at Timed Interval

Freeze or Hide Group (and Undo)

If you game needs to freeze or hide all members of a group at once, you can use change the exists property or the visible property.

NOTE: The way that the exists property affects a group is different from how it works for an individual sprite.

Freeze Group Using Exists Property

You can change a group's exists property prevent its member sprites from being affected by any physics interactions. However, the member sprites will still be visible in the game. Basically, it will cause the member sprites to become "frozen" at their current position and become non-interactive.

For example, to "freeze" a group named enemyGroup:

To unfreeze the group (and make it interactive again):

Hide Group using Visible Property

You can change a group's visible property to make all of its member sprites invisible. However, the member sprites will still be involved in certain physics interactions (moving, falling, colliding, etc.) because the sprites still exist (they're just invisible).

For certain games, invisible sprites could be interesting (e.g., creating invisible enemies that the player must avoid, etc.).

For example, to make a group named enemyGroup invisible:

To show the group again:

Freeze and Hide Group at Same Time

You can also change both properties at the same time.

For example, to freeze and hide a group named enemyGroup:

To unfreeze and show the group again:

Kill All Members of Group

If your game needs to kill all members of a group at once, there is a method specifically to do this:

Create Nested Group Containing Other Groups

If necessary, you can create a group that contains other groups (as well as individual sprites) nested within it. There may be certain situations where using a nested group is helpful.

You can simply use the add() method to add another group (or a sprite) into a group.

For example:

Sort Members of Group for Pseudo Depth Effect

Some 2D games attempt to create a "pseudo-3D" visual effect by using side-view sprites combined with top-down movement (meaning sprites can move up, down, left, and right — and have no gravity applied) plus depth sorting (based on y position).

Sprites that are towards the top of the game display (lower y values) are supposed to be farther back while sprites that are towards the bottom (higher y values) are supposed to be closer. The game sorts the visual layering of the sprites based on their y positions to make "closer" sprites appear in front of "farther" sprites.

To be clear, using this "depth" effect will not make your game look like a true 3D game. However, the sprites will have a psuedo-depth effect relative to each other, which can add a slight bit of a "third dimension" to your game.

Sort Individual Group by Depth

For example, to do a depth sort for the members of a group named 'treeGroup`:

If the members of the group do not move, then you could just perform the sort one time by placing it in the create() function.

However, if you the members of the group are moving and changing their y positions, then you would want to perform the sort every game loop by placing it at the end of your update() function. For example, you might need to do this for a group of enemies.

Sort Multiple Sprites and Groups by Depth

If you want apply a depth sort to the player's sprite plus other sprites and groups, then you should create a nested group that contains all the sprites and groups that should be sorted by depth.

For example, add a new group named depthGroup in your create() function, and then add the other sprites and groups into the depthGroup:

Then at the end of your update() function (after any sprites or group members may have changed position during a game loop), do a depth sort on the depthGroup:

What is Phaser?

is a JavaScript library that makes it easier to code a game — similar to how is a JavaScript library that makes it easier to modify HTML and CSS on a webpage.

Phaser makes it easy to add your game's graphics to build a game world, add animations, add player inputs, add physics to your game world (velocity, gravity, friction, etc.), detect collisions between game objects, add particle explosions, play sounds, and so much more.

Phaser creates 2D games. However, if you're new to creating games, it's better to start with 2D.

How does Phaser work?

All you need to do is load the Phaser JS file into your webpage using a <script> tag, and then start using Phaser commands in your game code JS file.

The Phaser JS file contains code defining different types of JavaScript objects. An object is a special type of variable that can contain a set of properties (variables) and methods (functions).

In fact, a property (a variable) within an object can be another object — in other words, an object can contain other objects inside it.

Phaser objects have been specifically designed to have properties and methods that are useful for coding video games.

Every Phaser command is a reference to a Phaser object property or a Phaser object method. If the command has parentheses, then it is a reference to a method. Otherwise, it is a reference to a property.

Phaser creates your game by inserting an HTML <canvas> element into your webpage. The <canvas> element is a container that allows you to add graphics and text inside it using JavaScript. Things added inside the <canvas> element can be animated and interactive, which makes it perfect to use for a video game.

Where can I download Phaser?

You will need a copy of Phaser CE (phaser.min.js) inside your game folder, which will also contain your HTML, CSS, and JS files.

Where can I learn how to use Phaser?

Besides the Phaser coding references available in this GitBook, here are additional online resources for learning more about using Phaser CE:

Why use Phaser instead of another game engine?

Some advantages of using Phaser:

• It has lots of features for developing full-fledged games

• It uses JavaScript (many cross-platform game engines use C++)

• It's free and open-source

• It's updated frequently to fix bugs and add new features

• Its capabilities can be extended with plugins and integrations with other software

• It has a large community of users (thus lots of online help available)

• It's easy enough for beginners but powerful enough for seasoned developers

• It's perfect for learning how to prototype and develop games — and can serve as a springboard for those who are more serious about game design and game development

Some limitations of using Phaser:

Overall, Phaser offers many advantages for learners new to creating video games, which is why it is utilized in this project.

However, this project could be modified to use other available game engines. The game design process will be similar, regardless of the specific game engine used for development.

The game display is the HTML <canvas> element that Phaser adds to the webpage to display your game. Phaser also refers to this as the Stage.

The game display shows the player's view into your . The game world can be the same size as the game display (e.g., a single-screen game like Space Invaders) — or the game world can extend beyond the game display (e.g., a scrolling game like Crossy Road). For extended game worlds, the position of the determines what is shown in the game display.

Phaser coding references in this section:

• Set Size of Game Display

• Change Background Color of Game Display

• Change Background to Random Color

Phaser API Documentation:

Set Size of Game Display

You set the width and height of your game display when you first create your Phaser.Game object, which is typically done at the beginning of your JavaScript game code — before the preload() function.

In the code above, the game display will be 800 pixels in width by 600 pixels in height. You can change these numbers for your game. However, you'll want the game display to fit within the available width and height of the player's browser window. For beginning game developers, just choose a width and height that fits your own screen.

REMINDER: Remember that 'my-game' represents the id name of your game container <div> in your HTML. If your CSS sets a width or height for #my-game, then be sure to update those values to match the size of the game display in your JavaScript.

Change Background Color of Game Display

By default, Phaser uses black as the background color for your game display. However, you can change this to any color using a CSS hex string.

In most cases, you would add this command in your create() function (probably towards the beginning — just to make it easy to find it). For example, if you only need to change the background color once, then do this in the create() function.

However, you can also use this command in your update() function or in a custom function. For example, you might do this if you wanted to change the background color based on certain conditions or events in the gameplay.

Change Background to Random Color

You can also let Phaser choose a random color for the game display background:

The game camera controls the player's view into the . By default, the game camera is set to the same size as your .

You can change the camera's position within the game world, or you can set the camera to automatically follow a specific sprite (such as the player's character). You can also set certain objects (images, text, etc.) to stay "fixed" within the camera view, as part of the game's user interface.

Phaser coding references in this section:

• Make Camera Follow Specific Sprite

• Focus Camera on Specific Object or Location

• Make Object Stay Fixed to Camera View

• Make Camera Shake

• Make Camera Flash

• Make Camera Fade

Phaser API Documentation:

Make Camera Follow Specific Sprite

If your game world is larger than your game display, you can set the game camera to automatically follow a specific sprite (typically the player's character) as it moves through the game world.

In the code above, player represents the name of the sprite to follow. If necessary, change this to match the variable name of your sprite.

You would typically add this command in your create() function after adding the sprite to the game.

Follow Style

You also have the option of selecting a follow style with a specific type of "deadzone" — an invisible rectangular area in the middle of the game display where the camera won't move (until and unless the sprite moves outside the rectangle).

• Phaser.Camera.FOLLOW_LOCKON is the default style used if you don't select a style. It has no deadzone and will closely track the movement of the sprite.

• Phaser.Camera.FOLLOW_PLATFORMER is a style that has a tall, narrow deadzone.

• Phaser.Camera.FOLLOW_TOPDOWN is a style that has a square deadzone.

• Phaser.Camera.FOLLOW_TOPDOWN_TIGHT is a style that has a small square deadzone.

To use a different style, modify the command so it lists the follow style after the sprite's name:

Unfollow Sprite

You can turn off the following of a sprite using this command:

This would be helpful if you want the camera to follow a different sprite or to focus on a specific object or location.

Focus Camera on Specific Object or Location

You can make the camera move to focus on a specific display object (image, sprite, etc.) or location in the game world. This is a one-time camera movement (not a continuous following behavior). This might be helpful as visual feedback to draw the player's attention to an object or event, etc.

To focus the camera on the current location of a specific display object, use this command:

In the code above, explosion represents the name of the display object (sprite, etc.) to focus on. Change this to match the variable name of your object.

To focus the camera on a specific location using x and y coordinates, use this command:

In the code above, 600 is the x coordinate, and 300 is the y coordinate. Changes these to match your desired coordinates.

Make Object Stay Fixed to Camera View

You can make specific objects (images, text, etc.) stay fixed within the camera view, so the objects won't move when the game world scrolls. For example, a game's user interface elements (score, health bar, etc.) typically stay "fixed" to the camera view.

Phaser display objects (such as images, text, sprites, etc.) have a property called fixedToCamera. By default, this property is set to false — changing this value to true will make the object stay fixed within the camera view.

In order to change this property, the display object needs to be assigned to a variable name. For example, if the player's score were displayed using a text object named scoreText, you would use this command:

Change scoreText to the variable name of your display object. Add the command in your create() function after adding the display object. (The x, y position where the object is added will be the position where it will stay fixed, relative to the top-left corner of the game camera.)

Make Camera Shake

As a visual effect, you can make the game camera shake back and forth briefly (and then return to normal). This can be helpful as visual feedback for a collision, explosion, etc.

• 0.02 represents the intensity of the shaking (as a percentage of the camera size). Change this value as needed, but you'll probably want to use a low number (less than 0.1).

• 250 represents the duration of the shaking in milliseconds (1000 ms = 1 second). Change this value to whatever duration you need.

Shake Direction

You also have the option of selecting which direction the camera should shake:

• Phaser.Camera.SHAKE_BOTH is the default direction used if you don't select a direction. It will shake the camera both horizontally and vertically.

• Phaser.Camera.SHAKE_HORIZONTAL will only shake the camera from left to right.

• Phaser.Camera.SHAKE_VERTICAL will only shake the camera up and down.

To use a specific direction, modify the command so it also lists true plus the shake direction:

Make Camera Flash

As a visual effect, you can make the game camera briefly flash a specific color (and then fade back to normal). This can be helpful as visual feedback for a reward, punishment, etc.

• 500 represents the duration of the flash in milliseconds (1000 ms = 1 second). Change this value to whatever duration you need.

Make Camera Fade

As a visual effect, you can make the game camera fade to a specific color (black, red, white, etc.). It is basically the opposite of a camera flash (except the game camera will remain that color until you reset it). This can be helpful as visual feedback to indicate a character dying, reaching the end of a level, etc.

• 500 represents the duration of the fade in milliseconds (1000 ms = 1 second). Change this value to whatever duration you need.

Reset Camera to Normal

At the end of the camera fade, the game display will remain that color (black, red, white, etc.) until you reset it back to normal using this command:

You can add text to your game to display feedback or information as part of your game's user interface. Phaser handles text as a display object with properties and methods that allow you to modify the text in various ways.

Phaser coding references in this section:

• Add Text (and Set Style)

• Add Text Shadow

• Change Anchor for Text Position

• Change Text Position

• Rotate Text to Angle

• Make Text Stay Fixed to Camera View

• Hide Text (and Unhide)

• Change Text Content

• Clear Out Text Content

• Add Line Breaks in Text Content

• Change Text Style

Phaser API Documentation:

Add Text (and Set Style)

If you have static text (i.e., won't change during game) that just needs to be positioned and have basic style properties set, you can add the text object directly (without assigning it to a variable):

The command to add text would be placed in your create() function (probably towards the end, so that it will be displayed in front of other objects).

• 350, 20 represent the x and y coordinates where the text will be positioned (based on the text's anchor, which is its top-left corner by default). Change these values to the position you need.

• 'Health' represents the text string to display as the text. Replace this with your text.

• OPTIONAL: You can style the text by providing a comma-separated list of style properties and values inside curly braces { } (i.e., a JSON object).

However, if the text will be dynamic (i.e., will change during the game) or needs to be modified beyond basic style properties (such as adding a text shadow, hiding the text, etc.), then you need to declare a variable and assign the text object to the variable:

• scoreText represents a variable name. Change this to the name of your variable.

If you only need to change the text properties within the create() function, you can assign the text object to a local variable.

Otherwise, if you need to change the text in the update() function or a custom function, then assign the text object to a global variable.

Style Properties for Text

The default style for text will be Arial 20pt bold in black — but you can modify any of these default properties.

• fontSize sets the size of the font. By default, it will use '20pt' (20pt is approximately 27px). For more accurate layout, you may want to use px (pixels) to set the size, such as: '30px'

• fontWeight sets the weight of the font, such as 'normal' or 'bold'. By default, it will use 'bold'.

Add Text Shadow

If you've assigned the text object to a variable, you can add a shadow behind the text:

• The first value is the horizontal offset (in pixels) of the shadow. Positive values shift the shadow to the right, while negative values shift it to the left. Use a value of 0 for no horizontal offset. (A small value between 0-5 usually works well for offset.)

• The second value is the vertical offset (in pixels) of the shadow. Positive values shift the shadow down, while negative values shift it up. Use a value of 0 for no vertical offset. (A small value between 0-5 usually works well for offset.)

• The fourth value is the blur (in pixels) of the shadow. Use a value of 0 for a sharp shadow. Use a value up to about 10 for a softer shadow. (A small value between 0-5 usually works well for blur.)

Change Anchor for Text Position

The x and y coordinates of a display object (text, image, sprite, etc.) represent the position of the object's anchor.

By default, an object's anchor is its top-left corner. However, you can change the anchor for an object (e.g., to make the object's center become its anchor for positioning).

For example, to change the anchor of a text object named messageText:

• The first number represents the horizontal position of the anchor, as a number between 0-1 (0 = left edge, 0.5 = horizontal center, 1 = right edge).

• The second number represents the vertical position of the anchor, as a number between 0-1 (0 = top edge, 0.5 = vertical center, 1 = bottom edge).

For most text, it will be fine to leave the anchor as the top-left corner (the default).

However, for some text, it may make more sense to set its anchor to its center (0.5, 0.5) — or possibly to its top-middle (0.5, 0) or bottom-middle (0.5, 1).

Change Text Position

If you need to change the position of the text, just change its x and/or y coordinates.

For example, you could change the position of a text object named messageText:

Rotate Text to Angle

You can rotate text (around its anchor point) by changing the value of its angle property.

For example, you could rotate a text object named gameTitle:

• -10 represents the angle in degrees. Change this to any value from -180 to 180. Negative values rotate the image counterclockwise. Positive values rotate the image clockwise.

Phaser also has a property called rotation that can be used to get or set the angle of rotation of an text. The only difference is that the rotation property uses radians for its units, instead of degrees (2π radians = 360°).

Make Text Stay Fixed To Camera View

You can make an image stay fixed within the game camera view, so the image won't move when the game world scrolls.

Phaser display objects (such as images, text, sprites, etc.) have a property called fixedToCamera. By default, this property is set to false — changing this value to true will make the object stay fixed to the camera view.

For example, you can make a text object named scoreText stay fixed to the camera view:

Hide Text (and Unhide)

If you've assigned the text object to a variable, you can hide (or unhide) the text by changing its visible property.

For example, to hide the text:

To show the text again, just unhide it:

Change Text Content

You can change the content of the text that is displayed by assigning a new text string to its text property:

You can concatenate (combine) text strings and/or variable values using the + sign. JavaScript will treat the result as one continuous text string.

For example, if your game has a numerical variable named score, you could display a text label plus the value of score:

Notice that a blank space was included in the text string (inside the quotes). Otherwise, there would be no space between the word "Score" and the number when the text is displayed.

Clear Out Text Content

You can clear out the text content (make it blank) by simply assigning an empty string to the text property:

Add Line Breaks in Text Content

If necessary, you can add line breaks to split up your text into multiple lines.

To add a line break, insert: \n

For example, the following text will be split into 3 lines:

The text would be displayed as:

Game Over You Lost Try Again

Change Text Alignment

If you do use multi-line text, you may want to change the text so each line will be center-aligned:

The options for align are 'left', 'center', or 'right'. By default, the alignment will use 'left'. This can also be set as one of the style properties when you add the text object.

Change Text Style

If you've assigned the text object to a variable, you can later modify any of its style properties. Here's a few examples:

You can add a special type of image object called a sprite to your game world. Sprites are used for characters and other game objects that need to move and interact with each other.

Sprites are basically image objects that have additional properties allowing for animations, simulated physics interactions (moving, falling, colliding, etc.), and simulated life (gaining health, losing health, being killed, etc.).

A sprite can be created from a regular image, but an animated sprite will need to use a special type of image called a spritesheet, which is a set of identical-sized smaller images (called frames) that have been combined into one large image (which usually has a transparent background).

Example spritesheet image consisting of 9 frames

At any given moment during gameplay, a sprite only displays one possible frame from its spritesheet. By rapidly changing which frame is displayed, the game can animate the sprite to create the illusion that it is moving or changing.

Phaser coding references in this section:

• Load Spritesheet

• Add Sprite

• Change Anchor for Sprite Position

• Get Current Position of Sprite

• Change Position of Sprite

• Rotate Sprite to Angle

• Add Animations to Sprite

• Play Animations

• Display Specific Sprite Frame

• Hide Sprite (and Unhide)

• Remove Sprite (Kill)

• Set Sprite Lifespan

• Set Sprite Health

• Damage or Heal Sprite

• Set Maximum Health for Sprite

• Recycle Dead Sprite (Revive or Reset)

• Run Function When Sprite Killed

• Create Health Bar

• Create Lives Counter

Phaser API Documentation:

Load Spritesheet

Each spritesheet image file (also referred to as an asset) must be loaded into the game's memory before you can add it to your game world.

The command to load an asset is always placed in your preload() function.

• 'dude' represents an asset key — a key is sort of like a variable name. You decide what string to use for the key, as long as each spritesheet asset has a unique key.

• 'assets/images/dude.png' represents the folder path and filename of the spritesheet image to load. Change this to match your specific folder path and filename.

• 32, 48 represent the width and height (in pixels) of each frame within the spritesheet. Phaser will use these measurements to divide the spritesheet into a set of individual frames. Change these values to match your frame size.

How to Determine Frame Size

If you're not sure of the size of each frame in a spritesheet, you can easily calculate it from the size of the entire spritesheet.

Spritesheets have their identical-sized frames combined into a grid (with a certain number of columns and rows).

1. Determine the width and height (in pixels) of the spritesheet image. One way to do this is to open the spritesheet in an image editor (such as Pixlr Editor, etc.).

2. Count the number of frames (columns) contained in the top row across the spritesheet's width. Divide the width of the spritesheet by the number of columns. The result should be a whole number and represents the width of each frame.

3. Count the number of frames (rows) contained in the left column down the spritesheet's height. Divide the height of the spritesheet by the number of rows. The result should be a whole number and represents the height of each frame.

Add Sprite

Once a sprite's asset (either a "regular" image or a spritesheet) has been loaded into memory, you can add the sprite to your game world.

Declare a global variable for the sprite, and add the sprite by assigning it to the variable. The command to add a sprite is typically placed in the create() function.

• player represents a variable name. Change this to the name of your variable.

• 100, 500 represent the x and y coordinates where the sprite will be positioned in the game world (based on the sprite's anchor, which is its top-left corner by default). Change these values to the position you need.

• 'dude' represents the asset key of the spritesheet (or image) to use. Replace this with your asset key.

Change Anchor for Sprite Position

The x and y coordinates of a display object (text, image, sprite, etc.) represent the position of the object's anchor.

By default, an object's anchor is its top-left corner. However, you can change the anchor for an object (e.g., to make the object's center become its anchor for positioning).

The command to change the anchor is typically placed in the create() function (after adding the sprite).

For example, to change the anchor of a sprite named player:

• The first number represents the horizontal position of the anchor, as a number between 0-1 (0 = left edge, 0.5 = horizontal center, 1 = right edge).

• The second number represents the vertical position of the anchor, as a number between 0-1 (0 = top edge, 0.5 = vertical center, 1 = bottom edge).

For most sprites, it will make the most sense to set its anchor to its center (0.5, 0.5).

However, for some sprites, it might make more sense to set its anchor to its top-middle (0.5, 0) or bottom-middle (0.5, 1) — or possibly just leave the anchor as the top-left corner (the default).

Get Current Position of Sprite

The current x and y coordinates of an sprite's position (based on its anchor) are stored as properties of the sprite.

For example, to get the current position of a sprite named player:

• player.x represents its current x coordinate

• player.y represents its current y coordinate

Change Position of Sprite

If you need to change the position of a sprite, just change its x and/or y coordinates.

For example, you could change the position of a sprite named player:

As another example, you can also move a sprite relative to its current position:

In the example above, the player sprite would be moved 5 pixels to the right and 5 pixels up from its current position.

• Increasing the x coordinate moves an object to the right, while decreasing x moves the object to the left.

• Increasing the y coordinate moves an object down, while decreasing y moves the object up.

Rotate Sprite to Angle

You can rotate an image (around its anchor point) by changing the value of its angle property.

For example, you could rotate a sprite named player:

• -90 represents the angle in degrees. Change this to any value from -180 to 180. Negative values rotate the image counterclockwise. Positive values rotate the image clockwise.

Phaser also has a property called rotation that can be used to get or set the angle of rotation of a sprite. The only difference is that the rotation property uses radians for its units, instead of degrees (2π radians = 360°).

Add Animations to Sprite

A spritesheet typically contains one or more sequences of frames that represent animations.

For example, in the spritesheet shown below, the first four frames represent an animation sequence for "running to the left", the fifth frame represents "standing still", and the last four frames represent an animation sequence for "running to the right."

Sprite frames are referenced by an index number, with the first frame numbered as 0, the second frame numbered as 1, the third frame numbered as 2, etc.

You can add an animation sequence to a sprite by specifying which particular frames should be played during the animation.

The command to add an animation is typically placed in the create() function (after adding the sprite).

For example, to add an animation to a sprite named player (using the spritesheet shown above):

• 'left' represents an animation key — a key is sort of like a variable name. You decide what string to use for the key, as long as each animation has a unique key.

• [0, 1, 2, 3] is an array listing the index numbers of the specific spritesheet frames to use for the animation. The frames will be played in the order listed in the array. Change the array to list whichever frame numbers you need (in the order you need them to play).

• 10 represents the frame rate for the animation, in frames per second. Depending on your animation, you can change this number to make it play faster or slower.

• true indicates that this animation should play repeatedly in a loop. If you don't want an animation to loop, then list false.

This just adds the animation into memory, so it's ready to use. The animation won't actually play until you use a command telling it to start playing.

If your sprite has multiple animations, use additional commands to add the other animation(s):

Play Animations

Animations won't play until you tell them to do so.

For example, to play an animation that was added to a sprite named player:

• 'right' represents the animation key to play. Change this to your animation key.

Play Different Animation

To switch the sprite to play a different animation, simply change the animation key:

Stop Animation

To stop a sprite's animation:

When the animation stops, the sprite will display a random frame from the most recent animation (whichever frame was being displayed at the exact moment the animation stopped).

In some cases, you may want to the sprite to display a specific frame when no animation is being played.

Display Specific Sprite Frame

To make a sprite display a specific frame (e.g., when no animation is being played), simply change the frame property of the sprite.

• 4 represents the index number of the frame to display. Remember that frames are numbered starting with 0 (so 4 is actually the 5th frame of the spritesheet). Change this value to the frame index number you want.

Hide Sprite (and Unhide)

There are two properties that can be used to hide a sprite:

• visible property

• exists property

Visible Property

You can change a sprite's visible property to make the sprite invisible. However, the sprite will still be involved in physics interactions (moving, falling, colliding, etc.) because the sprite still exists (it's just invisible).

For certain games, invisible sprites could be interesting (e.g., creating invisible enemies that the player must avoid, etc.).

For example, to make a sprite named enemy invisible:

To make the sprite visible again:

Exists Property

You can change a sprite's exists property to make the sprite invisible and also prevent it from being affected by any physics interactions. When you want, you can easily make the sprite exist again.

For example, to make a sprite named powerUp not exist:

To make the sprite exist again:

Remove Sprite (Kill)

You can remove a sprite from the game use the kill() method. This sets the sprite's visible, exists, and alive properties to false.

For example, to remove a sprite named coin:

Killing a sprite removes it from the game, but not from the game's memory. This allows you to recycle "dead" sprites by adding them back into the game using the revive() or reset() method. For example, this would allow you to give the player's character additional lives — or to replenish resources or enemies that get removed during the course of the gameplay.

Set Sprite Lifespan

If desired, you can give a sprite a limited lifespan in the game, which will automatically remove (kill) the sprite after it has existed for a certain amount of time.

For example, to set a lifespan for a sprite named powerUp:

• 5000 represents duration of the lifespan in milliseconds (1000 ms = 1 second). The lifespan begins as soon as the sprite has been added to the game. When the lifespan expires, the sprite will be automatically removed (killed).

Set Sprite Health

If desired, you can give a sprite a certain amount of health. Your game can have various ways for the sprite to gain health (collecting resource, etc.) or lose health (being attacked, etc.). If the sprite's health reaches zero, the sprite will be automatically removed (killed).

This health property is typically used for sprites representing characters (player, enemies, allies, etc.) — but it can be used for any sprite you want (obstacles that must be destroyed, etc.).

For example, to set the health for a sprite named player:

• 100 represents amount of health. Change this to any value that makes sense for your game.

You should set a sprite's initial health value in the create() function after adding the sprite. If needed, you can also set a new value in the update() function or custom functions if certain conditions or events occur.

Damage or Heal Sprite

You can increase or decrease a sprite's health using the heal() or damage() method. You would most likely use these methods in the update() function or custom functions if certain conditions or events occur in the game.

Damage Sprite to Decrease Health

For example, to decrease the health for a sprite named player:

• 10 represents amount to decrease the sprite's health. Change this to any value that makes sense for your game.

Heal Sprite to Increase Health

For example, to increase the health for a sprite named player:

• 10 represents amount to increase the sprite's health. Change this to any value that makes sense for your game.

Set Maximum Health for Sprite

You can also set the maximum health for a sprite (so it cannot be healed beyond this value).

For example, to set the maximum health for a sprite named player:

• 100 represents the maximum health value possible for the sprite. Change this to any value that makes sense for your game.

You would typically set a sprite's maximum health value in the create() function after adding the sprite and setting its initial health value. If needed, you can also set a new value for the maximum health in the update() function or custom functions if certain conditions or events occur.

Recycle Dead Sprite (Revive or Reset)

You can recycle "dead" sprites by adding them back into the game using the revive() or reset() method. For example, this would allow you to give the player's character additional lives — or to replenish resources or enemies that get removed during the course of the gameplay.

Difference Between Revive and Reset

• REVIVE: The revive() method adds the dead sprite back into the game at the same position where it was killed (though you add commands to change the sprite's position). The sprite will also have the same values for its physics motion (velocity, acceleration, etc.) that it had when it was killed (though you can add commands to change these values).

• RESET: The reset() method adds the dead sprite back into the game at a specific position you indicate. It also resets the sprite's physics motion (velocity, acceleration, etc.) to zero.

You can use revive() and reset() for sprites that are supposed to have health (player, etc.) or for sprites that don't have health (resource, etc.).

Revive Sprite Without Health

For example, to revive a dead sprite named powerUp that isn't supposed to have health:

Revive Sprite With Health

For example, to revive a dead sprite named player that should have health:

• 50 represents the amount of health to give the sprite when adding it back to the game. Change this to any value that makes sense for your game.

Reset Sprite Without Health

For example, to reset a dead sprite named powerUp that isn't supposed to have health:

• 400, 200 represent the x and y coordinates where the sprite will be added back into the game world (based on the sprite's anchor, which is its top-left corner by default). Change these values to the position you need.

Reset Sprite With Health

For example, to revive a dead sprite named player that should have health:

• The first two numbers 100, 500 represent the x and y coordinates where the sprite will be added back into the game world (based on the sprite's anchor, which is its top-left corner by default). Change these values to the position you need.

• The last number 50 represents the amount of health to give the sprite when adding it back to the game. Change this to any value that makes sense for your game.

Run Function When Sprite Killed

You can add an onKilled event to a sprite to run a function whenever that sprite is killed (either because the kill() method was used on the sprite or because the sprite's health reached zero).

The onKilled event should be added in your create() function (after adding the sprite).

For example, to add an onKilled event for the player sprite:

An onKilled event is commonly added to the player sprite to end the game — or to add the player back into the game (e.g., back to the start or at a checkpoint) depending on how many "lives" the game allows (endless or limited).

For example, this code checks to see if the player has any lives remaining. If so, the player is reset back into the game at the last checkpoint position with full health. If the player is out of lives, then it runs a custom function called gameOver():

Create Health Bar

Some games display a health bar to represent how much health the player's character has remaining compared to the maximum possible. The health bar shrinks or expands as the player's health changes.

You can create your own custom health bar by following these steps:

1. Create Images for Health Bar

Create an image of a solid rectangle (whatever color you want) that will be used as the health bar (to represent health remaining). This example will use a green rectangle that is 200px in width and 20px in height:

Create an image of an identical-sized solid rectangle (of a different color) that will be used as a background bar (to represent missing health). This example will use a red rectangle that also is 200px in width and 20px in height:

2. Declare Global Variable for Health Bar

Before your preload() function, declare a global variable for the health bar:

3. Load Images for Health Bar

In your preload() function, load the two rectangle images:

4. Set Health and Maximum Health for Sprite

In your create() function, set the values for the initial health and the maximum health for your player's sprite (after adding the sprite):

5. Add Health Bar Images and Text Label

The background bar (red) and the health bar (green) will be added to the game at the same position. However, the background bar will be added first, so it will be stacked behind the health bar.

In your create() function, add the background bar by assigning it to a local variable. Then add the health bar at the same position by assigning it to its global variable.

You should also add a text label to the left of the bars by assigning it to a local variable.

If your game world is larger than your game display, then be sure to make the images and text label fixed to the camera.

6. Scale Health Bar When Sprite Health Changes

When the player's health changes, the width of the health bar is supposed to shrink or expand proportionately. If the health bar shrinks, it will reveal some of the background bar behind it. If the health bar expands, it will cover more of the background bar.

We can make the health bar shrink or expand by changing its scale property. The correct value for the scale can be calculated by dividing the player's health by its maximum health value.

• For example, if the player's health is currently 25 and its maximum health value is 100, the current scale for the health bar should be 0.25 (25/100 = 0.25), which would look like this:

Anytime the player's health changes (sprite is damaged, healed, revived, or reset), you need to change the scale for the width of the health bar:

This command sets a scale value for the width and height of the health bar:

• player.health / player.maxHealth is the calculated scale for the width

• 1 is the scale for the height (1 = 100% height)

HINT: If desired, you could use these steps to create a scalable bar to represent other elements of your game (such as: timer bar, progress bar, etc.).

Create Lives Counter

Some games display a counter to represent how many lives the player has remaining. This counter could simply be shown as a number. However, in some games, the lives counter is shown as a row of icons representing the individual lives remaining. As the number of lives changes, the number of icons displayed changes.

Games that utilize an icon-based lives counter typically set a relatively low limit ( < 10) on the maximum number of lives available. (Otherwise, if the limit is higher, it is probably better to just display an actual number to the player.)

You can create your own custom icon-based lives counter by following these steps:

1. Create Image for Lives Counter

First determine the maximum number of lives that your game will allow the player to accumulate. Next you need to create an image similar to a spritesheet that shows a row of icons representing the maximum number of lives.

The best way to create an image like this is to find or create an icon representing one life. Determine the width of the icon, and then paste copies of it side-by-side at evenly-spaced widths to create a row of icons. Save this image as your lives counter.

• For example, the spaceship icon is 25px in width (including the transparent area on both sides). Copies of the icon were placed side-by-side every 25px, so the final image of 5 icons is 125px in width (5 × 25 = 125).

2. Declare Global Variables Related to Lives Counter

Before your preload() function, declare global variables for the current number of player lives and the maximum number of lives, and assign values to both.

You also need to declare global variables to represent the lives counter image, the width of each lives icon, and a rectangle that will be used to crop the lives counter image:

3. Load Image for Lives Counter

In your preload() function, load the lives counter image:

4. Add Lives Counter Image and Text Label

In your create() function, add the lives counter image by assigning it to its global variable. Also add a text label by assigning it to a local variable. If your game world is larger than your game display, be sure to make the image and text label fixed to the camera.

5. Create Rectangle to Crop Lives Counter

Phaser allows you to apply a rectangular crop to an image. Any portion of the image outside the crop rectangle will be hidden from view. The crop is a reversible visual effect — you can adjust the size of the crop whenever needed.

The crop rectangle for the lives counter should:

• be positioned at the top-left corner of the lives counter image

• have a width equal to the number of lives multiplied by the width of a lives icon

• have the same height as the lives counter image (to show its full height)

In your create() function (immediately after adding the lives counter image and its text label), add this code:

• livesIcon represents the width of an individual icon in the lives counter image. The icon width is calculated by dividing the width of the entire lives counter image by the maximum number of lives (i.e., the number of icons in the image).

• livesCrop is the rectangle that will be used to crop the lives counter image:

  • 0, 0 will be the position of the crop rectangle relative to the top-left corner of the image being cropped.

  • lives * livesIcon will be the width of the crop rectangle.

  • livesCounter.height will be the height of the crop rectangle.

• The crop() method applies the crop rectangle to the lives counter image.

5. Update Crop When Number of Lives Changes

Anytime the player gains or loses a life (i.e., anytime the value of lives changes), you need to re-calculate the width of the crop rectangle, and then update the crop of the lives counter image (to show more or fewer icons):

HINT: If desired, you could use these steps to create an icon-based counter to represent other elements of your game (such as: number of resources remaining, number of achievements earned, etc.).

You can add images to help create your game world (backgrounds, etc.) or as part of your game's user interface (icons, etc.). Phaser handles each image as a display object with properties and methods that allow you to modify the image in various ways.

Phaser coding references in this section:

• Load Image

• Add Image

• Change Anchor for Image Position

• Change Image Position

• Make Image Stay Fixed to Camera View

• Hide Image (and Unhide)

• Rotate Image to Angle

• Scale Image (or Flip Image)

• Crop Image Using Rectangle

• Tint Image Using Color

Phaser API Documentation:

Load Image

Each image file (also referred to as an asset) must be loaded into the game's memory before you can add it to your game world.

The command to load an asset is always placed in your preload() function.

• 'logo' represents an asset key — a key is sort of like a variable name. You decide what string to use for the key, as long as each image asset has a unique key.

• 'assets/images/game-logo.png' represents the folder path and filename of the image to load. Change this to match your specific folder path and filename.

Add Image

Once an image asset has been loaded into memory, you can add the image to your game world.

If you have an image that simply needs to placed at a specific position and won't be modified in any way, you can add the image directly (without assigning it to a variable):

The command to add an image is typically placed in the create() function:

• 0, 0 represent the x and y coordinates where the image will be positioned in the game world (based on the image's anchor, which is its top-left corner by default). Change these values to the position you need.

• 'background' represents the asset key of the image to use. Replace this with your asset key.

However, if you will need to modify the image (change image property, rotate image, etc.), then you need to declare a variable and assign the image to the variable:

• gameTitle represents a variable name. Change this to the name of your variable.

If you only need to modify the image within the create() function, you can assign the text object to a local variable.

Otherwise, if you need to modify the image in the update() function or a custom function, then assign the image to a global variable.

Change Anchor for Image Position

The x and y coordinates of a display object (text, image, sprite, etc.) represent the position of the object's anchor.

By default, an object's anchor is its top-left corner. However, you can change the anchor for an object (e.g., to make the object's center become its anchor for positioning).

For example, to change the anchor of a image named gameTitle:

• The first number represents the horizontal position of the anchor, as a number between 0-1 (0 = left edge, 0.5 = horizontal center, 1 = right edge).

• The second number represents the vertical position of the anchor, as a number between 0-1 (0 = top edge, 0.5 = vertical center, 1 = bottom edge).

For most images, it will be fine to leave the anchor as the top-left corner (the default).

However, for some images, it may make more sense to set its anchor to its center (0.5, 0.5) — or possibly to its top-middle (0.5, 0) or bottom-middle (0.5, 1).

Change Image Position

If you need to change the position of an image, just change its x and/or y coordinates.

For example, you could change the position of a image named gameTitle:

Make Image Stay Fixed To Camera View

You can make an image stay fixed within the game camera view, so the image won't move when the game world scrolls.

Phaser display objects (such as images, text, sprites, etc.) have a property called fixedToCamera. By default, this property is set to false — changing this value to true will make the object stay fixed to the camera view.

For example, you can make an image named gameTitle stay fixed to the camera view:

Hide Image (and Unhide)

You can hide (or unhide) an image by changing its visible property.

For example, to hide an image named gameOverPic:

To show the image, just unhide it:

Rotate Image to Angle

You can rotate an image (around its anchor point) by changing the value of its angle property.

For example, you could rotate an image named gameTitle:

• -10 represents the angle in degrees. Change this to any value from -180 to 180. Negative values rotate the image counterclockwise. Positive values rotate the image clockwise.

Phaser also has a property called rotation that can be used to get or set the angle of rotation of an image. The only difference is that the rotation property uses radians for its units, instead of degrees (2π radians = 360°).

Scale Image (or Flip Image)

You can make an image larger or smaller by changing its scale property. You can also use this property to flip the image (forming a mirror image).

For example, you could scale an image named gameTitle:

• The first number represents the horizontal scale, which affects the image's width. Change this to the value you need for scaling.

• The second number represents the vertical scale, which affects the image's height. Change this to the value you need for scaling.

Scale Values

• Each direction (horizontal or vertical) can be scaled using the same value (which keeps the same image proportions) — or can be scaled using different values (which changes the proportions).

• A scale value less than 1 will make the image smaller in that direction. For example, a value of 0.5 would make the image half of its original size.

• A scale value of exactly 1 will keep the image its original size in that direction.

• A scale value greater than 1 will make the image larger in that direction. For example, a value of 2 would make the image twice its original size.

• Using a negative scale value will flip the image in that direction (forming mirror image). For example, a value of -1 will keep the image its original size but flip it.

Crop Image Using Rectangle

You can apply a rectangular crop to an image. Any portion of the image outside the crop rectangle will be hidden from view. The crop is a reversible visual effect — you can change the crop or removed it if desired.

• The first line of code creates a rectangle and assigns it to a variable named livesCrop. Change the variable name for your rectangle.

  • 0, 0 represent the x and y coordinates of the top-left corner of the crop rectangle (relative to the top-left corner of the image that it will crop). Change these values based on where you need to position your crop rectangle on the image.

  • 75, 25 represent the width and height (in pixels) of the crop rectangle. Change these values based on how much of the image you need to show.

• The second line of code applies the crop rectangle to an image named livesBar. Change the names to match the your image and crop rectangle.

Change Crop Rectangle

If needed, you can change the size and/or position of your crop rectangle and then update to show the new cropped image.

If you need to change the size of the crop rectangle, change the width and/or height of the rectangle.

If you need to change the position of the top-left corner of the crop rectangle, change the x and/or y position of the rectangle. (NOTE: This changes what part of the original image is shown, but the cropped image will still be positioned at the same location in the game world.)

Once you've changed the value(s) for your crop rectangle, update the crop.

Remove Crop Entirely

Unfortunately, there isn't a built-in method to directly "uncrop" an image once it has been cropped. Instead, the solution is to make the crop rectangle the same size as the original image and then apply this full-sized crop (which will show the entire image).

Tint Image Using Color

You can tint an image using a specific color. For example, if you have a background of a light blue sky ("daytime"), you could tint it a reddish color to represent sunrise or sunset — or tint it a dark color to represent nighttime.

For example, to tint an image named sky:

How Tint Works

The tint color is added as a semi-transparent layer on top of the image, so the tint color will visually mix with the colors in the image.

For example, adding a yellow tint on top of a blue image will actually make the image look green (yellow + blue = green).

So you may need to try different tint colors to achieve your desired result (and it may not be possible to get the exact result you want, depending on the original colors of the image).

Remove Tint

To remove the tint color and restore the image to its original appearance, change the tint color to 0xffffff (white represents no tint):