Successfully reported this slideshow.
Your SlideShare is downloading. ×

enchant js workshop on Calpoly

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Phactory
Phactory
Loading in …3
×

Check these out next

1 of 73 Ad

More Related Content

Advertisement

Similar to enchant js workshop on Calpoly (20)

Advertisement

enchant js workshop on Calpoly

  1. 1. UEI Headquarters
  2. 2. Company Profile Start : August 8th, 2003 HQ : Bunkyo-ku Yushima 3-1-3 Employee: 130 peoples Legal Capital: 35,000,000 yen
  3. 3. Since 2011/4/17
  4. 4. Features Distributed under MIT/GPL3, Open source software Class base programming TRUE cross platform Many plug-ins
  5. 5. 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
  6. 6. Why HTML5? Chrome Android Safari iPhone Windows Windows8 Phone7
  7. 7. 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
  8. 8. HTML5 is new era of OS HTML5 Apps Application Web Browser OS OS BIOS BIOS Hardware Hardware Legacy OS HTML5 era
  9. 9. 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
  10. 10. Let’s try enchant.js Basics of object oriented game programming
  11. 11. First, download it enchantjs.com Click Here
  12. 12. Extract and check it out Open 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.net You can also code online in browser No need to download anything
  16. 16. Four foundation classes Sprite Label SCORE:400 Game Scene 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:400 game.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 class Be 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 constructor Every object is created by class constructor
  23. 23. Class and Objects hello = 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 property hello.x = 10; // X coordinate of hello hello.y = 200; //Y coordinate of hello hello.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 event hello.addEventListener(‘touchend‘, function(){ this.text = “Hello,Calpoly”; } ); ↑This is event listener
  29. 29. Variety of events touchend hello Hello,Bear touchstart enterframe touchmove
  30. 30. Variety of events touchend hello 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 Sprites Sprites 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 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(); }
  37. 37. 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(); }
  38. 38. 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
  39. 39. Geometry of sprites bear bear = new Sprite(32,32); 32 32 Pass a geometry when sprites is created
  40. 40. Property of sprites bear scaleX age scaleY x y frame Change some property of sprites!
  41. 41. demo
  42. 42. 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
  43. 43. 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(); }
  44. 44. Congratulations! You became a beginner of enchant.js!
  45. 45. The first step of Game designing
  46. 46. 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.
  47. 47. 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)”
  48. 48. Nobody is a great creator, Just genius copycat
  49. 49. Do it yourself!
  50. 50. After you choose the theme Then, draw a sketch of ideas
  51. 51. Tools for sketch Moleskine Drawing papers for kids Signature pens iPad Plane note
  52. 52. Example of Sketch Hit Apple Run a way Hit the bear I use ishodo Save apples available in AppStore
  53. 53. 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
  54. 54. 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
  55. 55. Check out materials chara1.png icon0.gif Images folder includes many royalty free images you can use for enchant.js
  56. 56. Be careful about geometry chara1.png(32x32) icon0.gif(16x16) Each image file has its own geometry.
  57. 57. Master of classes This’s a secret weapon of programming ninja
  58. 58. Find classes from sketch Enemy Items The characters and items will become a class
  59. 59. 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
  60. 60. 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
  61. 61. 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!
  62. 62. 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.
  63. 63. 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; } });
  64. 64. Live coding
  65. 65. Classes of sketch Bear class Item class Bears appear and then hit them
  66. 66. Tips: Random numbers ↓When I need 0 - 9 random number n = 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 slide Check out our facebook page

×