Jump to content

Pixi.js Sprite Sheet Animation and TexturePackerPro


8Observer8
 Share

Recommended Posts

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 by 8Observer8
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...