Pixi.js Sprite Sheet Animation and TexturePackerPro

8Observer8 · June 9, 2022

Hello,

I have TexturePackerPro v4.3.3 that I bought a few years ago (maybe 4 years). I cannot load a sprite sheet that I made using this tutorial: How to create sprite sheets & animations for PixiJS 6 I tried this example from the documentation: https://pixijs.download/dev/docs/PIXI.AnimatedSprite.html

    const sheet = PIXI.Loader.shared.resources["assets/spritesheets/spritesheet.json"].spritesheet;
    console.log(sheet);

The animation object is empty:

image.png.08f10f8f314c12b0d1428504dc3fcf52.png

Source: spritesheet-pixi-js.zip

src/client/main.js

import * as PIXI from "pixi.js"

// create a Pixi application
let app = new PIXI.Application({ width: 800, height: 450 });

// add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);

let background, animatedCapguy;
const capguyFrames = [
    "assets/sprites/capguy/walk_01.png",
    "assets/sprites/capguy/walk_02.png",
    "assets/sprites/capguy/walk_03.png",
    "assets/sprites/capguy/walk_04.png",
    "assets/sprites/capguy/walk_05.png",
    "assets/sprites/capguy/walk_06.png",
    "assets/sprites/capguy/walk_07.png",
    "assets/sprites/capguy/walk_08.png"
];

// load the sprite, call setup() when completed
// app.loader
//     .add("assets/spritesheets/spritesheet.json")
//     .load(setup);
PIXI.Loader.shared
    .add("assets/spritesheets/spritesheet.json")
    .load(setup);

function setup()
{
    // get a reference to the sprite sheet you've just loaded:
    // let sheet = PIXI.loader.resources["assets/spritesheets/spritesheet.json"];
    // let sheet = app.loader.resources["assets/spritesheets/spritesheet.json"];

    const sheet = PIXI.Loader.shared.resources["assets/spritesheets/spritesheet.json"].spritesheet;
    console.log(sheet);

    // initialize background sprite
    // background = new PIXI.Sprite(resources["assets/sprites/background.png"].texture);
    background = new PIXI.Sprite(sheet.textures["background.png"]);
    app.stage.addChild(background);

    // scale stage container that it fits into the view
    app.stage.scale.x = app.view.width / background.width;
    app.stage.scale.y = app.view.height / background.height;

    // create an animated sprite
    // animatedCapguy = new PIXI.AnimatedSprite.fromFrames(capguyFrames);
    animatedCapguy = new PIXI.AnimatedSprite(sheet.animations["capguy/walk"]);

    // configure + start animation:
    // animatedCapguy.animationSpeed = 1 / 6;                  // 6 fps
    // animatedCapguy.position.set(0, background.height - 350); // almost bottom-left corner of the canvas
    // animatedCapguy.play();
    // app.stage.addChild(animatedCapguy);
    // app.ticker.add(delta => gameLoop(delta));

    // set speed, start playback and add it to the stage
    animatedCapguy.animationSpeed = 0.167;
    animatedCapguy.position.set(0, background.height - 350); // almost bottom-left corner of the canvas
    animatedCapguy.play();
    app.stage.addChild(animatedCapguy);
    app.ticker.add(delta => gameLoop(delta));
}

function gameLoop(delta)
{
    animatedCapguy.x = (animatedCapguy.x + 5 * delta) % (background.width + 200);
}

public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>

<body>
    <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "pixi.js": "https://cdn.skypack.dev/[email protected]"
            }
        }
    </script>

    <!-- <script type="module">
        import { Vec2 } from "planck-js";

        const vec = Vec2(1, 2)
        console.log(vec);
    </script> -->

    <script type="module" src="js/bundle.js"></script>
</body>

</html>

rollup.config.js

export default {
    input: "./src/client/main.js",
    output: {
        file: "public/js/bundle.js"
    }
}

Edited June 9, 2022 by 8Observer8

ivan.popelyshev · June 10, 2022

You have to export it with latest pixi template, i think.

Andreas personally added this feature in texturePacker and in pixi:

Sign In

Pixi.js Sprite Sheet Animation and TexturePackerPro

Recommended Posts

8Observer8

Link to comment

Share on other sites

ivan.popelyshev

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity