Make Sprites

In article you will learn how to make a SPRITE using the Phaser Pixel Editor.

Start Phaser Pixel Editor
First, run the phaser pixel editor. run it twice to load all the images.

Pixel Editor

Draw a Picture
Draw ur picture (also called a game sprite).
(click mouse to color box, right click to remove color)

Get Your Sprite Code
Press F12 to bring up the browsers developer tools.
Next, click on the CONSOLE tab
Click on the DISC icon in bottom right corner.
In the Console Output window, you will see the code the Pixel Editor generated. Copy it!

    var frame0 = [
	'...22...',
	'..2222..',
	'...22...',
	'.222222.',
	'...22...',
	'...22...',
	'...22...',
	'..2..2..'
    ];
    game.create.texture('yourKey', frame0, 6, 6, 0);

    

Use SPRITE in your game
In another browser window or tab, open up the Game Ball Tag.
FORK it to make a copy of it.
click on the GAME.JS file
In the PRELOAD section, replace the bobData with your new picture AND change the "yourKey" to "bob".

    // REPLACE THIS CODE WITH YOUR NEW CODE FROM THE PIXEL EDITOR
    var bobData = [
    	'..8888..',
    	'.888888.',
    	'.800008.',
    	'.888888.',
    	'...33...',
    	'.73DD37.',
    	'...66...',
    	'..8..8..'
    ];
    game.create.texture('bob', bobData, 6, 6, 0);

    

Run Your Code and check for errors.
RUN IT TWICE to make sure the images load properly.