Html5 game development
•Download as PPTX, PDF•
1 like•228 views
Html5 game development with butterfly framework
Recommended
More Related Content
Viewers also liked
Similar to Html5 game development
Similar to Html5 game development (20)
Recently uploaded
Recently uploaded (20)
Html5 game development
- 1. Game Development With Butterfly Framework Do It Yourself Introduction To Butterfly Framework By Chanaka Nakandala
- 2. Game Development With Butterfly Framework Do It Yourself What is Butterfly Framework..? Butterfly Framework is a Framework Provided by ButterflySoft PVT(LTD.) For HTML5 game development tasks. That mean Butterfly Framework is not a “Game Engine” , It’s a “Code library”. Butterfly Framework is build on top of the HTML5 Canvas.
- 3. Core Frameworks Graphics Audio Input Math
- 4. Butterfly Framework For HTML5 v1.0.0 Features
- 5. Cross Browser Features What are those Web Browsers..? Microsoft Internet Explorer Mozilla Firefox Google Chrome Apple Safari Google Chrome Frame for Internet Explorer
- 6. Graphics Features 2D Sprites Helper for render 2D Graphics and Sprite Sheets. Enable to using Viewport Effects.
- 7. Inputs Features Easy to getting User Inputs 1.Mouse 2.Keyboard Provides
- 8. Audio Features Game audio is Based on Background Music and Sound FXs. Able to use audio files via their logical names Support For mp3 and wav formats Support for Looping , Pause and Memory Management
- 9. Math Features Support for Vector and Rectangles Intersection Helpers Movement Helpers Allows to use Javascript Math
- 10. How to develop a game Butterfly Framework.? You may needs 1. butterflyframework.js 2. Game.js
- 11. How to develop a game Butterfly Framework.? You may needs HTML5 Support Web Browser
- 12. Butterfly Framework has some sequence of built in methods i. Initialize ii. Load Game Assets iii. Update iv. Draw Game On The Screen v. Exit Game Life Cycle Of Butterfly Framework.?
- 13. Life Cycle Of Butterfly Framework.? Do It Yourself Initialize Load Game Assets Update Draw Game On The Screen Exit
- 14. Butterfly Framework For HTML5 v1.0.0 Develop Games With Butterfly Framework
- 15. Steps 1.Create New HTML 5 Page 2.Include Framework inside of the HTML page
- 16. <html> <head> <title>Butterfly Soft</title> <link rel="icon" href="Butterfly_Framework/favicon.gif" type="image/x-icon"> <style> body { margin:0px; padding:0px; } canvas{ outline:0; border:1px solid #000; margin-left: auto; margin-right: auto; } </style> </head> <body> <canvas id='graphicDevice'></canvas> <script src="Butterfly_Framework/butterflyframework.js"></script> <script src="Game.js"></script> </body> </html>
- 17. Content Includes All Game Assets… Game Contents Textures , Sprites, Music Tracks , Sound Effects, Game Level Data
- 18. Butterfly Framework For HTML5 v1.0.0 Introduction Game.js
- 19. Life Cycle Of Butterfly Framework.? Do It Yourself Initialize Load Game Assets Update Draw Game On The Screen Exit
- 20. Initialize Method //----------------------------initialization------------------ var Initialize = function(){ // TODO: Add your initialization logic here } Initialize(); Game.js
- 21. LoadContent Method //----------------------------Load Content------------------------ var LoadContent = function(){ // TODO: use this to load your game content here } LoadContent(); Game.js
- 22. Update Method //---------------------------Update------------------------------------- var Update= function(){ document.onkeydown = function(e) { if(e.keyCode==27){ window.close();//exit when press esc } } // TODO: Add your update logic here } Game.js
- 23. Draw Method //---------------------------Draw--------------------------------------- var Draw= function(){ clear('#d5e7f9'); // TODO: Add your drawing code heres } Game.js