Building a Canvas Editor - HTML5 Mobile Game Development - page 378

The tool method looks at the currently active tool. If move is selected, the stage is recentered based on
how far the user has dragged his finger or moved the mouse. If paint is selected, it sets the tile at that location
to the active tile. If erase is selected, that tile is cleared.
If you load the editor in your browser or on a mobile device, you should move around and paint and erase
tiles. Figure 19-1 shows how the editor looks on an iPhone in Landscape mode.
Figure 19-1: The editor on an iPhone.
Selecting Tiles
Only two pieces of functionality remain: the ability to select which tile to paint and the code to save levels back
to the server. This section adds the first piece: the tile selection. The mechanism for selecting tiles enables the
tile button to pop up an image of all the tiles in the spritesheet and lets the user select the tile to draw. To do
this a Canvas element is created to hold the images, and then the events on that Canvas are converted to a tile
selection.
To add the tile functionality, add in the code in Listing 19-6 to the bottom of the component definition in
quintus_editor.js .
Listing 19-6: The tile functionality
tile: function() {
if(!this.tiles) this.setupTiles();