Crafty JS

When using components that support easing (such as Tween or SpriteAnimation), you can specify how the animation progresses by providing either a string representing a built-in easing function or a custom function.

Built-in easing functions include:

• linear: No acceleration.
• smoothStep: Starts and ends with velocity 0.
• smootherStep: Starts and ends with velocity 0 (smoother than smoothStep).
• easeInQuad: Quadratic curve starting with velocity 0.
• easeOutQuad: Quadratic curve ending with velocity 0.
• easeInOutQuad: Quadratic curve starting and ending with velocity 0.

Custom easing functions must accept a single parameter t (representing progress from 0 to 1) and return the calculated progress between 0 and 1.

var e = Crafty.e("2D, Tween");

// Use built-in easing functions
e.tween({x:100}, 1000, "smoothStep");
e.tween({y:100}, 1000, "easeInQuad");

// Define a custom easing function: 2t^2 - t
e.tween({w:0}, 1000, function(t){return 2*t*t - t;});

Use Crafty.load(assets, onLoad, [onProgress], [onError]) to preload sounds, images, and sprites.

Arguments

• assets: A JSON-formatted object or string defining the assets. Supported top-level keys are audio, images, and sprites.
• onLoad: Callback function executed when all assets are successfully loaded.
• onProgress (optional): Callback executed for every asset loaded. Receives an object: { loaded: number, total: number, percent: number, src: string }.
• onError (optional): Callback executed when an asset fails to load. Receives an object with progress information and the failed asset.

Asset Formats

• Audio: Can be a single string (filename) or an array of strings (multiple formats for fallback). If Crafty.support.audio is true, mp3, wav, ogg, and mp4 are supported.
• Images: An array of filenames.
• Sprites: An object where the key is the filename and the value defines tile dimensions and a map of component names to coordinates.

Example

var assetsObj = {
    "audio": {
        "beep": ["beep.wav", "beep.mp3", "beep.ogg"],
        "boop": "boop.wav"
    },
    "images": ["goodguy.png"],
    "sprites": {
        "animals.png": {
            "tile": 50,
            "tileh": 40,
            "map": { "ladybug": [0,0], "lazycat": [0,1] }
        }
    }
};

Crafty.load(assetsObj, 
    function() { 
        // Success callback
        Crafty.scene("main");
    },
    function(e) { 
        // Progress callback: e.percent, e.loaded, etc.
    },
    function(e) { 
        // Error callback
    }
);

var assetsObj = {
    "audio": {
        "beep": ["beep.wav", "beep.mp3", "beep.ogg"],
        "boop": "boop.wav",
        "slash": "slash.wav"
    },
    "images": ["badguy.bmp", "goodguy.png"],
    "sprites": {
        "animals.png": {
            "tile": 50,
            "tileh": 40,
            "map": { "ladybug": [0,0], "lazycat": [0,1], "ferociousdog": [0,2] },
            "paddingX": 5,
            "paddingY": 5,
            "paddingAroundBorder": 10
        },
        "vehicles.png": {
            "tile": 150,
            "tileh": 75,
            "map": { "car": [0,0], "truck": [0,1] }
        }
    },
};

Crafty.load(assetsObj, // preload assets
    function() { //when loaded
        Crafty.scene("main"); //go to main scene
        Crafty.audio.play("boop"); //Play the audio file
        Crafty.e('2D, DOM, lazycat'); // create entity with sprite
    },

    function(e) { //progress
    },

    function(e) { //uh oh, error loading
    }
);

Use Crafty.enterScene(name, [data]) to immediately switch to a registered scene.

• name: The name of the scene to run.
• data: Any type except a function. This is passed as the first parameter to the scene's init function.

Behavior:

• Triggers SceneDestroy with { newScene: name }.
• Resets the viewport.
• Destroys all 2D entities that do not have the Persist component.
• Executes the uninitialize function of the current scene if it exists.
• Triggers SceneChange with { oldScene: String, newScene: String }.
• Executes the initialize function of the new scene, passing data as an argument.

Throws an error if data is a function or if the scene name does not exist.

// Play a scene that was defined to accept attributes
Crafty.defineScene("square", function(attributes) {
    Crafty.background("#000");
    Crafty.e("2D, DOM, Color")
          .attr(attributes)
          .color("red");
});

// Enter the scene with specific attributes
Crafty.enterScene("square", {x:10, y:10, w:20, h:20});