phaser for html5

8/9/2019 Phaser for HTML5

1/42

Let’s make a web ame!credit: P


2/42

• The canvas element• Phaser, a JavaScript framework

• Settin up a local server

• Makin an HTML5 pae

• Settin up Phaser

• Creatin a simple ame

What will we cover today?


3/42

cre

A canvas is a rectanle in your HTML pae where you can useJavaScript to draw anythin you want.

What is canvas?


4/42

credit: P


5/42

credit: P

Phaser is an open source JavaScript framework made for HTML5ame developers by HTML5 ame developers.

What is Phaser?


6/42


7/42

Settin up a local server

credit: S


8/42

Local servers allow you to test websites you’ve prorammedwithout an internet connection.

Phaser requires a server to run for security reasons.

Local servers


9/42

Open XAMPP and turn on Apache

Start your Apache server


10/42

Makin an HTML5 pae

cred


11/42

Open your XAMPP folder, then htdocs

Find htdocs


12/42

Name your folder myame

Create a folder to work in


13/42

Go to localhost/myame

Check if it worked!


14/42

Save your new file as index.html in your folder

Create a new file in your text edito


15/42

• : tells the browser it is lookin at an HTML5 pae

• : beins the HTML code

• : the area where meta information will be located

• : the website title

• : the part of the pae where the HTML shows up!

Components of an HTML5 pae


16/42

Gettin started with Phaser

credit: P

D l d h l


17/42

ithub.com/photonstorm/phaser

Download the latest version

M h


18/42

create a scripts folder & move phaser.min.js there

Move phaser.min.js

C J S i fil


19/42

Save your new file as ame.js in your scripts folder

Create a JavaScript file

Li k fil t th HTML


20/42

Link your files to the HTML


21/42

5 minutes after you write code

without comments

When you come back to

in 3 weeks

Comment your code


22/42

•Preface your one-line comment with two slashes (//)

•Two line comments require an asterisk and slash on each side (/*

•Most text editors have shortcuts (like! + /)

Commentin code is easy


23/42

Creatin ames with JavaScript

credit

O


24/42

• Collect the picats!

• Enemies switch between danerous & safe

• If you collect the picats, you win!

• If your health oes down to 0, you lose!

• Polish it with start, win, and lose screens

Our ame


25/42

Variables

•Variables are useful for storin data that may chane throuhout thcourse of your app (e.. your player’s health)

•To create a variable, you have to tell JavaScript:

•The name you’re oin to refer to it by

•The value (information) that the variable contains


26/42

Variables

•Variables let you refer to the same information many times

• If you need to chane that information, you only have to do it once

For example, best friends may chane but the label stays the same:

var myBestFriend = “Isaiah”;var myBestFriend = “Rebecca”;var myBestFriend = “Aileen”;


27/42

•Function: a named section of a proram that does a specific task

•Wraps up code in an easy-to-reference way•Parameter: additional information you can ive the function to

chane the output

Functions


28/42

•Name of the function•Parentheses: Hold any modifiers (also known as aruments)

•Brackets: What to do in the function

•Semicolon: end of line, move onto the next thin

Function structurefunction fetch(do) {

run to the ball;pick up the ball;brin the ball back;

};

C l l i


29/42

Calculations

+ (add)

– (subtract)

* (multiply)

/ (divide)

var addition = 13 + 22;var division = 100/15;


30/42

preload() function

Create assets folder


31/42

Create assets folder

Download & save imaes from tinyurl.com/clf-html5-2014

http://tinyurl.com/clf-html5-2014


32/42

create() function


33/42

update() function


34/42

CREATE

UPDATE

DRAW


35/42

How does positionin work?

X=0 x=W0


36/42

y=0

y=HEIGHT

X=0 x=W0


37/42

y=0

y=HEIGHT

(3,2)


38/42

How do I move my player?

ame input


39/42

ame.input

ame.input.keyboard.createCursorKeys();

+

conditional statements

Conditional statements


40/42

Conditional statements

if (squirrel){

console.lo(“squirrel!”);} else {console.lo(“bark!”);

}

•Check if somethin is true or false•Provide backup option if necessary


41/42

How do we create a bunch of

the same objects?

Groups


42/42

Groups

enemies

phaser for html5

Documents