My preload is not sending assets to all scenes

Phaser 3
1

Game scene loads everything fine. Second concurrently running scene needs all assets loaded in its own preload to appear. What am I missing?

let gameoverScene = new Phaser.Scene(
{ key: ‘GameOver’,
// WIDTH:100,
// HEIGHT:100,
active:true,
physics: {

   default: 'arcade',
    arcade: {gravity: {y: 1000}},
        debug: true,
        
    },
                                 });

gameoverScene.preload = function(){
// this is the line I want to delete this.load.image(‘prancingUnicorn’, ‘images/prancingUnicorn.png’);

};

gameoverScene.create = function(){

this.unicorn2=this.physics.add.sprite(20,30,‘prancingUnicorn’) ;
//this.unicorn2.body.allowGravity=false
this.cameras.main.setViewport(0,0,300,300);
};

gameoverScene.update = function(){

};

2

Don’t start the scenes concurrently if the second scene depends on assets loaded by the first.

Instead launch the second scene from the first scene, after it loads.

1 Like
3

They should both be getting assets from the preload scene. Neither “Game” nor “GameOver” should need to load anything themselves.

4

Please post the full code.

5

//main.js
// set game configuration
let config = {
type: Phaser.AUTO,
width: 900,
height: 700,
scene: [preloadScene, titleScene, gameScene,gameoverScene],
pixelArt: false,

};

//create new game and send configuration
let game = new Phaser.Game(config)

//this is the other running scene, game.js
let gameScene = new Phaser.Scene(
{ key: ‘Game’,
physics: {
default: ‘arcade’,
arcade: {gravity: {y: 1000},
debug: true,
},

matter:{gravity:{y:.5}},
debug: true,
},

}

);

