enchant js workshop on Calpoly

UEI Headquarters

Company Profile

Start : August 8th, 2003HQ : Bunkyo-ku Yushima 3-1-3Employee: 130 peoplesLegal Capital: 35,000,000 yen

Since 2011/4/17

Features

Distributed under MIT/GPL3, Open source software

Class base programming

TRUE cross platform

Many plug-ins

Why is it open source?

Good for debugging and tuning

Learn once, use eternally

HTML5 can’t hide source codes

Open is the best way to polish the library

Why HTML5?

Android

iPhone

WindowsPhone7

Chrome

Safari

Windows8

Feature of HTML5

Cross platform (lie)

Each browser compete to improve performance

You can get whole source code under GPL(important)

HTML5, actually work as OS

HTML5 is new era of OS

HardwareBIOSOS

Application

HardwareBIOSOS

HTML5 AppsWeb Browser

Legacy OS HTML5 era

HTML5 and JavaScript

JavaScript come from functional language “scheme”

Special and strange “prototype based” OOP.

You can manipulate elements of HTML5 thru DOM

Super powerful, but not easy to use

=> You need enchant.js

Let’s try enchant.jsBasics of object oriented game programming

First, download it

enchantjs.com

Click Here

Extract and check it out

Open this folder

Checkout hellobear

Open this

Check out main.js

This is it!

Also you can use

code.9leap.net

You can also code online in browserNo need to download anything

SCORE:400

Game

Sprite

Label

Four foundation classes

That’s all! Easy!

Scene

enchant();window.onload=function(){

game = new Game();//// Prepare game assets here//game.onload = function(){

//// Initialize game objects here//

}game.start();

}

Basics of enchant.js

enchant();window.onload=function(){

game = new Game();game.fps = 30;game.onload = function(){ hello = new Label(“Hello,Bear”);

hello.x=10;hello.y=150;game.rootScene.addChild(hello);

}game.start();

}

Hello,Bear

Basics of enchant.js

Basics of enchant.js

SCORE:400

game.rootScene

Sprite

Label

When you addChild to game.rootScene,the entity turn to visible

enchant();window.onload=function(){

game = new Game();game.fps = 30;game.onload = function(){ hello = new Label(“Hello,Bear”);

hello.x=10;hello.y=10;game.rootScene.addChild(hello);

}game.start();

}

Hello,Bear

Change position of label

Change this number

Classes and Objects

Be careful! Class and object are different

Hello,Bear This is “hello” object of Label class

Class and object

Every object is created by class constructor

Hello,Bear

Class : ManObject :Bill Gates

hello = new Label(“Hello,Bear”);↓Name of object

↑Name of classnew is an operator to create object from class constructor

Class and Objects

hello = new Label(“Hello,Bear”);

Please create object named “hello” of Label class. And initialize it as “Hello,Bear”

Manipulate property

Hello,Bear

hello.x = 10; // X coordinate of hellohello.y = 200; //Y coordinate of hellohello.text = “Hello,Bear”; // text of hello

hello

yx text This isproperty

Change text of label

dot can access to the property of objects

enchant();window.onload=function(){

game = new Game();game.onload = function(){ hello = new Label(“Hello,Bear”);

hello.x=10;hello.y=200;hello.text=”Hello,Calpoly”;game.rootScene.addChild(hello);

}game.start();

}

Hello,Bear

Change text

Label changes to button

You can add event listener to label object

enchant();window.onload=function(){

game = new Game();game.onload = function(){ hello = new Label(“Hello,Bear”);

hello.x=10;hello.y=200;hello.addEventListener(‘touchend’,function(){

this.text=”Hello,Calpoly”;});game.rootScene.addChild(hello);

}game.start();

}

Hello,Bear

Add this line

What is event?

Hello,Bear

hello

Variety of events will happen to objects.

Touched!!

Time elapsed! He dragged me!

hello.addEventListener(‘touchend‘, function(){ this.text = “Hello,Calpoly”; });

What is event?

Hello,Bear

hello Touched !

↓Name of event

↑This is event listener

Variety of events

Hello,Bear

hello touchend

touchstart

enterframe

touchmove

Variety of events

Hello,Bear

hello touchend

touchstart

enterframe

touchmove

These are theessential ones

Use enterframe event

What happens when using enterframe?

enchant();window.onload=function(){

game = new Game();game.onload = function(){ hello = new Label(“Hello,Bear”);

hello.x=10;hello.y=200;hello.addEventListener(‘enterframe’,function(){

this.x+=1;});game.rootScene.addChild(hello);

}game.start();

}

Hello,Bear

Change like this!

Congratulations!You became a freshmen of enchant.js!

Using SpritesSprites are superhero of game programming

By the way,What is “sprites”?

That’s not a soda

What is sprites?

