Your SlideShare is downloading. ×
enchant js workshop  on Calpoly
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

enchant js workshop on Calpoly

906
views

Published on


0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
906
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. UEI Headquarters
  • 2. Company ProfileStart : August 8th, 2003HQ : Bunkyo-ku Yushima 3-1-3Employee: 130 peoplesLegal Capital: 35,000,000 yen
  • 3. Since 2011/4/17
  • 4. FeaturesDistributed under MIT/GPL3, Open sourcesoftwareClass base programmingTRUE cross platformMany plug-ins
  • 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. Why HTML5? Chrome Android Safari iPhone WindowsWindows8 Phone7
  • 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. HTML5 is new era of OS HTML5 AppsApplication Web Browser OS OS BIOS BIOSHardware Hardware Legacy OS HTML5 era
  • 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. Let’s try enchant.jsBasics of object oriented game programming
  • 11. First, download itenchantjs.com Click Here
  • 12. Extract and check it outOpen this folder
  • 13. Checkout hellobear Open this
  • 14. Check out main.js This is it!
  • 15. Also you can use code.9leap.netYou can also code online in browser No need to download anything
  • 16. Four foundation classesSprite Label SCORE:400GameScene That’s all! Easy!
  • 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. 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. Basics of enchant.js Sprite Label SCORE:400game.rootScene When you addChild to game.rootScene, the entity turn to visible
  • 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. Classes and Objects Hello,Bear This is “hello” object of Label classBe careful! Class and object are different
  • 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. Class and Objectshello = new Label(“Hello,Bear”); Please create object named “hello” of Label class. And initialize it as “Hello,Bear”
  • 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. 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. 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. What is event? Touched!! hello Hello,Bear Time elapsed! He dragged me!Variety of events will happen to objects.
  • 28. What is event?hello Touched ! Hello,Bear ↓Name of eventhello.addEventListener(‘touchend‘, function(){ this.text = “Hello,Calpoly”; }); ↑This is event listener
  • 29. Variety of events touchendhello Hello,Bear touchstart enterframe touchmove
  • 30. Variety of events touchendhello Hello,Bear touchstart enterframe These are the touchmove essential ones
  • 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. Congratulations!You became a freshmen of enchant.js!
  • 33. Using SpritesSprites are superhero of game programming
  • 34. By the way,What is “sprites”? That’s not a soda
  • 35. What is sprites?Sprites means fairies fly on the screen
  • 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. 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. 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. Geometry of spritesbear bear = new Sprite(32,32); 32 32Pass a geometry when sprites is created
  • 40. Property of sprites bear scaleX age scaleY x y frameChange some property of sprites!
  • 41. demo
  • 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. 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. Congratulations!You became a beginner of enchant.js!
  • 45. The first step of Game designing
  • 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. 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. Nobody is a great creator, Just genius copycat
  • 49. Do it yourself!
  • 50. After you choose the themeThen, draw a sketch of ideas
  • 51. Tools for sketchMoleskine Drawing papers for kids Signature pens iPadPlane note
  • 52. Example of Sketch Hit Apple Run a wayHit the bear I use ishodoSave apples available in AppStore
  • 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. 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. Check out materialschara1.png icon0.gifImages folder includes many royalty free images you can use for enchant.js
  • 56. Be careful about geometrychara1.png(32x32) icon0.gif(16x16) Each image file has its own geometry.
  • 57. Master of classesThis’s a secret weapon of programming ninja
  • 58. Find classes from sketch Enemy ItemsThe characters and items will become a class
  • 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. 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. 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. 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. 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. Live coding
  • 65. Classes of sketchBear classItem class Bears appear and then hit them
  • 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. Tips: Remove Sprites game.rootScene.removeChild(bear)The object you wants to remove from scene↑
  • 68. You can download this slideCheck out our facebook page