gameScene.init = function(){
this.numberOfBloods=0;
this.firstLuchador=true;
this.appleDropRate=71;
};
// create after preload
gameScene.create = function(){
//load matter physics bodies from JSON preload data
this.shapes = this.cache.json.get(‘matterShapes’);
//create sounds
this.chainsawStartSound = this.sound.add(‘chainsawStart’);
this.scream1Sound = this.sound.add(‘scream1’);
this.squishSound = this.sound.add(‘squish’);
this.cartBreakSound = this.sound.add(‘cartBreak’);
//scale game to window
this.resize=function(){
var canvas= document.querySelector(‘canvas’);
var windowWidth= window.innerWidth;
var windowHeight= window.innerHeight;
var windowRatio= windowWidth/windowHeight;
var gameRatio = config.width/config.height;
if (windowRatio < gameRatio){
canvas.style.width=windowWidth+‘px’;
canvas.style.height=(windowWidth/gameRatio)+‘px’;

   }else{
       canvas.style.width=(windowHeight*gameRatio) +'px';
       canvas.style.height=windowHeight+'px';
   }

};

window.addEventListener('resize', this.resize, false);
   
//setup needed variables
this.gameW = this.sys.game.config.width;
this.gameH = this.sys.game.config.height;
this.appleCount=0;

//create UI box
  this.uiBox = this.add.rectangle(0,this.gameH,this.gameW*2, 200, '#fff000');

    this.uiBox.depth=99;
    this.physics.add.existing(this.uiBox);
    this.uiBox.body.allowGravity=false;
    this.uiBox.body.immovable=true;
//create apples group
this.apples=this.physics.add.group({
    key: 'redApple',
    repeat:0,
});

//remove first member of group so no apples are in game at start
this.apples.children.entries[0].destroy(); 
//create luchador group and remove first member
this.luchadores = this.physics.add.group({
    key: 'luchador',
    repeat:0,
    
});
this.luchadores.children.entries[0].destroy();
//create game objects
this.nightSky=this.add.sprite(this.gameW/2,this.gameH,'nightSky');
this.hills1=this.add.sprite(0,20,'hills1');
this.hills1.setScale(3);
this.hills2=this.add.sprite(this.gameW/2-100,this.gameH/2,'hills2');
this.hills2.setScale(1.5);
this.nightSky.setScale(.6);
this.appleTree= this.physics.add.sprite(400,600,'appleTree');
this.appleTree.setScale(.3);
this.appleTree.depth=3;
this.appleTree.setInteractive();
this.appleTree.setOrigin(.5,.99 );
this.appleTree.shake=false;
this.appleTree.body.allowGravity=false;

//create cart
this.cart=this.physics.add.sprite(this.appleTree.x-68,this.appleTree.y-95, 'cart');
this.cart.depth=8;
this.cart.setScale(.15);
this.cart.body.allowGravity=false;
this.cart.appleCount=0;
//create attribute for later use to see if cart is in motion
this.cart.moving=false;

//display collected apples
this.appleText=this.add.text(0,0,‘Apples Collected: 0’);
this.appleText.setScale(2);

     //make tree shake on click
this.appleTree.on('pointerdown',  function(){

if(this.appleTree.shake==false){
    //drop apples randomly from tree shake    
    this.appleDrop=Phaser.Math.Between(0,100);
       if(this.appleDrop>=this.appleDropRate){
    this.apples.create(Phaser.Math.Between(this.appleTree.x-100,this.appleTree.x+100), Phaser.Math.Between(this.appleTree.y-500, this.appleTree.y-300), 'redApple')
};
    
        this.appleTree.shake=true;
  this.appleTree.moveTween=this.tweens.add({
               targets:this.appleTree,
                angle:Phaser.Math.Between(-85,85),
                duration:200,
                yoyo:true,
                delay:0,
                callbackScope:this,
                onComplete:function(){this.appleTree.shake=false}
  });

};
},this);

//check apple count and spawn luchador mask
this.luchadorMaskSpawn = this.time.addEvent({
    delay: 1500,
    repeat: -1,
    callback: function(){
        if(!this.luchadorMask&&(this.appleCount>=10)){
       this.luchadorMask=this.add.sprite(50, this.gameH-50,'luchadorMask');
       this.luchadorMask.setInteractive();
        this.luchadorMask.setScale(.1);
        this.luchadorMask.depth=101;
        //check if luchador is first, if so explain how to hire
        if(this.firstLuchador==true){
        this.teachLuchadorText=this.add.text(this.gameW/2-200,this.gameH/2,'Hire a luchador \n for ten apples.');
        this.teachLuchadorText.setScale(3);
        this.teachLuchadorText.depth=500;
        };
         //hire luchador
    this.luchadorMask.on('pointerdown',  function(){
   this.luchadores.create(this.appleTree.x, this.gameH/2, 'luchadores').setFrame(Phaser.Math.Between(0,3));
    this.appleCount=this.appleCount-10;
 
    
    
    
         },this);
        };
                     },
       
        
        
    callbackScope: this,
});

 //spawn Leatherface
this.leatherfaceSpawn = this.time.addEvent({
    delay: 60000,
    repeat: -1,
    callback: function(){
    this.chainsawStartSound = this.sound.add('chainsawStart');
    this.chainsawRevSound = this.sound.add('chainsawRev', {loop:true,});
    if(!this.leatherface||this.leatherface.active==false){
    this.chainsawStartSound.play();
    this.chainsawStartSound.on('ended', function(){this.chainsawRevSound.play();
        if(this.leatherface){
            this.leatherface.active=true;
            this.leatherface.x=92;
            this.leatherface.passes=0;
            this.leatherface.moveSpeed=-450;
            this.leatherface.body.setCollideWorldBounds(true);
        };
        if(!this.leatherface){
        this.leatherface = this.physics.add.sprite(92, this.gameH-250, 'leatherface');
        this.leatherface.depth=98;
        this.leatherface.setScale(.12);
        this.leatherface.moveSpeed=-450;
        this.leatherface.passes=0;
        this.leatherface.body.setCollideWorldBounds(true);
        this.leatherface.body.allowGravity=false;
        };  
        
                                                  }, this)
    };
        },
    callbackScope: this,
});

//create groups for for loops
this.bloods=this.add.group();
this.unicorns=this.add.group();
this.constraints=this.add.group();
this.ropes=this.add.group();

   //create apples group
this.apples=this.physics.add.group({
    key: 'redApple',
    repeat:0,
});

//remove first member of group so no apples are in game at start
this.apples.children.entries[0].destroy();

//place unicorn
this.unicorn=this.matter.add.sprite(this.appleTree.x,250,‘prancingUnicorn’);
this.unicorn.depth=6;
this.unicorn.setScale(.2);

this.ropeY=60;
    for(let i = 0; i< 10; i++){

this.ropes[i]=this.matter.add.sprite(this.appleTree.x,this.ropeY,‘rope’);
this.ropes[i].depth=5;
this.ropeY+=17;
if(i==0){
// constrain rope to tree point
this.constraints[i]= Phaser.Physics.Matter.Matter.Constraint.create({
pointA: {x:this.appleTree.x,y:250},
bodyB: this.ropes[i].body,
length:17,
stiffness:1,
});
this.matter.world.add(this.constraints[i]);

   };
    
   if(i>0){
       this.constraints[i]=Phaser.Physics.Matter.Matter.Constraint.create({
           bodyA:this.ropes[i-1].body,
           bodyB:this.ropes[i].body,
           length:17,
           stiffness:.2,
       })
       
      this.matter.world.add(this.constraints[i]);
   }; 
         
    };

 

this.rectangle=this.matter.add.rectangle(100,100,100,100,19)

this.rectangle.depth=100;

};
gameScene.update = function(){
console.log(this.rectangle.velocity.y)

this.appleText.setText('Apples Collected: '+this.appleCount);

 //check for full cart, make cart move off-screen and set frame to empty cart, return cart to center
if(Phaser.Math.Distance.Between(this.cart.x, this.cart.y, this.appleTree.x-68,this.appleTree.y)<=97&&Phaser.Math.Distance.Between(this.cart.x, this.cart.y, this.appleTree.x-68,this.appleTree.y)>=96&&this.cart.moving==true){this.cart.body.velocity.x=0;this.cart.moving=false};
if(this.cart.appleCount>4){this.cart.body.velocity.x=200;this.cart.moving=true};

if(this.cart.x>this.gameW+300){this.cart.x=-300;
                              this.cart.setFrame(0);
                              this.cart.appleCount=0;
                              this.cart.body.velocity.x=200;
                              this.cart.moving=true;
                              };

//arrange ropes to look more real
let ropes = this.ropes.getChildren();
let numRopes = ropes.length;
for(let i = 0; i<numRopes; i++){
    console.log(this.ropes[i])
    if (i>0){ropes[i].angle = ropes[i-1].angle}
    
};
   //position and scale luchador
    let luchadores = this.luchadores.getChildren();
    let numLuchadores = luchadores.length;
    for(let i = 0; i< numLuchadores; i++){

     luchadores[i].body.velocity.x=0;   
    luchadores[i].setScale(.1);
    luchadores[i].setCollideWorldBounds(true);
    this.physics.add.collider(luchadores[i], this.uiBox);
    if(this.teachLuchadorText){this.teachLuchadorText.destroy()};
        //move luchadores when no apples present
        if(!this.apples.children.entries[0]&& luchadores[i].moveTween==null){
            //this seems like a good place to put the wobble variable because we do not want it to be changed every cycle, just set when not chasing apples
            luchadores[i].rotationValue=1;
            //set value for tween X target in order to flip luchadores
            this.luchadorTweenValue=Phaser.Math.Between(0,this.gameW);
            if(this.luchadorTweenValue>luchadores[i].x){luchadores[i].flipX=true};
            if(this.luchadorTweenValue<luchadores[i].x){luchadores[i].flipX=false};
              luchadores[i].moveTween=this.tweens.add({
               targets:luchadores[i],
                x:this.luchadorTweenValue,
                duration:2500,
                yoyo:false,
                delay:0,
                callbackScope:this,
                onComplete:function(){if(luchadores[i]){luchadores[i].moveTween=null}},
                    });
        };
    //make luchadores wobble

        if(luchadores[i].rotationValue==1||luchadores[i].rotationValue== -1){luchadores[i].angle=luchadores[i].angle+luchadores[i].rotationValue};
      if(luchadores[i].angle>=15 || luchadores[i].angle<=-15){
        luchadores[i].rotationValue=luchadores[i].rotationValue*-1;
    };
        
                                             };

//scale apples and set depth
let redApples = this.apples.getChildren();
let numApples = redApples.length;
for(let i = 0; i< numApples; i++){
if(redApples[i].y>=800){redApples[i].destroy()};
redApples[i].setInteractive();
redApples[i].depth=99;
if(redApples[i].falling==null){
redApples[i].setScale(.03)
redApples[i].visible=true;
redApples[i].body.velocity.y=-800;
if(this.appleTree.angle<0){redApples[i].body.velocity.x=-300}
if(this.appleTree.angle>0){redApples[i].body.velocity.x=300}
};
if(redApples[i].y<(this.gameH/2)){
redApples[i].falling=true;};

    if(redApples[i].falling==true && !redApples[i].fallRate){
       redApples[i].fallRate=9.8;
    };
        redApples[i].body.velocity.y=redApples[i].body.velocity.y+redApples[i].fallRate;

redApples[i].fallRate=redApples[i].fallRate^2;
if(redApples[i].x<this.appleTree.x){
redApples[i].body.velocity.x=Phaser.Math.Between(-50, -300);
};

        if(redApples[i].x>this.appleTree.x){
    redApples[i].body.velocity.x=Phaser.Math.Between(50,300);
};
    redApples[i].on('pointerdown', function(){
    redApples[i].destroy();
    this.cart.appleCount++;
    this.cart.setFrame(this.cart.appleCount);
    this.appleCount++

}, this);
};
//luchador chases apples, new redapples variable needed because this exists within a for loop and you cannot redeclare a let within a let

    let redApples2 = this.apples.getChildren();
    let numApples2 = redApples2.length; 
    for(let q = 0; q< numApples; q++
    ){
    let luchadores2 = this.luchadores.getChildren();
    let numLuchadores2 = luchadores2.length;
    for (let i =0; i< numLuchadores2; i++){
    //stop luchador movement tween
    if(redApples2[q]){
        if(luchadores2[i].moveTween != null){
            luchadores2[i].moveTween.stop()
            luchadores2[i].moveTween=null;
        };
          };
    
    //move towards apple
    if((luchadores2[i])&&redApples2[q].x>=luchadores[i].x){luchadores2[i].body.velocity.x=300;
        luchadores2[i].flipX=true};
        
    if((luchadores2[i])&&redApples2[q].x<luchadores2[i].x){luchadores2[i].body.velocity.x=-300
        luchadores2[i].flipX=false};
    if((luchadores2[i])&&(luchadores2[i].y>=525)&&(redApples2[q].falling==true)){luchadores2[i].body.velocity.y=-500};  
    
             //luchador catches apple   
    if(this.luchadores.children.entries[0]){this.physics.add.collider(luchadores2[i], redApples[q], function(){
    redApples2[q].destroy();
    this.cart.appleCount++;
    this.cart.setFrame(this.cart.appleCount);
    this.appleCount++
    this.appleText.setText('Apples Collected: '+this.appleCount)

},null,this)
};

                     }; 
    };

//start

    let luchadores3 = this.luchadores.getChildren();
    let numLuchadores3 = luchadores3.length; 
    for(let i = 0; i< numLuchadores; i++){
           //collide leatherface with luchador
    if(this.luchadores.children.entries[0]&&this.leatherface){
    this.physics.add.overlap(luchadores3,this.leatherface,function(){
    this.scream1Sound.play();
    this.squishSound.play();
   
     let bloodNumber=Math.random()*3;
    
    if (bloodNumber <=1 && bloodNumber > 0){
     this.bloods.create()
    this.bloods[this.numberOfBloods]=this.physics.add.sprite(luchadores3[i].x, luchadores3[i].y, 'blood1')
    };


    if (bloodNumber<=2 && bloodNumber>1){
        this.bloods.create(); 
    this.bloods[this.numberOfBloods]=this.physics.add.sprite(luchadores3[i].x, luchadores3[i].y, 'blood2')
    };
    
    if (bloodNumber<=3 && bloodNumber>2){
        this.bloods.create();        
    this.bloods[this.numberOfBloods]=this.physics.add.sprite(luchadores3[i].x, luchadores3[i].y, 'blood3')
    };
    this.numberOfBloods++;
    luchadores3[i].destroy();
},null,this);
    };

};
//end

//make sky rotate

this.nightSky.angle=this.nightSky.angle+.03;
//make leatherface move
if(this.leatherface){

    this.physics.add.collider(this.cart,this.leatherface,function(){
    this.appleCount=this.appleCount-this.cart.appleCount;
    this.cart.appleCount=0;
    this.cart.x=3000;
    this.cartBreakSound.play();
},null,this);
     this.leatherface.moveTween=this.tweens.add({
               targets:this.leatherface,
                angle:Phaser.Math.Between(-20,20),
                duration:20,
                yoyo:true,
                delay:0,
                callbackScope:this,
              
  });
  
    }; 

    


//get rid of blood sprite
if(this.bloods[this.numberOfBloods]){
if(this.bloods[this.numberOfBloods].y>1000){this.bloods[this.numberOfBloods].destroy()};
};

//leatherface leaves scene
if(this.leatherface){
    this.leatherface.body.velocity.x=this.leatherface.moveSpeed;
    if(this.leatherface.x>810){
        this.leatherface.x=this.leatherface.x-10;
        this.leatherface.moveSpeed=this.leatherface.moveSpeed*-1;
        this.leatherface.passes++;
    };
    
    if(this.leatherface.x<91){
        this.leatherface.x=this.leatherface.x+10;
        this.leatherface.moveSpeed=this.leatherface.moveSpeed*-1;
        this.leatherface.passes++;

    };
    if(this.leatherface.body.velocity.x>0){this.leatherface.flipX=false};
    if(this.leatherface.body.velocity.x<0){this.leatherface.flipX=true};
   
if(this.leatherface.passes >=5){
this.leatherface.body.velocity.x=-450;
this.leatherface.setCollideWorldBounds(false);
this.leatherface.x=this.leatherface.x-20;
this.leatherface.moveSpeed=-450;
if(this.leatherface.x<-50){
    this.leatherface.x=-10000;
    this.leatherface.active=false;
    this.leatherface.body.velocity.x=0;
    this.chainsawRevSound.stop();
};
};

};

};

