Animating Sprite Demolition with Typescript

How to Blow Stuff Up

By Nick Branstein

• Consultant and Developer at KiZAN Technologies

• Blog about technology at https://brosteins.com

• Video game lover and enthusiast• Love reading about and playing games

• Working on a HTML5 game

• Cleveland sports fan• Go Cavs!

About Me

• Tools• Typescript• http://www.typescriptlang.org• C# for the Javascript lover• Version 1.4 (latest release)

• Phaser• http://phaser.io• Javascript game engine• Version 2.2.2 (2.3 is out now)

• Goals• You will feel empowered to start a game of your own

Tools & Goals

• Phaser.State• Preloader• Load assets for our game• Start the next state of our game

• Main• This is our actual game• Add the background of our game to the world

• Phaser.Game• CodePaLOUsaGame• Construct our game object and add the states of our game to it

Create Game

• Preloader• Load in an audio asset

• Main• Create our audio object and play it over and over

Theme Song

• Preloader• Load a spritemap

•

• Enemy class• Phaser.Sprite

• Create a new animation and add this to our enemy

• Main• Create a new enemy object at a random location

Enemies

• Update Enemy class• Enabling inputs – mouse and/or touch input whatever the device

supports

• Movement• Every 2 seconds make the enemy move using a “tween“• A tween is a movement from one position to another, the framework

handles animating it properly

• Add a callback to our enemy constructor

• Main• Create a function to callback to since our enemy object requires

this in the constructor

Enemies Continued

• Preloader• Load in our other sounds that we will be using

• SoundManager Class• Easily play a sound once or forever

• Uses a simple Dictionary object to store the Phaser sound objects

• Main• Refactor playing the themesong to use SoundManager

• Play a sound when the enemy is clicked

More Sounds!

• Preloader• Load in more images to use for our explosions

• Main• Phaser.Physics.ARCADE• We need to startup the physics engine so we can create particle effects

• Phaser.Particles.Arcade.Emitter• This object is used to create the particle effects• As the name suggests, this object can emit or create sprites at a rapid rate• Start our emitter when the enemy dies

Explosions!!!

• Typescript• Hopefully you have become a typescript fan like myself

• Phaser• Hopefully you have seen how a game engine can assist you with

development of your game

• Anyone going to start creating a game?

In Conclusion

• Code: http://tinyurl.com/cpl15game

• Slides: http://tinyurl.com/cpl15gameslides

• nick@brosteins.com

• @NickBranstein

• https://brosteins.com

Questions?