PixiJS Movie spritesheet importer for HTML5 canvas

Presentation

This project is a very small html template to start coding an application or game that uses HTML 5 canvas. The goal is to start coding a game faster, with easier methods for loading sprites and assets.

The input spritesheet is a Json file generated by the "Piskel" software in the "PixiJS Movie" format.

More information on the piskel software: "https://github.com/piskelapp/piskel/"

PixiJS movie format

The format of the json file is for example the following at the output of the piskel software:

{
    "frames": {
        "spritename0.png": {
            "frame": { "x": 0, "y": 0, "w": 8, "h": 8 },
            "rotated": false,
            "trimmed": false,
            "spriteSourceSize": { "x": 0, "y": 0, "w": 8, "h": 8 },
            "sourceSize": { "w": 8, "h": 8 }
        },
        /*  "spritename1.png": { ... etc } */
    },
    "meta": {
        "app": "https://github.com/piskelapp/piskel/",
        "version": "1.0",
        "image": "square.png",
        "format": "RGBA888888",
        "size": {
            "w": 16,
            "h": 24
        }
    }
}

Get started

To start using the template, you can download the Git repository directly and launch index.html in a browser !

And if not, this little code also works:

// Create a canvas object from the dom element selector. 0.04 is a
// customizable factor that indicates the pixel size in the canvas.
let canvas = new Canvas("#canvas", 0.04);

//Add a spritesheet json file to the loading queue
let spritesheet = new Spritesheet([
    './sprites/square/square.json'
]);

// Callback function called when spritesheet json and image are loaded
spritesheet.endLoading = function() {
    console.log(spritesheet.sprites);
    canvas.drawSprite(0, 0, spritesheet.sprites.square0);
}

// Starting the loading process
spritesheet.startLoading();

Contributing ?

I think it is always possible to progress in programming, so any help and advice to improve this template is welcome !

Issues : Found a problem when using this template ? Want to request a feature ? Open an issue !

License

Copyright 2019 Misslin Quentin