Guia Toolkit

Contents

1 - Introduction 1

2 - Get Started 3

2.1 - Useful Links 4

2.2 - Set Up Phaser 5

2.3 - First Project 7

3 - Basic Elements 11

3.1 - Empty Game 12

3.2 - Add the Player 17

3.3 - Create the World 23

3.4 - Add Coins 28

3.5 - Add Enemies 34

3.6 - Source Code 40

4 - Manage States 44

4.1 - Organisation 45

4.2 - Index 48

4.3 - Boot 49

4.4 - Load 50

4.5 - Menu 52

4.6 - Play 54

CONTENTS

4.7 - Game 56

5 - Various Improvements 57

5.1 - Add Sounds 58

5.2 - Add Animations 61

5.3 - Add Tweens 64

5.4 - Add Particles 68

5.5 - Better Difficulty 73

5.6 - Add a Best Score 75

5.7 - Add a Mute Button 77

5.8 - Better Keyboard Inputs 80

5.9 - Use Custom Fonts 82

5.10 - More Features 84

6 - Use Tilemaps 86

6.1 - Create the assets 87

6.2 - Display the Tilemap 91

7 - Mobile Friendly 94

7.1 - Testing 95

7.2 - Scaling 98

7.3 - Touch Inputs 101

7.4 - Touch Buttons 104

8 - Full Source Code 110

8.1 - Index 111

8.2 - Boot 113

CONTENTS

8.3 - Load 114

8.4 - Menu 115

8.5 - Play 117

8.6 - Game 122

9 - Next Steps 123

9.1 - Improve the Game 124

9.2 - Make Your Own Games 127

9.3 - Conclusion 128

1 - Introduction

If you are reading this book it means that you are interested in HTML5 and games, and you’ve come

to the right place to learn more about both.

The Phaser Framework

More and more people are talking about HTML5 games because it’s a relatively new technology that

has a huge potential. With HTML5 we can build games that are compatible with basically everything

that has a browser on it (desktops, smartphones, tablets, gaming consoles, etc.) without the need to

download anything.

There are now dozens of HTML5 game frameworks available out there, so it might seem hard

to decide which one to choose. However, if you are looking for a free, open source, and actively

maintained framework, the list quickly narrows down to just a handful of them. Each one has its

pros and cons, but a lot of people consider Phaser to be the best one.

Phaser is a 2D HTML5 framework in Javascript, that was created in 2013 by Richard Davey. Phaser

is free, open source, has new versions available every few weeks, and has a strong community. The

framework itself is super powerful while being quite simple to use. Phaser is a really great framework

to work with.

What You Will Learn

We will focus on building a full featured game from scratch. By the end of the book you will have

a real game to play with, and enough knowledge to build your own games. You will learn how to

install and set up Phaser, how to create an empty project, how to add a playable character with

enemies, how to add sounds, animations, particles, tilemaps, how to

...