├── issue-001
    ├── assets
    │   ├── background.png
    │   ├── bullet.png
    │   ├── flame.png
    │   ├── tank.png
    │   ├── target.png
    │   └── turret.png
    ├── phaser-tips-header1.png
    └── tanks.html
├── issue-002
    ├── assets
    │   ├── background.png
    │   ├── bullet.png
    │   ├── flame.png
    │   ├── land.png
    │   ├── tank.png
    │   ├── target.png
    │   └── turret.png
    ├── phaser-tips-header1.png
    └── tanks.html
├── issue-003
    ├── assets
    │   ├── background.png
    │   ├── clouds.png
    │   ├── dude.png
    │   ├── ice-platform.png
    │   ├── platform.png
    │   └── trees.png
    ├── jumpup.html
    ├── phaser-tips-header1.png
    └── platforms.html
├── issue-004
    ├── assets
    │   ├── cloud-platform.png
    │   ├── clouds-h.png
    │   ├── dude.png
    │   ├── platform.png
    │   └── trees-h.png
    ├── clouds.html
    └── phaser-tips-header1.png
├── issue-005
    ├── assets
    │   ├── car.png
    │   ├── dot.png
    │   ├── maze.json
    │   ├── pacman-map.json
    │   ├── pacman-tiles.png
    │   ├── pacman.png
    │   └── tiles.png
    ├── car.html
    ├── pacman.html
    └── phaser-tips-header1.png
├── issue-006
    ├── assets
    │   ├── casing.mp3
    │   ├── draw.png
    │   ├── fire.mp3
    │   ├── font.png
    │   ├── font.xml
    │   ├── lose.png
    │   ├── photonstorm.png
    │   ├── preload.png
    │   ├── reload.mp3
    │   ├── splat.mp3
    │   ├── standoff.png
    │   ├── walk.mp3
    │   └── win.png
    ├── phaser-tips-header1.png
    └── shootout.html
├── issue-007
    ├── assets
    │   ├── back.png
    │   ├── bullet1.png
    │   ├── bullet10.png
    │   ├── bullet11.png
    │   ├── bullet2.png
    │   ├── bullet3.png
    │   ├── bullet4.png
    │   ├── bullet5.png
    │   ├── bullet6.png
    │   ├── bullet7.png
    │   ├── bullet8.png
    │   ├── bullet9.png
    │   ├── fore.png
    │   ├── ship.png
    │   ├── shmupfont.png
    │   └── shmupfont.xml
    ├── bulletpool.html
    └── phaser-tips-header1.png
└── issue-008
    ├── aliens.html
    ├── assets
        ├── arrow.png
        ├── shmupfont.png
        ├── shmupfont.xml
        └── ufo.png
    ├── face.html
    ├── paths.html
    └── phaser-tips-header1.png


/issue-001/assets/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-001/assets/background.png


--------------------------------------------------------------------------------
/issue-001/assets/bullet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-001/assets/bullet.png


--------------------------------------------------------------------------------
/issue-001/assets/flame.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-001/assets/flame.png


--------------------------------------------------------------------------------
/issue-001/assets/tank.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-001/assets/tank.png


--------------------------------------------------------------------------------
/issue-001/assets/target.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-001/assets/target.png


--------------------------------------------------------------------------------
/issue-001/assets/turret.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-001/assets/turret.png


--------------------------------------------------------------------------------
/issue-001/phaser-tips-header1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-001/phaser-tips-header1.png


--------------------------------------------------------------------------------
/issue-001/tanks.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <head>
  4 |     <title>Tanks - Part 1</title>
  5 |     <meta charset="utf-8">
  6 |     <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
  7 | </head>
  8 | <body>
  9 | 
 10 |     <div id="game"></div>
 11 | 
 12 |     <script type="text/javascript">
 13 | 
 14 |     var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'game');
 15 | 
 16 |     var PhaserGame = function (game) {
 17 | 
 18 |         this.tank = null;
 19 |         this.turret = null;
 20 |         this.flame = null;
 21 |         this.bullet = null;
 22 | 
 23 |         this.background = null;
 24 |         this.targets = null;
 25 | 
 26 |         this.power = 300;
 27 |         this.powerText = null;
 28 | 
 29 |         this.cursors = null;
 30 |         this.fireButton = null;
 31 | 
 32 |     };
 33 | 
 34 |     PhaserGame.prototype = {
 35 | 
 36 |         init: function () {
 37 | 
 38 |             this.game.renderer.renderSession.roundPixels = true;
 39 | 
 40 |             this.game.world.setBounds(0, 0, 992, 480);
 41 | 
 42 |             this.physics.startSystem(Phaser.Physics.ARCADE);
 43 |             this.physics.arcade.gravity.y = 200;
 44 | 
 45 |         },
 46 | 
 47 |         preload: function () {
 48 | 
 49 |             //  We need this because the assets are on Amazon S3
 50 |             //  Remove the next 2 lines if running locally
 51 |             this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue001/';
 52 |             this.load.crossOrigin = 'anonymous';
 53 | 
 54 |             this.load.image('tank', 'assets/tank.png');
 55 |             this.load.image('turret', 'assets/turret.png');
 56 |             this.load.image('bullet', 'assets/bullet.png');
 57 |             this.load.image('background', 'assets/background.png');
 58 |             this.load.image('flame', 'assets/flame.png');
 59 |             this.load.image('target', 'assets/target.png');
 60 | 
 61 |             //  Note: Graphics from Amiga Tanx Copyright 1991 Gary Roberts
 62 | 
 63 |         },
 64 | 
 65 |         create: function () {
 66 | 
 67 |             //  Simple but pretty background
 68 |             this.background = this.add.sprite(0, 0, 'background');
 69 | 
 70 |             //  Something to shoot at :)
 71 |             this.targets = this.add.group(this.game.world, 'targets', false, true, Phaser.Physics.ARCADE);
 72 | 
 73 |             this.targets.create(300, 390, 'target');
 74 |             this.targets.create(500, 390, 'target');
 75 |             this.targets.create(700, 390, 'target');
 76 |             this.targets.create(900, 390, 'target');
 77 | 
 78 |             //  Stop gravity from pulling them away
 79 |             this.targets.setAll('body.allowGravity', false);
 80 | 
 81 |             //  A single bullet that the tank will fire
 82 |             this.bullet = this.add.sprite(0, 0, 'bullet');
 83 |             this.bullet.exists = false;
 84 |             this.physics.arcade.enable(this.bullet);
 85 | 
 86 |             //  The body of the tank
 87 |             this.tank = this.add.sprite(24, 383, 'tank');
 88 | 
 89 |             //  The turret which we rotate (offset 30x14 from the tank)
 90 |             this.turret = this.add.sprite(this.tank.x + 30, this.tank.y + 14, 'turret');
 91 | 
 92 |             //  When we shoot this little flame sprite will appear briefly at the end of the turret
 93 |             this.flame = this.add.sprite(0, 0, 'flame');
 94 |             this.flame.anchor.set(0.5);
 95 |             this.flame.visible = false;
 96 | 
 97 |             //  Used to display the power of the shot
 98 |             this.power = 300;
 99 |             this.powerText = this.add.text(8, 8, 'Power: 300', { font: "18px Arial", fill: "#ffffff" });
100 |             this.powerText.setShadow(1, 1, 'rgba(0, 0, 0, 0.8)', 1);
101 |             this.powerText.fixedToCamera = true;
102 | 
103 |             //  Some basic controls
104 |             this.cursors = this.input.keyboard.createCursorKeys();
105 |     
106 |             this.fireButton = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
107 |             this.fireButton.onDown.add(this.fire, this);
108 | 
109 |         },
110 | 
111 |         /**
112 |          * Called by fireButton.onDown
113 |          *
114 |          * @method fire
115 |          */
116 |         fire: function () {
117 | 
118 |             if (this.bullet.exists)
119 |             {
120 |                 return;
121 |             }
122 | 
123 |             //  Re-position the bullet where the turret is
124 |             this.bullet.reset(this.turret.x, this.turret.y);
125 | 
126 |             //  Now work out where the END of the turret is
127 |             var p = new Phaser.Point(this.turret.x, this.turret.y);
128 |             p.rotate(p.x, p.y, this.turret.rotation, false, 34);
129 | 
130 |             //  And position the flame sprite there
131 |             this.flame.x = p.x;
132 |             this.flame.y = p.y;
133 |             this.flame.alpha = 1;
134 |             this.flame.visible = true;
135 | 
136 |             //  Boom
137 |             this.add.tween(this.flame).to( { alpha: 0 }, 100, "Linear", true);
138 | 
139 |             //  So we can see what's going on when the bullet leaves the screen
140 |             this.camera.follow(this.bullet);
141 | 
142 |             //  Our launch trajectory is based on the angle of the turret and the power
143 |             this.physics.arcade.velocityFromRotation(this.turret.rotation, this.power, this.bullet.body.velocity);
144 | 
145 |         },
146 | 
147 |         /**
148 |          * Called by physics.arcade.overlap if the bullet and a target overlap
149 |          *
150 |          * @method hitTarget
151 |          * @param {Phaser.Sprite} bullet - A reference to the bullet (same as this.bullet)
152 |          * @param {Phaser.Sprite} target - The target the bullet hit
153 |          */
154 |         hitTarget: function (bullet, target) {
155 | 
156 |             target.kill();
157 |             this.removeBullet();
158 | 
159 |         },
160 | 
161 |         /**
162 |          * Removes the bullet, stops the camera following and tweens the camera back to the tank.
163 |          * Have put this into its own method as it's called from several places.
164 |          *
165 |          * @method removeBullet
166 |          */
167 |         removeBullet: function () {
168 | 
169 |             this.bullet.kill();
170 |             this.camera.follow();
171 |             this.add.tween(this.camera).to( { x: 0 }, 1000, "Quint", true, 1000);
172 | 
173 |         },
174 | 
175 |         /**
176 |          * Core update loop. Handles collision checks and player input.
177 |          *
178 |          * @method update
179 |          */
180 |         update: function () {
181 | 
182 |             //  If the bullet is in flight we don't let them control anything
183 |             if (this.bullet.exists)
184 |             {
185 |                 if (this.bullet.y > 420)
186 |                 {
187 |                     //  Simple check to see if it's fallen too low
188 |                     this.removeBullet();
189 |                 }
190 |                 else
191 |                 {
192 |                     //  Bullet vs. the Targets
193 |                     this.physics.arcade.overlap(this.bullet, this.targets, this.hitTarget, null, this);
194 |                 }
195 |             }
196 |             else
197 |             {
198 |                 //  Allow them to set the power between 100 and 600
199 |                 if (this.cursors.left.isDown && this.power > 100)
200 |                 {
201 |                     this.power -= 2;
202 |                 }
203 |                 else if (this.cursors.right.isDown && this.power < 600)
204 |                 {
205 |                     this.power += 2;
206 |                 }
207 | 
208 |                 //  Allow them to set the angle, between -90 (straight up) and 0 (facing to the right)
209 |                 if (this.cursors.up.isDown && this.turret.angle > -90)
210 |                 {
211 |                     this.turret.angle--;
212 |                 }
213 |                 else if (this.cursors.down.isDown && this.turret.angle < 0)
214 |                 {
215 |                     this.turret.angle++;
216 |                 }
217 | 
218 |                 //  Update the text
219 |                 this.powerText.text = 'Power: ' + this.power;
220 |             }
221 | 
222 |         }
223 | 
224 |     };
225 | 
226 |     game.state.add('Game', PhaserGame, true);
227 | 
228 |     </script>
229 | 
230 |     <a href="http://phaser.io"><img src="http://files.phaser.io.s3.amazonaws.com/codingtips/issue001/phaser-tips-header1.png" title="Phaser Coding Tips Weekly" style="margin-top: 8px" /></a>
231 | 
232 | </body>
233 | </html>


--------------------------------------------------------------------------------
/issue-002/assets/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-002/assets/background.png


--------------------------------------------------------------------------------
/issue-002/assets/bullet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-002/assets/bullet.png


--------------------------------------------------------------------------------
/issue-002/assets/flame.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-002/assets/flame.png


--------------------------------------------------------------------------------
/issue-002/assets/land.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-002/assets/land.png


--------------------------------------------------------------------------------
/issue-002/assets/tank.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-002/assets/tank.png


--------------------------------------------------------------------------------
/issue-002/assets/target.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-002/assets/target.png


--------------------------------------------------------------------------------
/issue-002/assets/turret.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-002/assets/turret.png


--------------------------------------------------------------------------------
/issue-002/phaser-tips-header1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-002/phaser-tips-header1.png


--------------------------------------------------------------------------------
/issue-002/tanks.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <head>
  4 |     <title>Tanks - Part 2</title>
  5 |     <meta charset="utf-8">
  6 |     <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
  7 | </head>
  8 | <body>
  9 | 
 10 |     <div id="game"></div>
 11 | 
 12 |     <script type="text/javascript">
 13 | 
 14 |     var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'game');
 15 | 
 16 |     var PhaserGame = function (game) {
 17 | 
 18 |         this.tank = null;
 19 |         this.turret = null;
 20 |         this.flame = null;
 21 |         this.bullet = null;
 22 | 
 23 |         this.background = null;
 24 |         this.targets = null;
 25 |         this.land = null;
 26 |         this.emitter = null;
 27 | 
 28 |         this.power = 300;
 29 |         this.powerText = null;
 30 | 
 31 |         this.cursors = null;
 32 |         this.fireButton = null;
 33 | 
 34 |     };
 35 | 
 36 |     PhaserGame.prototype = {
 37 | 
 38 |         init: function () {
 39 | 
 40 |             this.game.renderer.renderSession.roundPixels = true;
 41 | 
 42 |             this.game.world.setBounds(0, 0, 992, 480);
 43 | 
 44 |             this.physics.startSystem(Phaser.Physics.ARCADE);
 45 |             this.physics.arcade.gravity.y = 200;
 46 | 
 47 |         },
 48 | 
 49 |         preload: function () {
 50 | 
 51 |             //  We need this because the assets are on Amazon S3
 52 |             //  Remove the next 2 lines if running locally
 53 |             // this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue002/';
 54 |             this.load.crossOrigin = 'anonymous';
 55 | 
 56 |             this.load.image('tank', 'assets/tank.png');
 57 |             this.load.image('turret', 'assets/turret.png');
 58 |             this.load.image('bullet', 'assets/bullet.png');
 59 |             this.load.image('background', 'assets/background.png');
 60 |             this.load.image('flame', 'assets/flame.png');
 61 |             this.load.image('target', 'assets/target.png');
 62 |             this.load.image('land', 'assets/land.png');
 63 | 
 64 |             //  Note: Graphics from Amiga Tanx Copyright 1991 Gary Roberts
 65 | 
 66 |         },
 67 | 
 68 |         create: function () {
 69 | 
 70 |             //  Simple but pretty background
 71 |             this.background = this.add.sprite(0, 0, 'background');
 72 | 
 73 |             //  The targets to hit (hidden behind the land slightly)
 74 |             this.targets = this.add.group(this.game.world, 'targets', false, true, Phaser.Physics.ARCADE);
 75 | 
 76 |             this.targets.create(284, 378, 'target');
 77 |             this.targets.create(456, 153, 'target');
 78 |             this.targets.create(545, 305, 'target');
 79 |             this.targets.create(726, 391, 'target');
 80 |             this.targets.create(972, 74, 'target');
 81 | 
 82 |             //  Stop gravity from pulling them away
 83 |             this.targets.setAll('body.allowGravity', false);
 84 | 
 85 |             //  The land is a BitmapData the size of the game world
 86 |             //  We draw the 'lang.png' to it then add it to the world
 87 |             this.land = this.add.bitmapData(992, 480);
 88 |             this.land.draw('land');
 89 |             this.land.update();
 90 |             this.land.addToWorld();
 91 | 
 92 |             //  A small burst of particles when a target is hit
 93 |             this.emitter = this.add.emitter(0, 0, 30);
 94 |             this.emitter.makeParticles('flame');
 95 |             this.emitter.setXSpeed(-120, 120);
 96 |             this.emitter.setYSpeed(-100, -200);
 97 |             this.emitter.setRotation();
 98 | 
 99 |             //  A single bullet that the tank will fire
100 |             this.bullet = this.add.sprite(0, 0, 'bullet');
101 |             this.bullet.exists = false;
102 |             this.physics.arcade.enable(this.bullet);
103 | 
104 |             //  The body of the tank
105 |             this.tank = this.add.sprite(24, 383, 'tank');
106 | 
107 |             //  The turret which we rotate (offset 30x14 from the tank)
108 |             this.turret = this.add.sprite(this.tank.x + 30, this.tank.y + 14, 'turret');
109 | 
110 |             //  When we shoot this little flame sprite will appear briefly at the end of the turret
111 |             this.flame = this.add.sprite(0, 0, 'flame');
112 |             this.flame.anchor.set(0.5);
113 |             this.flame.visible = false;
114 | 
115 |             //  Used to display the power of the shot
116 |             this.power = 300;
117 |             this.powerText = this.add.text(8, 8, 'Power: 300', { font: "18px Arial", fill: "#ffffff" });
118 |             this.powerText.setShadow(1, 1, 'rgba(0, 0, 0, 0.8)', 1);
119 |             this.powerText.fixedToCamera = true;
120 | 
121 |             //  Some basic controls
122 |             this.cursors = this.input.keyboard.createCursorKeys();
123 |     
124 |             this.fireButton = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
125 |             this.fireButton.onDown.add(this.fire, this);
126 | 
127 |         },
128 | 
129 |         /**
130 |          * Called by update if the bullet is in flight.
131 |          *
132 |          * @method bulletVsLand
133 |          */
134 |         bulletVsLand: function () {
135 | 
136 |             //  Simple bounds check
137 |             if (this.bullet.x < 0 || this.bullet.x > this.game.world.width || this.bullet.y > this.game.height)
138 |             {
139 |                 this.removeBullet();
140 |                 return;
141 |             }
142 | 
143 |             var x = Math.floor(this.bullet.x);
144 |             var y = Math.floor(this.bullet.y);
145 |             var rgba = this.land.getPixel(x, y);
146 | 
147 |             if (rgba.a > 0)
148 |             {
149 |                 this.land.blendDestinationOut();
150 |                 this.land.circle(x, y, 16, 'rgba(0, 0, 0, 255');
151 |                 this.land.blendReset();
152 |                 this.land.update();
153 | 
154 |                 //  If you like you could combine the above 4 lines:
155 |                 // this.land.blendDestinationOut().circle(x, y, 16, 'rgba(0, 0, 0, 255').blendReset().update();
156 | 
157 |                 this.removeBullet();
158 |             }
159 | 
160 |         },
161 | 
162 |         /**
163 |          * Called by fireButton.onDown
164 |          *
165 |          * @method fire
166 |          */
167 |         fire: function () {
168 | 
169 |             if (this.bullet.exists)
170 |             {
171 |                 return;
172 |             }
173 | 
174 |             //  Re-position the bullet where the turret is
175 |             this.bullet.reset(this.turret.x, this.turret.y);
176 | 
177 |             //  Now work out where the END of the turret is
178 |             var p = new Phaser.Point(this.turret.x, this.turret.y);
179 |             p.rotate(p.x, p.y, this.turret.rotation, false, 34);
180 | 
181 |             //  And position the flame sprite there
182 |             this.flame.x = p.x;
183 |             this.flame.y = p.y;
184 |             this.flame.alpha = 1;
185 |             this.flame.visible = true;
186 | 
187 |             //  Boom
188 |             this.add.tween(this.flame).to( { alpha: 0 }, 100, "Linear", true);
189 | 
190 |             //  So we can see what's going on when the bullet leaves the screen
191 |             this.camera.follow(this.bullet);
192 | 
193 |             //  Our launch trajectory is based on the angle of the turret and the power
194 |             this.physics.arcade.velocityFromRotation(this.turret.rotation, this.power, this.bullet.body.velocity);
195 | 
196 |         },
197 | 
198 |         /**
199 |          * Called by physics.arcade.overlap if the bullet and a target overlap
200 |          *
201 |          * @method hitTarget
202 |          * @param {Phaser.Sprite} bullet - A reference to the bullet (same as this.bullet)
203 |          * @param {Phaser.Sprite} target - The target the bullet hit
204 |          */
205 |         hitTarget: function (bullet, target) {
206 | 
207 |             this.emitter.at(target);
208 |             this.emitter.explode(2000, 10);
209 | 
210 |             target.kill();
211 | 
212 |             this.removeBullet(true);
213 | 
214 |         },
215 | 
216 |         /**
217 |          * Removes the bullet, stops the camera following and tweens the camera back to the tank.
218 |          * Have put this into its own method as it's called from several places.
219 |          *
220 |          * @method removeBullet
221 |          */
222 |         removeBullet: function (hasExploded) {
223 | 
224 |             if (typeof hasExploded === 'undefined') { hasExploded = false; }
225 | 
226 |             this.bullet.kill();
227 |             this.camera.follow();
228 | 
229 |             var delay = 1000;
230 | 
231 |             if (hasExploded)
232 |             {
233 |                 delay = 2000;
234 |             }
235 | 
236 |             this.add.tween(this.camera).to( { x: 0 }, 1000, "Quint", true, delay);
237 | 
238 |         },
239 | 
240 |         /**
241 |          * Core update loop. Handles collision checks and player input.
242 |          *
243 |          * @method update
244 |          */
245 |         update: function () {
246 | 
247 |             //  If the bullet is in flight we don't let them control anything
248 |             if (this.bullet.exists)
249 |             {
250 |                 //  Bullet vs. the Targets
251 |                 this.physics.arcade.overlap(this.bullet, this.targets, this.hitTarget, null, this);
252 | 
253 |                 //  Bullet vs. the land
254 |                 this.bulletVsLand();
255 |             }
256 |             else
257 |             {
258 |                 //  Allow them to set the power between 100 and 600
259 |                 if (this.cursors.left.isDown && this.power > 100)
260 |                 {
261 |                     this.power -= 2;
262 |                 }
263 |                 else if (this.cursors.right.isDown && this.power < 600)
264 |                 {
265 |                     this.power += 2;
266 |                 }
267 | 
268 |                 //  Allow them to set the angle, between -90 (straight up) and 0 (facing to the right)
269 |                 if (this.cursors.up.isDown && this.turret.angle > -90)
270 |                 {
271 |                     this.turret.angle--;
272 |                 }
273 |                 else if (this.cursors.down.isDown && this.turret.angle < 0)
274 |                 {
275 |                     this.turret.angle++;
276 |                 }
277 | 
278 |                 //  Update the text
279 |                 this.powerText.text = 'Power: ' + this.power;
280 |             }
281 | 
282 |         }
283 | 
284 |     };
285 | 
286 |     game.state.add('Game', PhaserGame, true);
287 | 
288 |     </script>
289 | 
290 |     <a href="http://phaser.io"><img src="http://files.phaser.io.s3.amazonaws.com/codingtips/issue001/phaser-tips-header1.png" title="Phaser Coding Tips Weekly" style="margin-top: 8px" /></a>
291 | 
292 | </body>
293 | </html>


--------------------------------------------------------------------------------
/issue-003/assets/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-003/assets/background.png


--------------------------------------------------------------------------------
/issue-003/assets/clouds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-003/assets/clouds.png


--------------------------------------------------------------------------------
/issue-003/assets/dude.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-003/assets/dude.png


--------------------------------------------------------------------------------
/issue-003/assets/ice-platform.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-003/assets/ice-platform.png


--------------------------------------------------------------------------------
/issue-003/assets/platform.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-003/assets/platform.png


--------------------------------------------------------------------------------
/issue-003/assets/trees.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-003/assets/trees.png


--------------------------------------------------------------------------------
/issue-003/jumpup.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <head>
  4 |     <title>Platforms - JumpUp!</title>
  5 |     <meta charset="utf-8">
  6 |     <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
  7 | </head>
  8 | <body>
  9 | 
 10 |     <div id="game"></div>
 11 | 
 12 |     <script type="text/javascript">
 13 | 
 14 |     var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'game');
 15 | 
 16 |     var PhaserGame = function () {
 17 | 
 18 |         this.player = null;
 19 |         this.platforms = null;
 20 |         this.sky = null;
 21 | 
 22 |         this.facing = 'left';
 23 |         this.edgeTimer = 0;
 24 |         this.jumpTimer = 0;
 25 | 
 26 |         this.wasStanding = false;
 27 |         this.cursors = null;
 28 | 
 29 |     };
 30 | 
 31 |     PhaserGame.prototype = {
 32 | 
 33 |         init: function () {
 34 | 
 35 |             this.game.renderer.renderSession.roundPixels = true;
 36 | 
 37 |             this.world.resize(640, 2000);
 38 | 
 39 |             this.physics.startSystem(Phaser.Physics.ARCADE);
 40 | 
 41 |             this.physics.arcade.gravity.y = 750;
 42 |             this.physics.arcade.skipQuadTree = false;
 43 | 
 44 |         },
 45 | 
 46 |         preload: function () {
 47 | 
 48 |             //  We need this because the assets are on Amazon S3
 49 |             //  Remove the next 2 lines if running locally
 50 |             // this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue003/';
 51 |             this.load.crossOrigin = 'anonymous';
 52 | 
 53 |             this.load.image('trees', 'assets/trees.png');
 54 |             this.load.image('clouds', 'assets/clouds.png');
 55 |             this.load.image('platform', 'assets/platform.png');
 56 |             this.load.image('ice-platform', 'assets/ice-platform.png');
 57 |             this.load.spritesheet('dude', 'assets/dude.png', 32, 48);
 58 | 
 59 |             //  Note: Graphics are Copyright 2015 Photon Storm Ltd.
 60 | 
 61 |         },
 62 | 
 63 |         create: function () {
 64 | 
 65 |             this.stage.backgroundColor = '#2f9acc';
 66 | 
 67 |             this.sky = this.add.tileSprite(0, 0, 640, 480, 'clouds');
 68 |             this.sky.fixedToCamera = true;
 69 | 
 70 |             this.add.sprite(0, 1906, 'trees');
 71 | 
 72 |             this.platforms = this.add.physicsGroup();
 73 | 
 74 |             var x = 0;
 75 |             var y = 64;
 76 | 
 77 |             for (var i = 0; i < 19; i++)
 78 |             {
 79 |                 var type = i % 2 === 1 ? 'platform' : 'ice-platform';
 80 |                 var platform = this.platforms.create(x, y, type);
 81 | 
 82 |                 //  Set a random speed between 50 and 200
 83 |                 platform.body.velocity.x = this.rnd.between(100, 150);
 84 | 
 85 |                 //  Inverse it?
 86 |                 if (Math.random() > 0.5)
 87 |                 {
 88 |                     platform.body.velocity.x *= -1;
 89 |                 }
 90 | 
 91 |                 x += 200;
 92 | 
 93 |                 if (x >= 600)
 94 |                 {
 95 |                     x = 0;
 96 |                 }
 97 | 
 98 |                 y+= 104;
 99 |             }
100 | 
101 |             this.platforms.setAll('body.allowGravity', false);
102 |             this.platforms.setAll('body.immovable', true);
103 | 
104 |             this.player = this.add.sprite(320, 1952, 'dude');
105 | 
106 |             this.physics.arcade.enable(this.player);
107 | 
108 |             this.player.body.collideWorldBounds = true;
109 |             this.player.body.setSize(20, 32, 5, 16);
110 | 
111 |             this.player.animations.add('left', [0, 1, 2, 3], 10, true);
112 |             this.player.animations.add('turn', [4], 20, true);
113 |             this.player.animations.add('right', [5, 6, 7, 8], 10, true);
114 | 
115 |             this.camera.follow(this.player);
116 | 
117 |             this.cursors = this.input.keyboard.createCursorKeys();
118 | 
119 |         },
120 | 
121 |         wrapPlatform: function (platform) {
122 | 
123 |             if (platform.body.velocity.x < 0 && platform.x <= -160)
124 |             {
125 |                 platform.x = 640;
126 |             }
127 |             else if (platform.body.velocity.x > 0 && platform.x >= 640)
128 |             {
129 |                 platform.x = -160;
130 |             }
131 |     
132 |         },
133 | 
134 |         setFriction: function (player, platform) {
135 | 
136 |             if (platform.key === 'ice-platform')
137 |             {
138 |                 player.body.x -= platform.body.x - platform.body.prev.x;
139 |             }
140 | 
141 |         },
142 | 
143 |         update: function () {
144 | 
145 |             this.sky.tilePosition.y = -(this.camera.y * 0.7);
146 | 
147 |             this.platforms.forEach(this.wrapPlatform, this);
148 | 
149 |             this.physics.arcade.collide(this.player, this.platforms, this.setFriction, null, this);
150 | 
151 |             //  Do this AFTER the collide check, or we won't have blocked/touching set
152 |             var standing = this.player.body.blocked.down || this.player.body.touching.down;
153 | 
154 |             this.player.body.velocity.x = 0;
155 | 
156 |             if (this.cursors.left.isDown)
157 |             {
158 |                 this.player.body.velocity.x = -200;
159 | 
160 |                 if (this.facing !== 'left')
161 |                 {
162 |                     this.player.play('left');
163 |                     this.facing = 'left';
164 |                 }
165 |             }
166 |             else if (this.cursors.right.isDown)
167 |             {
168 |                 this.player.body.velocity.x = 200;
169 | 
170 |                 if (this.facing !== 'right')
171 |                 {
172 |                     this.player.play('right');
173 |                     this.facing = 'right';
174 |                 }
175 |             }
176 |             else
177 |             {
178 |                 if (this.facing !== 'idle')
179 |                 {
180 |                     this.player.animations.stop();
181 | 
182 |                     if (this.facing === 'left')
183 |                     {
184 |                         this.player.frame = 0;
185 |                     }
186 |                     else
187 |                     {
188 |                         this.player.frame = 5;
189 |                     }
190 | 
191 |                     this.facing = 'idle';
192 |                 }
193 |             }
194 | 
195 |             //  No longer standing on the edge, but were
196 |             //  Give them a 250ms grace period to jump after falling
197 |             if (!standing && this.wasStanding)
198 |             {
199 |                 this.edgeTimer = this.time.time + 250;
200 |             }
201 | 
202 |             //  Allowed to jump?
203 |             if ((standing || this.time.time <= this.edgeTimer) && this.cursors.up.isDown && this.time.time > this.jumpTimer)
204 |             {
205 |                 this.player.body.velocity.y = -500;
206 |                 this.jumpTimer = this.time.time + 750;
207 |             }
208 | 
209 |             this.wasStanding = standing;
210 | 
211 |         }
212 | 
213 |     };
214 | 
215 |     game.state.add('Game', PhaserGame, true);
216 | 
217 |     </script>
218 | 
219 |     <a href="http://phaser.io"><img src="http://files.phaser.io.s3.amazonaws.com/codingtips/issue003/phaser-tips-header1.png" title="Phaser Coding Tips Weekly" style="margin-top: 8px" /></a>
220 | 
221 | </body>
222 | </html>


--------------------------------------------------------------------------------
/issue-003/phaser-tips-header1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-003/phaser-tips-header1.png


--------------------------------------------------------------------------------
/issue-003/platforms.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <head>
  4 |     <title>Platforms - Part 1</title>
  5 |     <meta charset="utf-8">
  6 |     <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
  7 | </head>
  8 | <body>
  9 | 
 10 |     <div id="game"></div>
 11 | 
 12 |     <script type="text/javascript">
 13 | 
 14 |     var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'game');
 15 | 
 16 |     var PhaserGame = function () {
 17 | 
 18 |         this.player = null;
 19 |         this.platforms = null;
 20 |         this.facing = 'left';
 21 |         this.jumpTimer = 0;
 22 |         this.cursors = null;
 23 | 
 24 |     };
 25 | 
 26 |     PhaserGame.prototype = {
 27 | 
 28 |         init: function () {
 29 | 
 30 |             this.game.renderer.renderSession.roundPixels = true;
 31 | 
 32 |             this.physics.startSystem(Phaser.Physics.ARCADE);
 33 | 
 34 |             this.physics.arcade.gravity.y = 800;
 35 | 
 36 |         },
 37 | 
 38 |         preload: function () {
 39 | 
 40 |             //  We need this because the assets are on Amazon S3
 41 |             //  Remove the next 2 lines if running locally
 42 |             // this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue003/';
 43 |             this.load.crossOrigin = 'anonymous';
 44 | 
 45 |             this.load.image('background', 'assets/background.png');
 46 |             this.load.image('platform', 'assets/platform.png');
 47 |             this.load.image('ice-platform', 'assets/ice-platform.png');
 48 |             this.load.spritesheet('dude', 'assets/dude.png', 32, 48);
 49 | 
 50 |             //  Note: Graphics are Copyright 2015 Photon Storm Ltd.
 51 | 
 52 |         },
 53 | 
 54 |         create: function () {
 55 | 
 56 |             this.add.sprite(0, 0, 'background');
 57 | 
 58 |             this.platforms = this.add.physicsGroup();
 59 | 
 60 |             this.platforms.create(0, 64, 'ice-platform');
 61 |             this.platforms.create(200, 180, 'platform');
 62 |             this.platforms.create(400, 296, 'ice-platform');
 63 |             this.platforms.create(600, 412, 'platform');
 64 | 
 65 |             this.platforms.setAll('body.allowGravity', false);
 66 |             this.platforms.setAll('body.immovable', true);
 67 |             this.platforms.setAll('body.velocity.x', 100);
 68 | 
 69 |             this.player = this.add.sprite(320, 432, 'dude');
 70 | 
 71 |             this.physics.arcade.enable(this.player);
 72 | 
 73 |             this.player.body.collideWorldBounds = true;
 74 |             this.player.body.setSize(20, 32, 5, 16);
 75 | 
 76 |             this.player.animations.add('left', [0, 1, 2, 3], 10, true);
 77 |             this.player.animations.add('turn', [4], 20, true);
 78 |             this.player.animations.add('right', [5, 6, 7, 8], 10, true);
 79 | 
 80 |             this.cursors = this.input.keyboard.createCursorKeys();
 81 | 
 82 |         },
 83 | 
 84 |         wrapPlatform: function (platform) {
 85 | 
 86 |             if (platform.body.velocity.x < 0 && platform.x <= -160)
 87 |             {
 88 |                 platform.x = 640;
 89 |             }
 90 |             else if (platform.body.velocity.x > 0 && platform.x >= 640)
 91 |             {
 92 |                 platform.x = -160;
 93 |             }
 94 |     
 95 |         },
 96 | 
 97 |         setFriction: function (player, platform) {
 98 | 
 99 |             if (platform.key === 'ice-platform')
100 |             {
101 |                 player.body.x -= platform.body.x - platform.body.prev.x;
102 |             }
103 | 
104 |         },
105 | 
106 |         update: function () {
107 | 
108 |             this.platforms.forEach(this.wrapPlatform, this);
109 | 
110 |             this.physics.arcade.collide(this.player, this.platforms, this.setFriction, null, this);
111 | 
112 |             //  Do this AFTER the collide check, or we won't have blocked/touching set
113 |             var standing = this.player.body.blocked.down || this.player.body.touching.down;
114 | 
115 |             this.player.body.velocity.x = 0;
116 | 
117 |             if (this.cursors.left.isDown)
118 |             {
119 |                 this.player.body.velocity.x = -200;
120 | 
121 |                 if (this.facing !== 'left')
122 |                 {
123 |                     this.player.play('left');
124 |                     this.facing = 'left';
125 |                 }
126 |             }
127 |             else if (this.cursors.right.isDown)
128 |             {
129 |                 this.player.body.velocity.x = 200;
130 | 
131 |                 if (this.facing !== 'right')
132 |                 {
133 |                     this.player.play('right');
134 |                     this.facing = 'right';
135 |                 }
136 |             }
137 |             else
138 |             {
139 |                 if (this.facing !== 'idle')
140 |                 {
141 |                     this.player.animations.stop();
142 | 
143 |                     if (this.facing === 'left')
144 |                     {
145 |                         this.player.frame = 0;
146 |                     }
147 |                     else
148 |                     {
149 |                         this.player.frame = 5;
150 |                     }
151 | 
152 |                     this.facing = 'idle';
153 |                 }
154 |             }
155 |             
156 |             if (standing && this.cursors.up.isDown && this.time.time > this.jumpTimer)
157 |             {
158 |                 this.player.body.velocity.y = -500;
159 |                 this.jumpTimer = this.time.time + 750;
160 |             }
161 | 
162 |         }
163 | 
164 |     };
165 | 
166 |     game.state.add('Game', PhaserGame, true);
167 | 
168 |     </script>
169 | 
170 |     <a href="http://phaser.io"><img src="http://files.phaser.io.s3.amazonaws.com/codingtips/issue003/phaser-tips-header1.png" title="Phaser Coding Tips Weekly" style="margin-top: 8px" /></a>
171 | 
172 | </body>
173 | </html>


--------------------------------------------------------------------------------
/issue-004/assets/cloud-platform.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-004/assets/cloud-platform.png


--------------------------------------------------------------------------------
/issue-004/assets/clouds-h.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-004/assets/clouds-h.png


--------------------------------------------------------------------------------
/issue-004/assets/dude.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-004/assets/dude.png


--------------------------------------------------------------------------------
/issue-004/assets/platform.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-004/assets/platform.png


--------------------------------------------------------------------------------
/issue-004/assets/trees-h.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-004/assets/trees-h.png


--------------------------------------------------------------------------------
/issue-004/clouds.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <head>
  4 |     <title>Cloud Platforms</title>
  5 |     <meta charset="utf-8">
  6 |     <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
  7 | </head>
  8 | <body>
  9 | 
 10 |     <div id="game"></div>
 11 | 
 12 |     <script type="text/javascript">
 13 | 
 14 |     var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'game');
 15 | 
 16 |     var PhaserGame = function () {
 17 | 
 18 |         this.bg = null;
 19 |         this.trees = null;
 20 | 
 21 |         this.player = null;
 22 | 
 23 |         this.stationary = null;
 24 |         this.clouds = null;
 25 | 
 26 |         this.facing = 'left';
 27 |         this.jumpTimer = 0;
 28 |         this.cursors;
 29 |         this.locked = false;
 30 |         this.lockedTo = null;
 31 |         this.wasLocked = false;
 32 |         this.willJump = false;
 33 | 
 34 |     };
 35 | 
 36 |     PhaserGame.prototype = {
 37 | 
 38 |         init: function () {
 39 | 
 40 |             this.game.renderer.renderSession.roundPixels = true;
 41 | 
 42 |             this.world.resize(640*3, 480);
 43 | 
 44 |             this.physics.startSystem(Phaser.Physics.ARCADE);
 45 | 
 46 |             this.physics.arcade.gravity.y = 600;
 47 | 
 48 |         },
 49 | 
 50 |         preload: function () {
 51 | 
 52 |             //  We need this because the assets are on Amazon S3
 53 |             //  Remove the next 2 lines if running locally
 54 |             // this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue004/';
 55 |             this.load.crossOrigin = 'anonymous';
 56 | 
 57 |             this.load.image('trees', 'assets/trees-h.png');
 58 |             this.load.image('background', 'assets/clouds-h.png');
 59 |             this.load.image('platform', 'assets/platform.png');
 60 |             this.load.image('cloud-platform', 'assets/cloud-platform.png');
 61 |             this.load.spritesheet('dude', 'assets/dude.png', 32, 48);
 62 | 
 63 |             //  Note: Graphics are Copyright 2015 Photon Storm Ltd.
 64 | 
 65 |         },
 66 | 
 67 |         create: function () {
 68 | 
 69 |             this.background = this.add.tileSprite(0, 0, 640, 480, 'background');
 70 |             this.background.fixedToCamera = true;
 71 | 
 72 |             this.trees = this.add.tileSprite(0, 364, 640, 116, 'trees');
 73 |             this.trees.fixedToCamera = true;
 74 | 
 75 |             //  Platforms that don't move
 76 |             this.stationary = this.add.physicsGroup();
 77 | 
 78 |             this.stationary.create(0, 96, 'platform');
 79 |             this.stationary.create(632, 220, 'platform');
 80 |             this.stationary.create(1100, 300, 'platform');
 81 | 
 82 |             this.stationary.setAll('body.allowGravity', false);
 83 |             this.stationary.setAll('body.immovable', true);
 84 | 
 85 |             //  Platforms that move
 86 |             this.clouds = this.add.physicsGroup();
 87 | 
 88 |             var cloud1 = new CloudPlatform(this.game, 300, 450, 'cloud-platform', this.clouds);
 89 | 
 90 |             cloud1.addMotionPath([
 91 |                 { x: "+200", xSpeed: 2000, xEase: "Linear", y: "-200", ySpeed: 2000, yEase: "Sine.easeIn" },
 92 |                 { x: "-200", xSpeed: 2000, xEase: "Linear", y: "-200", ySpeed: 2000, yEase: "Sine.easeOut" },
 93 |                 { x: "-200", xSpeed: 2000, xEase: "Linear", y: "+200", ySpeed: 2000, yEase: "Sine.easeIn" },
 94 |                 { x: "+200", xSpeed: 2000, xEase: "Linear", y: "+200", ySpeed: 2000, yEase: "Sine.easeOut" }
 95 |             ]);
 96 | 
 97 |             var cloud2 = new CloudPlatform(this.game, 800, 96, 'cloud-platform', this.clouds);
 98 | 
 99 |             cloud2.addMotionPath([
100 |                 { x: "+0", xSpeed: 2000, xEase: "Linear", y: "+300", ySpeed: 2000, yEase: "Sine.easeIn" },
101 |                 { x: "-0", xSpeed: 2000, xEase: "Linear", y: "-300", ySpeed: 2000, yEase: "Sine.easeOut" }
102 |             ]);
103 | 
104 |             var cloud3 = new CloudPlatform(this.game, 1300, 290, 'cloud-platform', this.clouds);
105 | 
106 |             cloud3.addMotionPath([
107 |                 { x: "+500", xSpeed: 4000, xEase: "Expo.easeIn", y: "-200", ySpeed: 3000, yEase: "Linear" },
108 |                 { x: "-500", xSpeed: 4000, xEase: "Expo.easeOut", y: "+200", ySpeed: 3000, yEase: "Linear" }
109 |             ]);
110 | 
111 |             //  The Player
112 |             this.player = this.add.sprite(32, 0, 'dude');
113 | 
114 |             this.physics.arcade.enable(this.player);
115 | 
116 |             this.player.body.collideWorldBounds = true;
117 |             this.player.body.setSize(20, 32, 5, 16);
118 | 
119 |             this.player.animations.add('left', [0, 1, 2, 3], 10, true);
120 |             this.player.animations.add('turn', [4], 20, true);
121 |             this.player.animations.add('right', [5, 6, 7, 8], 10, true);
122 | 
123 |             this.camera.follow(this.player);
124 | 
125 |             this.cursors = this.input.keyboard.createCursorKeys();
126 | 
127 |             this.clouds.callAll('start');
128 | 
129 |         },
130 | 
131 |         customSep: function (player, platform) {
132 | 
133 |             if (!this.locked && player.body.velocity.y > 0)
134 |             {
135 |                 this.locked = true;
136 |                 this.lockedTo = platform;
137 |                 platform.playerLocked = true;
138 | 
139 |                 player.body.velocity.y = 0;
140 |             }
141 | 
142 |         },
143 | 
144 |         checkLock: function () {
145 | 
146 |             this.player.body.velocity.y = 0;
147 | 
148 |             //  If the player has walked off either side of the platform then they're no longer locked to it
149 |             if (this.player.body.right < this.lockedTo.body.x || this.player.body.x > this.lockedTo.body.right)
150 |             {
151 |                 this.cancelLock();
152 |             }
153 | 
154 |         },
155 | 
156 |         cancelLock: function () {
157 | 
158 |             this.wasLocked = true;
159 |             this.locked = false;
160 | 
161 |         },
162 | 
163 |         preRender: function () {
164 | 
165 |             if (this.game.paused)
166 |             {
167 |                 //  Because preRender still runs even if your game pauses!
168 |                 return;
169 |             }
170 | 
171 |             if (this.locked || this.wasLocked)
172 |             {
173 |                 this.player.x += this.lockedTo.deltaX;
174 |                 this.player.y = this.lockedTo.y - 48;
175 | 
176 |                 if (this.player.body.velocity.x !== 0)
177 |                 {
178 |                     this.player.body.velocity.y = 0;
179 |                 }
180 |             }
181 | 
182 |             if (this.willJump)
183 |             {
184 |                 this.willJump = false;
185 | 
186 |                 if (this.lockedTo && this.lockedTo.deltaY < 0 && this.wasLocked)
187 |                 {
188 |                     //  If the platform is moving up we add its velocity to the players jump
189 |                     this.player.body.velocity.y = -300 + (this.lockedTo.deltaY * 10);
190 |                 }
191 |                 else
192 |                 {
193 |                     this.player.body.velocity.y = -300;
194 |                 }
195 | 
196 |                 this.jumpTimer = this.time.time + 750;
197 |             }
198 | 
199 |             if (this.wasLocked)
200 |             {
201 |                 this.wasLocked = false;
202 |                 this.lockedTo.playerLocked = false;
203 |                 this.lockedTo = null;
204 |             }
205 | 
206 |         },
207 | 
208 |         update: function () {
209 | 
210 |             this.background.tilePosition.x = -(this.camera.x * 0.7);
211 |             this.trees.tilePosition.x = -(this.camera.x * 0.9);
212 | 
213 |             this.physics.arcade.collide(this.player, this.stationary);
214 |             this.physics.arcade.collide(this.player, this.clouds, this.customSep, null, this);
215 | 
216 |             //  Do this AFTER the collide check, or we won't have blocked/touching set
217 |             var standing = this.player.body.blocked.down || this.player.body.touching.down || this.locked;
218 | 
219 |             this.player.body.velocity.x = 0;
220 | 
221 |             if (this.cursors.left.isDown)
222 |             {
223 |                 this.player.body.velocity.x = -150;
224 | 
225 |                 if (this.facing !== 'left')
226 |                 {
227 |                     this.player.play('left');
228 |                     this.facing = 'left';
229 |                 }
230 |             }
231 |             else if (this.cursors.right.isDown)
232 |             {
233 |                 this.player.body.velocity.x = 150;
234 | 
235 |                 if (this.facing !== 'right')
236 |                 {
237 |                     this.player.play('right');
238 |                     this.facing = 'right';
239 |                 }
240 |             }
241 |             else
242 |             {
243 |                 if (this.facing !== 'idle')
244 |                 {
245 |                     this.player.animations.stop();
246 | 
247 |                     if (this.facing === 'left')
248 |                     {
249 |                         this.player.frame = 0;
250 |                     }
251 |                     else
252 |                     {
253 |                         this.player.frame = 5;
254 |                     }
255 | 
256 |                     this.facing = 'idle';
257 |                 }
258 |             }
259 |             
260 |             if (standing && this.cursors.up.isDown && this.time.time > this.jumpTimer)
261 |             {
262 |                 if (this.locked)
263 |                 {
264 |                     this.cancelLock();
265 |                 }
266 | 
267 |                 this.willJump = true;
268 |             }
269 | 
270 |             if (this.locked)
271 |             {
272 |                 this.checkLock();
273 |             }
274 | 
275 |         }
276 | 
277 |     };
278 | 
279 |     CloudPlatform = function (game, x, y, key, group) {
280 | 
281 |         if (typeof group === 'undefined') { group = game.world; }
282 | 
283 |         Phaser.Sprite.call(this, game, x, y, key);
284 | 
285 |         game.physics.arcade.enable(this);
286 | 
287 |         this.anchor.x = 0.5;
288 | 
289 |         this.body.customSeparateX = true;
290 |         this.body.customSeparateY = true;
291 |         this.body.allowGravity = false;
292 |         this.body.immovable = true;
293 | 
294 |         this.playerLocked = false;
295 | 
296 |         group.add(this);
297 | 
298 |     };
299 | 
300 |     CloudPlatform.prototype = Object.create(Phaser.Sprite.prototype);
301 |     CloudPlatform.prototype.constructor = CloudPlatform;
302 | 
303 |     CloudPlatform.prototype.addMotionPath = function (motionPath) {
304 | 
305 |         this.tweenX = this.game.add.tween(this.body);
306 |         this.tweenY = this.game.add.tween(this.body);
307 | 
308 |         //  motionPath is an array containing objects with this structure
309 |         //  [
310 |         //   { x: "+200", xSpeed: 2000, xEase: "Linear", y: "-200", ySpeed: 2000, yEase: "Sine.easeIn" }
311 |         //  ]
312 | 
313 |         for (var i = 0; i < motionPath.length; i++)
314 |         {
315 |             this.tweenX.to( { x: motionPath[i].x }, motionPath[i].xSpeed, motionPath[i].xEase);
316 |             this.tweenY.to( { y: motionPath[i].y }, motionPath[i].ySpeed, motionPath[i].yEase);
317 |         }
318 | 
319 |         this.tweenX.loop();
320 |         this.tweenY.loop();
321 | 
322 |     };
323 | 
324 |     CloudPlatform.prototype.start = function () {
325 | 
326 |         this.tweenX.start();
327 |         this.tweenY.start();
328 | 
329 |     };
330 | 
331 |     CloudPlatform.prototype.stop = function () {
332 | 
333 |         this.tweenX.stop();
334 |         this.tweenY.stop();
335 | 
336 |     };
337 | 
338 |     game.state.add('Game', PhaserGame, true);
339 | 
340 |     </script>
341 | 
342 |     <a href="http://phaser.io"><img src="http://files.phaser.io.s3.amazonaws.com/codingtips/issue004/phaser-tips-header1.png" title="Phaser Coding Tips Weekly" style="margin-top: 8px" /></a>
343 | 
344 | </body>
345 | </html>


--------------------------------------------------------------------------------
/issue-004/phaser-tips-header1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-004/phaser-tips-header1.png


--------------------------------------------------------------------------------
/issue-005/assets/car.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-005/assets/car.png


--------------------------------------------------------------------------------
/issue-005/assets/dot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-005/assets/dot.png


--------------------------------------------------------------------------------
/issue-005/assets/maze.json:
--------------------------------------------------------------------------------
 1 | { "height":15,
 2 |  "layers":[
 3 |         {
 4 |          "data":[20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 1, 20, 1, 1, 1, 1, 1, 1, 20, 1, 1, 1, 1, 1, 1, 1, 1, 1, 20, 20, 1, 20, 1, 20, 20, 20, 20, 20, 20, 1, 20, 20, 20, 20, 20, 20, 20, 1, 20, 20, 1, 20, 1, 20, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 20, 1, 20, 1, 20, 20, 1, 20, 1, 20, 1, 20, 20, 20, 20, 20, 1, 20, 20, 1, 20, 1, 20, 1, 20, 20, 1, 1, 1, 20, 1, 20, 1, 1, 1, 20, 1, 1, 20, 1, 20, 1, 1, 1, 20, 20, 1, 20, 1, 1, 1, 20, 1, 20, 1, 20, 1, 20, 20, 20, 20, 20, 20, 1, 20, 20, 1, 20, 1, 20, 1, 20, 1, 20, 1, 20, 1, 1, 1, 1, 1, 1, 20, 1, 20, 20, 1, 20, 20, 20, 1, 20, 1, 20, 1, 20, 1, 20, 20, 20, 20, 1, 20, 1, 20, 20, 1, 1, 1, 1, 1, 20, 1, 20, 1, 20, 1, 1, 1, 1, 20, 1, 20, 1, 20, 20, 1, 20, 20, 20, 20, 20, 1, 20, 20, 20, 1, 20, 20, 20, 20, 1, 20, 1, 20, 20, 1, 20, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 20, 1, 1, 1, 20, 1, 20, 20, 1, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 1, 20, 20, 20, 20, 20, 1, 20, 20, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
 5 |          "height":15,
 6 |          "name":"Tile Layer 1",
 7 |          "opacity":1,
 8 |          "type":"tilelayer",
 9 |          "visible":false,
10 |          "width":20,
11 |          "x":0,
12 |          "y":0
13 |         }, 
14 |         {
15 |          "data":[20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 1, 20, 1, 20, 1, 20, 1, 20, 1, 20, 20, 20, 20, 20, 1, 1, 20, 20, 20, 20, 1, 1, 1, 20, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 20, 20, 1, 20, 1, 20, 20, 1, 20, 20, 20, 20, 20, 1, 20, 20, 20, 20, 20, 1, 20, 20, 1, 20, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 20, 1, 20, 20, 1, 20, 20, 20, 20, 20, 20, 20, 1, 20, 20, 20, 20, 1, 20, 1, 20, 1, 20, 20, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 20, 1, 20, 20, 1, 20, 20, 20, 1, 20, 20, 20, 20, 20, 20, 20, 1, 20, 1, 1, 1, 20, 20, 20, 1, 20, 1, 20, 1, 1, 1, 20, 1, 1, 1, 20, 1, 20, 1, 20, 1, 1, 20, 20, 1, 20, 1, 20, 1, 20, 1, 20, 1, 20, 1, 20, 1, 20, 20, 20, 20, 1, 20, 20, 1, 20, 1, 20, 1, 20, 1, 20, 1, 20, 1, 20, 1, 20, 1, 1, 1, 1, 20, 20, 1, 20, 1, 1, 1, 20, 1, 1, 1, 20, 1, 1, 1, 1, 1, 20, 20, 1, 20, 20, 1, 20, 20, 1, 20, 20, 20, 1, 20, 20, 20, 20, 20, 20, 1, 20, 1, 1, 20, 20, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
16 |          "height":15,
17 |          "name":"Tile Layer 2",
18 |          "opacity":1,
19 |          "type":"tilelayer",
20 |          "visible":true,
21 |          "width":20,
22 |          "x":0,
23 |          "y":0
24 |         }],
25 |  "orientation":"orthogonal",
26 |  "properties":
27 |     {
28 | 
29 |     },
30 |  "tileheight":32,
31 |  "tilesets":[
32 |         {
33 |          "firstgid":1,
34 |          "image":"tiles.png",
35 |          "imageheight":320,
36 |          "imagewidth":448,
37 |          "margin":0,
38 |          "name":"tiles",
39 |          "properties":
40 |             {
41 | 
42 |             },
43 |          "spacing":0,
44 |          "tileheight":32,
45 |          "tilewidth":32
46 |         }],
47 |  "tilewidth":32,
48 |  "version":1,
49 |  "width":20
50 | }


--------------------------------------------------------------------------------
/issue-005/assets/pacman-map.json:
--------------------------------------------------------------------------------
 1 | { "height":31,
 2 |  "layers":[
 3 |         {
 4 |          "data":[1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 8, 9, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 10, 6, 7, 11, 12, 12, 13, 7, 11, 12, 12, 12, 13, 7, 8, 9, 7, 11, 12, 12, 12, 13, 7, 11, 12, 12, 13, 7, 10, 6, 7, 8, 14, 14, 9, 7, 8, 14, 14, 14, 9, 7, 8, 9, 7, 8, 14, 14, 14, 9, 7, 8, 14, 14, 9, 7, 10, 6, 7, 15, 16, 16, 17, 7, 15, 16, 16, 16, 17, 7, 15, 17, 7, 15, 16, 16, 16, 17, 7, 15, 16, 16, 17, 7, 10, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 10, 6, 7, 11, 12, 12, 13, 7, 11, 13, 7, 11, 12, 12, 12, 12, 12, 12, 13, 7, 11, 13, 7, 11, 12, 12, 13, 7, 10, 6, 7, 15, 16, 16, 17, 7, 8, 9, 7, 15, 16, 16, 18, 19, 16, 16, 17, 7, 8, 9, 7, 15, 16, 16, 17, 7, 10, 6, 7, 7, 7, 7, 7, 7, 8, 9, 7, 7, 7, 7, 8, 9, 7, 7, 7, 7, 8, 9, 7, 7, 7, 7, 7, 7, 10, 20, 21, 21, 21, 21, 13, 7, 8, 22, 12, 12, 13, 14, 8, 9, 14, 11, 12, 12, 23, 9, 7, 11, 21, 21, 21, 21, 24, 14, 14, 14, 14, 14, 6, 7, 8, 19, 16, 16, 17, 14, 15, 17, 14, 15, 16, 16, 18, 9, 7, 10, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 6, 7, 8, 9, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 8, 9, 7, 10, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 6, 7, 8, 9, 14, 25, 21, 26, 14, 14, 27, 21, 28, 14, 8, 9, 7, 10, 14, 14, 14, 14, 14, 1, 2, 2, 2, 2, 17, 7, 15, 17, 14, 10, 14, 14, 14, 14, 14, 14, 6, 14, 15, 17, 7, 15, 2, 2, 2, 2, 5, 6, 7, 7, 7, 7, 7, 7, 14, 14, 14, 10, 14, 14, 14, 14, 14, 14, 6, 14, 14, 14, 7, 7, 7, 7, 7, 7, 10, 20, 21, 21, 21, 21, 13, 7, 11, 13, 14, 10, 14, 14, 14, 14, 14, 14, 6, 14, 11, 13, 7, 11, 21, 21, 21, 21, 24, 14, 14, 14, 14, 14, 6, 7, 8, 9, 14, 29, 2, 2, 2, 2, 2, 2, 30, 14, 8, 9, 7, 10, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 6, 7, 8, 9, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 8, 9, 7, 10, 14, 14, 14, 14, 14, 14, 14, 14, 14, 14, 6, 7, 8, 9, 14, 11, 12, 12, 12, 12, 12, 12, 13, 14, 8, 9, 7, 10, 14, 14, 14, 14, 14, 1, 2, 2, 2, 2, 17, 7, 15, 17, 14, 15, 16, 16, 18, 19, 16, 16, 17, 14, 15, 17, 7, 15, 2, 2, 2, 2, 5, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 8, 9, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 10, 6, 7, 11, 12, 12, 13, 7, 11, 12, 12, 12, 13, 7, 8, 9, 7, 11, 12, 12, 12, 13, 7, 11, 12, 12, 13, 7, 10, 6, 7, 15, 16, 18, 9, 7, 15, 16, 16, 16, 17, 7, 15, 17, 7, 15, 16, 16, 16, 17, 7, 8, 19, 16, 17, 7, 10, 6, 7, 7, 7, 8, 9, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 8, 9, 7, 7, 7, 10, 31, 12, 13, 7, 8, 9, 7, 11, 13, 7, 11, 12, 12, 12, 12, 12, 12, 13, 7, 11, 13, 7, 8, 9, 7, 11, 12, 32, 33, 16, 17, 7, 15, 17, 7, 8, 9, 7, 15, 16, 16, 18, 19, 16, 16, 17, 7, 8, 9, 7, 15, 17, 7, 15, 16, 34, 6, 7, 7, 7, 7, 7, 7, 8, 9, 7, 7, 7, 7, 8, 9, 7, 7, 7, 7, 8, 9, 7, 7, 7, 7, 7, 7, 10, 6, 7, 11, 12, 12, 12, 12, 23, 22, 12, 12, 13, 7, 8, 9, 7, 11, 12, 12, 23, 22, 12, 12, 12, 12, 13, 7, 10, 6, 7, 15, 16, 16, 16, 16, 16, 16, 16, 16, 17, 7, 15, 17, 7, 15, 16, 16, 16, 16, 16, 16, 16, 16, 17, 7, 10, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 10, 20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 24],
 5 |          "height":31,
 6 |          "name":"Pacman",
 7 |          "opacity":1,
 8 |          "type":"tilelayer",
 9 |          "visible":true,
10 |          "width":28,
11 |          "x":0,
12 |          "y":0
13 |         }],
14 |  "orientation":"orthogonal",
15 |  "properties":
16 |     {
17 | 
18 |     },
19 |  "tileheight":16,
20 |  "tilesets":[
21 |         {
22 |          "firstgid":1,
23 |          "image":"..\/pacman-tiles.png",
24 |          "imageheight":48,
25 |          "imagewidth":256,
26 |          "margin":0,
27 |          "name":"pacman-tiles",
28 |          "properties":
29 |             {
30 | 
31 |             },
32 |          "spacing":0,
33 |          "tileheight":16,
34 |          "tilewidth":16
35 |         }],
36 |  "tilewidth":16,
37 |  "version":1,
38 |  "width":28
39 | }


--------------------------------------------------------------------------------
/issue-005/assets/pacman-tiles.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-005/assets/pacman-tiles.png


--------------------------------------------------------------------------------
/issue-005/assets/pacman.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-005/assets/pacman.png


--------------------------------------------------------------------------------
/issue-005/assets/tiles.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-005/assets/tiles.png


--------------------------------------------------------------------------------
/issue-005/car.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <head>
  4 |     <title>Move it like Pacman</title>
  5 |     <meta charset="utf-8">
  6 |     <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
  7 | </head>
  8 | <body>
  9 | 
 10 |     <div id="game"></div>
 11 | 
 12 |     <script type="text/javascript">
 13 | 
 14 |     var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'game');
 15 | 
 16 |     var PhaserGame = function (game) {
 17 | 
 18 |         this.map = null;
 19 |         this.layer = null;
 20 |         this.car = null;
 21 | 
 22 |         this.safetile = 1;
 23 |         this.gridsize = 32;
 24 | 
 25 |         this.speed = 150;
 26 |         this.threshold = 3;
 27 |         this.turnSpeed = 150;
 28 | 
 29 |         this.marker = new Phaser.Point();
 30 |         this.turnPoint = new Phaser.Point();
 31 | 
 32 |         this.directions = [ null, null, null, null, null ];
 33 |         this.opposites = [ Phaser.NONE, Phaser.RIGHT, Phaser.LEFT, Phaser.DOWN, Phaser.UP ];
 34 | 
 35 |         this.current = Phaser.UP;
 36 |         this.turning = Phaser.NONE;
 37 | 
 38 |     };
 39 | 
 40 |     PhaserGame.prototype = {
 41 | 
 42 |         init: function () {
 43 | 
 44 |             this.physics.startSystem(Phaser.Physics.ARCADE);
 45 | 
 46 |         },
 47 | 
 48 |         preload: function () {
 49 | 
 50 |             //  We need this because the assets are on Amazon S3
 51 |             //  Remove the next 2 lines if running locally
 52 |             this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue005/';
 53 |             this.load.crossOrigin = 'anonymous';
 54 | 
 55 |             this.load.tilemap('map', 'assets/maze.json', null, Phaser.Tilemap.TILED_JSON);
 56 |             this.load.image('tiles', 'assets/tiles.png');
 57 |             this.load.image('car', 'assets/car.png');
 58 | 
 59 |             //  Note: Graphics are Copyright 2015 Photon Storm Ltd.
 60 | 
 61 |         },
 62 | 
 63 |         create: function () {
 64 | 
 65 |             this.map = this.add.tilemap('map');
 66 |             this.map.addTilesetImage('tiles', 'tiles');
 67 | 
 68 |             this.layer = this.map.createLayer('Tile Layer 1');
 69 | 
 70 |             this.map.setCollision(20, true, this.layer);
 71 | 
 72 |             this.car = this.add.sprite(48, 48, 'car');
 73 |             this.car.anchor.set(0.5);
 74 | 
 75 |             this.physics.arcade.enable(this.car);
 76 | 
 77 |             this.cursors = this.input.keyboard.createCursorKeys();
 78 | 
 79 |             this.move(Phaser.DOWN);
 80 | 
 81 |         },
 82 | 
 83 |         checkKeys: function () {
 84 | 
 85 |             if (this.cursors.left.isDown && this.current !== Phaser.LEFT)
 86 |             {
 87 |                 this.checkDirection(Phaser.LEFT);
 88 |             }
 89 |             else if (this.cursors.right.isDown && this.current !== Phaser.RIGHT)
 90 |             {
 91 |                 this.checkDirection(Phaser.RIGHT);
 92 |             }
 93 |             else if (this.cursors.up.isDown && this.current !== Phaser.UP)
 94 |             {
 95 |                 this.checkDirection(Phaser.UP);
 96 |             }
 97 |             else if (this.cursors.down.isDown && this.current !== Phaser.DOWN)
 98 |             {
 99 |                 this.checkDirection(Phaser.DOWN);
100 |             }
101 |             else
102 |             {
103 |                 //  This forces them to hold the key down to turn the corner
104 |                 this.turning = Phaser.NONE;
105 |             }
106 | 
107 |         },
108 | 
109 |         checkDirection: function (turnTo) {
110 | 
111 |             if (this.turning === turnTo || this.directions[turnTo] === null || this.directions[turnTo].index !== this.safetile)
112 |             {
113 |                 //  Invalid direction if they're already set to turn that way
114 |                 //  Or there is no tile there, or the tile isn't index a floor tile
115 |                 return;
116 |             }
117 | 
118 |             //  Check if they want to turn around and can
119 |             if (this.current === this.opposites[turnTo])
120 |             {
121 |                 this.move(turnTo);
122 |             }
123 |             else
124 |             {
125 |                 this.turning = turnTo;
126 | 
127 |                 this.turnPoint.x = (this.marker.x * this.gridsize) + (this.gridsize / 2);
128 |                 this.turnPoint.y = (this.marker.y * this.gridsize) + (this.gridsize / 2);
129 |             }
130 | 
131 |         },
132 | 
133 |         turn: function () {
134 | 
135 |             var cx = Math.floor(this.car.x);
136 |             var cy = Math.floor(this.car.y);
137 | 
138 |             //  This needs a threshold, because at high speeds you can't turn because the coordinates skip past
139 |             if (!this.math.fuzzyEqual(cx, this.turnPoint.x, this.threshold) || !this.math.fuzzyEqual(cy, this.turnPoint.y, this.threshold))
140 |             {
141 |                 return false;
142 |             }
143 | 
144 |             this.car.x = this.turnPoint.x;
145 |             this.car.y = this.turnPoint.y;
146 | 
147 |             this.car.body.reset(this.turnPoint.x, this.turnPoint.y);
148 | 
149 |             this.move(this.turning);
150 | 
151 |             this.turning = Phaser.NONE;
152 | 
153 |             return true;
154 | 
155 |         },
156 | 
157 |         move: function (direction) {
158 | 
159 |             var speed = this.speed;
160 | 
161 |             if (direction === Phaser.LEFT || direction === Phaser.UP)
162 |             {
163 |                 speed = -speed;
164 |             }
165 | 
166 |             if (direction === Phaser.LEFT || direction === Phaser.RIGHT)
167 |             {
168 |                 this.car.body.velocity.x = speed;
169 |             }
170 |             else
171 |             {
172 |                 this.car.body.velocity.y = speed;
173 |             }
174 | 
175 |             this.add.tween(this.car).to( { angle: this.getAngle(direction) }, this.turnSpeed, "Linear", true);
176 | 
177 |             this.current = direction;
178 | 
179 |         },
180 | 
181 |         getAngle: function (to) {
182 | 
183 |             //  About-face?
184 |             if (this.current === this.opposites[to])
185 |             {
186 |                 return "180";
187 |             }
188 | 
189 |             if ((this.current === Phaser.UP && to === Phaser.LEFT) ||
190 |                 (this.current === Phaser.DOWN && to === Phaser.RIGHT) ||
191 |                 (this.current === Phaser.LEFT && to === Phaser.DOWN) ||
192 |                 (this.current === Phaser.RIGHT && to === Phaser.UP))
193 |             {
194 |                 return "-90";
195 |             }
196 | 
197 |             return "90";
198 | 
199 |         },
200 | 
201 |         update: function () {
202 |           
203 |             this.physics.arcade.collide(this.car, this.layer);
204 | 
205 |             this.marker.x = this.math.snapToFloor(Math.floor(this.car.x), this.gridsize) / this.gridsize;
206 |             this.marker.y = this.math.snapToFloor(Math.floor(this.car.y), this.gridsize) / this.gridsize;
207 | 
208 |             //  Update our grid sensors
209 |             this.directions[1] = this.map.getTileLeft(this.layer.index, this.marker.x, this.marker.y);
210 |             this.directions[2] = this.map.getTileRight(this.layer.index, this.marker.x, this.marker.y);
211 |             this.directions[3] = this.map.getTileAbove(this.layer.index, this.marker.x, this.marker.y);
212 |             this.directions[4] = this.map.getTileBelow(this.layer.index, this.marker.x, this.marker.y);
213 | 
214 |             this.checkKeys();
215 | 
216 |             if (this.turning !== Phaser.NONE)
217 |             {
218 |                 this.turn();
219 |             }
220 | 
221 |         },
222 | 
223 |         render: function () {
224 | 
225 |             //  Un-comment this to see the debug drawing
226 | 
227 |             for (var t = 1; t < 5; t++)
228 |             {
229 |                 if (this.directions[t] === null)
230 |                 {
231 |                     continue;
232 |                 }
233 | 
234 |                 var color = 'rgba(0,255,0,0.3)';
235 | 
236 |                 if (this.directions[t].index !== this.safetile)
237 |                 {
238 |                     color = 'rgba(255,0,0,0.3)';
239 |                 }
240 | 
241 |                 if (t === this.current)
242 |                 {
243 |                     color = 'rgba(255,255,255,0.3)';
244 |                 }
245 | 
246 |                 this.game.debug.geom(new Phaser.Rectangle(this.directions[t].worldX, this.directions[t].worldY, 32, 32), color, true);
247 |             }
248 | 
249 |             this.game.debug.geom(this.turnPoint, '#ffff00');
250 | 
251 |         }
252 | 
253 |     };
254 | 
255 |     game.state.add('Game', PhaserGame, true);
256 | 
257 |     </script>
258 | 
259 |     <a href="http://phaser.io"><img src="http://files.phaser.io.s3.amazonaws.com/codingtips/issue005/phaser-tips-header1.png" title="Phaser Coding Tips Weekly" style="margin-top: 8px" /></a>
260 | 
261 | </body>
262 | </html>


--------------------------------------------------------------------------------
/issue-005/pacman.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <head>
  4 |     <title>Pacman</title>
  5 |     <meta charset="utf-8">
  6 |     <style>
  7 |         body {
  8 |             margin: 0;
  9 |             padding: 0;
 10 |             background-color: #000;
 11 |         }
 12 |     </style>
 13 |     <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
 14 | </head>
 15 | <body>
 16 | 
 17 |     <script type="text/javascript">
 18 | 
 19 |     var game = new Phaser.Game(448, 496, Phaser.AUTO);
 20 | 
 21 |     var Pacman = function (game) {
 22 | 
 23 |         this.map = null;
 24 |         this.layer = null;
 25 |         this.pacman = null;
 26 | 
 27 |         this.safetile = 14;
 28 |         this.gridsize = 16;
 29 | 
 30 |         this.speed = 150;
 31 |         this.threshold = 3;
 32 | 
 33 |         this.marker = new Phaser.Point();
 34 |         this.turnPoint = new Phaser.Point();
 35 | 
 36 |         this.directions = [ null, null, null, null, null ];
 37 |         this.opposites = [ Phaser.NONE, Phaser.RIGHT, Phaser.LEFT, Phaser.DOWN, Phaser.UP ];
 38 | 
 39 |         this.current = Phaser.NONE;
 40 |         this.turning = Phaser.NONE;
 41 | 
 42 |     };
 43 | 
 44 |     Pacman.prototype = {
 45 | 
 46 |         init: function () {
 47 | 
 48 |             this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
 49 |             this.scale.pageAlignHorizontally = true;
 50 |             this.scale.pageAlignVertically = true;
 51 | 
 52 |             Phaser.Canvas.setImageRenderingCrisp(this.game.canvas);
 53 | 
 54 |             this.physics.startSystem(Phaser.Physics.ARCADE);
 55 | 
 56 |         },
 57 | 
 58 |         preload: function () {
 59 | 
 60 |             //  We need this because the assets are on Amazon S3
 61 |             //  Remove the next 2 lines if running locally
 62 |             this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue005/';
 63 |             this.load.crossOrigin = 'anonymous';
 64 | 
 65 |             this.load.image('dot', 'assets/dot.png');
 66 |             this.load.image('tiles', 'assets/pacman-tiles.png');
 67 |             this.load.spritesheet('pacman', 'assets/pacman.png', 32, 32);
 68 |             this.load.tilemap('map', 'assets/pacman-map.json', null, Phaser.Tilemap.TILED_JSON);
 69 | 
 70 |             //  Needless to say, graphics (C)opyright Namco
 71 | 
 72 |         },
 73 | 
 74 |         create: function () {
 75 | 
 76 |             this.map = this.add.tilemap('map');
 77 |             this.map.addTilesetImage('pacman-tiles', 'tiles');
 78 | 
 79 |             this.layer = this.map.createLayer('Pacman');
 80 | 
 81 |             this.dots = this.add.physicsGroup();
 82 | 
 83 |             this.map.createFromTiles(7, this.safetile, 'dot', this.layer, this.dots);
 84 | 
 85 |             //  The dots will need to be offset by 6px to put them back in the middle of the grid
 86 |             this.dots.setAll('x', 6, false, false, 1);
 87 |             this.dots.setAll('y', 6, false, false, 1);
 88 | 
 89 |             //  Pacman should collide with everything except the safe tile
 90 |             this.map.setCollisionByExclusion([this.safetile], true, this.layer);
 91 | 
 92 |             //  Position Pacman at grid location 14x17 (the +8 accounts for his anchor)
 93 |             this.pacman = this.add.sprite((14 * 16) + 8, (17 * 16) + 8, 'pacman', 0);
 94 |             this.pacman.anchor.set(0.5);
 95 |             this.pacman.animations.add('munch', [0, 1, 2, 1], 20, true);
 96 | 
 97 |             this.physics.arcade.enable(this.pacman);
 98 |             this.pacman.body.setSize(16, 16, 0, 0);
 99 | 
100 |             this.cursors = this.input.keyboard.createCursorKeys();
101 | 
102 |             this.pacman.play('munch');
103 |             this.move(Phaser.LEFT);
104 | 
105 |         },
106 | 
107 |         checkKeys: function () {
108 | 
109 |             if (this.cursors.left.isDown && this.current !== Phaser.LEFT)
110 |             {
111 |                 this.checkDirection(Phaser.LEFT);
112 |             }
113 |             else if (this.cursors.right.isDown && this.current !== Phaser.RIGHT)
114 |             {
115 |                 this.checkDirection(Phaser.RIGHT);
116 |             }
117 |             else if (this.cursors.up.isDown && this.current !== Phaser.UP)
118 |             {
119 |                 this.checkDirection(Phaser.UP);
120 |             }
121 |             else if (this.cursors.down.isDown && this.current !== Phaser.DOWN)
122 |             {
123 |                 this.checkDirection(Phaser.DOWN);
124 |             }
125 |             else
126 |             {
127 |                 //  This forces them to hold the key down to turn the corner
128 |                 this.turning = Phaser.NONE;
129 |             }
130 | 
131 |         },
132 | 
133 |         checkDirection: function (turnTo) {
134 | 
135 |             if (this.turning === turnTo || this.directions[turnTo] === null || this.directions[turnTo].index !== this.safetile)
136 |             {
137 |                 //  Invalid direction if they're already set to turn that way
138 |                 //  Or there is no tile there, or the tile isn't index 1 (a floor tile)
139 |                 return;
140 |             }
141 | 
142 |             //  Check if they want to turn around and can
143 |             if (this.current === this.opposites[turnTo])
144 |             {
145 |                 this.move(turnTo);
146 |             }
147 |             else
148 |             {
149 |                 this.turning = turnTo;
150 | 
151 |                 this.turnPoint.x = (this.marker.x * this.gridsize) + (this.gridsize / 2);
152 |                 this.turnPoint.y = (this.marker.y * this.gridsize) + (this.gridsize / 2);
153 |             }
154 | 
155 |         },
156 | 
157 |         turn: function () {
158 | 
159 |             var cx = Math.floor(this.pacman.x);
160 |             var cy = Math.floor(this.pacman.y);
161 | 
162 |             //  This needs a threshold, because at high speeds you can't turn because the coordinates skip past
163 |             if (!this.math.fuzzyEqual(cx, this.turnPoint.x, this.threshold) || !this.math.fuzzyEqual(cy, this.turnPoint.y, this.threshold))
164 |             {
165 |                 return false;
166 |             }
167 | 
168 |             //  Grid align before turning
169 |             this.pacman.x = this.turnPoint.x;
170 |             this.pacman.y = this.turnPoint.y;
171 | 
172 |             this.pacman.body.reset(this.turnPoint.x, this.turnPoint.y);
173 | 
174 |             this.move(this.turning);
175 | 
176 |             this.turning = Phaser.NONE;
177 | 
178 |             return true;
179 | 
180 |         },
181 | 
182 |         move: function (direction) {
183 | 
184 |             var speed = this.speed;
185 | 
186 |             if (direction === Phaser.LEFT || direction === Phaser.UP)
187 |             {
188 |                 speed = -speed;
189 |             }
190 | 
191 |             if (direction === Phaser.LEFT || direction === Phaser.RIGHT)
192 |             {
193 |                 this.pacman.body.velocity.x = speed;
194 |             }
195 |             else
196 |             {
197 |                 this.pacman.body.velocity.y = speed;
198 |             }
199 | 
200 |             //  Reset the scale and angle (Pacman is facing to the right in the sprite sheet)
201 |             this.pacman.scale.x = 1;
202 |             this.pacman.angle = 0;
203 | 
204 |             if (direction === Phaser.LEFT)
205 |             {
206 |                 this.pacman.scale.x = -1;
207 |             }
208 |             else if (direction === Phaser.UP)
209 |             {
210 |                 this.pacman.angle = 270;
211 |             }
212 |             else if (direction === Phaser.DOWN)
213 |             {
214 |                 this.pacman.angle = 90;
215 |             }
216 | 
217 |             this.current = direction;
218 | 
219 |         },
220 | 
221 |         eatDot: function (pacman, dot) {
222 | 
223 |             dot.kill();
224 | 
225 |             if (this.dots.total === 0)
226 |             {
227 |                 this.dots.callAll('revive');
228 |             }
229 | 
230 |         },
231 | 
232 |         update: function () {
233 |           
234 |             this.physics.arcade.collide(this.pacman, this.layer);
235 |             this.physics.arcade.overlap(this.pacman, this.dots, this.eatDot, null, this);
236 | 
237 |             this.marker.x = this.math.snapToFloor(Math.floor(this.pacman.x), this.gridsize) / this.gridsize;
238 |             this.marker.y = this.math.snapToFloor(Math.floor(this.pacman.y), this.gridsize) / this.gridsize;
239 | 
240 |             //  Update our grid sensors
241 |             this.directions[1] = this.map.getTileLeft(this.layer.index, this.marker.x, this.marker.y);
242 |             this.directions[2] = this.map.getTileRight(this.layer.index, this.marker.x, this.marker.y);
243 |             this.directions[3] = this.map.getTileAbove(this.layer.index, this.marker.x, this.marker.y);
244 |             this.directions[4] = this.map.getTileBelow(this.layer.index, this.marker.x, this.marker.y);
245 | 
246 |             this.checkKeys();
247 | 
248 |             if (this.turning !== Phaser.NONE)
249 |             {
250 |                 this.turn();
251 |             }
252 | 
253 |         }
254 | 
255 |     };
256 | 
257 |     game.state.add('Game', Pacman, true);
258 | 
259 |     </script>
260 | 
261 | </body>
262 | </html>


--------------------------------------------------------------------------------
/issue-005/phaser-tips-header1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-005/phaser-tips-header1.png


--------------------------------------------------------------------------------
/issue-006/assets/casing.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-006/assets/casing.mp3


--------------------------------------------------------------------------------
/issue-006/assets/draw.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-006/assets/draw.png


--------------------------------------------------------------------------------
/issue-006/assets/fire.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-006/assets/fire.mp3


--------------------------------------------------------------------------------
/issue-006/assets/font.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-006/assets/font.png


--------------------------------------------------------------------------------
/issue-006/assets/font.xml:
--------------------------------------------------------------------------------
 1 | <font>
 2 |   <info face="font" size="72" bold="0" italic="0" charset="" unicode="" stretchH="100" smooth="1" aa="1" padding="4,4,4,4" spacing="0,0" outline="0"/>
 3 |   <common lineHeight="99" base="72" scaleW="541" scaleH="505" pages="1" packed="0"/>
 4 |   <pages>
 5 |     <page id="0" file="font.png"/>
 6 |   </pages>
 7 |   <chars count="69">
 8 |     <char id="32" x="4" y="4" width="0" height="0" xoffset="0" yoffset="72" xadvance="27" page="0" chnl="15"/>
 9 |     <char id="44" x="4" y="8" width="15" height="24" xoffset="4" yoffset="63" xadvance="27" page="0" chnl="15"/>
10 |     <char id="46" x="4" y="36" width="11" height="11" xoffset="0" yoffset="63" xadvance="18" page="0" chnl="15"/>
11 |     <char id="45" x="4" y="51" width="38" height="11" xoffset="0" yoffset="36" xadvance="45" page="0" chnl="15"/>
12 |     <char id="33" x="4" y="66" width="11" height="65" xoffset="9" yoffset="9" xadvance="27" page="0" chnl="15"/>
13 |     <char id="40" x="4" y="135" width="24" height="83" xoffset="0" yoffset="0" xadvance="27" page="0" chnl="15"/>
14 |     <char id="41" x="4" y="222" width="24" height="83" xoffset="-5" yoffset="0" xadvance="27" page="0" chnl="15"/>
15 |     <char id="48" x="19" y="66" width="47" height="65" xoffset="0" yoffset="9" xadvance="54" page="0" chnl="15"/>
16 |     <char id="49" x="4" y="309" width="29" height="65" xoffset="0" yoffset="9" xadvance="36" page="0" chnl="15"/>
17 |     <char id="50" x="4" y="378" width="47" height="65" xoffset="0" yoffset="9" xadvance="54" page="0" chnl="15"/>
18 |     <char id="51" x="32" y="135" width="38" height="65" xoffset="0" yoffset="9" xadvance="45" page="0" chnl="15"/>
19 |     <char id="52" x="32" y="204" width="47" height="74" xoffset="0" yoffset="9" xadvance="54" page="0" chnl="15"/>
20 |     <char id="53" x="37" y="282" width="38" height="65" xoffset="0" yoffset="9" xadvance="45" page="0" chnl="15"/>
21 |     <char id="54" x="70" y="4" width="47" height="65" xoffset="0" yoffset="9" xadvance="54" page="0" chnl="15"/>
22 |     <char id="55" x="74" y="73" width="47" height="69" xoffset="0" yoffset="9" xadvance="54" page="0" chnl="15"/>
23 |     <char id="56" x="121" y="4" width="47" height="65" xoffset="0" yoffset="9" xadvance="54" page="0" chnl="15"/>
24 |     <char id="57" x="55" y="351" width="47" height="65" xoffset="0" yoffset="9" xadvance="54" page="0" chnl="15"/>
25 |     <char id="65" x="79" y="282" width="65" height="65" xoffset="0" yoffset="9" xadvance="72" page="0" chnl="15"/>
26 |     <char id="66" x="55" y="420" width="56" height="65" xoffset="0" yoffset="9" xadvance="63" page="0" chnl="15"/>
27 |     <char id="67" x="106" y="351" width="56" height="65" xoffset="0" yoffset="9" xadvance="63" page="0" chnl="15"/>
28 |     <char id="68" x="115" y="420" width="56" height="65" xoffset="0" yoffset="9" xadvance="63" page="0" chnl="15"/>
29 |     <char id="69" x="83" y="146" width="56" height="65" xoffset="0" yoffset="9" xadvance="63" page="0" chnl="15"/>
30 |     <char id="70" x="125" y="73" width="47" height="65" xoffset="0" yoffset="9" xadvance="54" page="0" chnl="15"/>
31 |     <char id="71" x="172" y="4" width="56" height="65" xoffset="0" yoffset="9" xadvance="63" page="0" chnl="15"/>
32 |     <char id="72" x="143" y="142" width="56" height="65" xoffset="0" yoffset="9" xadvance="63" page="0" chnl="15"/>
33 |     <char id="73" x="176" y="73" width="29" height="65" xoffset="0" yoffset="9" xadvance="36" page="0" chnl="15"/>
34 |     <char id="74" x="148" y="211" width="29" height="74" xoffset="0" yoffset="9" xadvance="36" page="0" chnl="15"/>
35 |     <char id="75" x="166" y="289" width="65" height="65" xoffset="0" yoffset="9" xadvance="72" page="0" chnl="15"/>
36 |     <char id="76" x="181" y="211" width="56" height="65" xoffset="0" yoffset="9" xadvance="63" page="0" chnl="15"/>
37 |     <char id="77" x="203" y="142" width="74" height="65" xoffset="0" yoffset="9" xadvance="81" page="0" chnl="15"/>
38 |     <char id="78" x="209" y="73" width="65" height="65" xoffset="0" yoffset="9" xadvance="72" page="0" chnl="15"/>
39 |     <char id="79" x="232" y="4" width="56" height="65" xoffset="0" yoffset="9" xadvance="63" page="0" chnl="15"/>
40 |     <char id="80" x="278" y="73" width="47" height="65" xoffset="0" yoffset="9" xadvance="54" page="0" chnl="15"/>
41 |     <char id="81" x="175" y="358" width="56" height="74" xoffset="0" yoffset="9" xadvance="63" page="0" chnl="15"/>
42 |     <char id="82" x="292" y="4" width="60" height="65" xoffset="0" yoffset="9" xadvance="63" page="0" chnl="15"/>
43 |     <char id="83" x="175" y="436" width="47" height="65" xoffset="0" yoffset="9" xadvance="54" page="0" chnl="15"/>
44 |     <char id="84" x="226" y="436" width="65" height="65" xoffset="0" yoffset="9" xadvance="72" page="0" chnl="15"/>
45 |     <char id="85" x="235" y="280" width="60" height="65" xoffset="0" yoffset="9" xadvance="63" page="0" chnl="15"/>
46 |     <char id="86" x="241" y="211" width="56" height="65" xoffset="0" yoffset="9" xadvance="63" page="0" chnl="15"/>
47 |     <char id="87" x="281" y="142" width="92" height="65" xoffset="0" yoffset="9" xadvance="99" page="0" chnl="15"/>
48 |     <char id="88" x="329" y="73" width="47" height="65" xoffset="0" yoffset="9" xadvance="54" page="0" chnl="15"/>
49 |     <char id="89" x="356" y="4" width="65" height="65" xoffset="0" yoffset="9" xadvance="72" page="0" chnl="15"/>
50 |     <char id="90" x="235" y="349" width="47" height="65" xoffset="0" yoffset="9" xadvance="54" page="0" chnl="15"/>
51 |     <char id="97" x="4" y="447" width="42" height="47" xoffset="0" yoffset="27" xadvance="45" page="0" chnl="15"/>
52 |     <char id="98" x="286" y="349" width="47" height="74" xoffset="-9" yoffset="0" xadvance="45" page="0" chnl="15"/>
53 |     <char id="99" x="83" y="215" width="38" height="47" xoffset="0" yoffset="27" xadvance="45" page="0" chnl="15"/>
54 |     <char id="100" x="295" y="427" width="42" height="74" xoffset="0" yoffset="0" xadvance="45" page="0" chnl="15"/>
55 |     <char id="101" x="299" y="280" width="38" height="47" xoffset="0" yoffset="27" xadvance="45" page="0" chnl="15"/>
56 |     <char id="102" x="337" y="331" width="29" height="83" xoffset="0" yoffset="0" xadvance="36" page="0" chnl="15"/>
57 |     <char id="103" x="301" y="211" width="47" height="65" xoffset="0" yoffset="27" xadvance="54" page="0" chnl="15"/>
58 |     <char id="104" x="341" y="418" width="47" height="74" xoffset="-9" yoffset="0" xadvance="45" page="0" chnl="15"/>
59 |     <char id="105" x="352" y="211" width="29" height="65" xoffset="0" yoffset="9" xadvance="36" page="0" chnl="15"/>
60 |     <char id="106" x="380" y="73" width="20" height="83" xoffset="0" yoffset="9" xadvance="27" page="0" chnl="15"/>
61 |     <char id="107" x="370" y="280" width="56" height="74" xoffset="0" yoffset="0" xadvance="63" page="0" chnl="15"/>
62 |     <char id="108" x="385" y="160" width="29" height="74" xoffset="0" yoffset="0" xadvance="36" page="0" chnl="15"/>
63 |     <char id="109" x="370" y="358" width="74" height="47" xoffset="0" yoffset="27" xadvance="81" page="0" chnl="15"/>
64 |     <char id="110" x="404" y="73" width="47" height="47" xoffset="0" yoffset="27" xadvance="54" page="0" chnl="15"/>
65 |     <char id="111" x="425" y="4" width="38" height="47" xoffset="0" yoffset="27" xadvance="45" page="0" chnl="15"/>
66 |     <char id="112" x="392" y="409" width="47" height="65" xoffset="0" yoffset="27" xadvance="54" page="0" chnl="15"/>
67 |     <char id="113" x="443" y="409" width="42" height="65" xoffset="0" yoffset="27" xadvance="45" page="0" chnl="15"/>
68 |     <char id="114" x="418" y="124" width="38" height="47" xoffset="0" yoffset="27" xadvance="45" page="0" chnl="15"/>
69 |     <char id="115" x="455" y="55" width="38" height="47" xoffset="0" yoffset="27" xadvance="45" page="0" chnl="15"/>
70 |     <char id="116" x="418" y="175" width="38" height="56" xoffset="0" yoffset="18" xadvance="45" page="0" chnl="15"/>
71 |     <char id="117" x="467" y="4" width="56" height="47" xoffset="0" yoffset="27" xadvance="63" page="0" chnl="15"/>
72 |     <char id="118" x="430" y="235" width="47" height="47" xoffset="0" yoffset="27" xadvance="54" page="0" chnl="15"/>
73 |     <char id="119" x="430" y="286" width="65" height="47" xoffset="0" yoffset="27" xadvance="72" page="0" chnl="15"/>
74 |     <char id="120" x="448" y="337" width="38" height="47" xoffset="0" yoffset="27" xadvance="45" page="0" chnl="15"/>
75 |     <char id="121" x="489" y="388" width="47" height="65" xoffset="0" yoffset="27" xadvance="54" page="0" chnl="15"/>
76 |     <char id="122" x="490" y="337" width="47" height="47" xoffset="0" yoffset="27" xadvance="54" page="0" chnl="15"/>
77 |     <char id="32" x="0" y="0" width="0" height="0" xoffset="0" yoffset="27" xadvance="27" page="0" chnl="15"/>
78 |   </chars>
79 | </font>


--------------------------------------------------------------------------------
/issue-006/assets/lose.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-006/assets/lose.png


--------------------------------------------------------------------------------
/issue-006/assets/photonstorm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-006/assets/photonstorm.png


--------------------------------------------------------------------------------
/issue-006/assets/preload.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-006/assets/preload.png


--------------------------------------------------------------------------------
/issue-006/assets/reload.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-006/assets/reload.mp3


--------------------------------------------------------------------------------
/issue-006/assets/splat.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-006/assets/splat.mp3


--------------------------------------------------------------------------------
/issue-006/assets/standoff.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-006/assets/standoff.png


--------------------------------------------------------------------------------
/issue-006/assets/walk.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-006/assets/walk.mp3


--------------------------------------------------------------------------------
/issue-006/assets/win.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-006/assets/win.png


--------------------------------------------------------------------------------
/issue-006/phaser-tips-header1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-006/phaser-tips-header1.png


--------------------------------------------------------------------------------
/issue-006/shootout.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <head>
  4 |     <title>Shootout</title>
  5 |     <meta charset="utf-8">
  6 |     <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
  7 | </head>
  8 | <body>
  9 | 
 10 |     <div id="game"></div>
 11 | 
 12 |     <script type="text/javascript">
 13 | 
 14 |     var Shootout = {
 15 | 
 16 |         //  Our game modes
 17 |         INTRO: 0,
 18 |         PACING: 1,
 19 |         SHOOTING: 2,
 20 |         OUTCOME: 3
 21 | 
 22 |     };
 23 | 
 24 |     Shootout.Boot = function (game) {
 25 |     };
 26 | 
 27 |     Shootout.Boot.prototype = {
 28 | 
 29 |         preload: function () {
 30 | 
 31 |             //  We need this because the assets are on Amazon S3
 32 |             //  Remove the next 2 lines if running locally
 33 |             this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue006/';
 34 |             this.load.crossOrigin = 'anonymous';
 35 | 
 36 |             this.load.image('logo', 'assets/photonstorm.png');
 37 |             this.load.image('preload', 'assets/preload.png');
 38 | 
 39 |         },
 40 | 
 41 |         create: function () {
 42 | 
 43 |             this.input.maxPointers = 1;
 44 | 
 45 |             this.state.start('Preloader');
 46 | 
 47 |         }
 48 | 
 49 |     };
 50 | 
 51 |     Shootout.Preloader = function (game) {
 52 | 
 53 |         this.logo = null;
 54 |         this.preloadBar = null;
 55 |         this.ready = false;
 56 | 
 57 |     };
 58 | 
 59 |     Shootout.Preloader.prototype = {
 60 | 
 61 |         init: function () {
 62 | 
 63 |             this.add.sprite(265, 400, 'logo');
 64 | 
 65 |         },
 66 | 
 67 |         preload: function () {
 68 | 
 69 |             this.preloadBar = this.add.sprite(120, 260, 'preload');
 70 |             this.load.setPreloadSprite(this.preloadBar);
 71 | 
 72 |             //  We need this because the assets are on Amazon S3
 73 |             //  Remove the next 2 lines if running locally
 74 |             this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue006/';
 75 |             this.load.crossOrigin = 'anonymous';
 76 | 
 77 |             this.load.image('standoff', 'assets/standoff.png');
 78 |             this.load.image('win', 'assets/win.png');
 79 |             this.load.image('lose', 'assets/lose.png');
 80 |             this.load.image('draw', 'assets/draw.png');
 81 | 
 82 |             this.load.bitmapFont('font', 'assets/font.png', 'assets/font.xml');
 83 | 
 84 |             this.load.audio('casing', 'assets/casing.mp3');
 85 |             this.load.audio('fire', 'assets/fire.mp3');
 86 |             this.load.audio('reload', 'assets/reload.mp3');
 87 |             this.load.audio('splat', 'assets/splat.mp3');
 88 |             this.load.audio('walk', 'assets/walk.mp3');
 89 | 
 90 |             //  Note: Graphics are Copyright 2015 Photon Storm Ltd.
 91 | 
 92 |         },
 93 | 
 94 |         create: function () {
 95 |         },
 96 | 
 97 |         update: function () {
 98 | 
 99 |             //  Make sure all our mp3s have decoded before starting the game
100 | 
101 |             if (!this.ready)
102 |             {
103 |                 if (this.cache.isSoundDecoded('casing') &&
104 |                     this.cache.isSoundDecoded('fire') &&
105 |                     this.cache.isSoundDecoded('reload') &&
106 |                     this.cache.isSoundDecoded('splat') &&
107 |                     this.cache.isSoundDecoded('walk'))
108 |                 {
109 |                     this.ready = true;
110 |                     this.state.start('Game');
111 |                 }
112 |             }
113 | 
114 |         }
115 | 
116 |     };
117 | 
118 |     Shootout.Game = function (game) {
119 | 
120 |         this.cowboy = null;
121 |         this.draw = null;
122 | 
123 |         this.cowboyTimer = null;
124 |         this.cowboyDead = false;
125 | 
126 |         this.paceTimer = null;
127 |         this.paceText = null;
128 |         this.pace = 1;
129 | 
130 |         this.shotAt = 0;
131 | 
132 |         this.mode = Shootout.INTRO;
133 | 
134 |         //  You have between 100ms and 500ms to shoot first
135 |         this.reactionTimeMin = 100;
136 |         this.reactionTimeMax = 500;
137 | 
138 |     };
139 | 
140 |     Shootout.Game.prototype = {
141 | 
142 |         create: function () {
143 | 
144 |             this.cowboy = this.add.sprite(0, 0, 'standoff');
145 | 
146 |             this.draw = this.add.sprite(434, 395, 'draw');
147 |             this.draw.visible = false;
148 | 
149 |             this.helpText = this.add.bitmapText(630, 404, 'font', "After 10 paces\nclick to shoot.\nBut only when he says Draw", 16);
150 |             this.helpText.align = 'right';
151 | 
152 |             this.mode = Shootout.INTRO;
153 | 
154 |             this.input.onDown.add(this.onDown, this);
155 | 
156 |         },
157 | 
158 |         onDown: function (pointer) {
159 | 
160 |             //  It's possible they click to shoot the moment
161 |             //  after they were killed, so we don't advance
162 | 
163 |             if (this.time.time - this.shotAt < 250)
164 |             {
165 |                 return;
166 |             }
167 | 
168 |             switch (this.mode)
169 |             {
170 |                 case Shootout.INTRO:
171 |                     this.start();
172 |                     break;
173 | 
174 |                 case Shootout.PACING:
175 |                     this.cheat();
176 |                     break;
177 | 
178 |                 case Shootout.SHOOTING:
179 |                     this.shoot();
180 |                     break;
181 | 
182 |                 case Shootout.OUTCOME:
183 |                     this.restart();
184 |                     break;
185 |             }
186 | 
187 |         },
188 | 
189 |         start: function () {
190 | 
191 |             this.mode = Shootout.PACING;
192 | 
193 |             this.helpText.visible = false;
194 | 
195 |             this.paceText = this.add.bitmapText(480, 390, 'font', '1', 64);
196 | 
197 |             //  10 paces timer, then shoot
198 |             this.paceTimer = this.time.create(false);
199 |             this.paceTimer.repeat(500, 10, this.stepAway, this);
200 |             this.paceTimer.start();
201 | 
202 |             this.sound.play('walk');
203 | 
204 |         },
205 | 
206 |         restart: function () {
207 | 
208 |             this.mode = Shootout.INTRO;
209 | 
210 |             this.cowboy.loadTexture('standoff');
211 | 
212 |             this.cowboyTimer = null;
213 |             this.cowboyDead = false;
214 | 
215 |             this.paceTimer = null;
216 |             this.paceText = null;
217 |             this.pace = 1;
218 | 
219 |             this.shotAt = 0;
220 | 
221 |             this.helpText.text = "After 10 paces\nclick to shoot.\nBut only when he says Draw";
222 | 
223 |             this.sound.play('reload');
224 | 
225 |         },
226 | 
227 |         stepAway: function () {
228 | 
229 |             this.pace++;
230 | 
231 |             if (this.pace > 10)
232 |             {
233 |                 this.paceText.visible = false;
234 | 
235 |                 //  Pick a random time to display DRAW after
236 | 
237 |                 var delay = this.rnd.between(500, 3000);
238 | 
239 |                 this.time.events.add(delay, this.startDraw, this);
240 |             }
241 |             else
242 |             {
243 |                 this.paceText.text = this.pace;
244 |             }
245 | 
246 |         },
247 | 
248 |         startDraw: function () {
249 | 
250 |             this.mode = Shootout.SHOOTING;
251 | 
252 |             this.draw.visible = true;
253 | 
254 |             var reactionTime = this.rnd.between(this.reactionTimeMin, this.reactionTimeMax);
255 | 
256 |             this.cowboyTimer = this.time.create(false);
257 |             this.cowboyTimer.add(reactionTime, this.heShoots, this);
258 |             this.cowboyTimer.start();
259 | 
260 |         },
261 | 
262 |         heShoots: function () {
263 | 
264 |             if (!this.cowboyDead)
265 |             {
266 |                 this.sound.play('fire');
267 |                 this.youLose();
268 |             }
269 | 
270 |         },
271 | 
272 |         cheat: function () {
273 | 
274 |             //  Cowardly win
275 |             this.youWin(true);
276 | 
277 |         },
278 | 
279 |         shoot: function () {
280 | 
281 |             if (this.cowboyTimer.running)
282 |             {
283 |                 this.youWin(false);
284 |             }
285 | 
286 |         },
287 | 
288 |         playSplat: function () {
289 | 
290 |             this.sound.play('splat');
291 | 
292 |         },
293 | 
294 |         youWin: function (cowardly) {
295 | 
296 |             this.mode = Shootout.OUTCOME;
297 | 
298 |             this.draw.visible = false;
299 |             this.paceText.visible = false;
300 | 
301 |             this.sound.play('fire');
302 |             this.sound.play('casing');
303 | 
304 |             this.time.events.add(500, this.playSplat, this);
305 | 
306 |             if (cowardly)
307 |             {
308 |                 this.helpText.text = "You shoot first.\nYou killed him!\nBut what a cowardly victory.";
309 |             }
310 |             else
311 |             {
312 |                 //  How much time did the cowboy have left?
313 |                 if (this.cowboyTimer.duration < 100)
314 |                 {
315 |                     this.helpText.text = "He draws ...\nBut you shoot first (just!)\nYou killed him!";
316 |                 }
317 |                 else
318 |                 {
319 |                     this.helpText.text = "He draws ...\nBut you shoot first.\nYou killed him!";
320 |                 }
321 |             }
322 | 
323 |             this.helpText.visible = true;
324 | 
325 |             this.cowboy.loadTexture('win');
326 | 
327 |             this.paceTimer.stop();
328 | 
329 |             this.shotAt = this.time.time;
330 | 
331 |             if (this.cowboyTimer)
332 |             {
333 |                 this.cowboyTimer.stop();
334 |             }
335 | 
336 |         },
337 | 
338 |         youLose: function () {
339 | 
340 |             this.mode = Shootout.OUTCOME;
341 | 
342 |             this.draw.visible = false;
343 | 
344 |             this.sound.play('casing');
345 | 
346 |             this.time.events.add(500, this.playSplat, this);
347 | 
348 |             this.helpText.text = "He draws ...\nand shoots.\nYou are dead!";
349 |             this.helpText.visible = true;
350 | 
351 |             this.cowboy.loadTexture('lose');
352 | 
353 |             this.shotAt = this.time.time;
354 | 
355 |             this.cowboyTimer.stop();
356 | 
357 |         },
358 | 
359 |         preRender: function () {
360 | 
361 |             if (this.helpText)
362 |             {
363 |                 this.helpText.pivot.x = this.helpText.textWidth;
364 |             }
365 | 
366 |         }
367 | 
368 |     };
369 | 
370 |     if (document.readyState === 'complete' || document.readyState === 'interactive')
371 |     {
372 |         start();
373 |     }
374 |     else
375 |     {
376 |         document.addEventListener('DOMContentLoaded', start, false);
377 |     }
378 | 
379 |     function start () {
380 | 
381 |         document.removeEventListener('DOMContentLoaded', start, false);
382 | 
383 |         var game = new Phaser.Game(640, 480, Phaser.AUTO, 'game');
384 | 
385 |         game.state.add('Boot', Shootout.Boot);
386 |         game.state.add('Preloader', Shootout.Preloader);
387 |         game.state.add('Game', Shootout.Game);
388 | 
389 |         game.state.start('Boot');
390 |     }
391 | 
392 |     </script>
393 | 
394 |     <a href="http://phaser.io"><img src="http://files.phaser.io.s3.amazonaws.com/codingtips/issue005/phaser-tips-header1.png" title="Phaser Coding Tips Weekly" style="margin-top: 8px" /></a>
395 | 
396 | </body>
397 | </html>


--------------------------------------------------------------------------------
/issue-007/assets/back.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-007/assets/back.png


--------------------------------------------------------------------------------
/issue-007/assets/bullet1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-007/assets/bullet1.png


--------------------------------------------------------------------------------
/issue-007/assets/bullet10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-007/assets/bullet10.png


--------------------------------------------------------------------------------
/issue-007/assets/bullet11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-007/assets/bullet11.png


--------------------------------------------------------------------------------
/issue-007/assets/bullet2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-007/assets/bullet2.png


--------------------------------------------------------------------------------
/issue-007/assets/bullet3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-007/assets/bullet3.png


--------------------------------------------------------------------------------
/issue-007/assets/bullet4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-007/assets/bullet4.png


--------------------------------------------------------------------------------
/issue-007/assets/bullet5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-007/assets/bullet5.png


--------------------------------------------------------------------------------
/issue-007/assets/bullet6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-007/assets/bullet6.png


--------------------------------------------------------------------------------
/issue-007/assets/bullet7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-007/assets/bullet7.png


--------------------------------------------------------------------------------
/issue-007/assets/bullet8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-007/assets/bullet8.png


--------------------------------------------------------------------------------
/issue-007/assets/bullet9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-007/assets/bullet9.png


--------------------------------------------------------------------------------
/issue-007/assets/fore.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-007/assets/fore.png


--------------------------------------------------------------------------------
/issue-007/assets/ship.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-007/assets/ship.png


--------------------------------------------------------------------------------
/issue-007/assets/shmupfont.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-007/assets/shmupfont.png


--------------------------------------------------------------------------------
/issue-007/assets/shmupfont.xml:
--------------------------------------------------------------------------------
 1 | <font>
 2 |   <info face="shmupfont" size="24" bold="0" italic="0" charset="" unicode="" stretchH="100" smooth="1" aa="1" padding="2,2,2,2" spacing="0,0" outline="0"/>
 3 |   <common lineHeight="33" base="28" scaleW="256" scaleH="256" pages="1" packed="0"/>
 4 |   <pages>
 5 |     <page id="0" file="shmupfont.png"/>
 6 |   </pages>
 7 |   <chars count="80">
 8 |     <char id="97" x="2" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
 9 |     <char id="98" x="2" y="21" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
10 |     <char id="99" x="2" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
11 |     <char id="100" x="2" y="59" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
12 |     <char id="101" x="2" y="78" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
13 |     <char id="102" x="2" y="97" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
14 |     <char id="103" x="2" y="116" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
15 |     <char id="104" x="2" y="135" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
16 |     <char id="105" x="27" y="2" width="11" height="17" xoffset="0" yoffset="12" xadvance="15" page="0" chnl="15"/>
17 |     <char id="106" x="27" y="21" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
18 |     <char id="107" x="40" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
19 |     <char id="108" x="27" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
20 |     <char id="109" x="27" y="59" width="35" height="17" xoffset="0" yoffset="12" xadvance="39" page="0" chnl="15"/>
21 |     <char id="110" x="52" y="21" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
22 |     <char id="111" x="65" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
23 |     <char id="112" x="52" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
24 |     <char id="113" x="64" y="59" width="23" height="20" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
25 |     <char id="114" x="77" y="21" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
26 |     <char id="115" x="90" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
27 |     <char id="116" x="77" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
28 |     <char id="117" x="27" y="78" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
29 |     <char id="118" x="89" y="59" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
30 |     <char id="119" x="102" y="21" width="35" height="17" xoffset="0" yoffset="12" xadvance="39" page="0" chnl="15"/>
31 |     <char id="120" x="115" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
32 |     <char id="121" x="102" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
33 |     <char id="122" x="89" y="78" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
34 |     <char id="65" x="52" y="81" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
35 |     <char id="66" x="27" y="97" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
36 |     <char id="67" x="77" y="97" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
37 |     <char id="68" x="52" y="100" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
38 |     <char id="69" x="27" y="116" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
39 |     <char id="70" x="102" y="97" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
40 |     <char id="71" x="114" y="59" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
41 |     <char id="72" x="127" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
42 |     <char id="73" x="140" y="2" width="11" height="17" xoffset="0" yoffset="12" xadvance="15" page="0" chnl="15"/>
43 |     <char id="74" x="139" y="21" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
44 |     <char id="75" x="153" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
45 |     <char id="76" x="114" y="78" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
46 |     <char id="77" x="127" y="97" width="35" height="17" xoffset="0" yoffset="12" xadvance="39" page="0" chnl="15"/>
47 |     <char id="78" x="152" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
48 |     <char id="79" x="164" y="21" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
49 |     <char id="80" x="178" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
50 |     <char id="81" x="139" y="59" width="23" height="20" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
51 |     <char id="82" x="77" y="116" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
52 |     <char id="83" x="52" y="119" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
53 |     <char id="84" x="27" y="135" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
54 |     <char id="85" x="102" y="116" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
55 |     <char id="86" x="127" y="116" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
56 |     <char id="87" x="152" y="116" width="35" height="17" xoffset="0" yoffset="12" xadvance="39" page="0" chnl="15"/>
57 |     <char id="88" x="177" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
58 |     <char id="89" x="189" y="21" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
59 |     <char id="90" x="203" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
60 |     <char id="33" x="164" y="59" width="11" height="17" xoffset="0" yoffset="12" xadvance="15" page="0" chnl="15"/>
61 |     <char id="8470" x="177" y="59" width="11" height="29" xoffset="2" yoffset="0" xadvance="12" page="0" chnl="15"/>
62 |     <char id="59" x="164" y="78" width="8" height="17" xoffset="0" yoffset="18" xadvance="12" page="0" chnl="15"/>
63 |     <char id="37" x="174" y="90" width="41" height="17" xoffset="0" yoffset="12" xadvance="45" page="0" chnl="15"/>
64 |     <char id="58" x="164" y="97" width="8" height="17" xoffset="0" yoffset="12" xadvance="12" page="0" chnl="15"/>
65 |     <char id="63" x="202" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
66 |     <char id="42" x="214" y="21" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
67 |     <char id="40" x="190" y="59" width="14" height="23" xoffset="0" yoffset="9" xadvance="18" page="0" chnl="15"/>
68 |     <char id="41" x="206" y="59" width="14" height="23" xoffset="0" yoffset="9" xadvance="18" page="0" chnl="15"/>
69 |     <char id="95" x="139" y="81" width="17" height="5" xoffset="0" yoffset="30" xadvance="21" page="0" chnl="15"/>
70 |     <char id="43" x="228" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
71 |     <char id="45" x="139" y="88" width="17" height="5" xoffset="0" yoffset="18" xadvance="21" page="0" chnl="15"/>
72 |     <char id="61" x="189" y="109" width="17" height="11" xoffset="0" yoffset="15" xadvance="21" page="0" chnl="15"/>
73 |     <char id="46" x="77" y="81" width="8" height="8" xoffset="0" yoffset="21" xadvance="12" page="0" chnl="15"/>
74 |     <char id="44" x="189" y="122" width="8" height="11" xoffset="0" yoffset="24" xadvance="12" page="0" chnl="15"/>
75 |     <char id="47" x="199" y="122" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
76 |     <char id="124" x="217" y="84" width="11" height="23" xoffset="0" yoffset="9" xadvance="15" page="0" chnl="15"/>
77 |     <char id="34" x="222" y="59" width="17" height="11" xoffset="0" yoffset="12" xadvance="21" page="0" chnl="15"/>
78 |     <char id="39" x="227" y="40" width="8" height="11" xoffset="0" yoffset="12" xadvance="12" page="0" chnl="15"/>
79 |     <char id="64" x="77" y="135" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
80 |     <char id="35" x="102" y="135" width="29" height="17" xoffset="0" yoffset="12" xadvance="33" page="0" chnl="15"/>
81 |     <char id="36" x="52" y="138" width="23" height="23" xoffset="0" yoffset="9" xadvance="27" page="0" chnl="15"/>
82 |     <char id="94" x="237" y="40" width="17" height="11" xoffset="0" yoffset="12" xadvance="21" page="0" chnl="15"/>
83 |     <char id="38" x="2" y="154" width="32" height="17" xoffset="0" yoffset="12" xadvance="36" page="0" chnl="15"/>
84 |     <char id="123" x="133" y="135" width="23" height="23" xoffset="0" yoffset="9" xadvance="27" page="0" chnl="15"/>
85 |     <char id="125" x="77" y="154" width="23" height="23" xoffset="0" yoffset="9" xadvance="27" page="0" chnl="15"/>
86 |     <char id="91" x="2" y="173" width="14" height="23" xoffset="0" yoffset="9" xadvance="18" page="0" chnl="15"/>
87 |     <char id="93" x="18" y="173" width="14" height="23" xoffset="0" yoffset="9" xadvance="18" page="0" chnl="15"/>
88 |     <char id="32" x="0" y="0" width="0" height="0" xoffset="0" yoffset="9" xadvance="12" page="0" chnl="15"/>
89 |   </chars>
90 | </font>


--------------------------------------------------------------------------------
/issue-007/bulletpool.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <head>
  4 |     <title>Bullet Pool</title>
  5 |     <meta charset="utf-8">
  6 |     <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
  7 | </head>
  8 | <body>
  9 | 
 10 |     <div id="game"></div>
 11 | 
 12 |     <script type="text/javascript">
 13 | 
 14 |     var game = new Phaser.Game(640, 400, Phaser.AUTO, 'game');
 15 | 
 16 |     //  Our core Bullet class
 17 |     //  This is a simple Sprite object that we set a few properties on
 18 |     //  It is fired by all of the Weapon classes
 19 | 
 20 |     var Bullet = function (game, key) {
 21 | 
 22 |         Phaser.Sprite.call(this, game, 0, 0, key);
 23 | 
 24 |         this.texture.baseTexture.scaleMode = PIXI.scaleModes.NEAREST;
 25 | 
 26 |         this.anchor.set(0.5);
 27 | 
 28 |         this.checkWorldBounds = true;
 29 |         this.outOfBoundsKill = true;
 30 |         this.exists = false;
 31 | 
 32 |         this.tracking = false;
 33 |         this.scaleSpeed = 0;
 34 | 
 35 |     };
 36 | 
 37 |     Bullet.prototype = Object.create(Phaser.Sprite.prototype);
 38 |     Bullet.prototype.constructor = Bullet;
 39 | 
 40 |     Bullet.prototype.fire = function (x, y, angle, speed, gx, gy) {
 41 | 
 42 |         gx = gx || 0;
 43 |         gy = gy || 0;
 44 | 
 45 |         this.reset(x, y);
 46 |         this.scale.set(1);
 47 | 
 48 |         this.game.physics.arcade.velocityFromAngle(angle, speed, this.body.velocity);
 49 | 
 50 |         this.angle = angle;
 51 | 
 52 |         this.body.gravity.set(gx, gy);
 53 | 
 54 |     };
 55 | 
 56 |     Bullet.prototype.update = function () {
 57 | 
 58 |         if (this.tracking)
 59 |         {
 60 |             this.rotation = Math.atan2(this.body.velocity.y, this.body.velocity.x);
 61 |         }
 62 | 
 63 |         if (this.scaleSpeed > 0)
 64 |         {
 65 |             this.scale.x += this.scaleSpeed;
 66 |             this.scale.y += this.scaleSpeed;
 67 |         }
 68 | 
 69 |     };
 70 | 
 71 |     var Weapon = {};
 72 | 
 73 |     ////////////////////////////////////////////////////
 74 |     //  A single bullet is fired in front of the ship //
 75 |     ////////////////////////////////////////////////////
 76 | 
 77 |     Weapon.SingleBullet = function (game) {
 78 | 
 79 |         Phaser.Group.call(this, game, game.world, 'Single Bullet', false, true, Phaser.Physics.ARCADE);
 80 | 
 81 |         this.nextFire = 0;
 82 |         this.bulletSpeed = 600;
 83 |         this.fireRate = 100;
 84 | 
 85 |         for (var i = 0; i < 64; i++)
 86 |         {
 87 |             this.add(new Bullet(game, 'bullet5'), true);
 88 |         }
 89 | 
 90 |         return this;
 91 | 
 92 |     };
 93 | 
 94 |     Weapon.SingleBullet.prototype = Object.create(Phaser.Group.prototype);
 95 |     Weapon.SingleBullet.prototype.constructor = Weapon.SingleBullet;
 96 | 
 97 |     Weapon.SingleBullet.prototype.fire = function (source) {
 98 | 
 99 |         if (this.game.time.time < this.nextFire) { return; }
100 | 
101 |         var x = source.x + 10;
102 |         var y = source.y + 10;
103 | 
104 |         this.getFirstExists(false).fire(x, y, 0, this.bulletSpeed, 0, 0);
105 | 
106 |         this.nextFire = this.game.time.time + this.fireRate;
107 | 
108 |     };
109 | 
110 |     /////////////////////////////////////////////////////////
111 |     //  A bullet is shot both in front and behind the ship //
112 |     /////////////////////////////////////////////////////////
113 | 
114 |     Weapon.FrontAndBack = function (game) {
115 | 
116 |         Phaser.Group.call(this, game, game.world, 'Front And Back', false, true, Phaser.Physics.ARCADE);
117 | 
118 |         this.nextFire = 0;
119 |         this.bulletSpeed = 600;
120 |         this.fireRate = 100;
121 | 
122 |         for (var i = 0; i < 64; i++)
123 |         {
124 |             this.add(new Bullet(game, 'bullet5'), true);
125 |         }
126 | 
127 |         return this;
128 | 
129 |     };
130 | 
131 |     Weapon.FrontAndBack.prototype = Object.create(Phaser.Group.prototype);
132 |     Weapon.FrontAndBack.prototype.constructor = Weapon.FrontAndBack;
133 | 
134 |     Weapon.FrontAndBack.prototype.fire = function (source) {
135 | 
136 |         if (this.game.time.time < this.nextFire) { return; }
137 | 
138 |         var x = source.x + 10;
139 |         var y = source.y + 10;
140 | 
141 |         this.getFirstExists(false).fire(x, y, 0, this.bulletSpeed, 0, 0);
142 |         this.getFirstExists(false).fire(x, y, 180, this.bulletSpeed, 0, 0);
143 | 
144 |         this.nextFire = this.game.time.time + this.fireRate;
145 | 
146 |     };
147 | 
148 |     //////////////////////////////////////////////////////
149 |     //  3-way Fire (directly above, below and in front) //
150 |     //////////////////////////////////////////////////////
151 | 
152 |     Weapon.ThreeWay = function (game) {
153 | 
154 |         Phaser.Group.call(this, game, game.world, 'Three Way', false, true, Phaser.Physics.ARCADE);
155 | 
156 |         this.nextFire = 0;
157 |         this.bulletSpeed = 600;
158 |         this.fireRate = 100;
159 | 
160 |         for (var i = 0; i < 96; i++)
161 |         {
162 |             this.add(new Bullet(game, 'bullet7'), true);
163 |         }
164 | 
165 |         return this;
166 | 
167 |     };
168 | 
169 |     Weapon.ThreeWay.prototype = Object.create(Phaser.Group.prototype);
170 |     Weapon.ThreeWay.prototype.constructor = Weapon.ThreeWay;
171 | 
172 |     Weapon.ThreeWay.prototype.fire = function (source) {
173 | 
174 |         if (this.game.time.time < this.nextFire) { return; }
175 | 
176 |         var x = source.x + 10;
177 |         var y = source.y + 10;
178 | 
179 |         this.getFirstExists(false).fire(x, y, 270, this.bulletSpeed, 0, 0);
180 |         this.getFirstExists(false).fire(x, y, 0, this.bulletSpeed, 0, 0);
181 |         this.getFirstExists(false).fire(x, y, 90, this.bulletSpeed, 0, 0);
182 | 
183 |         this.nextFire = this.game.time.time + this.fireRate;
184 | 
185 |     };
186 | 
187 |     /////////////////////////////////////////////
188 |     //  8-way fire, from all sides of the ship //
189 |     /////////////////////////////////////////////
190 | 
191 |     Weapon.EightWay = function (game) {
192 | 
193 |         Phaser.Group.call(this, game, game.world, 'Eight Way', false, true, Phaser.Physics.ARCADE);
194 | 
195 |         this.nextFire = 0;
196 |         this.bulletSpeed = 600;
197 |         this.fireRate = 100;
198 | 
199 |         for (var i = 0; i < 96; i++)
200 |         {
201 |             this.add(new Bullet(game, 'bullet5'), true);
202 |         }
203 | 
204 |         return this;
205 | 
206 |     };
207 | 
208 |     Weapon.EightWay.prototype = Object.create(Phaser.Group.prototype);
209 |     Weapon.EightWay.prototype.constructor = Weapon.EightWay;
210 | 
211 |     Weapon.EightWay.prototype.fire = function (source) {
212 | 
213 |         if (this.game.time.time < this.nextFire) { return; }
214 | 
215 |         var x = source.x + 16;
216 |         var y = source.y + 10;
217 | 
218 |         this.getFirstExists(false).fire(x, y, 0, this.bulletSpeed, 0, 0);
219 |         this.getFirstExists(false).fire(x, y, 45, this.bulletSpeed, 0, 0);
220 |         this.getFirstExists(false).fire(x, y, 90, this.bulletSpeed, 0, 0);
221 |         this.getFirstExists(false).fire(x, y, 135, this.bulletSpeed, 0, 0);
222 |         this.getFirstExists(false).fire(x, y, 180, this.bulletSpeed, 0, 0);
223 |         this.getFirstExists(false).fire(x, y, 225, this.bulletSpeed, 0, 0);
224 |         this.getFirstExists(false).fire(x, y, 270, this.bulletSpeed, 0, 0);
225 |         this.getFirstExists(false).fire(x, y, 315, this.bulletSpeed, 0, 0);
226 | 
227 |         this.nextFire = this.game.time.time + this.fireRate;
228 | 
229 |     };
230 | 
231 |     ////////////////////////////////////////////////////
232 |     //  Bullets are fired out scattered on the y axis //
233 |     ////////////////////////////////////////////////////
234 | 
235 |     Weapon.ScatterShot = function (game) {
236 | 
237 |         Phaser.Group.call(this, game, game.world, 'Scatter Shot', false, true, Phaser.Physics.ARCADE);
238 | 
239 |         this.nextFire = 0;
240 |         this.bulletSpeed = 600;
241 |         this.fireRate = 40;
242 | 
243 |         for (var i = 0; i < 32; i++)
244 |         {
245 |             this.add(new Bullet(game, 'bullet5'), true);
246 |         }
247 | 
248 |         return this;
249 | 
250 |     };
251 | 
252 |     Weapon.ScatterShot.prototype = Object.create(Phaser.Group.prototype);
253 |     Weapon.ScatterShot.prototype.constructor = Weapon.ScatterShot;
254 | 
255 |     Weapon.ScatterShot.prototype.fire = function (source) {
256 | 
257 |         if (this.game.time.time < this.nextFire) { return; }
258 | 
259 |         var x = source.x + 16;
260 |         var y = (source.y + source.height / 2) + this.game.rnd.between(-10, 10);
261 | 
262 |         this.getFirstExists(false).fire(x, y, 0, this.bulletSpeed, 0, 0);
263 | 
264 |         this.nextFire = this.game.time.time + this.fireRate;
265 | 
266 |     };
267 | 
268 |     //////////////////////////////////////////////////////////////////////////
269 |     //  Fires a streaming beam of lazers, very fast, in front of the player //
270 |     //////////////////////////////////////////////////////////////////////////
271 | 
272 |     Weapon.Beam = function (game) {
273 | 
274 |         Phaser.Group.call(this, game, game.world, 'Beam', false, true, Phaser.Physics.ARCADE);
275 | 
276 |         this.nextFire = 0;
277 |         this.bulletSpeed = 1000;
278 |         this.fireRate = 45;
279 | 
280 |         for (var i = 0; i < 64; i++)
281 |         {
282 |             this.add(new Bullet(game, 'bullet11'), true);
283 |         }
284 | 
285 |         return this;
286 | 
287 |     };
288 | 
289 |     Weapon.Beam.prototype = Object.create(Phaser.Group.prototype);
290 |     Weapon.Beam.prototype.constructor = Weapon.Beam;
291 | 
292 |     Weapon.Beam.prototype.fire = function (source) {
293 | 
294 |         if (this.game.time.time < this.nextFire) { return; }
295 | 
296 |         var x = source.x + 40;
297 |         var y = source.y + 10;
298 | 
299 |         this.getFirstExists(false).fire(x, y, 0, this.bulletSpeed, 0, 0);
300 | 
301 |         this.nextFire = this.game.time.time + this.fireRate;
302 | 
303 |     };
304 | 
305 |     ///////////////////////////////////////////////////////////////////////
306 |     //  A three-way fire where the top and bottom bullets bend on a path //
307 |     ///////////////////////////////////////////////////////////////////////
308 | 
309 |     Weapon.SplitShot = function (game) {
310 | 
311 |         Phaser.Group.call(this, game, game.world, 'Split Shot', false, true, Phaser.Physics.ARCADE);
312 | 
313 |         this.nextFire = 0;
314 |         this.bulletSpeed = 700;
315 |         this.fireRate = 40;
316 | 
317 |         for (var i = 0; i < 64; i++)
318 |         {
319 |             this.add(new Bullet(game, 'bullet8'), true);
320 |         }
321 | 
322 |         return this;
323 | 
324 |     };
325 | 
326 |     Weapon.SplitShot.prototype = Object.create(Phaser.Group.prototype);
327 |     Weapon.SplitShot.prototype.constructor = Weapon.SplitShot;
328 | 
329 |     Weapon.SplitShot.prototype.fire = function (source) {
330 | 
331 |         if (this.game.time.time < this.nextFire) { return; }
332 | 
333 |         var x = source.x + 20;
334 |         var y = source.y + 10;
335 | 
336 |         this.getFirstExists(false).fire(x, y, 0, this.bulletSpeed, 0, -500);
337 |         this.getFirstExists(false).fire(x, y, 0, this.bulletSpeed, 0, 0);
338 |         this.getFirstExists(false).fire(x, y, 0, this.bulletSpeed, 0, 500);
339 | 
340 |         this.nextFire = this.game.time.time + this.fireRate;
341 | 
342 |     };
343 | 
344 |     ///////////////////////////////////////////////////////////////////////
345 |     //  Bullets have Gravity.y set on a repeating pre-calculated pattern //
346 |     ///////////////////////////////////////////////////////////////////////
347 | 
348 |     Weapon.Pattern = function (game) {
349 | 
350 |         Phaser.Group.call(this, game, game.world, 'Pattern', false, true, Phaser.Physics.ARCADE);
351 | 
352 |         this.nextFire = 0;
353 |         this.bulletSpeed = 600;
354 |         this.fireRate = 40;
355 | 
356 |         this.pattern = Phaser.ArrayUtils.numberArrayStep(-800, 800, 200);
357 |         this.pattern = this.pattern.concat(Phaser.ArrayUtils.numberArrayStep(800, -800, -200));
358 | 
359 |         this.patternIndex = 0;
360 | 
361 |         for (var i = 0; i < 64; i++)
362 |         {
363 |             this.add(new Bullet(game, 'bullet4'), true);
364 |         }
365 | 
366 |         return this;
367 | 
368 |     };
369 | 
370 |     Weapon.Pattern.prototype = Object.create(Phaser.Group.prototype);
371 |     Weapon.Pattern.prototype.constructor = Weapon.Pattern;
372 | 
373 |     Weapon.Pattern.prototype.fire = function (source) {
374 | 
375 |         if (this.game.time.time < this.nextFire) { return; }
376 | 
377 |         var x = source.x + 20;
378 |         var y = source.y + 10;
379 | 
380 |         this.getFirstExists(false).fire(x, y, 0, this.bulletSpeed, 0, this.pattern[this.patternIndex]);
381 | 
382 |         this.patternIndex++;
383 | 
384 |         if (this.patternIndex === this.pattern.length)
385 |         {
386 |             this.patternIndex = 0;
387 |         }
388 | 
389 |         this.nextFire = this.game.time.time + this.fireRate;
390 | 
391 |     };
392 | 
393 |     ///////////////////////////////////////////////////////////////////
394 |     //  Rockets that visually track the direction they're heading in //
395 |     ///////////////////////////////////////////////////////////////////
396 | 
397 |     Weapon.Rockets = function (game) {
398 | 
399 |         Phaser.Group.call(this, game, game.world, 'Rockets', false, true, Phaser.Physics.ARCADE);
400 | 
401 |         this.nextFire = 0;
402 |         this.bulletSpeed = 400;
403 |         this.fireRate = 250;
404 | 
405 |         for (var i = 0; i < 32; i++)
406 |         {
407 |             this.add(new Bullet(game, 'bullet10'), true);
408 |         }
409 | 
410 |         this.setAll('tracking', true);
411 | 
412 |         return this;
413 | 
414 |     };
415 | 
416 |     Weapon.Rockets.prototype = Object.create(Phaser.Group.prototype);
417 |     Weapon.Rockets.prototype.constructor = Weapon.Rockets;
418 | 
419 |     Weapon.Rockets.prototype.fire = function (source) {
420 | 
421 |         if (this.game.time.time < this.nextFire) { return; }
422 | 
423 |         var x = source.x + 10;
424 |         var y = source.y + 10;
425 | 
426 |         this.getFirstExists(false).fire(x, y, 0, this.bulletSpeed, 0, -700);
427 |         this.getFirstExists(false).fire(x, y, 0, this.bulletSpeed, 0, 700);
428 | 
429 |         this.nextFire = this.game.time.time + this.fireRate;
430 | 
431 |     };
432 | 
433 |     ////////////////////////////////////////////////////////////////////////
434 |     //  A single bullet that scales in size as it moves across the screen //
435 |     ////////////////////////////////////////////////////////////////////////
436 | 
437 |     Weapon.ScaleBullet = function (game) {
438 | 
439 |         Phaser.Group.call(this, game, game.world, 'Scale Bullet', false, true, Phaser.Physics.ARCADE);
440 | 
441 |         this.nextFire = 0;
442 |         this.bulletSpeed = 800;
443 |         this.fireRate = 100;
444 | 
445 |         for (var i = 0; i < 32; i++)
446 |         {
447 |             this.add(new Bullet(game, 'bullet9'), true);
448 |         }
449 | 
450 |         this.setAll('scaleSpeed', 0.05);
451 | 
452 |         return this;
453 | 
454 |     };
455 | 
456 |     Weapon.ScaleBullet.prototype = Object.create(Phaser.Group.prototype);
457 |     Weapon.ScaleBullet.prototype.constructor = Weapon.ScaleBullet;
458 | 
459 |     Weapon.ScaleBullet.prototype.fire = function (source) {
460 | 
461 |         if (this.game.time.time < this.nextFire) { return; }
462 | 
463 |         var x = source.x + 10;
464 |         var y = source.y + 10;
465 | 
466 |         this.getFirstExists(false).fire(x, y, 0, this.bulletSpeed, 0, 0);
467 | 
468 |         this.nextFire = this.game.time.time + this.fireRate;
469 | 
470 |     };
471 | 
472 |     /////////////////////////////////////////////
473 |     //  A Weapon Combo - Single Shot + Rockets //
474 |     /////////////////////////////////////////////
475 | 
476 |     Weapon.Combo1 = function (game) {
477 | 
478 |         this.name = "Combo One";
479 |         this.weapon1 = new Weapon.SingleBullet(game);
480 |         this.weapon2 = new Weapon.Rockets(game);
481 | 
482 |     };
483 | 
484 |     Weapon.Combo1.prototype.reset = function () {
485 | 
486 |         this.weapon1.visible = false;
487 |         this.weapon1.callAll('reset', null, 0, 0);
488 |         this.weapon1.setAll('exists', false);
489 | 
490 |         this.weapon2.visible = false;
491 |         this.weapon2.callAll('reset', null, 0, 0);
492 |         this.weapon2.setAll('exists', false);
493 | 
494 |     };
495 | 
496 |     Weapon.Combo1.prototype.fire = function (source) {
497 | 
498 |         this.weapon1.fire(source);
499 |         this.weapon2.fire(source);
500 | 
501 |     };
502 | 
503 |     /////////////////////////////////////////////////////
504 |     //  A Weapon Combo - ThreeWay, Pattern and Rockets //
505 |     /////////////////////////////////////////////////////
506 | 
507 |     Weapon.Combo2 = function (game) {
508 | 
509 |         this.name = "Combo Two";
510 |         this.weapon1 = new Weapon.Pattern(game);
511 |         this.weapon2 = new Weapon.ThreeWay(game);
512 |         this.weapon3 = new Weapon.Rockets(game);
513 | 
514 |     };
515 | 
516 |     Weapon.Combo2.prototype.reset = function () {
517 | 
518 |         this.weapon1.visible = false;
519 |         this.weapon1.callAll('reset', null, 0, 0);
520 |         this.weapon1.setAll('exists', false);
521 | 
522 |         this.weapon2.visible = false;
523 |         this.weapon2.callAll('reset', null, 0, 0);
524 |         this.weapon2.setAll('exists', false);
525 | 
526 |         this.weapon3.visible = false;
527 |         this.weapon3.callAll('reset', null, 0, 0);
528 |         this.weapon3.setAll('exists', false);
529 | 
530 |     };
531 | 
532 |     Weapon.Combo2.prototype.fire = function (source) {
533 | 
534 |         this.weapon1.fire(source);
535 |         this.weapon2.fire(source);
536 |         this.weapon3.fire(source);
537 | 
538 |     };
539 | 
540 |     //  The core game loop
541 | 
542 |     var PhaserGame = function () {
543 | 
544 |         this.background = null;
545 |         this.foreground = null;
546 | 
547 |         this.player = null;
548 |         this.cursors = null;
549 |         this.speed = 300;
550 | 
551 |         this.weapons = [];
552 |         this.currentWeapon = 0;
553 |         this.weaponName = null;
554 | 
555 |     };
556 | 
557 |     PhaserGame.prototype = {
558 | 
559 |         init: function () {
560 | 
561 |             this.game.renderer.renderSession.roundPixels = true;
562 | 
563 |             this.physics.startSystem(Phaser.Physics.ARCADE);
564 | 
565 |         },
566 | 
567 |         preload: function () {
568 | 
569 |             //  We need this because the assets are on Amazon S3
570 |             //  Remove the next 2 lines if running locally
571 |             // this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue007/';
572 |             this.load.crossOrigin = 'anonymous';
573 | 
574 |             this.load.image('background', 'assets/back.png');
575 |             this.load.image('foreground', 'assets/fore.png');
576 |             this.load.image('player', 'assets/ship.png');
577 |             this.load.bitmapFont('shmupfont', 'assets/shmupfont.png', 'assets/shmupfont.xml');
578 | 
579 |             for (var i = 1; i <= 11; i++)
580 |             {
581 |                 this.load.image('bullet' + i, 'assets/bullet' + i + '.png');
582 |             }
583 | 
584 |             //  Note: Graphics are not for use in any commercial project
585 | 
586 |         },
587 | 
588 |         create: function () {
589 | 
590 |             this.background = this.add.tileSprite(0, 0, this.game.width, this.game.height, 'background');
591 |             this.background.autoScroll(-40, 0);
592 | 
593 |             this.weapons.push(new Weapon.SingleBullet(this.game));
594 |             this.weapons.push(new Weapon.FrontAndBack(this.game));
595 |             this.weapons.push(new Weapon.ThreeWay(this.game));
596 |             this.weapons.push(new Weapon.EightWay(this.game));
597 |             this.weapons.push(new Weapon.ScatterShot(this.game));
598 |             this.weapons.push(new Weapon.Beam(this.game));
599 |             this.weapons.push(new Weapon.SplitShot(this.game));
600 |             this.weapons.push(new Weapon.Pattern(this.game));
601 |             this.weapons.push(new Weapon.Rockets(this.game));
602 |             this.weapons.push(new Weapon.ScaleBullet(this.game));
603 |             this.weapons.push(new Weapon.Combo1(this.game));
604 |             this.weapons.push(new Weapon.Combo2(this.game));
605 | 
606 |             this.currentWeapon = 0;
607 | 
608 |             for (var i = 1; i < this.weapons.length; i++)
609 |             {
610 |                 this.weapons[i].visible = false;
611 |             }
612 | 
613 |             this.player = this.add.sprite(64, 200, 'player');
614 | 
615 |             this.physics.arcade.enable(this.player);
616 | 
617 |             this.player.body.collideWorldBounds = true;
618 | 
619 |             this.foreground = this.add.tileSprite(0, 0, this.game.width, this.game.height, 'foreground');
620 |             this.foreground.autoScroll(-60, 0);
621 | 
622 |             this.weaponName = this.add.bitmapText(8, 364, 'shmupfont', "ENTER = Next Weapon", 24);
623 | 
624 |             //  Cursor keys to fly + space to fire
625 |             this.cursors = this.input.keyboard.createCursorKeys();
626 | 
627 |             this.input.keyboard.addKeyCapture([ Phaser.Keyboard.SPACEBAR ]);
628 | 
629 |             var changeKey = this.input.keyboard.addKey(Phaser.Keyboard.ENTER);
630 |             changeKey.onDown.add(this.nextWeapon, this);
631 | 
632 |         },
633 | 
634 |         nextWeapon: function () {
635 | 
636 |             //  Tidy-up the current weapon
637 |             if (this.currentWeapon > 9)
638 |             {
639 |                 this.weapons[this.currentWeapon].reset();
640 |             }
641 |             else
642 |             {
643 |                 this.weapons[this.currentWeapon].visible = false;
644 |                 this.weapons[this.currentWeapon].callAll('reset', null, 0, 0);
645 |                 this.weapons[this.currentWeapon].setAll('exists', false);
646 |             }
647 | 
648 |             //  Activate the new one
649 |             this.currentWeapon++;
650 | 
651 |             if (this.currentWeapon === this.weapons.length)
652 |             {
653 |                 this.currentWeapon = 0;
654 |             }
655 | 
656 |             this.weapons[this.currentWeapon].visible = true;
657 | 
658 |             this.weaponName.text = this.weapons[this.currentWeapon].name;
659 | 
660 |         },
661 | 
662 |         update: function () {
663 | 
664 |             this.player.body.velocity.set(0);
665 | 
666 |             if (this.cursors.left.isDown)
667 |             {
668 |                 this.player.body.velocity.x = -this.speed;
669 |             }
670 |             else if (this.cursors.right.isDown)
671 |             {
672 |                 this.player.body.velocity.x = this.speed;
673 |             }
674 | 
675 |             if (this.cursors.up.isDown)
676 |             {
677 |                 this.player.body.velocity.y = -this.speed;
678 |             }
679 |             else if (this.cursors.down.isDown)
680 |             {
681 |                 this.player.body.velocity.y = this.speed;
682 |             }
683 | 
684 |             if (this.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR))
685 |             {
686 |                 this.weapons[this.currentWeapon].fire(this.player);
687 |             }
688 | 
689 |         }
690 | 
691 |     };
692 | 
693 |     game.state.add('Game', PhaserGame, true);
694 | 
695 |     </script>
696 | 
697 |     <a href="http://phaser.io"><img src="http://files.phaser.io.s3.amazonaws.com/codingtips/issue007/phaser-tips-header1.png" title="Phaser Coding Tips Weekly" style="margin-top: 8px" /></a>
698 | 
699 | </body>
700 | </html>


--------------------------------------------------------------------------------
/issue-007/phaser-tips-header1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-007/phaser-tips-header1.png


--------------------------------------------------------------------------------
/issue-008/aliens.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <head>
  4 |     <title>Path Examples</title>
  5 |     <meta charset="utf-8">
  6 |     <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
  7 | </head>
  8 | <body>
  9 | 
 10 |     <div id="game"></div>
 11 | 
 12 |     <script type="text/javascript">
 13 | 
 14 |     var game = new Phaser.Game(640, 480, Phaser.AUTO, 'game');
 15 | 
 16 |     var PhaserGame = function () {
 17 | 
 18 |         this.bmd = null;
 19 | 
 20 |         this.alien = null;
 21 | 
 22 |         this.mode = 0;
 23 | 
 24 |         this.points = {
 25 |             'x': [ 32, 128, 256, 384, 512, 608 ],
 26 |             'y': [ 240, 240, 240, 240, 240, 240 ]
 27 |         };
 28 | 
 29 |         this.pi = 0;
 30 |         this.path = [];
 31 | 
 32 |     };
 33 | 
 34 |     PhaserGame.prototype = {
 35 | 
 36 |         init: function () {
 37 | 
 38 |             this.game.renderer.renderSession.roundPixels = true;
 39 |             this.stage.backgroundColor = '#204090';
 40 | 
 41 |         },
 42 | 
 43 |         preload: function () {
 44 | 
 45 |             //  We need this because the assets are on Amazon S3
 46 |             //  Remove the next 2 lines if running locally
 47 |             // this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue008/';
 48 |             this.load.crossOrigin = 'anonymous';
 49 | 
 50 |             this.load.image('alien', 'assets/ufo.png');
 51 |             this.load.bitmapFont('shmupfont', 'assets/shmupfont.png', 'assets/shmupfont.xml');
 52 | 
 53 |             //  Note: Graphics are not for use in any commercial project
 54 | 
 55 |         },
 56 | 
 57 |         create: function () {
 58 | 
 59 |             this.bmd = this.add.bitmapData(this.game.width, this.game.height);
 60 |             this.bmd.addToWorld();
 61 | 
 62 |             this.alien = this.add.sprite(0, 0, 'alien');
 63 |             this.alien.anchor.set(0.5);
 64 | 
 65 |             var py = this.points.y;
 66 | 
 67 |             for (var i = 0; i < py.length; i++)
 68 |             {
 69 |                 py[i] = this.rnd.between(32, 432);
 70 |             }
 71 | 
 72 |             this.hint = this.add.bitmapText(8, 444, 'shmupfont', "Linear", 24);
 73 | 
 74 |             this.input.onDown.add(this.changeMode, this);
 75 | 
 76 |             this.plot();
 77 | 
 78 |         },
 79 | 
 80 |         changeMode: function () {
 81 | 
 82 |             this.mode++;
 83 | 
 84 |             if (this.mode === 3)
 85 |             {
 86 |                 this.mode = 0;
 87 |             }
 88 | 
 89 |             if (this.mode === 0)
 90 |             {
 91 |                 this.hint.text = "Linear";
 92 |             }
 93 |             else if (this.mode === 1)
 94 |             {
 95 |                 this.hint.text = "Bezier";
 96 |             }
 97 |             else if (this.mode === 2)
 98 |             {
 99 |                 this.hint.text = "Catmull Rom";
100 |             }
101 | 
102 |             this.plot();
103 | 
104 |         },
105 | 
106 |         plot: function () {
107 | 
108 |             this.bmd.clear();
109 | 
110 |             this.path = [];
111 | 
112 |             var x = 1 / game.width;
113 | 
114 |             for (var i = 0; i <= 1; i += x)
115 |             {
116 |                 if (this.mode === 0)
117 |                 {
118 |                     var px = this.math.linearInterpolation(this.points.x, i);
119 |                     var py = this.math.linearInterpolation(this.points.y, i);
120 |                 }
121 |                 else if (this.mode === 1)
122 |                 {
123 |                     var px = this.math.bezierInterpolation(this.points.x, i);
124 |                     var py = this.math.bezierInterpolation(this.points.y, i);
125 |                 }
126 |                 else if (this.mode === 2)
127 |                 {
128 |                     var px = this.math.catmullRomInterpolation(this.points.x, i);
129 |                     var py = this.math.catmullRomInterpolation(this.points.y, i);
130 |                 }
131 | 
132 |                 this.path.push( { x: px, y: py });
133 | 
134 |                 this.bmd.rect(px, py, 1, 1, 'rgba(255, 255, 255, 1)');
135 |             }
136 | 
137 |             for (var p = 0; p < this.points.x.length; p++)
138 |             {
139 |                 this.bmd.rect(this.points.x[p]-3, this.points.y[p]-3, 6, 6, 'rgba(255, 0, 0, 1)');
140 |             }
141 | 
142 |         },
143 | 
144 |         update: function () {
145 | 
146 |             this.alien.x = this.path[this.pi].x;
147 |             this.alien.y = this.path[this.pi].y;
148 | 
149 |             this.pi++;
150 | 
151 |             if (this.pi >= this.path.length)
152 |             {
153 |                 this.pi = 0;
154 |             }
155 | 
156 |         }
157 | 
158 |     };
159 | 
160 |     game.state.add('Game', PhaserGame, true);
161 | 
162 |     </script>
163 | 
164 |     <a href="http://phaser.io"><img src="http://files.phaser.io.s3.amazonaws.com/codingtips/issue007/phaser-tips-header1.png" title="Phaser Coding Tips Weekly" style="margin-top: 8px" /></a>
165 | 
166 | </body>
167 | </html>


--------------------------------------------------------------------------------
/issue-008/assets/arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-008/assets/arrow.png


--------------------------------------------------------------------------------
/issue-008/assets/shmupfont.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-008/assets/shmupfont.png


--------------------------------------------------------------------------------
/issue-008/assets/shmupfont.xml:
--------------------------------------------------------------------------------
 1 | <font>
 2 |   <info face="shmupfont" size="24" bold="0" italic="0" charset="" unicode="" stretchH="100" smooth="1" aa="1" padding="2,2,2,2" spacing="0,0" outline="0"/>
 3 |   <common lineHeight="33" base="28" scaleW="256" scaleH="256" pages="1" packed="0"/>
 4 |   <pages>
 5 |     <page id="0" file="shmupfont.png"/>
 6 |   </pages>
 7 |   <chars count="80">
 8 |     <char id="97" x="2" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
 9 |     <char id="98" x="2" y="21" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
10 |     <char id="99" x="2" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
11 |     <char id="100" x="2" y="59" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
12 |     <char id="101" x="2" y="78" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
13 |     <char id="102" x="2" y="97" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
14 |     <char id="103" x="2" y="116" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
15 |     <char id="104" x="2" y="135" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
16 |     <char id="105" x="27" y="2" width="11" height="17" xoffset="0" yoffset="12" xadvance="15" page="0" chnl="15"/>
17 |     <char id="106" x="27" y="21" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
18 |     <char id="107" x="40" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
19 |     <char id="108" x="27" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
20 |     <char id="109" x="27" y="59" width="35" height="17" xoffset="0" yoffset="12" xadvance="39" page="0" chnl="15"/>
21 |     <char id="110" x="52" y="21" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
22 |     <char id="111" x="65" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
23 |     <char id="112" x="52" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
24 |     <char id="113" x="64" y="59" width="23" height="20" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
25 |     <char id="114" x="77" y="21" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
26 |     <char id="115" x="90" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
27 |     <char id="116" x="77" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
28 |     <char id="117" x="27" y="78" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
29 |     <char id="118" x="89" y="59" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
30 |     <char id="119" x="102" y="21" width="35" height="17" xoffset="0" yoffset="12" xadvance="39" page="0" chnl="15"/>
31 |     <char id="120" x="115" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
32 |     <char id="121" x="102" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
33 |     <char id="122" x="89" y="78" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
34 |     <char id="65" x="52" y="81" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
35 |     <char id="66" x="27" y="97" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
36 |     <char id="67" x="77" y="97" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
37 |     <char id="68" x="52" y="100" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
38 |     <char id="69" x="27" y="116" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
39 |     <char id="70" x="102" y="97" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
40 |     <char id="71" x="114" y="59" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
41 |     <char id="72" x="127" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
42 |     <char id="73" x="140" y="2" width="11" height="17" xoffset="0" yoffset="12" xadvance="15" page="0" chnl="15"/>
43 |     <char id="74" x="139" y="21" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
44 |     <char id="75" x="153" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
45 |     <char id="76" x="114" y="78" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
46 |     <char id="77" x="127" y="97" width="35" height="17" xoffset="0" yoffset="12" xadvance="39" page="0" chnl="15"/>
47 |     <char id="78" x="152" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
48 |     <char id="79" x="164" y="21" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
49 |     <char id="80" x="178" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
50 |     <char id="81" x="139" y="59" width="23" height="20" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
51 |     <char id="82" x="77" y="116" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
52 |     <char id="83" x="52" y="119" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
53 |     <char id="84" x="27" y="135" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
54 |     <char id="85" x="102" y="116" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
55 |     <char id="86" x="127" y="116" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
56 |     <char id="87" x="152" y="116" width="35" height="17" xoffset="0" yoffset="12" xadvance="39" page="0" chnl="15"/>
57 |     <char id="88" x="177" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
58 |     <char id="89" x="189" y="21" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
59 |     <char id="90" x="203" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
60 |     <char id="33" x="164" y="59" width="11" height="17" xoffset="0" yoffset="12" xadvance="15" page="0" chnl="15"/>
61 |     <char id="8470" x="177" y="59" width="11" height="29" xoffset="2" yoffset="0" xadvance="12" page="0" chnl="15"/>
62 |     <char id="59" x="164" y="78" width="8" height="17" xoffset="0" yoffset="18" xadvance="12" page="0" chnl="15"/>
63 |     <char id="37" x="174" y="90" width="41" height="17" xoffset="0" yoffset="12" xadvance="45" page="0" chnl="15"/>
64 |     <char id="58" x="164" y="97" width="8" height="17" xoffset="0" yoffset="12" xadvance="12" page="0" chnl="15"/>
65 |     <char id="63" x="202" y="40" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
66 |     <char id="42" x="214" y="21" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
67 |     <char id="40" x="190" y="59" width="14" height="23" xoffset="0" yoffset="9" xadvance="18" page="0" chnl="15"/>
68 |     <char id="41" x="206" y="59" width="14" height="23" xoffset="0" yoffset="9" xadvance="18" page="0" chnl="15"/>
69 |     <char id="95" x="139" y="81" width="17" height="5" xoffset="0" yoffset="30" xadvance="21" page="0" chnl="15"/>
70 |     <char id="43" x="228" y="2" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
71 |     <char id="45" x="139" y="88" width="17" height="5" xoffset="0" yoffset="18" xadvance="21" page="0" chnl="15"/>
72 |     <char id="61" x="189" y="109" width="17" height="11" xoffset="0" yoffset="15" xadvance="21" page="0" chnl="15"/>
73 |     <char id="46" x="77" y="81" width="8" height="8" xoffset="0" yoffset="21" xadvance="12" page="0" chnl="15"/>
74 |     <char id="44" x="189" y="122" width="8" height="11" xoffset="0" yoffset="24" xadvance="12" page="0" chnl="15"/>
75 |     <char id="47" x="199" y="122" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
76 |     <char id="124" x="217" y="84" width="11" height="23" xoffset="0" yoffset="9" xadvance="15" page="0" chnl="15"/>
77 |     <char id="34" x="222" y="59" width="17" height="11" xoffset="0" yoffset="12" xadvance="21" page="0" chnl="15"/>
78 |     <char id="39" x="227" y="40" width="8" height="11" xoffset="0" yoffset="12" xadvance="12" page="0" chnl="15"/>
79 |     <char id="64" x="77" y="135" width="23" height="17" xoffset="0" yoffset="12" xadvance="27" page="0" chnl="15"/>
80 |     <char id="35" x="102" y="135" width="29" height="17" xoffset="0" yoffset="12" xadvance="33" page="0" chnl="15"/>
81 |     <char id="36" x="52" y="138" width="23" height="23" xoffset="0" yoffset="9" xadvance="27" page="0" chnl="15"/>
82 |     <char id="94" x="237" y="40" width="17" height="11" xoffset="0" yoffset="12" xadvance="21" page="0" chnl="15"/>
83 |     <char id="38" x="2" y="154" width="32" height="17" xoffset="0" yoffset="12" xadvance="36" page="0" chnl="15"/>
84 |     <char id="123" x="133" y="135" width="23" height="23" xoffset="0" yoffset="9" xadvance="27" page="0" chnl="15"/>
85 |     <char id="125" x="77" y="154" width="23" height="23" xoffset="0" yoffset="9" xadvance="27" page="0" chnl="15"/>
86 |     <char id="91" x="2" y="173" width="14" height="23" xoffset="0" yoffset="9" xadvance="18" page="0" chnl="15"/>
87 |     <char id="93" x="18" y="173" width="14" height="23" xoffset="0" yoffset="9" xadvance="18" page="0" chnl="15"/>
88 |     <char id="32" x="0" y="0" width="0" height="0" xoffset="0" yoffset="9" xadvance="12" page="0" chnl="15"/>
89 |   </chars>
90 | </font>


--------------------------------------------------------------------------------
/issue-008/assets/ufo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-008/assets/ufo.png


--------------------------------------------------------------------------------
/issue-008/face.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <head>
  4 |     <title>Path Examples</title>
  5 |     <meta charset="utf-8">
  6 |     <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
  7 | </head>
  8 | <body>
  9 | 
 10 |     <div id="game"></div>
 11 | 
 12 |     <script type="text/javascript">
 13 | 
 14 |     var game = new Phaser.Game(640, 480, Phaser.AUTO, 'game');
 15 | 
 16 |     var PhaserGame = function () {
 17 | 
 18 |         this.bmd = null;
 19 | 
 20 |         this.arrow = null;
 21 | 
 22 |         this.mode = 2;
 23 | 
 24 |         this.points = {
 25 |             'x': [ 32, 128, 256, 384, 512, 608 ],
 26 |             'y': [ 240, 240, 240, 240, 240, 240 ]
 27 |         };
 28 | 
 29 |         this.pi = 0;
 30 |         this.path = [];
 31 | 
 32 |     };
 33 | 
 34 |     PhaserGame.prototype = {
 35 | 
 36 |         init: function () {
 37 | 
 38 |             this.game.renderer.renderSession.roundPixels = true;
 39 |             this.stage.backgroundColor = '#204090';
 40 | 
 41 |         },
 42 | 
 43 |         preload: function () {
 44 | 
 45 |             //  We need this because the assets are on Amazon S3
 46 |             //  Remove the next 2 lines if running locally
 47 |             // this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue008/';
 48 |             this.load.crossOrigin = 'anonymous';
 49 | 
 50 |             this.load.image('arrow', 'assets/arrow.png');
 51 |             this.load.bitmapFont('shmupfont', 'assets/shmupfont.png', 'assets/shmupfont.xml');
 52 | 
 53 |             //  Note: Graphics are not for use in any commercial project
 54 | 
 55 |         },
 56 | 
 57 |         create: function () {
 58 | 
 59 |             this.bmd = this.add.bitmapData(this.game.width, this.game.height);
 60 |             this.bmd.addToWorld();
 61 | 
 62 |             this.arrow = this.add.sprite(0, 0, 'arrow');
 63 |             this.arrow.anchor.set(0.5);
 64 | 
 65 |             var py = this.points.y;
 66 | 
 67 |             for (var i = 0; i < py.length; i++)
 68 |             {
 69 |                 py[i] = this.rnd.between(32, 432);
 70 |             }
 71 | 
 72 |             this.hint = this.add.bitmapText(8, 444, 'shmupfont', "Catmull Rom", 24);
 73 | 
 74 |             this.input.onDown.add(this.changeMode, this);
 75 | 
 76 |             this.plot();
 77 | 
 78 |         },
 79 | 
 80 |         changeMode: function () {
 81 | 
 82 |             this.mode++;
 83 | 
 84 |             if (this.mode === 3)
 85 |             {
 86 |                 this.mode = 0;
 87 |             }
 88 | 
 89 |             if (this.mode === 0)
 90 |             {
 91 |                 this.hint.text = "Linear";
 92 |             }
 93 |             else if (this.mode === 1)
 94 |             {
 95 |                 this.hint.text = "Bezier";
 96 |             }
 97 |             else if (this.mode === 2)
 98 |             {
 99 |                 this.hint.text = "Catmull Rom";
100 |             }
101 | 
102 |             this.plot();
103 | 
104 |         },
105 | 
106 |         plot: function () {
107 | 
108 |             this.bmd.clear();
109 | 
110 |             this.path = [];
111 | 
112 |             var ix = 0;
113 |             var x = 1 / game.width;
114 | 
115 |             for (var i = 0; i <= 1; i += x)
116 |             {
117 |                 if (this.mode === 0)
118 |                 {
119 |                     var px = this.math.linearInterpolation(this.points.x, i);
120 |                     var py = this.math.linearInterpolation(this.points.y, i);
121 |                 }
122 |                 else if (this.mode === 1)
123 |                 {
124 |                     var px = this.math.bezierInterpolation(this.points.x, i);
125 |                     var py = this.math.bezierInterpolation(this.points.y, i);
126 |                 }
127 |                 else if (this.mode === 2)
128 |                 {
129 |                     var px = this.math.catmullRomInterpolation(this.points.x, i);
130 |                     var py = this.math.catmullRomInterpolation(this.points.y, i);
131 |                 }
132 | 
133 |                 var node = { x: px, y: py, angle: 0 };
134 | 
135 |                 if (ix > 0)
136 |                 {
137 |                     node.angle = this.math.angleBetweenPoints(this.path[ix - 1], node);
138 |                 }
139 | 
140 |                 this.path.push(node);
141 | 
142 |                 ix++;
143 | 
144 |                 this.bmd.rect(px, py, 1, 1, 'rgba(255, 255, 255, 1)');
145 |             }
146 | 
147 |             for (var p = 0; p < this.points.x.length; p++)
148 |             {
149 |                 this.bmd.rect(this.points.x[p]-3, this.points.y[p]-3, 6, 6, 'rgba(255, 0, 0, 1)');
150 |             }
151 | 
152 |         },
153 | 
154 |         update: function () {
155 | 
156 |             this.arrow.x = this.path[this.pi].x;
157 |             this.arrow.y = this.path[this.pi].y;
158 |             this.arrow.rotation = this.path[this.pi].angle;
159 | 
160 |             this.pi++;
161 | 
162 |             if (this.pi >= this.path.length)
163 |             {
164 |                 this.pi = 0;
165 |             }
166 | 
167 |         }
168 | 
169 |     };
170 | 
171 |     game.state.add('Game', PhaserGame, true);
172 | 
173 |     </script>
174 | 
175 |     <a href="http://phaser.io"><img src="http://files.phaser.io.s3.amazonaws.com/codingtips/issue007/phaser-tips-header1.png" title="Phaser Coding Tips Weekly" style="margin-top: 8px" /></a>
176 | 
177 | </body>
178 | </html>


--------------------------------------------------------------------------------
/issue-008/paths.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | <head>
  4 |     <title>Path Examples</title>
  5 |     <meta charset="utf-8">
  6 |     <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
  7 | </head>
  8 | <body>
  9 | 
 10 |     <div id="game"></div>
 11 | 
 12 |     <script type="text/javascript">
 13 | 
 14 |     var game = new Phaser.Game(640, 480, Phaser.AUTO, 'game');
 15 | 
 16 |     var PhaserGame = function () {
 17 | 
 18 |         this.bmd = null;
 19 | 
 20 |         this.mode = 0;
 21 | 
 22 |         this.points = {
 23 |             'x': [ 32, 128, 256, 384, 512, 608 ],
 24 |             'y': [ 240, 240, 240, 240, 240, 240 ]
 25 |         };
 26 | 
 27 |     };
 28 | 
 29 |     PhaserGame.prototype = {
 30 | 
 31 |         init: function () {
 32 | 
 33 |             this.game.renderer.renderSession.roundPixels = true;
 34 |             this.stage.backgroundColor = '#204090';
 35 | 
 36 |         },
 37 | 
 38 |         preload: function () {
 39 | 
 40 |             //  We need this because the assets are on Amazon S3
 41 |             //  Remove the next 2 lines if running locally
 42 |             // this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue008/';
 43 |             this.load.crossOrigin = 'anonymous';
 44 | 
 45 |             this.load.bitmapFont('shmupfont', 'assets/shmupfont.png', 'assets/shmupfont.xml');
 46 | 
 47 |             //  Note: Graphics are not for use in any commercial project
 48 | 
 49 |         },
 50 | 
 51 |         create: function () {
 52 | 
 53 |             this.bmd = this.add.bitmapData(this.game.width, this.game.height);
 54 |             this.bmd.addToWorld();
 55 | 
 56 |             var py = this.points.y;
 57 | 
 58 |             for (var i = 0; i < py.length; i++)
 59 |             {
 60 |                 py[i] = this.rnd.between(32, 432);
 61 |             }
 62 | 
 63 |             console.log(this.points.y);
 64 | 
 65 |             this.hint = this.add.bitmapText(8, 444, 'shmupfont', "Linear", 24);
 66 | 
 67 |             this.input.onDown.add(this.changeMode, this);
 68 | 
 69 |             this.plot();
 70 | 
 71 |         },
 72 | 
 73 |         changeMode: function () {
 74 | 
 75 |             this.mode++;
 76 | 
 77 |             if (this.mode === 3)
 78 |             {
 79 |                 this.mode = 0;
 80 |             }
 81 | 
 82 |             if (this.mode === 0)
 83 |             {
 84 |                 this.hint.text = "Linear";
 85 |             }
 86 |             else if (this.mode === 1)
 87 |             {
 88 |                 this.hint.text = "Bezier";
 89 |             }
 90 |             else if (this.mode === 2)
 91 |             {
 92 |                 this.hint.text = "Catmull Rom";
 93 |             }
 94 | 
 95 |             this.plot();
 96 | 
 97 |         },
 98 | 
 99 |         plot: function () {
100 | 
101 |             this.bmd.clear();
102 | 
103 |             var x = 1 / game.width;
104 | 
105 |             for (var i = 0; i <= 1; i += x)
106 |             {
107 |                 if (this.mode === 0)
108 |                 {
109 |                     var px = this.math.linearInterpolation(this.points.x, i);
110 |                     var py = this.math.linearInterpolation(this.points.y, i);
111 |                 }
112 |                 else if (this.mode === 1)
113 |                 {
114 |                     var px = this.math.bezierInterpolation(this.points.x, i);
115 |                     var py = this.math.bezierInterpolation(this.points.y, i);
116 |                 }
117 |                 else if (this.mode === 2)
118 |                 {
119 |                     var px = this.math.catmullRomInterpolation(this.points.x, i);
120 |                     var py = this.math.catmullRomInterpolation(this.points.y, i);
121 |                 }
122 | 
123 |                 this.bmd.rect(px, py, 1, 1, 'rgba(255, 255, 255, 1)');
124 |             }
125 | 
126 |             for (var p = 0; p < this.points.x.length; p++)
127 |             {
128 |                 this.bmd.rect(this.points.x[p]-3, this.points.y[p]-3, 6, 6, 'rgba(255, 0, 0, 1)');
129 |             }
130 | 
131 |         }
132 | 
133 |     };
134 | 
135 |     game.state.add('Game', PhaserGame, true);
136 | 
137 |     </script>
138 | 
139 |     <a href="http://phaser.io"><img src="http://files.phaser.io.s3.amazonaws.com/codingtips/issue007/phaser-tips-header1.png" title="Phaser Coding Tips Weekly" style="margin-top: 8px" /></a>
140 | 
141 | </body>
142 | </html>


--------------------------------------------------------------------------------
/issue-008/phaser-tips-header1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phaserjs/phaser-ce-coding-tips/46bd83a3984bff84cdb044b1cadf0a7d77a4b783/issue-008/phaser-tips-header1.png


--------------------------------------------------------------------------------