UEI Headquarters
Company ProfileStart : August 8th, 2003HQ : Bunkyo-ku Yushima 3-1-3Employee: 130 peoplesLegal Capital: 35,000,000 yen
Since 2011/4/17
FeaturesDistributed under MIT/GPL3, Open sourcesoftwareClass base programmingTRUE cross platformMany plug-ins
Why is it open source?Good for debugging and tuningLearn once, use eternallyHTML5 can’t hide source codesOpen is the best ...
Why HTML5?  Chrome                 Android   Safari                 iPhone                         WindowsWindows8        ...
Feature of HTML5Cross platform (lie)Each browser compete to improve performanceYou can get whole source code under GPL(imp...
HTML5 is new era of OS              HTML5 AppsApplication   Web Browser    OS            OS  BIOS           BIOSHardware  ...
HTML5 and JavaScriptJavaScript come from functional language “scheme”Special and strange “prototype based” OOP.You can man...
Let’s try enchant.jsBasics of object oriented game programming
First, download itenchantjs.com Click Here
Extract and check it outOpen this folder
Checkout hellobear                 Open this
Check out main.js                    This is it!
Also you can use     code.9leap.netYou can also code online in browser  No need to download anything
Four foundation classesSprite                             Label               SCORE:400GameScene         That’s all! Easy!
Basics of enchant.js    enchant();    window.onload=function(){        game = new Game();        //        // Prepare game...
Basics of enchant.js             enchant();             window.onload=function(){                 game = new Game();      ...
Basics of enchant.js        Sprite                             Label                 SCORE:400game.rootScene When you addC...
Change position of label             enchant();             window.onload=function(){                 game = new Game();  ...
Classes and Objects  Hello,Bear                   This is “hello” object                       of Label classBe careful! C...
Class and object                  Class                  : Man                  Object                 :Bill Gates     Hel...
Class and Objectshello = new Label(“Hello,Bear”); Please create object named “hello” of Label class. And initialize it as ...
Manipulate property               hello                 Hello,Bear                 x     y   text      This is            ...
Change text of label               enchant();               window.onload=function(){                 game = new Game();  ...
Label changes to button                enchant();                window.onload=function(){                  game = new Gam...
What is event?                                Touched!!                 hello                   Hello,Bear Time elapsed!  ...
What is event?hello            Touched !  Hello,Bear                              ↓Name of eventhello.addEventListener(‘to...
Variety of events                touchendhello  Hello,Bear                  touchstart               enterframe        tou...
Variety of events                touchendhello  Hello,Bear                  touchstart               enterframe           ...
Use enterframe event               enchant();               window.onload=function(){                 game = new Game();  ...
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();                             CAUTION!                                   preload must comewin...
Sprites and enterframeenchant();window.onload=function(){  game = new Game();  game.preload(‘chara1.png’);  game.onload = ...
Create a spritebear          ↓Name of object          bear = new Sprite(32,32);                               ↑Name of cla...
Geometry of spritesbear                 bear = new Sprite(32,32);            32   32Pass a geometry when sprites is created
Property of sprites         bear                    scaleX       age          scaleY         x y frameChange some property...
demo
What’s a frame property?Bear0      1     2     3     45      6     7     8     910     11   12    13    14The frame number...
Hit the bearenchant();window.onload=function(){  game = new Game();  game.preload(‘chara1.png’);  game.onload = function()...
Congratulations!You became a beginner of enchant.js!
The first step of Game designing
Process of       game development1.Choose the theme of the game2.Decide the minimum spec of the game3.Make it4.Play it5.Co...
How to choose theme?Easy to imagine the programming codeDon’t be afraid to become a copycat! It’s goodway to startCode bef...
Nobody is a great creator,   Just genius copycat
Do it yourself!
After you choose    the themeThen, draw a sketch of ideas
Tools for sketchMoleskine               Drawing papers for kids   Signature pens   iPadPlane note
Example of Sketch                    Hit    Apple                          Run a wayHit the bear                          ...
Polish your sketch When all applesare eaten by bears, then the game is       over                                   Bears ...
Polish your sketch When all apples   are eaten by      bears,then game is overGame over                                   ...
Check out materialschara1.png                                               icon0.gifImages folder includes many royalty f...
Be careful about geometrychara1.png(32x32)                                      icon0.gif(16x16)          Each image file h...
Master of classesThis’s a secret weapon of programming ninja
Find classes from sketch      Enemy       ItemsThe characters and items will become a class
Create your own class        Class of BearBear = Class.create(Sprite,{ initialize:function(){   Sprite.call(this,32,32);  ...
Create your own class                                     Inherit from Sprite class↓Name of your own classBear = Class.cre...
Using custom classenchant();window.onload=function(){  game = new Game();        You can create object in same style  game...
Event definition of class          Class of BearBear = Class.create(Sprite,{ initialize:function(){    Sprite.call(this,32,...
Mr. Bear hit and cryBear = Class.create(Sprite,{ initialize:function(){    Sprite.call(this,32,32);    this.image = game.a...
Live coding
Classes of sketchBear classItem class             Bears appear and then hit them
Tips: Random numbers↓When I need 0 - 9 random numbern = Math.floor(Math.random()*10)   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
enchant js workshop  on Calpoly
enchant js workshop  on Calpoly
enchant js workshop  on Calpoly
enchant js workshop  on Calpoly
enchant js workshop  on Calpoly
Upcoming SlideShare
Loading in …5
×

enchant js workshop on Calpoly

1,525 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,525
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

enchant js workshop on Calpoly

  1. 1. UEI Headquarters
  2. 2. Company ProfileStart : August 8th, 2003HQ : Bunkyo-ku Yushima 3-1-3Employee: 130 peoplesLegal Capital: 35,000,000 yen
  3. 3. Since 2011/4/17
  4. 4. FeaturesDistributed under MIT/GPL3, Open sourcesoftwareClass base programmingTRUE cross platformMany plug-ins
  5. 5. Why is it open source?Good for debugging and tuningLearn once, use eternallyHTML5 can’t hide source codesOpen is the best way to polish the library
  6. 6. Why HTML5? Chrome Android Safari iPhone WindowsWindows8 Phone7
  7. 7. Feature of HTML5Cross platform (lie)Each browser compete to improve performanceYou can get whole source code under GPL(important)HTML5, actually work as OS
  8. 8. HTML5 is new era of OS HTML5 AppsApplication Web Browser OS OS BIOS BIOSHardware Hardware Legacy OS HTML5 era
  9. 9. HTML5 and JavaScriptJavaScript come from functional language “scheme”Special and strange “prototype based” OOP.You can manipulate elements of HTML5 thru DOMSuper powerful, but not easy to use=> You need enchant.js
  10. 10. Let’s try enchant.jsBasics of object oriented game programming
  11. 11. First, download itenchantjs.com Click Here
  12. 12. Extract and check it outOpen this folder
  13. 13. Checkout hellobear Open this
  14. 14. Check out main.js This is it!
  15. 15. Also you can use code.9leap.netYou can also code online in browser No need to download anything
  16. 16. Four foundation classesSprite Label SCORE:400GameScene That’s all! Easy!
  17. 17. Basics of enchant.js enchant(); window.onload=function(){ game = new Game(); // // Prepare game assets here // game.onload = function(){ // // Initialize game objects here // } game.start(); }
  18. 18. 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(); }
  19. 19. Basics of enchant.js Sprite Label SCORE:400game.rootScene When you addChild to game.rootScene, the entity turn to visible
  20. 20. 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(); }
  21. 21. Classes and Objects Hello,Bear This is “hello” object of Label classBe careful! Class and object are different
  22. 22. 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 constructorEvery object is created by class constructor
  23. 23. Class and Objectshello = new Label(“Hello,Bear”); Please create object named “hello” of Label class. And initialize it as “Hello,Bear”
  24. 24. Manipulate property hello Hello,Bear x y text This is propertyhello.x = 10; // X coordinate of hellohello.y = 200; //Y coordinate of hellohello.text = “Hello,Bear”; // text of hello
  25. 25. 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
  26. 26. 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
  27. 27. What is event? Touched!! hello Hello,Bear Time elapsed! He dragged me!Variety of events will happen to objects.
  28. 28. What is event?hello Touched ! Hello,Bear ↓Name of eventhello.addEventListener(‘touchend‘, function(){ this.text = “Hello,Calpoly”; }); ↑This is event listener
  29. 29. Variety of events touchendhello Hello,Bear touchstart enterframe touchmove
  30. 30. Variety of events touchendhello Hello,Bear touchstart enterframe These are the touchmove essential ones
  31. 31. 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?
  32. 32. Congratulations!You became a freshmen of enchant.js!
  33. 33. Using SpritesSprites are superhero of game programming
  34. 34. By the way,What is “sprites”? That’s not a soda
  35. 35. What is sprites?Sprites means fairies fly on the screen
  36. 36. Try summon a sprite!enchant(); CAUTION! preload must comewindow.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();}
  37. 37. 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; Add event listener of } enterframe events ); game.rootScene.addChild(bear); } game.start();}
  38. 38. Create a spritebear ↓Name of object bear = new Sprite(32,32); ↑Name of class new is an operator to create object from class constructor
  39. 39. Geometry of spritesbear bear = new Sprite(32,32); 32 32Pass a geometry when sprites is created
  40. 40. Property of sprites bear scaleX age scaleY x y frameChange some property of sprites!
  41. 41. demo
  42. 42. What’s a frame property?Bear0 1 2 3 45 6 7 8 910 11 12 13 14The frame numbering from top-left
  43. 43. 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; When you touch the bear, } change frame to 3 ); game.rootScene.addChild(bear); } game.start();}
  44. 44. Congratulations!You became a beginner of enchant.js!
  45. 45. The first step of Game designing
  46. 46. Process of game development1.Choose the theme of the game2.Decide the minimum spec of the game3.Make it4.Play it5.Consider about it, and repeat from step 2.
  47. 47. How to choose theme?Easy to imagine the programming codeDon’t be afraid to become a copycat! It’s goodway to startCode before consider, and change on codeAdd new feature, and delete actual featureChange graphics, story, and detail! Important thing is “You aren’t genius(right now)”
  48. 48. Nobody is a great creator, Just genius copycat
  49. 49. Do it yourself!
  50. 50. After you choose the themeThen, draw a sketch of ideas
  51. 51. Tools for sketchMoleskine Drawing papers for kids Signature pens iPadPlane note
  52. 52. Example of Sketch Hit Apple Run a wayHit the bear I use ishodoSave apples available in AppStore
  53. 53. Polish your sketch When all applesare 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
  54. 54. Polish your sketch When all apples are eaten by bears,then game is overGame over Basic behaviorScore Bears appearHow many bears from sides can you hit? Decide the 3 essentials of game designing
  55. 55. Check out materialschara1.png icon0.gifImages folder includes many royalty free images you can use for enchant.js
  56. 56. Be careful about geometrychara1.png(32x32) icon0.gif(16x16) Each image file has its own geometry.
  57. 57. Master of classesThis’s a secret weapon of programming ninja
  58. 58. Find classes from sketch Enemy ItemsThe characters and items will become a class
  59. 59. Create your own class Class of BearBear = 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
  60. 60. Create your own class Inherit from Sprite class↓Name of your own classBear = Class.create(Sprite,{ initialize:function(){ Sprite.call(this,32,32); this.image = game.assets[‘chara1.png’]; }}); ↑Constructor of Bear class
  61. 61. Using custom classenchant();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!
  62. 62. Event definition of class Class of BearBear = 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.
  63. 63. 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; }});
  64. 64. Live coding
  65. 65. Classes of sketchBear classItem class Bears appear and then hit them
  66. 66. Tips: Random numbers↓When I need 0 - 9 random numbern = Math.floor(Math.random()*10) When you set 10, you get 0-9↑
  67. 67. Tips: Remove Sprites game.rootScene.removeChild(bear)The object you wants to remove from scene↑
  68. 68. You can download this slideCheck out our facebook page

×