How to set the first frame in creatjs?

Lex34 · January 28, 2022

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.

https://www.emanueleferonato.com/2018/09/19/html5-level-select-screen-featuring-swipe-control-stars-progress-saved-on-local-storage-smooth-scrolling-pagination-and-more-powered-by-phaser-3/

walter.team · March 29, 2023

// Assuming you have already loaded your sprites and set up your animation

// Define a variable to keep track of the current frame
let currentFrame = 0;

// Define a function to draw the current frame
function drawFrame() {
// Clear the canvas
context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the current frame
context.drawImage(sprite, currentFrame * frameWidth, 0, frameWidth, frameHeight, x, y, frameWidth, frameHeight);
}

// Set up an interval to update the frame every 100ms
setInterval(function() {
// Update the current frame
currentFrame = (currentFrame + 1) % numFrames;

// Draw the current frame
drawFrame();
}, 100);

// When the player completes a level and earns a certain number of stars
// Set the current frame to the corresponding frame number
if (numStars === 1) {
currentFrame = 0;
} else if (numStars === 2) {
currentFrame = 1;
} else if (numStars === 3) {
currentFrame = 2;
}

// Draw the current frame
drawFrame();

To show a certain frame of your animation instead of the animation itself, you can use the drawImage() method of the canvas context. The drawImage() method can take an optional argument that specifies which frame to display.

In this example, currentFrame is a variable that keeps track of which frame of the animation to display. When the player completes a level and earns stars, you can set the currentFrame variable to the corresponding frame number (0 for one star, 1 for two stars, 2 for three stars). Then, you can call the drawFrame() function to display the current frame on the canvas.

Sign In

How to set the first frame in creatjs?

Recommended Posts

Lex34

Link to comment

Share on other sites

walter.team

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity