Can't kill sprites that are added outside create(); ?

[cortex]

If I add sprites in functions that are after create(), looks like I can't kill() them.

 

Rich please tell what you know!

[BigRob154]

Are there some error messages or exceptions?

 

Sorry, I'm not Rich 

Rob

[cortex]

Are there some error messages or exceptions?

 

Sorry, I'm not Rich 

Rob

No, absolutely no errors or anything.

 

This is weird...

[Heppell08]

I have created sprites outside of the create and been able to invoke a kill(); on them inside of other functions when necessary.

Can you post any code on what you're trying to achieve?

[cortex]

useAction: function() {            if (game.input.keyboard.justPressed(Phaser.Keyboard.SPACEBAR))        {          sprite.kill();        }

It was like this and didn't kill anything. This function is after create(), of course.

[Heppell08]

useAction: function(sprite) {if (game.input.keyboard.justPressed(Phaser.Keyboard.SPACEBAR)){sprite.kill();}

Have you tried the above method?

[cortex]

Also I tried making a CSS(?) style to a text.

 

Can I made it into this code?

Backgroundcolor... something?

var style = { font: "32px Arial", fill: "#ff0044", align: "center" };

...And how?

 

Heppell, that methold happens on overlap and I now forgot the part of actually adding the sprite, like:

useAction: function() {this.sprite = game.add.sprite(40, 50, 'sprite');if (game.input.keyboard.justPressed(Phaser.Keyboard.SPACEBAR)){sprite.kill();}}

...But the sprite just won't die. Can I even do this? It gives no errors.

That function(sprite) was an accident, no parameters.

 

And Rich please come to help you too...

[Heppell08]

the reason sprite is put in the parameters is so its known and is to kill. there was no accident. You probably need top put more copde here for people to get what you mean and what youre actually doing. To kill a sprite not made in create but known to phaser should still utilise kill();

[cortex]

the reason sprite is put in the parameters is so its known and is to kill. there was no accident. You probably need top put more copde here for people to get what you mean and what youre actually doing. To kill a sprite not made in create but known to phaser should still utilise kill();

Oh sorry, I was busy and thought that I wrote the parameter accidentally!

 

Good suggestion! I'll try it tommorrow.

If you have any idea for the background, please tell.

 

Thanks anyway, Heppell!

[cortex]

Another problem:

The tilemap doesn't work with screens if it has bounds.

For example: Everything works fine with 800x480, but

if the map is bigger, I have to set bounds to explore everything.

 

But if the map has bounds and I go to the next screen,

no sprites work anymore; they look like they were just

falling rapidly off the screen.

 

How to use bounds? Is this because of the physics?

[Heppell08]

Do you have a dropbox account to make your app public for a playtest? Can you post the code that has the issues? Can you make a gif of the error as it happens ingame? There seems to be many issues you need resolved and having a dropbox can make it so much easier as the code and file structure can be seen and better help on.

The bounds is the worldbounds so whatever the world bounds are that's is your game world.

Do you have the camera following the player? Have you set gravity in your game? What kind of game are you making?

[Heppell08]

If for example you set the world bounds to 0,0,12000,12000 that would be more than sufficient for example a topdown RPG.

Mainly you would set the bounds after creating a map that has everything you need and you know its size and other stuff required. The falling off of a sprite is either the fact you have no tiles and the sprite falls forever because there is no tile collision to stop the falling because of the gravity.

[cortex]

It's an orthographic game and uses .json tilemaps. This means that the game has no gravity, but the sprites look like they

were falling off the screen when the the next screen changes (if the bounds are put).

Very weird. I'll check if I can upload some of the code, like the 2 first screens and so...

[cortex]

The first screen is 800, 480 and the second is 800, 600.

 

How should I set the bounds? And what to do with the camera?

 

Screen 1:

//the first screen of the gamevar player;var cursors;var map;var layerColl;var screen1_state = {        create: function() {        currentstate = "screen1_state";        //  Enable the Arcade Physics system        this.game.physics.startSystem(Phaser.Physics.ARCADE);                    //    game.world.setBounds(0, 0, 800, 480);        map = game.add.tilemap('map2');        map.addTilesetImage('free_tileset_4', 'tileset2');        layerColl = map.createLayer(1);//collision layer - draw it first if you dont want to see it        map.setCollision(1, true, layerColl);        var layer0 = map.createLayer(0);//background layer        var layer1 = map.createLayer(1);//lower body        var layer2 = map.createLayer(2);//upper body                 var style = {font: "20px verdana", fill: "#ffffff"};        this.scoreText = game.add.text(700, 10, "Score: " + score, style);        this.text = this.game.add.text(20, 430, "Move with arrows", style);        this.door = this.game.add.sprite(750, 450, 'door');        if (previousstate === "screen2_state") {            this.player = game.add.sprite(40, 50, 'player');        }        else {            this.player = game.add.sprite(50, 50, 'player');        }                //  four animations, walking left, right, up and down        this.player.animations.add('right', [0, 1, 2], 20, true);        this.player.animations.add('left', [3, 4, 5], 20, true);        this.player.animations.add('up', [9, 10, 11], 20, true);        this.player.animations.add('down', [6, 7, 8], 20, true);        game.physics.arcade.enable(this.door);        game.physics.arcade.enable(this.player);        this.player.body.collideWorldBounds = true;        this.cursors = game.input.keyboard.createCursorKeys();        game.camera.follow(this.player);    },    update: function() {       game.physics.arcade.collide(this.player, layerColl);        this.player.body.velocity.x = 0;        this.player.body.velocity.y = 0;        //changing state when the player overlaps door        game.physics.arcade.overlap(this.player, this.door, this.changeState, null, this);                move(this.player, this.cursors);    },    changeState: function() {        game.state.start('screen2');        previousstate = currentstate;    }};

Screen 2:

//the second screen of the gamevar screen2_state = {    //this-keyword means that the property is private. Works only in this object.    preload: function() {        game.stage.backgroundColor = '#ffff66';    },    create: function() {        //Global variable currentstate        currentstate = "screen2_state";        //  We're going to be using physics, so enable the Arcade Physics system        game.physics.startSystem(Phaser.Physics.ARCADE);        var style = {font: "20px verdana", fill: "#000000"};        this.scoreText = game.add.text(700, 10, "Score: " + score, style);        this.text = game.add.text(20, 430, "Click to restart", style);        this.door2 = game.add.sprite(10, 10, 'door2');        this.player = game.add.sprite(10, 40, 'player');        //  four animations, walking left, right, up and down        this.player.animations.add('right', [0, 1, 2], 20, true);        this.player.animations.add('left', [3, 4, 5], 20, true);        this.player.animations.add('up', [9, 10, 11], 20, true);        this.player.animations.add('down', [6, 7, 8], 20, true);        //  Enable physics on the game objects        game.physics.arcade.enable(this.door2);        game.physics.arcade.enable(this.player);        this.player.body.collideWorldBounds = true;        this.cursors = game.input.keyboard.createCursorKeys();    },    update: function() {        //changing state when player overlaps hole        game.physics.arcade.overlap(this.player, this.door2, this.changeState, null, this);        //function from functions.js        move(this.player, this.cursors);           },        changeState: function() {        game.state.start('screen1');        previousstate = currentstate;    }    };

[cortex]

With this code (in create()),

 

I can explore the whole map and the sprites appear, BUT the camera won't follow!

        game.world.setBounds(0, 0, map.width, map.height);           //    this.player.body.collideWorldBounds = false;                game.camera.follow(this.player);

I think the solution is not far away!

[Heppell08]

Just set the bounds and the map X/Y the same and do not let the player be allowed to leave the bounds.

[Heppell08]

Also collide world bounds to true because if it is false, the player can leave the world and literally be gone forever or until a reset/refresh happens.

[cortex]

I don't understand!

game.world.setBounds(0, 0, 800, 480);this.player.body.collideWorldBounds = true;game.camera.follow(this.player);

Works like it should, but when I go back to the previous screen, no sprites work anymore.

 

This is just so retarded.

 

Rich, please come and explain.

[Heppell08]

what you need to do is this:

 

When you want to switch states do it within a function so that it sets the camera, bounds and collision.

Then when you transition back to the previous state, do it again but with a function to set the bounds, collision and camera back up again.

Its a simple transition that you need to write a small function for.

[cortex]

what you need to do is this:

 

When you want to switch states do it within a function so that it sets the camera, bounds and collision.

Then when you transition back to the previous state, do it again but with a function to set the bounds, collision and camera back up again.

Its a simple transition that you need to write a small function for.

How come that won't work with or without a function?

[Heppell08]

TBH though, you dont really need to change the state when you want to change the map. I have a game that has many levels yet only one JS file to transition the maps.

kill the previous layer and load the next layer in the function for the door. 

My code for this is a bit long but i'll shorten it and show you.

 

var tileFunc5 = {    mapChange: function()    {        layer.destroy();                this.createMap();          this.setPlayer();        deathText.destroy();        gravTextRevs.destroy();        gravTextNorm.destroy();        player.bringToTop();        gamePaused.bringToTop();         deathText = this.add.text(10,10,'Deaths: 0',{        font: "22px Courier",         fill: "#19cb65",         stroke: "#119f4e",         strokeThickness: 2        });        deathText.fixedToCamera = true;        deathText.color = 0xff0091;            gravTextRevs = this.add.text(10,30,'Deaths: 0',{        font: "22px Courier",         fill: "#19cb65",         stroke: "#119f4e",         strokeThickness: 2        });        gravTextRevs.fixedToCamera = true;        gravTextRevs.color = 0xff0091;         gravTextNorm = this.add.text(10,50,'Deaths: 0',{        font: "22px Courier",         fill: "#19cb65",         stroke: "#119f4e",         strokeThickness: 2        });        gravTextNorm.fixedToCamera = true;        gravTextNorm.color = 0xff0091;     },}

So that is the function that will kill the map (its a tile function) and it will also invoke the creation of the next map based on some variables and what their value is at the time of changing. I also kill a few choice parts of the game to either reset in the next map or for layering purposes. Next i have

 

createMap: function()            {            var gameSave = JSON.parse(localStorage.getItem('user'));            if(gameSave)            {                console.log('LOADED!!');                mapnumber = gameSave.mapnumber - 1.5;                console.log(JSON.parse(localStorage.getItem('user')));            }            else                     if(mapnumber === 0)            {                mapnumber = 1.5;            }            mapnumber -= 0.5;            if(mapnumber === 1)            {                map = this.add.tilemap('level01');                map.addTilesetImage('Space', 'tiles');                 layer = map.createLayer('Space');                layer.resizeWorld();                this.setGravs();                currentLevelX = 60;                currentLevelY = 480;                mapnumber = 2.5;            }            if(mapnumber === 2)            {                map = this.add.tilemap('level02');                map.addTilesetImage('Space02', 'tiles');                layer = map.createLayer('Space02');                layer.resizeWorld();                this.setGravs();                currentLevelX = 61;                currentLevelY = 391;                mapnumber = 3.5;            }            if(mapnumber === 3)            {                map = this.add.tilemap('level03');                map.addTilesetImage('Space03', 'tiles');                layer = map.createLayer('Space03');                layer.resizeWorld();                this.setGravs();                currentLevelX = 130;                currentLevelY = 710;                mapnumber = 4.5;            }            if(mapnumber === 4)            {                map = this.add.tilemap('level04');                map.addTilesetImage('Space04', 'tiles');                layer = map.createLayer('Space04');                layer.resizeWorld();                this.setGravs();                currentLevelX = 150;                currentLevelY = 450                mapnumber = 5.5;            }            if(mapnumber === 5 )            {                map = this.add.tilemap('level05');                map.addTilesetImage('Space05', 'tiles');                layer = map.createLayer('Space05');                layer.resizeWorld();                this.setGravs();                mapnumber = 6.5;                currentLevelX = 125;                currentLevelY = 3603;            }            if(mapnumber === 20)            {                this.game.state.start('Cutscene1');                // Removed until a fix is done.            }            if(mapnumber === 6)            {                map = this.add.tilemap('level06');                map.addTilesetImage('Space06', 'tiles');                layer = map.createLayer('Space06');                layer.resizeWorld();                this.setGravs();                mapnumber = 7.5;                currentLevelX = 120;                currentLevelY = 660;            }            if(mapnumber === 7)            {                map = this.add.tilemap('level07');                map.addTilesetImage('Space07', 'tiles');                layer = map.createLayer('Space07');                layer.resizeWorld();                this.setGravs();                mapnumber = 8.5;                currentLevelX = 120;                currentLevelY = 660;            }             if(mapnumber === 8)            {                map = this.add.tilemap('level08');                map.addTilesetImage('Space08', 'tiles');                layer = map.createLayer('Space08');                layer.resizeWorld();                this.setGravs();                mapnumber = 8.5;                currentLevelX = 120;                currentLevelY = 660;            }            if(mapnumber === 99)            {                this.game.state.start('Endscene');            }            map.setCollisionBetween(211, 217); // Main Floor            map.setCollisionBetween(246, 252); // stops glitching            map.setCollisionBetween(71,72);            map.setCollisionBetween(106,107); // blue lit box            map.setCollisionBetween(141,142);            map.setCollisionBetween(176, 177); // unlit box            map.setCollision(143); // small box            map.setCollisionBetween(178, 179); // 2 small boxes                     map.setCollisionBetween(146, 148); // black and yellow area            map.setCollisionBetween(334, 336); // black and yellow area            map.setCollisionBetween(369, 372); // black and yellow area            map.setCollisionBetween(181, 182); // black and yellow area            map.setCollision(301);            map.setCollision(299);     //   map.setTileIndexCallback([146,147], tileFunc1.emitBlock, this);            map.setTileIndexCallback([168,2], tileFunc4.playerReset, this);            map.setTileIndexCallback(69, tileFunc5.mapChange, this);             this.setPlayer();            },

Now in there i have a variable that is always changing after each map. The mapnumber is updated after each level is complete. now for you, you can set the map number in relation to doors/caves etc etc and load the map specific to the regarding number. The set player function is this:

 

setPlayer: function()        {            player = this.add.sprite(currentLevelX, currentLevelY, 'player01');            player.animations.add('walk',[0,1,2,3,4,5], 4, true);            player.anchor.setTo(0.5, 0.5);            player.alpha = 0;            player.scale.x = 1.5;            player.scale.y = 1.5;            player.collideWorldBounds = true;            console.log('Player set!');            player.body.gravity.y = 800;              this.camera.follow(player, Phaser.Camera.FOLLOW_LOCKON);            gravKey = this.input.keyboard.addKey(Phaser.Keyboard.X);            RgravKey = this.input.keyboard.addKey(Phaser.Keyboard.C);        },

I reset the player full and kill the player fully so that i have a clean and easy transition as well as having a new X/Y co-ord to use and can safely reload all animations and other stuff. 

Some bits could be removed but this works for me perfectly and i wouldnt want to change it.

Look at the code and see if it makes any sense to you for map changing but without using extra states to do it.

[Heppell08]

How come that won't work with or without a function?

 

The function is to set up all the extra stuff you require example: worldbounds, collision and camera following stuff. Look at my other response for a more indepth look at how i do what you want to do.

[cortex]

I'll check if I should take your architecture.

 

Thanks, Heppell!

[cortex]

It appears that the sprite (player) is where it should be (I know this because it overlaps another thing there)

but it (with the other sprites) is not drawn.

 

What does this mean?

[Heppell08]

it really depends on your code and lay out. my way of doing it is very specific in order because if i place my stack order of them functions differently it will not work.

There's a fine line between it working and not working so you'd really have to post what you're doing or upload it to a dropbox account and the game and code can be seen for better assistance.