1 of 18

Making games with JavaScript

And Phaser.io

1

@g33konaut

2 of 18

Hi,

I’m Martin from Zürich

and I love games & the web!

​

2

@g33konaut

3 of 18

So, what’s in a game?

  • Graphics & animations
  • Level & character design
  • Storytelling & game mechanics
  • Input handling & physics

3

@g33konaut

4 of 18

Why JavaScript?

4

@g33konaut

5 of 18

JavaScript

  • Quick experimentation possible
  • Works everywhere™
  • Not dragging you into the low-level details
  • Great community

5

@g33konaut

6 of 18

Example

6

@g33konaut

7 of 18

The Game loop

7

@g33konaut

8 of 18

Setup / Preload

  • Load assets needed in the game
  • Setup the screen & the level
  • Give the player a way to start the game

8

@g33konaut

9 of 18

Draw world

  • Use the <canvas> element for pixel access
  • WebGL is often faster than Canvas 2D
  • Render background, level, items, characters

9

@g33konaut

10 of 18

Read input

  • Depending on the devices
  • Polling vs. Events
  • Gamepad API <3

10

@g33konaut

11 of 18

Update world

  • Move things
  • Update timers
  • Check the state against the rules

11

@g33konaut

12 of 18

Game over / Clean up

  • Reset game world
  • Show results
  • Allow repeat / exit

12

@g33konaut

13 of 18

Phaser.io

13

@g33konaut

14 of 18

Phaser.io

  • Provides a lot of helpers & functionality
  • Great documentation & examples
  • Lovely community

14

@g33konaut

15 of 18

Let’s have a look!

15

@g33konaut

16 of 18

Summary

16

@g33konaut

17 of 18

Summary

  • Making games is fun & versatile
  • JavaScript is a neat environment for game dev
  • Phaser.io provides a lot of niceties
  • START EXPERIMENTING!

17

@g33konaut

18 of 18

So long and Thanks for all the fish

Slides: bit.ly/jskongress-gamedev

Twitter: @g33konaut

​

Feedback welcome :)

18

@g33konaut