How do i move animated sprites

[Blockwelt]

Hi!

Can´t figure out how to move a animated sprite. It´s easy with a static sprite but how do i do this with an animated one.

In the example i manage to move the text but not the animated sprites.
 

Should appreciate som tips

 

import * as PIXI from 'pixi.js'
const app = new PIXI.Application();
document.body.appendChild(app.view);

app.loader
    .add('src/assets/SpaceShip.json')
    .add('src/assets/alien.json')
    .load(onAssetsLoaded);

function onAssetsLoaded() {
   
    const spaceFrames = [];
    const alienFrames = [];

    for (let i = 0; i < 2; i++) {
        const a = i < 2 ? `${i}` : i;
        const b = i < 2 ? `${i}` : i; 

      
        spaceFrames.push(PIXI.Texture.from(`SpaceShip${a}.png`));
        alienFrames.push(PIXI.Texture.from(`alien${b}.png`));       
    }
   
    const spaceAnim = new PIXI.AnimatedSprite(spaceFrames);
    const alienAnim = new PIXI.AnimatedSprite(alienFrames);
    
    spaceAnim.x = app.screen.width / 2;
    spaceAnim.y = app.screen.height / 2;
    alienAnim.x = app.screen.width / 2;
    alienAnim.y = app.screen.height / 2;

    spaceAnim.anchor.set(0.5);
    spaceAnim.animationSpeed = 0.2;
    
    alienAnim.anchor.set(0.5);
    alienAnim.position.x = 400;
    alienAnim.position.y = 150;
    alienAnim.animationSpeed = 0.1;
    
    spaceAnim.play(); 
    alienAnim.play()   

    app.stage.addChild(alienAnim);
    app.stage.addChild(spaceAnim);

    
}      


const style = new PIXI.TextStyle({
    fontFamily: 'Arial',
    fontSize: 36,
    fontStyle: 'italic',
    fontWeight: 'bold',
    fill: ['#ffffff', '#005f99'], // gradient
    stroke: '#4a1850',
    strokeThickness: 5,
    dropShadow: true,
    dropShadowColor: '#000000',
    dropShadowBlur: 4,
    dropShadowAngle: Math.PI / 6,
    dropShadowDistance: 6,
    wordWrap: true,
    wordWrapWidth: 440,
    lineJoin: 'round'
});

const spaceShipHeader = new PIXI.Text("SPACE FREIGHT", style);
spaceShipHeader.x = 250;
spaceShipHeader.y = 50;

app.ticker.add(delta => {gameLoop(delta)});

app.stage.addChild(spaceShipHeader);

function gameLoop(delta) {    
spaceShipHeader.x +=1;   
}

This code just generates a black screen when a add the app.ticker.add line in the onAssetsLoaded function. When i remove the line i can see my animation again.

 

import * as PIXI from 'pixi.js'
const app = new PIXI.Application();
document.body.appendChild(app.view);

app.loader
    .add('src/assets/SpaceShip.json')
    .add('src/assets/alien.json')
    .load(onAssetsLoaded);

function onAssetsLoaded() {   
    
    const alienFrames = [];

    for (let i = 0; i < 2; i++) {
        const a = i < 2 ? `${i}` : i;
        const b = i < 2 ? `${i}` : i;      
        
        alienFrames.push(PIXI.Texture.from(`alien${b}.png`));       
    }  
    
    const alienAnim = new PIXI.AnimatedSprite(alienFrames);    
    
    alienAnim.x = app.screen.width / 2;
    alienAnim.y = app.screen.height / 2;
    
    alienAnim.position.x = 50;
    alienAnim.position.y = 50;
    
    alienAnim.animationSpeed = 0.1;  
    
    alienAnim.play()   

    app.stage.addChild(alienAnim);    

    app.ticker.add(delta => gameLoop(delta));

    
}

function gameLoop(delta) {
alienAnim.x += 1; 
}

 

Edited December 29, 2020 by Blockwelt

[themoonrat]

Scoping

alienAnim is created in one function, then in gameLoop you try to refer to it, but its not in scope. 

I'd expect a browser to show a reference error.

[Blockwelt]

Yes, of course. I missed this. 

I will declare it outside the function.

 

Thanks!