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 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.