pixi.js Can't access animatedSprite outside setup function

[JcXGTcW]

I want to make my fish(fish_) can transform to another form (fishFly_) while jumping, and I wrote a function called "jump" to do so.

But when I was trying to change the .visible of them, console gave me:

Uncaught ReferenceError: fish_ is not defined
    at jump (game.js:142) //the line of "fish_.visible = true;" in "else statement" of "jump function"
    at t.fn (game.js:127) //which is the line of app.ticker
    at t.emit (TickerListener.ts:107)
    at e.update (Ticker.ts:479)
    at _tick (Ticker.ts:187)

seems like I used the wrong way to change it.

Can someone help me T_T

p.s not native in English, Sorry for my poor English

let Resources = PIXI.Loader.shared.resources,
    Container = PIXI.Container,
    AnimatedSprite = PIXI.AnimatedSprite;

//put in loader and .load(setup functions)

let fish = new Container;
fish.jump = 0;

function fishSetup(){
    let fish_ = new AnimatedSprite(Resources['fishWalk'].spritesheet.animations["lagi3_2"]);
    fish_.anchor.set(0.5,1);
    fish_.x = 120;
    fish_.y = 660;
    fish_.zIndex = 31;
    fish_.animationSpeed = 0.15;
    fish_.gotoAndStop(2);
    fish.addChild(fish_);
}

function flyingFishSetup() {
    let fishFly_ = new AnimatedSprite(Resources['fishFly'].spritesheet.anmations["fishFly"]);
    fishFly_.anchor.set(0.5,1);
    fishFly_.x = this.fish_.x;
    fishFly_.y = this.fish_.y;
    fishFly_.zIndex = 32;
    fishFly_.animationSpeed = 0.25;
    fishFly_.play();
    fish.addChild(fishFly_);
}

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

function jump(delta){
    if(fish.jump){
        fish_.visible = false;
        fishFly_.visible = true;
    }
    else{
        fish_.visible = true;
        fishFly_.visible = false;
    }
}

window.addEventListener("keydown",downHandler);
function downHandler(e){
    if(e.keyCode === 32){
        console.log("jump key")
        fish.jump = 1;
    }
}

 

 

[JcXGTcW]

After 3 hours of fighting, I just find out how to solve this.

Just to  var and initialize animatedSprite outside the setup function

var fish_ = new AnimatedSprite.from("path/to/some/img");
function fishSetup(){
    some_setup_functions();
}

Thanks for your attention!

[ivan.popelyshev]

I think you need a javascript book  https://www.amazon.com/JavaScript-Definitive-Guide-Activate-Guides/dp/0596805527 - find that book in internets.

Welcome to the forums!

Edited January 6, 2020 by ivan.popelyshev