Sprites means fairies fly on the screen

Try summon a sprite!enchant();window.onload=function(){

game = new Game();game.preload(‘chara1.png’);game.onload = function(){

bear = new Sprite(32,32); bear.image = game.assets[‘chara1.png’]; game.rootScene.addChild(bear);

}game.start();

}

CAUTION!preload must come

before onload

Sprites and enterframeenchant();window.onload=function(){

game = new Game();game.preload(‘chara1.png’);game.onload = function(){

bear = new Sprite(32,32); bear.image = game.assets[‘chara1.png’]; bear.addEventListener(‘enterframe’, function(){ this.x+=1; } );

game.rootScene.addChild(bear);}game.start();

}

Add event listener ofenterframe events

Create a sprite

bear

bear = new Sprite(32,32);↓Name of object

↑Name of classnew is an operator to create object from class constructor

Geometry of sprites

bear

bear = new Sprite(32,32);

32

32

Pass a geometry when sprites is created

Property of sprites

yx frame

scaleX

scaleY

Change some property of sprites!

bear

age

demo

Bear0 1 2 3 4

5 6 7 8 9

10 11 12 13 14

The frame numbering from top-left

What’s a frame property?

Hit the bearenchant();window.onload=function(){game = new Game();game.preload(‘chara1.png’);game.onload = function(){ bear = new Sprite(32,32); bear.image = game.assets[‘chara1.png’]; bear.addEventListener(‘touchend’, function(){ this.frame=3; } );game.rootScene.addChild(bear);

}game.start();

}

When you touch the bear,change frame to 3

Congratulations!You became a beginner of enchant.js!

The first step of Game designing

Process of game development

1.Choose the theme of the game

2.Decide the minimum spec of the game

3.Make it

4.Play it

5.Consider about it, and repeat from step 2.

How to choose theme?Easy to imagine the programming codeDon’t be afraid to become a copycat! It’s good way to startCode before consider, and change on code

Add new feature, and delete actual feature

Change graphics, story, and detail!

Important thing is “You aren’t genius(right now)”

Nobody is a great creator,Just genius copycat

Do it yourself!

After you choosethe theme

Then, draw a sketch of ideas

Tools for sketch

MoleskinePlane note Drawing papers for kids Signature pens iPad

Example of Sketch

I use ishodoavailable in AppStore

Hit

Run a wayApple

Hit the bear

Save apples

Polish your sketch

Polish your sketch,and clarify the ideas

Bears appearfrom the sides

When all applesare eaten by bears,

then the game is over

How many bearscan you hit?

Polish your sketch

Decide the 3 essentials of game designing

Bears appearfrom sides

When all applesare eaten by

bears,then game is over

How many bearscan you hit?

Game over

ScoreBasic behavior

Check out materials

Images folder includes many royalty free images you can use for enchant.js

chara1.png

icon0.gif

Be careful about geometry

Each image file has its own geometry.

chara1.png(32x32)

icon0.gif(16x16)

Master of classesThis’s a secret weapon of programming ninja

Find classes from sketch

The characters and items will become a class

Enemy

Items

Create your own class

Class of Bear

Bear = Class.create(Sprite,{ initialize:function(){ Sprite.call(this,32,32); this.image = game.assets[‘chara1.png’]; }});

Class can inherit from actual enchant.js classes.Usually inherit form Sprite class

Create your own class

Bear = Class.create(Sprite,{ initialize:function(){ Sprite.call(this,32,32); this.image = game.assets[‘chara1.png’]; }});

↓Name of your own class

↑Constructor of Bear class

Inherit from Sprite class

Using custom class

It is very easy and useful!

enchant();window.onload=function(){game = new Game();game.preload(‘chara1.png’);game.onload = function(){ bear = new Bear();game.rootScene.addChild(bear);

}game.start();

}

You can create object in same style

Event definition of class

Class of Bear

Bear = Class.create(Sprite,{ initialize:function(){ Sprite.call(this,32,32); this.image = game.assets[‘chara1.png’]; }, onenterframe:function(){ this.x+=1; }});

on + name of event will work as a event listener.It’s easy to code any event listener defined in class definition.

Mr. Bear hit and cryBear = Class.create(Sprite,{ initialize:function(){ Sprite.call(this,32,32); this.image = game.assets[‘chara1.png’]; }, onenterframe:function(){ this.x+=1; }, ontouchend:function(){ this.frame=3; }});

Live coding

Classes of sketch

Bears appear and then hit them

Bear class

Item class

Tips: Random numbers

n = Math.floor(Math.random()*10)↓When I need 0 - 9 random number

When you set 10, you get 0-9↑

Tips: Remove Sprites

game.rootScene.removeChild(bear)

The object you wants to remove from scene↑

You can download this slideCheck out our facebook page