HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

14
M4– HTML5 PHASER https://academy.zenva.com

Transcript of HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

Page 1: HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

https://academy.zenva.com

M4– HTML5 PHASER

Page 2: HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

https://academy.zenva.com

http://phaser.io

Page 3: HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

https://academy.zenva.com

Setup Preload assets Start game

Page 4: HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

https://academy.zenva.com

States

• Single-state games• Multiple-state games– Boot– Preload– Main menu– Game– Game over– etc

Page 5: HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

https://academy.zenva.com

Methods

preload create update

Page 6: HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

https://academy.zenva.com

Basic structure

Page 7: HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

https://academy.zenva.com

Coordinates

Page 8: HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

https://academy.zenva.com

Sprites

Page 9: HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

https://academy.zenva.com

World

Page 10: HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

https://academy.zenva.com

Other concepts

• Groups• Collision / Overlapping• Keyboard / Touch• Flow of the game with many states• Audio• Animations

Page 11: HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

https://academy.zenva.com

Documentation

• http://docs.phaser.io

Page 12: HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

https://academy.zenva.com

Page 13: HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

https://academy.zenva.com

Page 14: HTML5 DevConf 2014 - Phaser HTML5 Game Tutorial

https://academy.zenva.com

Coding time!

ZENVA.com