HTML5 Game Development with Phaser Lesson 4 - Animation with spritesheets

What Will I Learn?

• You will learn how to search for functions in the Phaser Docs Search.
• You will learn how to set the anchor of a sprite to the center of the sprite.
• You will learn how to rotate objects by changing the angle property.
• You will learn how to change the scale of objects.
• You will learn how to insert spritesheets and set the width and height of each frame.
• You will learn how to animate an object by adding and playing animations.

Requirements

Make sure you already have the understanding of the following concepts (which you would have learned in Phaser lessons 1 to 3).

• You are able to import the Phaser library and set up dimensions of a level.
• You are able to import sprites into the game.
• You are able to move an object with arrow keys.
• You have an understanding of the three main functions called in a game.

Difficulty

• Intermediate

You should already have some understanding of Javascript as the Phaser library is built on Javascript.

Description

In this series of lessons, we are going to code our first HTML5 / Javascript game, using the Phaser library. The source code of this lesson (and subsequent lessons as they are uploaded) can be viewed on Github at: https://github.com/Bulletproofmonk/PhaserGameTutorial

Video Tutorial

Curriculum

• Phaser Lesson 1: Setting up Game Dimensions
• Phaser Lesson 2: Importing Sprites
• Phaser Lesson 3: Moving object with arrow keys

---

Posted on Utopian.io - Rewarding Open Source Contributors

---