Problem with CANVAS and PhoneGap, Ludei or XDK

[DavidPeralvarez]

Hi everyone!

 

I've created a simple game with Phaser and, like other people, when I execute it in browsers it works very well, but when I wrap it with PhoneGap, Ludei or XDK (to be executed as an Android App) some of the states of the game are sometimes distorted.

 

Here you can see an example of what is happening:

• Valid example: https://www.dropbox.com/s/0zvaskaoyo80zih/2014-03-21%2013.05.51.png
• Wrong example: https://www.dropbox.com/sh/ldhuttchjq4evei/PPT69g8jRc/2014-03-25%2022.48.10.png

I have developed the game twice, one with Phaser v2.0.1 and Phaser v1.1.5 and I obtained the same results in both cases. In addition, I have into account memory issues, adding to each state a "shutdown" method to destroy properly all the sprite I don't need any more. Also I take care of destroying timers when I don't need them.

 

And finally, I have to used CANVAS rendering because with my little experience has been impossible to make it work using WEBGL with PhoneGap, Ludei or XDK. I've try also CrossWalk but it's quite difficult for me.

 

Has anyone else had a similar problem? 

 

BTW the game is already available on Google Play and it was wraped with PhoneGap, since it has lot of cordova plugins, and the obtained performance was quite similar in comparison with Ludei or XDK: https://play.google.com/store/apps/details?id=com.couplace.santjordi&hl=en 

 

Thank you very much in advance.

[rich]

The distortion you are seeing - do you do any tweens on the game at all? I.e. does the menu rotate into place when it first appears?

[Manifest]

I too can confirm that since Phaser 2.0, very occasionally my dialogues and sprites come up rotated ~45 degrees like in your picture. I haven't been able to replicate it reliably though, so haven't identified the source of the problem. I have no tweens on the affected sprites.

[rich]

Manifest - when run in browser, or when wrapped?

[Manifest]

Wrapped in PhoneGap. It has never been reproduced in the browser.

[rich]

Damnit. I hate it when it's in an environment I've no control over.

 

I'm not entirely sure this is a code related issue, i.e. I don't think there is a bit of JavaScript causing this. It looks like, to me anyway, a texture/GPU issue. It's like the sort of thing I'd see in old 3D games when a texture wasn't fully created / loaded or applied and it'd distort like that as the dimensions were whacked. What is actually causing that in this case I've no idea though. Has anyone tried asking PhoneGap support?

[Manifest]

Hmm, for my it only occurred on repeated play-throughs of a level (specifically, retrying a level i.e. the assets were not wiped as they are on exiting and entering a new level) so I don't think it would be a texture-not-fully-loaded issue, as it occurred on textures that had been successfully displayed many times before. I might try doing some builds forcing either WebGL or Canvas and see if I can narrow it down a bit.

[rich]

Sorry no I didn't mean your game didn't load a texture, I meant it's the kind of corruption I used to see when a GPU texture wasn't loaded properly. My guess is that PhoneGap will be creating a texture from the canvas data, then pushing it up to the GPU for display - I reckon it's this part that has glitched for some reason.

 

How long does the display stay like that once it enters that state?

[Hsaka]

I've witnessed this happen several times, across different games (http://www.html5gamedevs.com/topic/1692-proto-phaser/?p=11582). The occurrences were in a mobile browser though (Galaxy S3). At one point, I thought it was a tween-related issue but then it happened on sprites that had no tweens applied to them. In trying to narrow it down, I realized that whenever this issue happened, it was usually on sprites that were in a group. So for a few games I didn't use groups at all and I haven't seen it happen since. Might just be a coincidence though since it happened fairly randomly anyway.

[rich]

I wonder if it's the exact same issue or not (i.e. was it always rotated at 45 degrees like that?)

 

If so then maybe it's as simple as the canvas setTransform that Pixi uses at the start of the render process not getting applied properly?

[Manifest]

How long does the display stay like that once it enters that state?

 

Well it's difficult to say, these sprites are appearing and disappearing every 5 seconds or so. It seems that once it starts happening, it will happen again on other sprites more regularly. The affected sprites are in groups, and all of their group siblings are affected the same way.

[Hsaka]

 

 

 wonder if it's the exact same issue or not (i.e. was it always rotated at 45 degrees like that?)

If I recall correctly, the angle was always the same.

[rich]

When I asked how long it lasts for what I was getting at is this:

 

Is it possible to add in some kind of check, or maybe a button in the middle of the screen, that when pressed dumps out the values of the Group (or whatever container you think this happens most often on). Basically I'd like to see if it's rotation value is actually changed to 45 degrees or not. If not, then whatever causes this is outside of Phasers control in my mind.

 

Actually the worldTransform array would be the best thing to inspect. Or alternatively the transform settings on the canvas object itself.

[DavidPeralvarez]

Hi again,

 

I've tried deleting all tweens of the game and it still happens the same distorsion.

 

In addition I can confirm that it always fails (randomly) in the same way, i.e. rotated ~ +45 degrees or -45 degrees.

 

It used to start with a sprite group (that has some arcade physic and it is being recycled properly) or when the Game Over state is fired, which only has sprite images and text labels.

 

I think it can due to the FPS of mobile devices, but it is strange since I've tested it in some quite new Android devices (with Android Kit Kat) and in all of them happens. But also, I read that Kit Kat works with low FPS than older versions, I don't know if it is true.

 

