2. UEI Headquarters

3. Company Profile
Start : August 8th, 2003
HQ : Bunkyo-ku Yushima 3-1-3
Employee: 130 peoples
Legal Capital: 35,000,000 yen

8. Since 2011/4/17

9. Features
Distributed under MIT/GPL3, Open source
software
Class base programming
TRUE cross platform
Many plug-ins

10. 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

11. Why HTML5?
Chrome Android
Safari iPhone
Windows
Windows8
Phone7

12. 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

13. HTML5 is new era of OS
HTML5 Apps
Application Web Browser
OS OS
BIOS BIOS
Hardware Hardware
Legacy OS HTML5 era

14. 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

15. Let’s try enchant.js
Basics of object oriented game programming

16. First, download it
enchantjs.com
Click Here

17. Extract and check it out
Open this folder

18. Checkout hellobear
Open this

19. Check out main.js
This is it!

20. Also you can use
code.9leap.net
You can also code online in browser
No need to download anything

21. Four foundation classes
Sprite
Label
SCORE:400
Game
Scene
That’s all! Easy!

22. Basics of enchant.js
enchant();
window.onload=function(){
game = new Game();
//
// Prepare game assets here
//
game.onload = function(){
//
// Initialize game objects here
//
}
game.start();
}

23. Basics of enchant.js
enchant();
window.onload=function(){
game = new Game();
game.fps = 30;
game.onload = function(){
hello = new Label(“Hello,Bear”);
Hello,Bear
hello.x=10;
hello.y=150;
game.rootScene.addChild(hello);
}
game.start();
}

24. Basics of enchant.js
Sprite
Label
SCORE:400
game.rootScene
When you addChild to game.rootScene,
the entity turn to visible

25. Change position of label
enchant();
window.onload=function(){
game = new Game();
game.fps = 30;
game.onload = function(){
Hello,Bear hello = new Label(“Hello,Bear”);
hello.x=10;
hello.y=10; Change this number
game.rootScene.addChild(hello);
}
game.start();
}

26. Classes and Objects
Hello,Bear
This is “hello” object
of Label class
Be careful! Class and object are different

27. Class and object
Class : Man
Object :Bill Gates
Hello,Bear
↓Name of object
hello = new Label(“Hello,Bear”);
↑Name of class
new is an operator to create object from class constructor
Every object is created by class constructor

28. Class and Objects
hello = new Label(“Hello,Bear”);
Please create object named “hello”
of Label class.
And initialize it as “Hello,Bear”

29. Manipulate property
hello
Hello,Bear
x y text This is
property
hello.x = 10; // X coordinate of hello
hello.y = 200; //Y coordinate of hello
hello.text = “Hello,Bear”; // text of hello

30. Change text of label
enchant();
window.onload=function(){
game = new Game();
game.onload = function(){
hello = new Label(“Hello,Bear”);
Hello,Bear hello.x=10;
hello.y=200;
hello.text=”Hello,Calpoly”; Change text
game.rootScene.addChild(hello);
}
game.start();
}
dot can access to the property of objects

31. Label changes to button
enchant();
window.onload=function(){
game = new Game();
game.onload = function(){ Add this line
hello = new Label(“Hello,Bear”);
hello.x=10;
Hello,Bear hello.y=200;
hello.addEventListener(‘touchend’,function()
{
this.text=”Hello,Calpoly”;});
game.rootScene.addChild(hello);
}
game.start();
}
You can add event listener to label object

32. What is event?
Touched!!
hello
Hello,Bear
Time elapsed! He dragged me!
Variety of events will happen to objects.

33. What is event?
hello Touched !
Hello,Bear
↓Name of event
hello.addEventListener(‘touchend‘,
function(){
this.text = “Hello,Calpoly”;
}
); ↑This is event listener

34. Variety of events
touchend
hello
Hello,Bear
touchstart
enterframe
touchmove

35. Variety of events
touchend
hello
Hello,Bear
touchstart
enterframe
These
are the
touchmove essential
ones

36. Use enterframe event
enchant();
window.onload=function(){
game = new Game();
game.onload = function(){ Change like this!
hello = new Label(“Hello,Bear”);
hello.x=10;
Hello,Bear hello.y=200;
hello.addEventListener(‘enterframe’,function(){
this.x+=1;});
game.rootScene.addChild(hello);
}
game.start();
}
What happens when using enterframe?

37. Congratulations!
You became a freshmen of enchant.js!

38. Using Sprites
Sprites are superhero of game programming

39. By the way,
What is “sprites”?
That’s not a soda

40. What is sprites?
Sprites means fairies fly on the screen

41. Try summon a sprite!
enchant(); CAUTION!
preload must come
window.onload=function(){ before onload
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();
}

42. Sprites and enterframe
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’];
bear.addEventListener(‘enterframe’,
function(){
this.x+=1;
Add event listener of
} enterframe events
);
game.rootScene.addChild(bear);
}
game.start();
}

43. Create a sprite
bear
↓Name of object
bear = new Sprite(32,32);
↑Name of class
new is an operator to create object from class constructor

44. Geometry of sprites
bear
bear = new Sprite(32,32);
32
32
Pass a geometry when sprites is created

45. Property of sprites
bear
scaleX
age scaleY
x y frame
Change some property of sprites!

46. demo

47. What’s a frame property?
Bear
0 1 2 3 4
5 6 7 8 9
10 11 12 13 14
The frame numbering from top-left

48. Hit the bear
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’];
bear.addEventListener(‘touchend’,
function(){
this.frame=3; When you touch the bear,
} change frame to 3
);
game.rootScene.addChild(bear);
}
game.start();
}

49. Congratulations!
You became a beginner of enchant.js!

50. The first step of Game designing

51. 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.

52. How to choose theme?
Easy to imagine the programming code
Don’t be afraid to become a copycat! It’s good
way to start
Code 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)”

53. Nobody is a great creator,
Just genius copycat

54. Do it yourself!

55. After you choose
the theme
Then, draw a sketch of ideas

56. Tools for sketch
Moleskine
Drawing papers for kids Signature pens iPad
Plane note

57. Example of Sketch
Hit
Apple
Run a way
Hit the bear
I use ishodo
Save apples available in
AppStore

58. Polish your sketch
When all apples
are eaten by bears,
then the game is
over
Bears appear
How many bears from the sides
can you hit?
Polish your sketch,and clarify the ideas

59. Polish your sketch
When all apples
are eaten by
bears,
then game is over
Game over
Basic behavior
Score Bears appear
How many bears from sides
can you hit?
Decide the 3 essentials of game designing

60. Check out materials
chara1.png
icon0.gif
Images folder includes many royalty free images you can use
for enchant.js

61. Be careful about geometry
chara1.png(32x32)
icon0.gif(16x16)
Each image file has its own geometry.

62. Master of classes
This’s a secret weapon of programming ninja

63. Find classes from sketch
Enemy
Items
The characters and items will become a class

64. 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

65. Create your own class
Inherit from Sprite class
↓Name of your own class
Bear = Class.create(Sprite,{
initialize:function(){
Sprite.call(this,32,32);
this.image = game.assets[‘chara1.png’];
}
}); ↑Constructor of Bear class

66. Using custom class
enchant();
window.onload=function(){
game = new Game(); You can create object in same style
game.preload(‘chara1.png’);
game.onload = function(){
bear = new Bear();
game.rootScene.addChild(bear);
}
game.start();
}
It is very easy and useful!

67. 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.

68. Mr. Bear hit and cry
Bear = 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;
}
});

69. Live coding

70. Classes of sketch
Bear class
Item class
Bears appear and then hit them

71. Tips: Random numbers
↓When I need 0 - 9 random number
n = Math.floor(Math.random()*10)
When you set 10, you get 0-9↑

72. Tips: Remove Sprites
game.rootScene.removeChild(bear)
The object you wants to remove from scene↑

73. You can download this slide
Check out our facebook page