enchant js workshop on Calpoly
-
Upload
ryo-shimizu -
Category
Documents
-
view
1.234 -
download
1
description
Transcript of enchant js workshop on Calpoly
![Page 1: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/1.jpg)
![Page 2: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/2.jpg)
UEI Headquarters
![Page 3: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/3.jpg)
Company Profile
Start : August 8th, 2003HQ : Bunkyo-ku Yushima 3-1-3Employee: 130 peoplesLegal Capital: 35,000,000 yen
![Page 4: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/4.jpg)
![Page 5: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/5.jpg)
![Page 6: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/6.jpg)
![Page 7: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/7.jpg)
![Page 8: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/8.jpg)
Since 2011/4/17
![Page 9: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/9.jpg)
Features
Distributed under MIT/GPL3, Open source software
Class base programming
TRUE cross platform
Many plug-ins
![Page 10: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/10.jpg)
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
![Page 11: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/11.jpg)
Why HTML5?
Android
iPhone
WindowsPhone7
Chrome
Safari
Windows8
![Page 12: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/12.jpg)
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
![Page 13: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/13.jpg)
HTML5 is new era of OS
HardwareBIOSOS
Application
HardwareBIOSOS
HTML5 AppsWeb Browser
Legacy OS HTML5 era
![Page 14: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/14.jpg)
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
![Page 15: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/15.jpg)
Let’s try enchant.jsBasics of object oriented game programming
![Page 17: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/17.jpg)
Extract and check it out
Open this folder
![Page 18: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/18.jpg)
Checkout hellobear
Open this
![Page 19: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/19.jpg)
Check out main.js
This is it!
![Page 20: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/20.jpg)
Also you can use
code.9leap.net
You can also code online in browserNo need to download anything
![Page 21: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/21.jpg)
SCORE:400
Game
Sprite
Label
Four foundation classes
That’s all! Easy!
Scene
![Page 22: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/22.jpg)
enchant();window.onload=function(){
game = new Game();//// Prepare game assets here//game.onload = function(){
//// Initialize game objects here//
}game.start();
}
Basics of enchant.js
![Page 23: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/23.jpg)
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
![Page 24: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/24.jpg)
Basics of enchant.js
SCORE:400
game.rootScene
Sprite
Label
When you addChild to game.rootScene,the entity turn to visible
![Page 25: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/25.jpg)
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
![Page 26: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/26.jpg)
Classes and Objects
Be careful! Class and object are different
Hello,Bear This is “hello” object of Label class
![Page 27: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/27.jpg)
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
![Page 28: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/28.jpg)
Class and Objects
hello = new Label(“Hello,Bear”);
Please create object named “hello” of Label class. And initialize it as “Hello,Bear”
![Page 29: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/29.jpg)
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
![Page 30: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/30.jpg)
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
![Page 31: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/31.jpg)
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
![Page 32: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/32.jpg)
What is event?
Hello,Bear
hello
Variety of events will happen to objects.
Touched!!
Time elapsed! He dragged me!
![Page 33: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/33.jpg)
hello.addEventListener(‘touchend‘, function(){ this.text = “Hello,Calpoly”; });
What is event?
Hello,Bear
hello Touched !
↓Name of event
↑This is event listener
![Page 34: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/34.jpg)
Variety of events
Hello,Bear
hello touchend
touchstart
enterframe
touchmove
![Page 35: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/35.jpg)
Variety of events
Hello,Bear
hello touchend
touchstart
enterframe
touchmove
These are theessential ones
![Page 36: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/36.jpg)
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!
![Page 37: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/37.jpg)
Congratulations!You became a freshmen of enchant.js!
![Page 38: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/38.jpg)
Using SpritesSprites are superhero of game programming
![Page 39: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/39.jpg)
By the way,What is “sprites”?
That’s not a soda
![Page 40: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/40.jpg)
What is sprites?
Sprites means fairies fly on the screen
![Page 41: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/41.jpg)
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
![Page 42: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/42.jpg)
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
![Page 43: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/43.jpg)
Create a sprite
bear
bear = new Sprite(32,32);↓Name of object
↑Name of classnew is an operator to create object from class constructor
![Page 44: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/44.jpg)
Geometry of sprites
bear
bear = new Sprite(32,32);
32
32
Pass a geometry when sprites is created
![Page 45: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/45.jpg)
Property of sprites
yx frame
scaleX
scaleY
Change some property of sprites!
bear
age
![Page 46: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/46.jpg)
demo
![Page 47: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/47.jpg)
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?
![Page 48: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/48.jpg)
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
![Page 49: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/49.jpg)
Congratulations!You became a beginner of enchant.js!
![Page 50: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/50.jpg)
The first step of Game designing
![Page 51: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/51.jpg)
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.
![Page 52: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/52.jpg)
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)”
![Page 53: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/53.jpg)
Nobody is a great creator,Just genius copycat
![Page 54: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/54.jpg)
Do it yourself!
![Page 55: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/55.jpg)
After you choosethe theme
Then, draw a sketch of ideas
![Page 56: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/56.jpg)
Tools for sketch
MoleskinePlane note Drawing papers for kids Signature pens iPad
![Page 57: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/57.jpg)
Example of Sketch
I use ishodoavailable in AppStore
Hit
Run a wayApple
Hit the bear
Save apples
![Page 58: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/58.jpg)
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?
![Page 59: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/59.jpg)
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
![Page 60: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/60.jpg)
Check out materials
Images folder includes many royalty free images you can use for enchant.js
chara1.png
icon0.gif
![Page 61: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/61.jpg)
Be careful about geometry
Each image file has its own geometry.
chara1.png(32x32)
icon0.gif(16x16)
![Page 62: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/62.jpg)
Master of classesThis’s a secret weapon of programming ninja
![Page 63: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/63.jpg)
Find classes from sketch
The characters and items will become a class
Enemy
Items
![Page 64: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/64.jpg)
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
![Page 65: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/65.jpg)
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
![Page 66: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/66.jpg)
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
![Page 67: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/67.jpg)
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.
![Page 68: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/68.jpg)
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; }});
![Page 69: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/69.jpg)
Live coding
![Page 70: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/70.jpg)
Classes of sketch
Bears appear and then hit them
Bear class
Item class
![Page 71: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/71.jpg)
Tips: Random numbers
n = Math.floor(Math.random()*10)↓When I need 0 - 9 random number
When you set 10, you get 0-9↑
![Page 72: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/72.jpg)
Tips: Remove Sprites
game.rootScene.removeChild(bear)
The object you wants to remove from scene↑
![Page 73: enchant js workshop on Calpoly](https://reader033.fdocuments.in/reader033/viewer/2022042813/5454edc7b1af9fcf338b45f1/html5/thumbnails/73.jpg)
You can download this slideCheck out our facebook page