LimeJs Notes

limejs.md

Adding a CSS Class

In JavaScript:

whatever.domClassName = 'foo';

In HTML:

<style type="text/css">
.foo {border: 1px solid black;}
</style>

Event Handling

You have to call e.event.stopPropagation() or e.event.preventDefault(), not e.stopPropagation() etc.

Pausing

The lime.Director.setPaused is useless in-game, as it makes the game's event handlers stop responding. Thus, you must roll your own pause function, which has two steps. First, you must unschedule anything you have scheduled. For example:

lime.scheduleManager.unschedule(scene.mainLoop, scene);

However, if you merely unschedule the loop, any actions you have running (e.g., keyframe animations) will continue, so you have to tell the director to stop all of those, as well:

lime.scheduleManager.changeDirectorActivity(scene.getDirector(), false);

You cannot just change the director activity, though, without unscheduling your game loop, as then the game loop will continue and all of your sprites will "jump" to the place they would have ended up after that amount of time when you unpause.

Changing the director activity will stop all redraws, but event handlers keep working. So, you cannot have anything drawn while the director is off, which is super annoying.

You can unpause by calling their corresponding reinvoking functions:

lime.scheduleManager.schedule(scene.mainLoop, scene);
lime.scheduleManager.changeDirectorActivity(scene.getDirector(), true);

Spritesheets

First, create the spritesheet in TexturePacker with a JSON (Hash) data format and PNG texture format. Make sure the data file will be <something>.json and that both files are in the right place (I put them in my assets directory).

Then publish.

Go to the limejs/ directory and run:

$ bin/lime.py gensoy heist/assets/heist.json
$ bin/lime.py update

This provides the lime.ASSETS.heist.json package. Require it in data/resources.js, along with:

goog.require('lime.parser.JSON');
goog.require('lime.ASSETS.heist.json');
goog.require('lime.SpriteSheet');

Now, in a function, load the spritesheet:

var spriteSheet = new lime.SpriteSheet('assets/heist.png',
                                       lime.ASSETS.heist.json,
                                       lime.parser.JSON);

Now you're ready to use the sprites:

var bread = new lime.Sprite().setFill(spriteSheet.getFrame('bread.png'));

Remember that you have to re-run gensoy every time you update your spritesheet.

Keyframe Animations Using Spritesheets

Once you've loaded a sprite sheet, you can use the frames for animations. For example:

var walk = new lime.animation.KeyframeAnimation()
    .setDelay(1/8).setLooping(true);
walk.addFrame(spritesheet.getFrame('walk3.png'));
walk.addFrame(spritesheet.getFrame('walk4.png'));
walk.addFrame(spritesheet.getFrame('walk2.png'));
walk.addFrame(spritesheet.getFrame('walk1.png'));
sprite.runAction(walk);