Finally, @rich what do you mean with:

 

If so then maybe it's as simple as the canvas setTransform that Pixi uses at the start of the render process not getting applied properly?

 

Is there any test I can perform to see if this is being correctly applied?

 

Thanks a lot again to all.

[DavidPeralvarez]

Now I've made this test:

 

restart_game is the method that is called in the Game Over state when the button "Play Again" is clicked. I've tried to show the angle of the Game Over sprite when this is happening and I've obtained in all the cases (distorsioned cases included) a  value of 0.

...restart_game: function() {    alert(this.gameOver.angle);    game.state.start('Load',true,true);},...

See result image: https://www.dropbox.com/sc/einiwukmau2urti/AvSIHLDImQ

[rich]

I expect it's the parent being rotated, not the gameOver button itself. If you don't mind could you try a few things, like:

 

gameOver.parent.rotation

 

this.game.stage.worldTransform.a, this.game.stage.worldTransform.b, this.game.stage.worldTransform.c, this.game.stage.worldTransform.d

 

(above assumes Phaser 2.x in use)

[rich]

In a non-rotated canvas the worldTransform values for Stage (or any object actually) should be: a: 1, b: 0, c: 0, d: 1

[DavidPeralvarez]

Thanks a lot for your help. I've made the test you've said and It seems that all values are like in a non-rotated canvas, very strange  .

 

Here you can see the result:

https://www.dropbox.com/sc/bgt5imcqmi6sqg4/YcHslQDym2

 

and yes, I'm using Phaser 2.0.1

[rich]

Ok so we've confirmed that the element itself has no rotation applied and the Stage has none either. If you could please do a few last tests I think we can clear this one up:

 

1) Do the worldTransform alert for game.world - it should be the same as I posted above.

 

2) If all of those items (gameOver button, etc) are in a Group, then do the same for the Group too.

 

Basically with those 2 tests done you've eliminated the entire display list from being the culprit, which leads me back to my conclusion above: that it's a PhoneGap GPU acceleration screw-up.

[DavidPeralvarez]

I've done the first one and I've obtained the same as above. I haven't done the second because the sprites are not in a group. So, I think there is no solution.

 

Thanks a lot for your help.

[Hsaka]

Man, that sucks. Looks like you're able to repeat it fairly often too. It only happened a few times for me. Just to clarify, this issue happened for you in CocoonJS as well? I've never seen it happen there so far.

[rich]

This isn't the end of the road, it just means we have some firm evidence to take to the PhoneGap support team, which is what I suggest the next move is.

[DavidPeralvarez]

Hi I've tried to compile the game with cloud Ludei in two ways (both of them with the option Application Scale Method: scale to fit):

 

- As a CANVAS / WEBGL option (in my code is explicitly CANVAS). In this case some sprites and text labels are wrong loaded and they blink a lot or even they do not appear on the screen.

Example: https://www.dropbox.com/s/rdjhk0k29k1i5gb/2014-03-27%2016.08.07.png 

 

- As a Web Viewer seems that the display game size has decreased a lot. It seems that it is ignoring the instructions: 

 

        game.scale.startFullScreen();

        game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;

 

on the Load stage. And it still appear the previous error of distorted images.

Example: https://www.dropbox.com/s/mcgz9d2unqu452m/2014-03-27%2016.14.06.png 

[lloydevans]

Hi guys! I am a developer who works with html5 and Pixi. (pixi be awesome! btw)

 

The bug described in this post is something which I have encountered and been trying to fix for a few months with no success!

 

From the screenshots posted in this thread I am 100% certain that this is the exact same bug I am experiencing, both in it's visual effect of rotating display objects and/or there children, and in it's intermittency and hard to replicate nature.

 

So here is some hopefully useful information about what I have found to cause it, and it's symptoms:

 

First of all, the bug is only ever happening (for me) on Samsung devices in the native browser (not Chrome). This is tested across many samsung models, including samsung s2 + s3 + s4 and a few samsung tab 10" and 7" models.

 

Secondly the bug is NOT happening when using pixi on it's own, but only when I use a tween engine with pixi. The bug introduced itself when I started using TweenLite. I assumed it was something to do with TweenLite, so I switched to CreateJS' tween engine - exact same problem! Interesting to note that the syntax of these two tween engines is very similar (maybe could be something to do with how tweened properties are referenced?). I am currently in the process of trying a 3rd tween engine - this one: https://github.com/sole/tween.js/

 

The bug may cause a display object container to rotate by a seemingly random amount, or it may make all the children of a display object container all rotate by an amount, or both! Exactly what is seen in this image link:

posted: https://www.dropbox.com/sh/ldhuttchjq4evei/PPT69g8jRc/2014-03-25%2022.48.10.png

 

The bug happens when display objects are created, never randomly on pre-existing sprites.

 

To Clarify I am using pixi.js and a tweening engine ONLY. no PhoneGap, no Phaser, no Cacoon etc. just pixi and a tweening engine. 

 

If you guys have any more questions on my experiences with the bug please do ask, and also if you have anything you want me test on some samsung devices let me know! - my "fix" for this problem has been to basically disable tween for mobile devices running native android browser  I really wish I could fix it properly, and this forum is the first I have ever found of other people encountering it.

 

All the best

 

Lloyd

[rich]

This is definitely a Samsung specific bug (one of many actually). I would put money on it being something like a floating point math error that happens when the GPU textures are created.