Crafty.js games are made up of Entities and get their functionality from built in and user defined Components. Crafty.js can wrap entities into Scenes, which you can load at any point in the life cycle. Elements such as gravity and collision detection are wrapped into Components, which makes working with them super easy and effective. If you want an entity to "fall", you simply apply to it the "Gravity" component and set a few properties. For example, in the above screenshot, the rain dropplets have the Gravity component specified, which automatically makes them fall to the bottom of the screen. Once at the bottom, I destroy the entities to avoid memory issues.
Features to Build
There are a few things that I want this game to include, mainly the standard things that most games nowadays have. I want to have a splash screen, a title screen, and of course my level. I want the game to have an objective, such as reach this area by this time, or reach this area without "x event happening". And when I do reach the end, I want the scene to end and to bring up another scene. I won't into making the second scene, because it will pretty much be the same process as making the first, but it'll be a good starting point for an actual game.
As far as visuals go, I want to have a scrolling background image, and an actual eight bit character image and not just a block like I have in my other posts. In order to make the 8 bit image, I will be using Eight-Bits.com, an online pixel building editor. Both the background and the character that I built were made using it.
Let's Get Started
The first thing I want to get off the old list is the splash screen with my websites logo. After 3 or so seconds I want it to vanish, and to load my title screen. And thanks to the Crafty.js component system, you can easily add the 'Tween' component, which allows us to play around with animations and alpha channel manipulations. And to give credit where credit is due, check out the following implementation of a transitioning scene loader which does the job beautifully.
Very awesome job there. Now whenever I want to load a scene with a transition period, I simply call that function instead of the default Crafty.enterScene one.
Normally, you're splash screen will feature information about production companies and design studios, and whoever else helped with the project. In my case, I'm just going to be loading an image with my websites logo. And for that, I can either load an image entity, or set the background property in the main Crafty object. I've chosen to simply just set the background of the current scene to my logo image, with a white background. After a 3 second transition period, the "HomeScreen" scene will load.
Loading the title screen is the same as loading the splash screen. I define a new Scene and I can pretty much add anything that I want onto it. In my case, I added a new entity with a Text component, which I then styled somewhat and turned it into the title of the game, and then another Text entity with a click event bound to it. And upon click, I simply load the level scene. This particular scene gets called at the end of the splash screen loading event.
The first thing I'm going to do is to define a new scene for the first level in the game. And I'm going to set a background image that will take up the entire contents of the viewport.
This will load the background image, but it won't do much else. Currently the code is set up to have the viewport update as the character walks forward. However, our background will remain stationary. But we can fix that. Let's take a look at the full definition for the level scene right below, with the important parts highlighted.
Loading The Character Sprite
Previously I was using a white box as my character, because it's easy to work with. This time around though, I'm going to add a sprite character in place of that. And with Crafty, that's surprisingly easy and will require very little code change. If you look at the code snippet above, I added another Component to my player entity called dude. This dude, is our sprite character, which I can define with the following, either somewhere outside my scene definition, or in the scene definition itself:
After this, I can begin to use the sprite character wherever I please. Just for this example, the image sprite just has one character. In a more worked out game, he would have all of his many phases and depending on the characters current state, I would render a different frame. I didn't make that many changes to my previous game demo, but you can see that with a little bit of work, you can start to make something that's a bit more complex. Here's a working example of the entire thing, plus the full source at the bottom.
View Full Source