Phaser for HTML5 Game Development
Just starting on an adventure in HTML5 game development using Phaser and thought I'd keep notes online. There's a bigger picture application goal that I have in mind, but it will start as a series of exercises and I want to record them while I'm learning.
First I wanted to create an example of a polygon moving around the screen using the cursor keys. After some exploration of the examples and reading documentation it boiled down to this basic example. First the index.html file:
and the polytest.js file:
as noted in the source code, I really wanted to use drawPolygon, but discovered it is a feature of Geometry in Phaser and not an HTML5 Canvas feature. From the code you'll see that both Sprite and Image objects are being used. Image may be sufficient in many cases.
Here's what the resulting screen looks like:
As far as tools, so far I'm using Brackets with Live Preview.
Handy links:
Phaser Cheatsheet: http://invrse.co/phaser-cheatsheet/
(root site is good: http://invrse.co/)
Amazon Dev Blog: https://developer.amazon.com/public/community/blog/author/Jesse+Freeman
First I wanted to create an example of a polygon moving around the screen using the cursor keys. After some exploration of the examples and reading documentation it boiled down to this basic example. First the index.html file:
1: <!doctype html>
2: <html lang="en">
3: <head>
4: <meta charset="UTF-8" />
5: <title>Polygon Test</title>
6: <script src="js/phaser.js"></script>
7: <script src="js/polytest.js"></script>
8: </head>
9: <body>
10: <div id="phaser_game">
11: </div>
12: <script type="text/javascript">
13: window.onload = function() {
14: game = new Phaser.Game(500, 500, Phaser.CANVAS, 'phaser_game',
15: { create: create, update:update });
16: };
17: </script>
18: </body>
19: </html>
and the polytest.js file:
1: var game;
2: var bmd;
3: var img1;
4: var bmdsprite;
5: var cursors;
6: function create() {
7: // used to detect arrow key presses in update function
8: cursors = game.input.keyboard.createCursorKeys();
9: // bitmap to draw onto
10: bmd = game.add.bitmapData(128,128);
11: // draw on the bitmap canvas
12: bmd.ctx.beginPath();
13: bmd.ctx.rect(0,0,128,128);
14: bmd.ctx.fillStyle = '#ff0000';
15: bmd.ctx.fill();
16: // use the bitmap data as the texture for the sprite
17: bmdsprite = game.add.sprite(200, 200, bmd);
18: // an Image is a lighterweight version of a sprite
19: img1 = game.add.image(50, 50, bmd);
20: // unfortunately, drawPolygon is not a canvas feature
21: // so a future effort is to draw the lines separately:
22: // http://stackoverflow.com/questions/
23: // 4839993/how-to-draw-polygons-on-an-html5-canvas
24: }
25: function update() {
26: if (cursors.left.isDown) {
27: bmdsprite.reset(bmdsprite.x - 15, bmdsprite.y);
28: img1.reset(img1.x - 15, img1.y);
29: }
30: else if (cursors.right.isDown) {
31: bmdsprite.reset(bmdsprite.x + 15, bmdsprite.y);
32: img1.reset(img1.x + 15, img1.y);
33: }
34: else if (cursors.up.isDown) {
35: bmdsprite.reset(bmdsprite.x, bmdsprite.y - 15);
36: img1.reset(img1.x, img1.y - 15);
37: }
38: else if (cursors.down.isDown) {
39: bmdsprite.reset(bmdsprite.x, bmdsprite.y + 15);
40: img1.reset(img1.x, img1.y + 15);
41: }
42: }
as noted in the source code, I really wanted to use drawPolygon, but discovered it is a feature of Geometry in Phaser and not an HTML5 Canvas feature. From the code you'll see that both Sprite and Image objects are being used. Image may be sufficient in many cases.
Here's what the resulting screen looks like:
As far as tools, so far I'm using Brackets with Live Preview.
Handy links:
Phaser Cheatsheet: http://invrse.co/phaser-cheatsheet/
(root site is good: http://invrse.co/)
Amazon Dev Blog: https://developer.amazon.com/public/community/blog/author/Jesse+Freeman