Wow... Its been a half year I didn't update this blog... And now, I'm back with another post about create your own games. This time, I plan to make a long tutorial about Creating a HTML5 Role Playing Game with Crafty. And I'll divide it to several post, to make it more readable and simple.
Thoose post will be:
1. Getting Started with Crafty
2. Component and Entity
3. Sprites and Animation
4. Controlling Player Movement
5. Collision Detection
6. Moving NPC
7. ... etc (need more time to learn another topics :-)
Why using crafty?
- Dom and or Canvas Rendering
- Entity-component system
- jQuery style selector mechanism
- Asset loading
- Sprite Map support
- Audio support
- Isometric support
- Collision Detection (SAT)
Getting Started with Crafty
So, now we will learn about how to use Crafty to create HTML5 Role Playing Games. First, you can download the newest version of crafty here. Just include Crafty.js and our game code to the html page. You can place it between <head> tag.
<script src="crafty.js"></script> <script src="myGame.js"></script>Next, we need to initialize Crafty when the page has been loaded.
Crafty.init(640, // 640 Pixels Wide 480 // 480 Pixels Tall );
If we use canvas to render game graphics, we need to add this code.
Crafty.canvas.init();So, it will looks like this.
Index.html
<!DOCTYPE html> <html> <head> <title>My Awesome Game</title> <script src="crafty.js"></script> <script src="myGame.js""></script> </head> <body> </body> </html>
myGame.js
window.onload = function() {
Crafty.init(500,350);
Crafty.canvas.init();
});
Live Demo (New)
No comments:
Post a Comment