Jump to content

simple tilesprite plays fine the first time but on state restart gives "Failed to execute 'createPattern' on 'CanvasRenderingContext2D'"


kriket
 Share

Recommended Posts

The tilesprite is simple. 

 

in create()

    this.tilesprite = this.add.tileSprite(0, 0, 1024, 480, 'snow');   
in update()
      this.tilesprite.tilePosition.x -= 8;      this.tilesprite.tilePosition.y += 8;
Uncaught TypeError: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'
Link to comment
Share on other sites

 

The tilesprite is simple. 

 

in create()

    this.tilesprite = this.add.tileSprite(0, 0, 1024, 480, 'snow');   
in update()
      this.tilesprite.tilePosition.x -= 8;      this.tilesprite.tilePosition.y += 8;
Uncaught TypeError: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

 

This issue propped up again in another game that I am making and I still have no clues on how to solve it. When I comment out tilesprite code (three lines above), the state reloads fine the second time. 

 

Basically, I have this function to reload current stage.

    stageReload: function() {        this.state.start('current');    },
Link to comment
Share on other sites

Are you sure your sprite is fully loaded before trying to add it to the game?

 

Of course. Its plays the first time, and should play the second time. After all, its the exact same state thats being reloaded. 

 

 

Another example of where I ran into this:

So this was happening when I came back to the same state like above, after gameover.

State1(tilesprite works)---->State1(tilesprite doesnt work)  (reloaded)

 

Now I did this to see if this would still happen - State1(tilesprite works)---->State2(no tilesprite in this state)------>State3(tilesprite doesnt work even though its named differently)

 

State1

 

in create()

    this.tilesprite = this.add.tileSprite(0, 0, 1024, 480, 'snow');   
in update()
      this.tilesprite.tilePosition.x -= 8;

      this.tilesprite.tilePosition.y += 8;

 

 

 

State3

 

in create()

    this.tilesprite2 = this.add.tileSprite(0, 0, 1024, 480, 'snow');   
in update()
      this.tilesprite2.tilePosition.x -= 8;

      this.tilesprite2.tilePosition.y += 8;

 

 

 

 

 

Now, state 3 is a completely separate copy of state1. I still get the same error. 

Link to comment
Share on other sites

Oh sorry I misread the title of your post! I thought the image disappeared when you reloaded the game, thus my question.

 

Sorry if I ask some more stupid questions but : 

  • in a GameState, shouldn't you do this.game.add.tileSprite() instead of this.add.tileSprite()?
  • if State3 is a copy of State1, why not just go back to State1?
  • How do you switch between states (codewise)?
  • Do you kill() or destroy anything in between? Do you load new assets?
  • What's the size of your spriteSheet? Weight?

I do have a game where I switch between states, but the assets do not vanish. I'm trying to understand what you're doing that leads to this weird bug.

Link to comment
Share on other sites

Oh sorry I misread the title of your post! I thought the image disappeared when you reloaded the game, thus my question.

 

Sorry if I ask some more stupid questions but : 

  • in a GameState, shouldn't you do this.game.add.tileSprite() instead of this.add.tileSprite()?
  • if State3 is a copy of State1, why not just go back to State1?
  • How do you switch between states (codewise)?
  • Do you kill() or destroy anything in between? Do you load new assets?
  • What's the size of your spriteSheet? Weight?

I do have a game where I switch between states, but the assets do not vanish. I'm trying to understand what you're doing that leads to this weird bug.

 

 

 

Just uploaded code online for everyone to play with quickly. Srry its not jsbin since i am at work and cant upload images,resources and tweak code cos this will take about 15 mins and I am at work. 

But pls use developer tools in chrome/firefox/etc to see the code. Its quite short.

 

http://tilesprite.site44.com/

Link to comment
Share on other sites

Is it normal that there are lots of missing states? Like Avalanche, Avalanche2 etc. And your GameState objects never inherit form Phaser.GameState, I don't know if this can cause trouble but I assume it might...

 

 

those states were just different games. They dont affect anything in the current state at all. I have even removed them. Try again. 

 

And yes, they do inherit from Phaser.Game else it wouldnt even work the first time. Thanks

Link to comment
Share on other sites

I can't get the falling state to start over again. How do I do that?

 

thats the issue. Its doesnt restart cos it gives an error I posted in first post, which is caused by tilesprite. I comment tilesprite out and it reloads fine. For now, just refresh browser to start again. But thats not what we want. We want to start the stage automatically, without errors.  

 

Really need to solve this as my whole game is useless if it doesnt start again automatically and this error alone is the culprit as commenting out tilesprite, sorts the issue out. 

Link to comment
Share on other sites

Can you point out the code where your GameStates actually inherit from Phaser.GameState? Despite your saying, I can't find them.

 

And why do you write : SideScroller.Boot = function(game){};

You do nothing with the game, not even saving it as this.game = game; 

 

 

You dont need to do this.game = game. Phaser does this already for you so u instead of typing this.game.load.sprite , u can just do this.load.sprite

 

 

I dont need to inherit from Phaser.GameState. Phaser.game does all I need to. 

Link to comment
Share on other sites

FWIW, state objects don't need to derive from Phaser.State: https://github.com/photonstorm/phaser/blob/db641ca82e608470bd7902de3447d048d9715ab5/src/core/StateManager.js#L203

 

Something is wiping out the base texture's source property when you reload. I set a breakpoint after you add the tilesprite. The first time through "this.tilesprite.texture.baseTexture.source" points to an IMG element. The second time through it points to null. I don't know what that's a symptom of, or even if it's something you're doing at all. Maybe it's a Phaser bug worth filing with a codepen that proves it breaks?

Link to comment
Share on other sites

Something is wiping out the base texture's source property when you reload. I set a breakpoint after you add the tilesprite. The first time through "this.tilesprite.texture.baseTexture.source" points to an IMG element. The second time through it points to null. I don't know what that's a symptom of, or even if it's something you're doing at all. Maybe it's a Phaser bug worth filing with a codepen that proves it breaks?

 

 

 

http://codepen.io/sharmad/pen/pjNJra?editors=100

 

as requested. Pls help me debug this as many game rely on restarting the state after a player loses and this error is just letting me go anywhere.

 

Gameplay: I have just left basic gameplay in there to keep code relevant to this issue. Game end when player falls down. 

Link to comment
Share on other sites

So, hey: if you upgrade to Phaser 2.4.3 it works like a charm. Is that an option?

 

I had to go back to 2.3 since animation/effects spritesheets were jittery in 2.4.3 as many people included me concluded here. http://www.html5gamedevs.com/topic/17212-upgrading-from-phaser-23-to-243-makes-my-animation-very-jittery-it-runs-perfectly-on-23/

 

 

So unfortunately until that is fixed I still have a problem one way or another.

 

BUT at least u gave me an option there. So thanks a lot for that mate! I will try doing what Tom suggested in the other thread today and see if that fixes at least the jitter issue and allows me to move to 2.4

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...