Taco Graveyard

I built another simple game prototype using Crafty. My goals when building this prototype were:

• Gain more familiarity with Crafty in the lead up to Ludum Dare
• Test out animations
• Load animations from TexturePacker output
• Test touch input for mobile devices
• Test cross browser viability

The prototype was a success in regards to all the goals above, but I think the best thing to come out of the prototype was a pile of notes on the differences between Crafty and cocos2d. I'll share some of them here.

Transitioning From Cocos2d

When you spend enough time with a particular framework you start to think in its terms. Here are a few points that will give a head start someone moving from cocos2d to Crafty:

Origin: The origin is in the top-left instead of the bottom-left. This should be familiar to anyone used to web development.

Anchor Points: The anchor point is in the top-left of a sprite, not at its center. The anchor point is not adjustable. This bothered me enough that I whipped up a little component that adds an adjustable anchor point. There might be a better way to do this, but here is the code I used:

Asset Pipeline: If you use cocos2d, then you likely use TexturePacker (and if not, what is wrong with you?). You can continue using TexturePacker with Crafty by changing the data format of the output from 'cocos2d' to 'JSON'. I recommend that you also disable 'Allow Rotation' and 'Trim'.

Flipping: 2D objects have a flip method but once an object is flipped you can't unflip it. I created another component that provides flipX and flipY methods that can be used to flip a sprite back and forth:

Scaling: I didn't see any methods or properties for scaling a sprite in the documentation or the source. I may write a component and post it in a future post.

Tags: Tags are a great way to attach extra information to cocos2d nodes without much hassle. Onlarger projects you should probably create components that properly incapsulate the data that you represent with tags, but for a quick prototype tags are priceless. Here is a component for adding tags:

Gameloop: Most cocos2d games have a gameloop in the form of a scheduled update or step function. To emulate that pattern in Crafty you can use the EnterFrame event. EnterFrame does not pass the time since the last event, so you will need to jury rig your own step event:

Aside: Touch Input

Crafty will treat taps as mouse clicks but the event handling code does not properly handle all touch events. This bit of code does convert touch events to mouse events:

BUT touch events have different data than mouse events. This conversion is not enough for touch events (in particular touchmove) in Safari. This also ignores the fact that multiple touches can be passed in a single event.

I added a quick hack so that single touches would work as expected:

More work is needed to add proper multitouch handling.

The Prototype

The prototype feels like it could be a fun little game after a serious round of polishing. Caveat: I didn't test this on a wide array of platforms so it may explode on you. And without further ado:

Your browser does not support iframes.

Last night I started exploring open source  HTML5 game frameworks. I was initially drawn to cocos2d-javascript due to my experience with cocos2d, but it requires server side code. It looks fairly robust and I would look into using it for commercial games, but I wanted to explore client side libraries for quick prototypes and game jams.

I ended up spending some time today with Crafty. The documentation is lacking and not all of the functionality is there that I would want for building a commercial title, but it seems like a good library for small games. I look forward to see it grow.

Here is a simple color matching game I built with it:

Your browser does not support iframes.

The rules are simple:

• Click on the square that matches the color in the center
• Match all the squares to move to the next level
• You get one mistake
• If you make two mistakes the board resets
• On the third reset the board reverts back one level

If there is any interest I will write up a tutorial.