Strange rendering/performance problems

[Milton]

Hi everyone,

 

To learn javascript I decided to port a Java game I wrote some time ago. I checked out Easel and Turbulenz, but Phaser seems to be the way to go.

 

I do run into some strange problems though...

 

My game seems to work fine on Linux using Chrome/WEBGL.

Ubuntu FireFox/WEBGL only does 25 fps (even without any game, with empty preload, create, and update...)

Ubuntu FireFox/CANVAS easily does 60 fps, but then RenderTextures don't work: 

 There should be a level, see pictures below (Splashscreen needs a kill also )

CANVAS mode never works. My RenderTextures are not displayed. Maybe this has something to do with a Canvas drawImage INDEX SIZE ERROR (but I don't get the error in the console).

 

On Windows other strange things happen. With WEBGL I get weird artifacts. An extra line from the Spritesheet is displayed?

 

With CANVAS the RenderTextures don't work, but the artifacts are gone...

And with IE11 (apart from the brightness) parts of my RenderTexture are missing. It seems like renderXY didn't work for every tile.

 On the left IE with a lot of missing textures.

 

 

Phaser.AUTO version: http://java-expert.nl/games/loderunner/index.html

Phaser.CANVAS version: http://java-expert.nl/games/loderunner/canvas.html

 

 

Some help would be much appreciated :-)

[shawnbless]

Windows 7, Chrome 31.  Phaser.AUTO version works wonderfully, no artifacts.

Phaser.CANVAS - No levels shown, just gold and men. (strange CANVAS always works for me)

 

Super Nice Game BTW!

Shawn

[rich]

RenderTextures work on Canvas again in the dev branch, so if you're using them a lot I would suggest checking out that version. We should push this live before the end of the year.

 

The artefacts are avoided by adding padding to the texture atlas frames (this is why Texture Packer defaults to 2px frame padding), you see it a lot with tightly aligned images, although it's GPU/device specific.

 

There's a Pixi.js bug involving IE11/WebGL and the way alpha is calculated. I don't know when they'll resolve it. It only appears to happen in certain situations, for now they just advise 'use canvas mode', but you can find the github thread about it and see more details exactly why it happens. They're on a bit of a bug fixing mission at the moment so I'm hopeful it'll include this one.

[Milton]

RenderTextures work on Canvas again in the dev branch, so if you're using them a lot I would suggest checking out that version. We should push this live before the end of the year.

 

The Pixi demo works great (beautiful ). But the other render texture demos (and my game) still don't work?

[Milton]

The Pixi demo works great (beautiful ). But the other render texture demos (and my game) still don't work?

 

WEBGL and CANVAS seem to behave different. With CANVAS you can't kill or destroy a sprite (or set invisible), and still hope it will be shown in the texture. With WEBGL this is no problem.

[rich]

As I said on github it shouldn't work in WebGL either if a Sprite is destroyed, I suspect it's just not checked in the Pixi code, so for as long as the base texture still exists and hasn't been destroyed yet, it will carry on rendering to the texture.

 

The other demos don't work because the Sprite visible state is set to false. Am in two minds about how to address that - part of me thinks they shouldn't get rendered at all (in which case I need to modify the examples to fix this), because that's the whole point of being visible, and if you were to pass a complex display list to renderTexture then it absolutely should only draw the parts that you've defined as being visible. However as you can tell from the examples there are cases when this isn't desirable too, and really all you want to do is blanket render the texture of an object, not the whole display structure of it.

 

Could probably be solved by adding a parameter to the render method ('includeVisible' or similar).