enchant js workshop on calpoly
DESCRIPTION
TRANSCRIPT
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
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