I recently went on a journey to find a good and simple to use 2D game engine, and after much reading, much installing, and much configuration I landed on Crafy.js. It's open source, cross browser compatible and has a tiny footprint and best of all, it runs in my browser, which means I can develop from anywhere pretty much. It's the quickest to set up, because it's literally just a tiny JavaScript file. I tried to play around with Unity2D but gave up trying to install a sample project. Try it, and you'll see what I mean. And because I'm new to game development, whatever gets me up and running the fastest is the right choice for me.
So today I'm going to make a CraftyJS game, nothing too complicated, but enough to cover some basic elements, such as collisions, gravity, movement and generating sprites. And anything else that I learn along the way. I'll be making something like the following, which I just made up as I was typing this.
Our main player will need to make it to the end without getting hit by the "rain particles" more than an 'x' amount of times. If he succeeds, you win, and then level 2 happens, I suppose. So it should cover collision, gravity and movement at least.
So let's get started.
Install Crafty.js
There are a few ways to go about installing the JavaScript library as you can see above. The best way for me is to just download it locally and reference it in my page directly. But to each their own. You can download Crafty from the official site.
<html>
<head>
<script type="text/javascript" src="crafty-min.js"></script>
And that's pretty much all there is to it. You're now ready to start making a game. This is the main reason why I decided to give Crafty a try, particularly because I'm new to game development, so the fewer barriers I have between me and coding, the better. I didn't want to spend 2 weeks on getting an example to run, then decide that game development isn't for me and try quilting or something.
A Quick Overview of Crafty
So first off, Crafty is a JavaScript game engine, which means all of our prior JavaScript knowledge is still applicable here. Crafty.js games are built out of entities. Everything is an entity, whether it be a player, enemy, or obstacle. These entities further have components added to them, which give them added functionality. Crafty comes with many built-in components for things such as gravity and collisions, but we are free to create our own as well.
Here's how we would create a smal block.
var block = Crafty.e('2D, Canvas, Color');
The above for example, is an entity with 3 basic components. It won't draw anything on the screen however, because we haven't set its dimensions or color just yet. But we can call the attr method to set those values anytime after we declare it.
block.attr({x:0, y:0, w:10, h:10}).color('#F00');
The attr method let's us shorthand setting the entities dimensions and position. And notice that we can also chain on other methods, since most methods in Crafty will return back the original entity. So that's the basics of it. In this particular game the entities are the block, the rain droplets and the floor we are standing on.
Set Up Our Game Area
This will be the canvas where our game will reside in. We can set up our game area in the init method.
<body>
<div id="game"></div>
<script type="text/javascript" src="https://rawgithub.com/craftyjs/Crafty/release/dist/crafty-min.js"></script>
<script>
Crafty.init(500,350, document.getElementById('game'));
</script>
</body>
init takes in the game areas width and height and the id of the element we'll be using. If we don't specify one, Crafty will create one for us which is convenient.
Create an Entity
Now that we have a game canvas, we can start to add entities to it. Let's start by creating our block and positioning it somewhere near the bottom of the canvas.
Crafty.e('Player, 2D, DOM, Color').attr({x: 0, y: 0, w: 100, h: 100}).color('#F00');
We don't need to set our entity to a variable, you can just call it like I did above, and it will render just fine. Crafty will assign its own ID to it which we can use later to reference it. Notice I also added the Player component to the list, which I defined myself and I will use to reference it later.
Let's Add Some Movement
Can't have a game if our character won't move, so let's add some movement to our block friend. With Crafty, that's super simple. You just need to add another component to the entity, and that's it. With Crafty adding new functionality many times will just mean adding new components.
var block = Crafty.e('Player, 2D, Canvas, Color, Solid, Fourway)
.attr({x: 0, y: 0, w: 30, h: 30})
.color('#F00')
.fourway(4);
You can simply add the Fourway component to the entity and then call the fourway() method to set its speed. The higher it is, the faster your character will move.
Let's Add Add Floor
Our floor is just another entity and we create it just like we did our blocky amigo.
Crafty.e('Floor, 2D, DOM, Color').attr({x: 0, y: 300, w: 200, h: 10}).color('#F00');
Notice I added a new Component to the declaration ('Floor'), which isn't in the official API. I just made it up to identify the entity later. Now that we have a floor, let's make it work like one. Which means that our block will need to fall onto our floor and stay there. Which means, gravity.
Let's Add Gravity
If you guessed that we're going to need to add another Component to make this work, then you're correct. We're going to add the Gravity component to our block. Our player entity should look something like the following now.
var player1 = Crafty.e('Player, 2D, Canvas, Color, Solid, Fourway, Gravity')
.attr({x: 0, y: 0, w: 30, h: 30})
.color('#F00')
.fourway(4)
.gravity('Floor')
.gravityConst(.2);
A few things to note here. First off, I added the Gravity component to the entity declaration. And secondly, I called the gravity method which takes in the name of a component that will stop the current entity from falling, in this case its that Floor component that I made up above. So now any entity with that component will prevent the block from falling through. The gravityConst method is optional, and it specifies the speed at which items fall.
At this point there should be a block (player) which can be moved in 4 directions and is experiencing gravity only to be stopped by the dreaded Floor component, which I defined myself. Which is not bad for the amount of code that I've typed so far.
Make It Rain
The idea here is to have rain "particles" fall from the top of the screen to the bottom and continue to fall unless they hit our main character. If they hit our main character that will be considered a collision and we will update the hit counter. Get hit 3 times, and you'll have to start over.
If you've gotten this far, then awesome, alot of the main components of Crafty were covered. And because this next part is a bit more complex, I'll save it for part 2 where I can cover Frames and Scenes a bit more in depth. In the meantime you can check out the API to see what else this framework has to offer.