6

//and this is the preload
// create a new scene
let preloadScene = new Phaser.Scene(‘Preload’);

//init

// load assets
preloadScene.preload = function(){

this.load.image(‘redApple’, ‘images/redApple.png’);
this.load.image(‘yellowApple’, ‘images/yellowApple.png’);
this.load.image(‘greenApple’, ‘images/greenApple.png’);
this.load.image(‘appleTree’, ‘images/appleTree.png’);
this.load.image(‘luchadorMask’, ‘images/luchadorMask.png’);
this.load.image(‘nightSky’, ‘images/nightSky.jpg’);
this.load.image(‘hills1’, ‘images/hills1.png’);
this.load.image(‘hills2’, ‘images/hills2.png’);
this.load.image(‘leatherface’, ‘images/leatherface.png’);
this.load.audio(‘chainsawStart’, ‘sounds/chainsawStart.mp3’);
this.load.audio(‘chainsawRev’, ‘sounds/chainsawRev.wav’);
this.load.audio(‘scream1’, ‘sounds/scream1.wav’);
this.load.audio(‘squish’, ‘sounds/squish.wav’);
this.load.audio(‘cartBreak’, ‘sounds/cartBreak.wav’);
this.load.image(‘blood1’, ‘images/blood1.png’);
this.load.image(‘blood2’, ‘images/blood2.png’);
this.load.image(‘blood3’, ‘images/blood3.png’);
this.load.image(‘prancingUnicorn’, ‘images/prancingUnicorn.png’);
this.load.image(‘rope’, ‘images/smallRope.png’);
this.load.image(‘noose’, ‘images/noose.png’);
this.load.spritesheet(‘cart’, ‘images/cart.png’, {

 frameWidth: 1830,
frameHeight: 1278,
margin: 0,
spacing: 0,

});

this.load.spritesheet('luchadores', 'images/luchadores.png', {
 
 frameWidth: 1545,
frameHeight: 1500,
margin: 0,
spacing: 0,

});

//load unicorn bodies from JSON
this.load.json('matterShapes', 'data/matterShapes.json')

};

preloadScene.create=function(){
this.scene.start(‘Game’)
};

7

Game works fine. GameOver does not load the unicorn unless I hard code it into its own preload method.

8

GameOver has { active:true } so it will start immediately, but Preload hasn’t finished loading yet.

[-] Preload (loading)
[-] Game (init)
[*] GameOver (running)
9

How do I change that? I can’t put two lines of this.scene.start()

If the solution is in your reply, I’m not sure where to put it.

10

Do I give it a {loader:}?

11

Remove { active:true } from GameOver scene config.

Does your game reach GameOver scene from Game scene, I guess? If so you can just do

// Game
// Player died :(
this.scene.start('GameOver');
12

I’m just playing with scenes running at the same time right now. Eventually I want to add a UI to the bottom of the game that runs as its own scene.

13

Can I delay the activation of a scene?

14

OK, I found a solution. I used this.scene.launch('GameOver) I did not know about the launch command. Thanks again for weighing in on this!