(click anywhere to close)

[Phaser] Graphics and Design

category: Games | course: Phaser | difficulty:

There are multiple ways to load or display something, each with their own advantages and disadvantages


With Phaser, you can (dynamically) create simple shapes/drawings (like rectangles, lines, points, circles, arcs, etc.). These shapes can't be made into a sprite or given physics, so all you they do is just stand tall and proud in your game.

However, these graphics can be dynamically created, destroyed and in a few clever ways altered. This makes them the ideal candidate for some game design that doesn't have much interactivity, for they are faster to create, more dynamic and more efficient than creating images and putting them into sprites for every piece of your design.

function create() {

    var graphics = game.add.graphics(0, 0);

    // set a fill (color,alpha)
    // and a line style (width, color,alpha)
    graphics.lineStyle(10, 0xffd900, 1);
    // draw any shape
    //moveTo: defines first/starting point of the shape

    //every lineTo: defines the next point
    graphics.lineTo(250, 50);
    graphics.lineTo(100, 100);
    graphics.lineTo(0, 50);

    //end this fill = end the shape
    // draw a rectangle
    graphics.lineStyle(2, 0x0000FF, 1);
    graphics.drawRect(50, 250, 100, 100);
    // draw a circle
    graphics.beginFill(0xFFFF0B, 0.5);
    graphics.drawCircle(470, 200,100);
    //draw a line
    graphics.lineStyle(20, 0x33FF00);
    graphics.lineTo(600, 300);



When something is of the type bitmapData, it basically means "we have this rectangle, and you can have control over every pixel inside of it, and you can either paint 'em or leave 'em alone".

So, it's basically the same as the graphics discussed before, but we now only have a certain field to work in, and we have limited options. So what's the upside of this? We can make them into a sprite!

//A Square
//Create a piece of bitmapData of 20x20
var aSquare = game.add.bitmapData(20,20);
//Create a rectangle in there, from (0,0) to (20,20)   (relative to the (0,0) of the bitmapData piece, not those of the game world)
aSquare.rect(0,0,20,20,'rgba(100, 255, 100,0.6)');

//A Circle
var aStar = game.add.bitmapData(20,20);
//Create a circle with center (10,10)
aStar.circle(10,10,10,'rgba(255, 255, 100,0.6)');

//Create a sprite from the square
var ourPlayer = game.add.sprite(50,50,aSquare);

This is great and all, but there's also an alternative method of drawing in a bitmapData, and this requires knowledge of traditional JavaScript canvas-drawing methods. Here's a square with a stroke, created by using the bitmapData's context:

var smth = this.add.bitmapData(100,100);
smth.context.fillStyle = 'blue';
smth.context.strokeStyle = 'green';

Different Media Types

But, next to that, there are also a few types of media you can load in the preloader function:

game.load.image('name (for reference)','path (to file)');

//Note: you can set an array of paths to the same audio file with different extensions, for not every browser supports the same type of file

//The two parameters set to null are not very useful (they're for loading XML for your font
game.load.bitmapFont('name','path',null,null, xSpacing, ySpacing);

game.load.spritesheet('name','path','width of one frame','height of one frame','amount of frames','margin between frames','spacing between frames');

//atlas, JSON and tilemaps are also supported, but not important enough right now to talk about here.


Spritesheets are an incredibly useful way to animate characters/objects in your game.

A spritesheet is basically a long image (horizontally), with all the different frames or states of the character pasted next to each other. Every frame is of the same width and height and represents the character as idle, walking, jumping, crawling, exploding, watever.

Once you've loaded your spritesheet, you have to create animations out of it. Then you assign those to the player, and then (at the appropriate moment) you play them...like this:

player = game.add.spritesheet(x, y, 'reference to loaded spritesheet');

//Add animations to player for walking left and right
//add("name", [frames to display after each other], how many frames to play per second, whether to loop the animation or not)
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);

//Then, at any time, you can start and stop them.

//Or pick one frame for the moment
player.frame = 4;

Fonts and Text!

Having text in your game is of course very important for the menus, buttons, score and health displayer, game over screen, and what not.

//Add text to the screen - (xPosition, yPosition, textToDisplay, fontToUse);
//A bitmapFont you loaded earlier
game.add.text(50,50,"GAME OVER",'namehere');

//A font you specified in your CSS
game.add.text(50,50,"Game Over",{ font: '30px GaramondPro'});

//The same font, with more properties:
game.add.text(50,50,"GameOver", {
                font: "128px GaramondPro",
                fill: "#ff0044",
                align: "center"
//Other properties include:
//fontWeight, lineSpacing, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, stroke, strokeThickness

What's a bitmap font, you say? A bitmap font, is just an image of letters. The font can 't be scaled (which is why it doesn't require a size when initializing it), but has the advantage that it loads much much faster.

Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk