“Serious Scramblers” HTML5 prototype built with Phaser and TypeScript – Adding sprites and animations
Talking about Serious Scramblers game, Game development, HTML5, Javascript, Phaser and TypeScript.
As said a couple of days ago on my Twitter account (follow me if you didn’t already), I made a big update to my Serious Scramblers prototype, adding sprites and animations taken from Pixel Adventure assets.
So now the hero is some kind of ninja frog, enemies are angry pigs and platforms look better.
Just like in DROP’d prototype, now platforms are RenderTexture object, to render them as 9-slice scaling objects, although in this example is used only three slices: one for the left edge, one for the platform itself and one for the right edge.
Another feature added in this step is a slight size difference between sprite size and physics body size. I wanted the physics bodies to be smaller than actual sprites, because I didn’t want pixel perfect collisions.
Let’s have a look at the game:
Tap and hold left or right to move the character left or right. Once you move, platforms will scroll up. Reach the top of the stage, and it’s game over.
Fall from platform to platform without falling too down, if you reach the bottom of the stage, it’s game over.
Touch an enemy, and it’s game over. But you can kill enemies by jumping on their head.
The game is made of 10 TypeScript files and one HTML file used in this prototype. Again, I made a lot of changes since previous step, so I am not highlighting the new code, but each and every line has been commented.
index.html
The webpage which hosts the game, just the bare bones of HTML and main.ts
is called.
Also look at the thegame
div, this is where the game will run.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <! DOCTYPE html> < html > < head > < style type = "text/css" > body { background: #000000; padding: 0px; margin: 0px; } </ style > < script src = "scripts/main.ts" ></ script > </ head > < body > < div id = "thegame" ></ div > </ body > </ html > |
main.ts
The main TypeScript file, the one called by index.html
.
Here we import most of the game libraries and define both Scale Manager object and Physics object.
Here we also initialize the game itself.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | // MAIN GAME FILE // modules to import import Phaser from 'phaser' ; import { PreloadAssets } from './preloadAssets' ; import { PlayGame} from './playGame' ; import { GameOptions } from './gameOptions' ; // object to initialize the Scale Manager const scaleObject: Phaser.Types.Core.ScaleConfig = { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, parent: 'thegame' , width: GameOptions.gameSize.width, height: GameOptions.gameSize.height } // object to initialize Arcade physics const physicsObject: Phaser.Types.Core.PhysicsConfig = { default : 'arcade' , arcade: { gravity: { y: GameOptions.gameGravity } } } // game configuration object const configObject: Phaser.Types.Core.GameConfig = { type: Phaser.AUTO, backgroundColor:0x444444, scale: scaleObject, scene: [PreloadAssets, PlayGame], physics: physicsObject, pixelArt: true } // the game itself new Phaser.Game(configObject); |
preloadAssets.ts
Class to preload all assets used in the game.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | // CLASS TO PRELOAD ASSETS // this class extends Scene class export class PreloadAssets extends Phaser.Scene { // constructor constructor() { super ({ key: 'PreloadAssets' }); } // preload assets preload(): void { this .load.image( 'platform' , 'assets/platform.png' ); this .load.image( 'background' , 'assets/background.png' ); this .load.image( 'leftplatformedge' , 'assets/leftplatformedge.png' ); this .load.image( 'rightplatformedge' , 'assets/rightplatformedge.png' ); this .load.spritesheet( 'enemy' , 'assets/enemy.png' , { frameWidth: 36, frameHeight: 30 }); this .load.spritesheet( 'enemy_hit' , 'assets/enemy_hit.png' , { frameWidth: 36, frameHeight: 30 }); this .load.spritesheet( 'hero' , 'assets/hero.png' , { frameWidth: 32, frameHeight: 32 }); this .load.spritesheet( 'hero_run' , 'assets/hero_run.png' , { frameWidth: 32, frameHeight: 32 }); } // method to be called once the instance has been created create(): void { // call PlayGame class this .scene.start( 'PlayGame' ); } } |
gameOptions.ts
Game options which can be changed to tune the gameplay are stored in a separate module, ready to be reused.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | // CONFIGURABLE GAME OPTIONS export const GameOptions = { // game size, in pixels gameSize: { width: 750, height: 1334 }, // game scale ratio pixelScale: 3, // first platform vertical position. 0 = top of the screen, 1 = bottom of the screen firstPlatformPosition: 4 / 10, // game gravity, which only affects the hero gameGravity: 1200, // hero speed, in pixels per second heroSpeed: 300, // platform speed, in pixels per second platformSpeed: 90, // platform length range, in pixels platformLengthRange: [150, 250], // platform horizontal distance range from the center of the stage, in pixels platformHorizontalDistanceRange: [0, 250], // platform vertical distance range, in pixels platformVerticalDistanceRange: [150, 250], // platform tint colors platformColors: [0xffffff, 0xff0000, 0x00ff00], // bounce velocity when landing on bouncing platform bounceVelocity: 500, // disappearing platform time before disappearing, in milliseconds disappearTime: 1000, // enemy patrolling speed range, in pixels per second enemyPatrolSpeedRange: [40, 80], // chances of an enemy appearing on a platform, 0: no chance, 1: certainly appears enemyChance: 1 } |
playGame.ts
The game itself, the biggest class, game logic is stored here.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 | // THE GAME ITSELF // modules to import import { GameOptions } from './gameOptions' ; import PlayerSprite from './playerSprite' ; import PlatformSprite from './platformSprite' ; import EnemySprite from './enemySprite' ; import PlatformGroup from './platformGroup' ; import EnemyGroup from './enemyGroup' ; // this class extends Scene class export class PlayGame extends Phaser.Scene { // group to contain all platforms platformGroup: PlatformGroup; // group to contain all enemies enemyGroup: EnemyGroup; // the hero of the game hero: PlayerSprite; // is it the first time player is moving? firstMove: Boolean; // enemy pool, built as an array enemyPool: EnemySprite[]; // just a debug text to print some info debugText: Phaser.GameObjects.Text; // background image backgroundImage: Phaser.GameObjects.TileSprite; // left edge platform sprite leftPlatform: Phaser.GameObjects.Sprite; // right edge platform sprite rightPlatform: Phaser.GameObjects.Sprite; // middle platform sprite middlePlatform: Phaser.GameObjects.Sprite; // constructor constructor() { super ({ key: 'PlayGame' }); } // method to be called once the class has been created create(): void { // method to initialize platform sprites this .initializePlatformSprites(); // method to inizialize animations this .initializeAnimations(); // method to place the background image this .setBackground(); // add the debug text to the game this .debugText = this .add.text(16, 16, '' , { color: '#000000' , fontFamily: 'monospace' , fontSize: '48px' }); // initialize enemy pool as an empty array this .enemyPool = []; // this is the firt move this .firstMove = true ; // create a new physics group for the platforms this .platformGroup = new PlatformGroup( this .physics.world, this ); // create a new physics group for the enemies this .enemyGroup = new EnemyGroup( this .physics.world, this ); // let's create ten platforms. They are more than enough for ( let i: number = 0; i < 10; i ++) { // create a new platform let platform: PlatformSprite = new PlatformSprite( this , this .platformGroup, this .leftPlatform, this .middlePlatform, this .rightPlatform); // if it's not the first platform... if (i > 0) { // place some stuff on it this .placeStuffOnPlatform(platform); } } // add the hero this .hero = new PlayerSprite( this ); // input listener to move the hero this .input.on( "pointerdown" , this .moveHero, this ); // input listener to stop the hero this .input.on( "pointerup" , this .stopHero, this ); } // method to set background image setBackground(): void { // add a tileSprite this .backgroundImage = this .add.tileSprite(0, 0, GameOptions.gameSize.width / GameOptions.pixelScale, GameOptions.gameSize.height / GameOptions.pixelScale, 'background' ); // set background origin to top left corner this .backgroundImage.setOrigin(0, 0); // set background scale this .backgroundImage.scale = GameOptions.pixelScale; } // method to inizialize animations initializeAnimations(): void { // hero idle animation this .anims.create({ key: "idle" , frames: this .anims.generateFrameNumbers( 'hero' , { start: 0, end: 10 }), frameRate: 20, repeat: -1 }); // hero run animation this .anims.create({ key: "run" , frames: this .anims.generateFrameNumbers( 'hero_run' , { start: 0, end: 11 }), frameRate: 20, repeat: -1 }); // enemy run animation this .anims.create({ key: "enemy_run" , frames: this .anims.generateFrameNumbers( 'enemy' , { start: 0, end: 11 }), frameRate: 20, repeat: -1 }); // enemy falling animation this .anims.create({ key: "enemy_falling" , frames: this .anims.generateFrameNumbers( 'enemy_hit' , { start: 0, end: 2 }), frameRate: 20 }); } // method to inizialize platform sprites initializePlatformSprites(): void { // add left platform edge sprite this .leftPlatform = this .add.sprite(0, 0, 'leftplatformedge' ); // set registration point to top left corner this .leftPlatform.setOrigin(0, 0); // set sprite to invisible this .leftPlatform.setVisible( false ); // add right platform edge sprite this .rightPlatform = this .add.sprite(0, 0, 'rightplatformedge' ); // set registration point to top right corner this .rightPlatform.setOrigin(1, 0); // set sprite to invisible this .rightPlatform.setVisible( false ); // add middle platform sprite this .middlePlatform = this .add.sprite(0, 0, 'platform' ); // set registration point to center this .middlePlatform.setOrigin(0, 0); // set sprite to invisible this .middlePlatform.setVisible( false ); } // method to place stuff on platform // argument: the platform placeStuffOnPlatform(platform: PlatformSprite): void { // should we add an enemy? if (Math.random() < GameOptions.enemyChance) { // is the enemy pool empty? if ( this .enemyPool.length == 0) { // create a new enemy sprite new EnemySprite( this , platform, this .enemyGroup) } // enemy pool is not empty else { // retrieve an enemy from the enemy pool let enemy: EnemySprite = this .enemyPool.shift() as EnemySprite; // move the enemy from the pool to enemy group enemy.poolToGroup(platform, this .enemyGroup); } } } // method to move the hero // argument: the input pointer moveHero(e: Phaser.Input.Pointer): void { // set hero movement according to input position this .hero.setMovement((e.x > GameOptions.gameSize.width / 2) ? this .hero.RIGHT : this .hero.LEFT); // is it the first move? if ( this .firstMove) { // it's no longer the first move this .firstMove = false ; // move platform group this .platformGroup.setVelocityY(-GameOptions.platformSpeed); } } // method to stop the hero stopHero(): void { // ... just stop the hero :) this .hero.setMovement( this .hero.STOP); } // method to handle collisions between hero and enemies // arguments: the two colliding bodies handleEnemyCollision(body1: Phaser.GameObjects.GameObject, body2: Phaser.GameObjects.GameObject): void { // first body is the hero let hero: PlayerSprite = body1 as PlayerSprite; // second body is the enemy let enemy: EnemySprite = body2 as EnemySprite; // the following code will be executed only if the hero touches the enemy on its upper side (STOMP!) if (hero.body.touching.down && enemy.body.touching.up) { // move the enemy from enemy group to enemy pool enemy.groupToPool( this .enemyGroup, this .enemyPool); // play "enemy_falling" animation enemy.anims.play('enemy_falling ', true); // flip the enemy vertically enemy.setFlipY(true); // make the hero bounce hero.setVelocityY(GameOptions.bounceVelocity * -1); } // hero touched an enemy without stomping it else { // restart the game this.scene.start("PlayGame"); } } // method to handle collisions between hero and platforms // arguments: the two colliding bodies handlePlatformCollision(body1: Phaser.GameObjects.GameObject, body2: Phaser.GameObjects.GameObject): void { // first body is the hero let hero: PlayerSprite = body1 as PlayerSprite; // second body is the platform let platform: PlatformSprite = body2 as PlatformSprite; // the following code will be executed only if the hero touches the platform on its upper side if (hero.body.touching.down && platform.body.touching.up) { // different actions according to platform type switch (platform.platformType) { // breakable platform case 1: // if the platform is not already fading out... if (!platform.isFadingOut) { // flag the platform as a fading out platform platform.isFadingOut = true; // add a tween to fade the platform out this.tweens.add({ targets: platform, alpha: 0, ease: ' bounce', duration: GameOptions.disappearTime, callbackScope: this , onComplete: function () { // reset the platform this .resetPlatform(platform); } }); } break ; // bouncy platform case 2: // make the hero jump changing vertical velocity hero.setVelocityY(GameOptions.bounceVelocity * -1); break ; } } } // method to reset a platform // argument: the platform resetPlatform(platform: PlatformSprite): void { // recycle the platform platform.initialize(); // place stuff on platform this .placeStuffOnPlatform(platform); } // method to handle collisions between enemies and platforms // arguments: the two colliding bodies handleEnemyPlatformCollision(body1: Phaser.GameObjects.GameObject, body2: Phaser.GameObjects.GameObject): void { // first body is the enemy let enemy: EnemySprite = body1 as EnemySprite; // second body is the platform let platform: PlatformSprite = body2 as PlatformSprite; // set the platform to patrol enemy.platformToPatrol = platform; } // method to be executed at each frame update(): void { // if the hero is already moving... if (! this .firstMove) { // scroll a bit the background texture this .backgroundImage.tilePositionY += 0.2; } // move the hero this .hero.move(); // handle collision between hero and platforms this .physics.world.collide( this .hero, this .platformGroup, this .handlePlatformCollision, undefined, this ); // handle collision between enemies and platforms this .physics.world.collide( this .enemyGroup, this .platformGroup, this .handleEnemyPlatformCollision, undefined, this ); // handle collisions between hero and enemies this .physics.world.collide( this .hero, this .enemyGroup, this .handleEnemyCollision, undefined, this ); // get all platforms let platforms: PlatformSprite[] = this .platformGroup.getChildren() as PlatformSprite[]; // loop through all platforms for ( let platform of platforms) { // get platform bounds let platformBounds: Phaser.Geom.Rectangle = platform.getBounds(); // if a platform leaves the stage to the upper side... if (platformBounds.bottom < 0) { // reset the platform this .resetPlatform(platform); } } // get all enemies let enemies: EnemySprite[] = this .enemyGroup.getChildren() as EnemySprite[]; // update debug text this .debugText.setText( "Enemies in group: " + enemies.length.toString() + "\nEnemies in pool: " + this .enemyPool.length.toString()); // loop through all enemies in enemyPool array for ( let enemy of this .enemyPool) { // if the enemy falls down the stage... if (enemy.y > GameOptions.gameSize.height + 100) { // set enemy velocity to zero enemy.setVelocity(0 ,0); // do not let enemy to be affacted by gravity enemy.body.setAllowGravity( false ); } } // loop through all enemies for ( let enemy of enemies) { // make enemy patrol enemy.patrol(); // get enemy bounds let enemyBounds: Phaser.Geom.Rectangle = enemy.getBounds(); // if the enemy leaves the screen... if (enemyBounds.bottom < 0) { // move enemy from enemy group to enemy pool enemy.groupToPool( this .enemyGroup, this .enemyPool); // do not show the enemy enemy.setVisible( false ); } } // if the hero falls down or leaves the stage from the top... if ( this .hero.y > GameOptions.gameSize.height || this .hero.y < 0) { // restart the scene this .scene.start( "PlayGame" ); } } } |
playerSprite.ts
Class to define the player Sprite, the main actor of the game, the one players control.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | // PLAYER SPRITE CLASS // modules to import import { GameOptions } from './gameOptions' ; // player sprite extends Arcade Sprite class export default class PlayerSprite extends Phaser.Physics.Arcade.Sprite { // assign LEFT property a -1 value, just like if it were a constant LEFT: number = -1; // assign RIGHT property a 1 value, just like if it were a constant RIGHT: number = 1; // assign STOP property a 0 value, just like if it were a constant STOP: number = 0; // player current movment is STOP currentMovement: number = this .STOP; // constructor // argument: game scene constructor(scene: Phaser.Scene) { super (scene, GameOptions.gameSize.width / 2, GameOptions.gameSize.height * GameOptions.firstPlatformPosition - 100, 'hero' ); // add the player to the scnee scene.add.existing( this ); // add physics body to platform scene.physics.add.existing( this ); // set player scale this .scale = GameOptions.pixelScale; // shrink a bit player pyhsics body size to make the game forgive players a bit this .body.setSize( this .displayWidth / GameOptions.pixelScale * 0.6, this .displayHeight / GameOptions.pixelScale * 0.7, false ); // set player physics body offset. This has to be done manually, no magic formula this .body.setOffset(7, 9); } // method to set player movement // argument: the new movement setMovement(n: number): void { // set currentMovement to n this .currentMovement = n; } // method to move the player move(): void { // set player horizontal velocity according to currentMovement value this .setVelocityX(GameOptions.heroSpeed * this .currentMovement); // various cases according to player movememt switch ( this .currentMovement) { // player is moving left case this .LEFT: // flip sprite horizontally this .setFlipX( true ); // play "run" animation this .anims.play( 'run' , true ); break ; // player is moving right case this .RIGHT: // do not flip sprite horizontally this .setFlipX( false ); // play "run" animation this .anims.play( 'run' , true ); break ; // player is not moving case this .STOP: // play "idle" animation this .anims.play( 'idle' , true ); break ; } } } |
platformSprite.ts
Class to define the platforms.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | // PLATFORM SPRITE CLASS // modules to import import PlatformGroup from './platformGroup' ; import { GameOptions } from './gameOptions' ; import { randomValue } from './utils' ; // platform sprite extends RenderTexture class export default class PlatformSprite extends Phaser.GameObjects.RenderTexture { // platform physics body body: Phaser.Physics.Arcade.Body; // platform type platformType: number = 0; // is the platform fading out? isFadingOut: Boolean = false ; // platform group platformGroup: PlatformGroup; // the three sprites forming the platform: left edge, middle, and right edge leftSprite: Phaser.GameObjects.Sprite; middleSprite: Phaser.GameObjects.Sprite; rightSprite: Phaser.GameObjects.Sprite; // constructor // arguments: the game scene, the platform group, sprite for left edge, sprite for the middle, sprite for the right edge constructor(scene: Phaser.Scene, group: PlatformGroup, leftSprite: Phaser.GameObjects.Sprite, middleSprite: Phaser.GameObjects.Sprite, rightSprite: Phaser.GameObjects.Sprite) { super (scene, 0, 0, 1, 16); // set left, middle and right sprites this .leftSprite = leftSprite; this .middleSprite = middleSprite; this .rightSprite = rightSprite; // RenderTexture object does not have default origin at 0.5, so we need to set it this .setOrigin(0.5); // add the platform to the scnee scene.add.existing( this ); // add physics body to platform scene.physics.add.existing( this ); // add the platform to group group.add( this ); // platform body does not react to collisions this .body.setImmovable( true ); // platform body is not affected by gravity this .body.setAllowGravity( false ); // save platform group this .platformGroup = group; // let's initialize the platform, with random position, size and so on this .initialize(); // set platform scale this .scale = GameOptions.pixelScale; } // method to initialize the platform initialize(): void { // platform is not fading out this .isFadingOut = false ; // platform alpha is set to fully opaque this .alpha = 1; // get lowest platform Y coordinate let lowestPlatformY: number = this .platformGroup.getLowestPlatformY(); // is lowest platform Y coordinate zero? (this means there are no platforms yet) if (lowestPlatformY == 0) { // position the first platform this .y = GameOptions.gameSize.height * GameOptions.firstPlatformPosition; this .x = GameOptions.gameSize.width / 2; } else { // position the platform this .y = lowestPlatformY + randomValue(GameOptions.platformVerticalDistanceRange); this .x = GameOptions.gameSize.width / 2 + randomValue(GameOptions.platformHorizontalDistanceRange) * Phaser.Math.RND.sign(); // set a random platform type this .platformType = 0 //Phaser.Math.Between(0, 2); } // platform width let newWidth: number = randomValue(GameOptions.platformLengthRange) / GameOptions.pixelScale; // set platform size this .setSize(newWidth, 16); // set platform body size this .body.setSize(newWidth, 16); // set middle sprite display width equal to entire platform width this .middleSprite.displayWidth = newWidth; // draw middle sprite this .draw( this .middleSprite, 0, 0); // draw left edge sprite this .draw( this .leftSprite, 0, 0); // draw right edge sprite this .draw( this .rightSprite, newWidth, 0); } } |
platformGroup.ts
Class to define the Phaser Group, dedicated to the group which contains all platforms.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | // PLATFORM GROUP CLASS // modules to import import PlatformSprite from "./platformSprite" ; // platform group extends Arcade Group class export default class PlatformGroup extends Phaser.Physics.Arcade.Group { // constructor // arguments: the physics world, the game scene constructor(world: Phaser.Physics.Arcade.World, scene: Phaser.Scene) { super (world, scene); } // method to get the lowest platform getLowestPlatformY(): number { // lowest platform value is initially set to zero let lowestPlatformY: number = 0; // get all group children let platforms: PlatformSprite[] = this .getChildren() as PlatformSprite[]; // loop through all platforms for ( let platform of platforms) { // get the highest value between lowestPlatform and platform y coordinate lowestPlatformY = Math.max(lowestPlatformY, platform.y); }; // return lowest platform coordinate return lowestPlatformY; } } |
enemySprite.ts
The class to define the patrolling enemy.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | // ENEMY SPRITE CLASS // modules to import import EnemyGroup from "./enemyGroup" ; import PlatformSprite from "./platformSprite" ; import { randomValue } from './utils' ; import { GameOptions } from './gameOptions' ; // enemy sprite extends Arcade Sprite class export default class EnemySprite extends Phaser.Physics.Arcade.Sprite { // the platform where the enemy is patrolling platformToPatrol: PlatformSprite; // enemy physics body body: Phaser.Physics.Arcade.Body; // constructor // arguments: the game scene, the platform where the enemy is on, and enemy group constructor(scene: Phaser.Scene, platform: PlatformSprite, group: EnemyGroup) { super (scene, platform.x, platform.y - 100, 'enemy' ); // add the platform to the scnee scene.add.existing( this ); // add physics body to platform scene.physics.add.existing( this ); // set enemy scale this .scale = GameOptions.pixelScale; // shrink a bit enemy pyhsics body size to make the game forgive players a bit this .body.setSize( this .displayWidth / GameOptions.pixelScale * 0.6, this .displayHeight / GameOptions.pixelScale * 0.75, true ); // set enemy physics body offset. This has to be done manually, no magic formula this .body.setOffset(7, 7) // the enemy is patrolling the current platform this .platformToPatrol = platform; // add the enemy to the group group.add( this ); // set enemy horizontal speed this .setVelocityX(randomValue(GameOptions.enemyPatrolSpeedRange) * Phaser.Math.RND.sign()); // play "enemy_run" animation this .anims.play( 'enemy_run' , true ); } // method to make the enemy patrol a platform patrol(): void { // flip enemy sprite if moving right this .setFlipX( this .body.velocity.x > 0); // get platform bounds let platformBounds: Phaser.Geom.Rectangle = this .platformToPatrol.getBounds(); // get enemy bounds let enemyBounds: Phaser.Geom.Rectangle = this .getBounds(); // get enemy horizontal speeds let enemyVelocityX: number = this .body.velocity.x // if the enemy is moving left and is about to fall down the platform to the left side // or the enemy is moving right and is about to fall down the platform to the right side if ((platformBounds.right + 25 < enemyBounds.right && enemyVelocityX > 0) || (platformBounds.left - 25 > enemyBounds.left && enemyVelocityX < 0)) { // invert enemy horizontal speed this .setVelocityX(enemyVelocityX * -1); } } // method to remove the enemy from a group and place it into the pool // arguments: the group and the pool groupToPool(group: EnemyGroup, pool: EnemySprite[]): void { // remove enemy from the group group.remove( this ); // push the enemy in the pool pool.push( this ); } // method to remove the enemy from the pool and place it into a group // arguments: the platform to patrol and the group poolToGroup(platform: PlatformSprite, group: EnemyGroup): void { // set the platform to patrol this .platformToPatrol = platform; // place the enemy in the center of the platform this .x = platform.x; // place the enemy a little above the platform this .y = platform.y - 120; // set the enemy visible this .setVisible( true ); // add the enemy to the group group.add( this ); // allow gravity to affect the enemy this .body.setAllowGravity( true ); // set enemy horizontal speed this .setVelocityX(randomValue(GameOptions.enemyPatrolSpeedRange) * Phaser.Math.RND.sign()); // play "enemy_run" animation this .anims.play( 'enemy_run' , true ); // do not vertically flip enemy sprite this .setFlipY( false ); } } |
enemyGroup.ts
Actually this class to extend the Phaser Group which contains all enemies does not add any custom feature, but I preferred to create a custom class like I did with platformGroup.ts
.
1 2 3 4 5 6 7 8 9 10 11 | // ENEMY GROUP CLASS // enemy group extends Arcade Group class export default class EnemyGroup extends Phaser.Physics.Arcade.Group { // constructor // arguments: the physics world, the game scene constructor(world: Phaser.Physics.Arcade.World, scene: Phaser.Scene) { super (world, scene); } } |
utils.ts
This file contains only one custom function, but I thought it was useful to group all custom functions in a separate file, to be reused whenever I need them.
1 2 3 4 5 6 7 | // function to toss a random value between two elements in an array // argument: an array with two items export function randomValue(a: number[]): number { // return a random integer between the first and the second item of the array return Phaser.Math.Between(a[0], a[1]); } |
It would be nice to add another enemy type, then release the game and see if people like it. How would you improve it? Download the source code of the entire project.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.