Embed Size (px)
Citation preview
Game Development With Butterfly FrameworkDo It Yourself
Introduction To Butterfly Framework
ByChanaka Nakandala
Game Development With Butterfly FrameworkDo 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.
Core Frameworks
Graphics Audio Input Math
Butterfly Framework For HTML5 v1.0.0
Features
Cross BrowserFeatures
What are those Web Browsers..?Microsoft Internet Explorer
Mozilla Firefox
Google Chrome
Apple Safari
Google Chrome Frame for Internet Explorer
GraphicsFeatures
2D Sprites Helper for render 2D Graphics and Sprite Sheets.
Enable to using Viewport Effects.
InputsFeatures
Easy to getting User Inputs
1.Mouse2.Keyboard
Provides
AudioFeatures
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 MemoryManagement
MathFeatures
Support for Vector and Rectangles
Intersection Helpers
Movement Helpers
Allows to use Javascript Math
How to develop a game Butterfly Framework.?
You may needs
1. butterflyframework.js
2. Game.js
How to develop a game Butterfly Framework.?
You may needsHTML5 Support Web Browser
Butterfly Framework has some sequence of built in methods
i. Initializeii. Load Game Assetsiii. Updateiv. Draw Game On The Screenv. Exit Game
Life Cycle Of Butterfly Framework.?
Life Cycle Of Butterfly Framework.?Do It Yourself
Initialize Load Game Assets Update
Draw Game On The Screen
Exit
Butterfly Framework For HTML5 v1.0.0
Develop Games WithButterfly Framework
Steps
1.Create New HTML 5 Page
2.Include Framework inside of the HTML page
<!DOCTYPE html><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>
Content Includes All Game Assets…
Game Contents
Textures , Sprites,Music Tracks , Sound Effects,Game Level Data
Butterfly Framework For HTML5 v1.0.0
Introduction Game.js
Life Cycle Of Butterfly Framework.?Do It Yourself
Initialize Load Game Assets Update
Draw Game On The Screen
Exit
Initialize Method
//----------------------------initialization------------------
var Initialize = function(){ // TODO: Add your initialization logic here}Initialize();
Game.js
LoadContent Method//----------------------------Load Content------------------------
var LoadContent = function(){
// TODO: use this to load your game content here
}LoadContent();
Game.js
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
Draw Method
//---------------------------Draw---------------------------------------
var Draw= function(){ clear('#d5e7f9');
// TODO: Add your drawing code heres
}
Game.js
