I'm making a menu for a game where the player will choose a level. For completing a level, the player will receive stars: one, two, three, depending on how the level was completed. Now I was able to load the sprites and run the animation. How to make it so that a certain frame is shown instead of animation, for example 1, 2, 3, etc.
Here is the code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>EaselJS: Simple SpriteSheet Example</title> <script src="./createjs/easeljs.js"></script> <script src="./createjs/preloadjs.js"></script> <style> html, body, div { padding:0; margin: 0; } body { width:100%; height:100%; margin: 0; overflow: hidden; background-color: white; } canvas { background-color: #d5f2ef; width:100%; } </style> <script> var assets = []; var betty; var stage; var spriteSheet; function init() { var manifest = [ {src: "sheet.json", id: "sheet1", type: "spritesheet"} ]; var loader = new createjs.LoadQueue(true, "./"); loader.on("fileload", handleFileLoad); loader.on("complete", handleComplete); loader.loadManifest(manifest); } function handleFileLoad(event) { assets.push(event); } function handleComplete() { for (var i = 0; i < assets.length; i++) { var event = assets[i]; var result = event.result; switch (event.item.id) { case 'sheet1': spriteSheet = result; break; } } initScene(); } function initScene() { stage = new createjs.Stage(document.getElementById("testCanvas")); levelthumb = new createjs.Sprite(spriteSheet, "RunFrame"); levelthumb.x = 200; levelthumb.y = 400; stage.addChild(levelthumb); // Add Betty to the stage, and add her as a listener to Ticker to get updates each frame. createjs.Ticker.on("tick", tick); createjs.Ticker.timingMode = createjs.Ticker.RAF; createjs.Ticker.addEventListener("tick", stage); } function tick(e) { } </script> </head> <body onload="init();"> <div> <canvas id="testCanvas" width="960" height="540"></canvas> </div> </body> </html>
I am also attaching the json file.
Quote{
"images": [
"levelthumb.png"
],"framerate": 2,
"frames": [
[0, 0, 60, 60, 0, 0, 0],
[60, 0, 60, 60, 0, 0, 0],
[120, 0, 60, 60, 0, 0, 0],
[180, 0, 60, 60, 0, 0, 0],
[240, 0, 60, 60, 0, 0, 0]
],"animations": {
"RunFrame": { "frames": [0,1,2,3,4] }
}}
levelthumb.png is taken from this tutorial.