State preloading assets issue

[algut20]

Hello guys,

 

I have a bit of an issue. I am currently testing a simple game. It has the index.html, boot.js, and stage.js. 

 

The preload function (to load all the assets) is only found in boot.js. When the player fails, the game is suppose to restart and return to stage.js; however, all i get is a black screen (I can also hear the music restart, so at least i know something is working).

 

This issue seems to be fixed if I add the preload function to stage.js to reload all the assets. It also seems to work if i only change phaser.js to phaser.min.js. So it seems the issue is that when the state restarts, its no reading the loaded assets for whatever reason. However, I don't necessarily understand why these fixes work or find them desirable. 

 

In particular, I don't want to add the preload function to stage.js because it slows down the game considerably in mobile applications. The weird thing is that I have a very similar structure in another simple game and that one seems to be working correctly. I don't really know what I am doing different. If you guys can offer any insight, it would be really helpful!

[rich]

What error do you get in the console?

 

And how are you changing state? Make sure you've not set it to clear the cache on state swap, or there will be no assets left to reuse.

[algut20]

Hey Rich,
 
As far as the state change, I'm  using the default values.I'm not touching the cache boolean setting.  I hadn't even thought about using the developer tools on chrome. Good call. This is the error I received:
 
Uncaught TypeError: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

 

So I changed Phaser.CANVAS to PHASER.AUTO and it worked! But I'm still confused as to why it worked since the other game that has a similar structure is using Phaser.CANVAS and is changing states correctly.

[rich]

Use Phaser 2.4 - the above sounds like the error TileSprites have destroying themselves in 2.3.

[js_unit]

Hi rich!

Thanks for your effort in supporting us all, appreciated more than you know.

 

I ran into the same issue. My background is loading and working, and my player vehicle is showing... if i move close to where my tiled.json dictates a PNG should be, I also get 

 

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

 

The paths are correct, the image is fine, and theres nothing else on that tiledmap than the image (the background is seperate from the 'map').

 

I tried 2.4.0 in the repo, same problem.

I downgraded 4 or 5 versions, and eventually it would not crash, but just not render png. 

 

Is there another way around this bug (assuming my problem is related to it!)

 

Cheerios

marlon

[rich]

I need to see both the tiled json data and the code you're using to be able to help.

[js_unit]

Fair enough, I have minimised it to the least possible amount of code to reproduce the problem.

Youll notice it's a vast mapsize... but it works fine. My player sprite can move around in it, and only when the planet png is to be rendered, does the crash occur.

 

Thanks for the help.

I am excluding the millions of 0's though from the json.

 

{ "height":1250,

 "layers":[

        {

         "data":[0, 0, 0, <thousands more....>, 0],

         "height":1250,

         "name":"Tile Layer 1",

         "opacity":1,

         "type":"tilelayer",

         "visible":true,

         "width":1250,

         "x":0,

         "y":0

        }],

 "nextobjectid":1,

 "orientation":"orthogonal",

 "properties":

    {

 

    },

 "renderorder":"right-down",

 "tileheight":64,

 "tilesets":[

        {

         "firstgid":1,

         "image":"img\/marlon_planet_mutin.png",

         "imageheight":400,

         "imagewidth":400,

         "margin":0,

         "name":"planet_mutin",

         "properties":

            {

 

            },

         "spacing":0,

         "tileheight":64,

         "tilewidth":64

        }],

 "tilewidth":64,

 "version":1,

 "width":1250

}

 

 

 

and the code

// in preload...game.load.tilemap('mapVast', 'assets/80kspace.json', null, Phaser.Tilemap.TILED_JSON);// in create...map = game.add.tilemap('mapVast');map.addTilesetImage('planet_mutin');layer = map.createLayer('Tile Layer 1');layer.resizeWorld();// from here on there is nothing else specific to the tiled json I am doing.// very simple example that contains nothing but that planet.// the background is loaded seperately from the tiles as a background sprite.

Hope this helps.

I do not have access to the branch I am working on at home right now.

In preload I also load the planet mutin PNG successfully (i can display it if i render it normally...)

[algut20]

Hey guys,

 

I experienced the same problem as Js_unit. I tried Phaser 2.4 and both the games I'm working on crashed. This was the error:

 

TypeError: this.scale.setScreenSize is not a function         phaser2.4.js: 58270

 

So I commented this part of the code out, and it worked but. But of course, now part of the game is not showing correctly. I will play around with this some more.

[rich]

@js_unit - I'm a bit confused, all I can see in the json is a single tilemap image - how can the player move around fine and only crash when they get 'close to it' ? Either the tilemap is rendering or it isn't? Is there something else going on, a TileSprite perhaps? that might be throwing the actual error and misdirecting the real cause of it?

 

@algut20 - that method was deprecated several versions ago and actually removed in 2.4 (use updateLayout instead, but please see the docs for the correct way to enable screen scaling now, or grab the free book on it)

[algut20]

Yes, I will do that. It's just confusing because some of the tutorials on the web were using that function. I will be more careful next time. Thanks!

[js_unit]

@js_unit - I'm a bit confused, all I can see in the json is a single tilemap image - how can the player move around fine and only crash when they get 'close to it' ? Either the tilemap is rendering or it isn't? Is there something else going on, a TileSprite perhaps? that might be throwing the actual error and misdirecting the real cause of it?

 

That is a good point, and I can see how it makes no sense. I can't really share a large portion of this code at this point , sadly.

I have a background sprite loaded, and a player sprite loaded. No tiled json/tilemap. It works. I can see the background, and the player sprite, and move around.

 

Then I add the neccesary code to load the tilemap (the json, the planet image, that's all it contains)...

It still works, and the player can move around, but only UNTIL you move to where that tilemap's planet image is. Instead of it then coming into view/rendering, the above error happens with a crash.

 

The image element it refers to can only be that planet png on the tilemap.

 

If this is still unclear, I will try to create a barebones(reproducable) version of my code, and then share that with you.

 

Sorry about the confusion.

[rich]

It's not the code I need really, it's just a "crashing" tile map.

[js_unit]

Hi Rich

 

It seems that I was an idiot.

 

This line fixed it...

 

map.addTilesetImage('planet_mutin', 'planet_mutin');