Common Phaser + CocoonJS issues

[korgoth]

Hello,

 

I hope someone can help me with this cocoonjs issue.

 

Here is my setup:

var game = new Phaser.Game(480, 800, Phaser.CANVAS, '');

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;this.scale.setShowAll();this.scale.refresh();this.scale.setScreenSize(true);

Everything works fine, on my phone but my brother's phone have a strange resolution: 720x1184  ( i think its because the soft buttons at the bottom )

 

I dont mind the black borders around the game because the strange aspect ratio, but in cocoonJS the borders filled like at the attached screenshot.

 

Any idea how can i solve this?

 

Thank You!

 

 

 

 

[rajeev90km]

For localStorage to work in canvas+ mode, use "this.game.device.localStorage". window.localStorage doesn't work with Canvas+ engine in Cocoon JS

[Michel (Starnut)]

@korgoth: I have the exact same bug on my list as it appears with my game running on the Nexus 5. As mentioned earlier in this thread, setting scaleMode to EXACT_FIT should fix this. But I realize that you may want to stick with SHOW_ALL. Don't know if that'll work though.

 

@rajeev90km: I used localStorage directly with Phaser 2.0.4. Not window.localStorage but just localStorage and it worked with Canvas+ and in all browsers I tested. Also on desktop. But using the Device property is probably the safest way to do it since the framework could potentially do additional checks on it in special cases. I just didn't realize it existed so thx

[korgoth]

@korgoth: I have the exact same bug on my list as it appears with my game running on the Nexus 5. As mentioned earlier in this thread, setting scaleMode to EXACT_FIT should fix this. But I realize that you may want to stick with SHOW_ALL. Don't know if that'll work though.

 

 

doesnt EXACT_FIT distorts the aspect ratio for you? For example a circle will be an oval. Do you have a link to your game?

[Michel (Starnut)]

@korgoth: sure does. That's why I said I realize you want to stick with SHOW_ALL but it looks like the distortion wouldn't be huge, so you might wanna give it a shot. I'm gonna since it might be the quickest fix with a minor drawback. But I'll spend some minutes on the issue within my project on Thursday. Might find something else.

 

Are you instantiating the game with a fixed dimensions and then scaling up as your code suggests? Cause I'm essentially using the approach where I create the game with the device dimensions - and I still have the problem which is ultra weird. Then again I may have set maximum scaling sizes to values that are not fully compatible with the Nexus 5 dimensions, thus, causing the error.

 

[Edit]Sorry, no link. Game is not public, yet. And AFAIK it only occurs when wrapped into CocoonJS.[/Edit]

[korgoth]

@Michel (Starnut) : I tried that but the game has a lot of circle shaped buttons and with that it looks really bad   I hope you find a solution, because I cant :S  By the way, did you tried your game in the webview+ mode? Because I only have this problem in canvas+

 

Scaling: yes, I scaling it up from a fixed dimension.

[korgoth]

More info on this. If I force the navigation bar on my phone ( it have hw buttons ) to archive the same aspect ratio as on the larger phone with no hw buttons the bug is not appear. Screenshot attached.

Maybe its a device specific problem? Anyway its really annoying, I can't find a solution :S

[Videlais]

Hi, everyone. I'm back from my slightly-over-a-month vacation away from CocoonJS + Phaser problem solving and I'd like to update the top post of this thread over the next two weeks.

 

Since both Phaser 2.0.6 and CocoonJS 2.0.2 are out and many of the annoying problems -- image rendering, WebGL/Canvas stuff, etc -- are mostly covered now, I'd like to collect all the latest known issues and solutions again. And while I did read all the new posts, I haven't been playing with the code itself too much lately. That's where anyone who is willing to help comes into this.

 

Specifically, I'm currently interested in all the highlights from months ago: Images, Audio, Text, Buttons, TileSprites -- and anything else that I'm not aware of yet.

 

My plan is to work through the old list again and then move on to the newer problems. I'm currently working on finishing a solution to the XML problem, but will be checking out the classics too. If anyone else already has (or is willing to create) simple test cases proving that something now works (or doesn't), that would be extremely helpful. Nothing too fancy, just enough lines to show the issue or that everything's fine now.

 

Thank you for your help with this.

[rich]

I would say hold-fire. Mat is closing down some Pixi level issues (literally right now in fact) in 1.6.1 which I'll roll into Phaser 2.0.7 either tomorrow or Monday.

[Videlais]

Okay, cool. Thanks for letting me know, Rich.

 

I'm probably still going to run through some things this weekend with Phaser 2.0.6 and the new CocoonJS 2.0.2 just to check out what I was told is now fixed. But I'll hold off till the new 2.0.7 is out mid next week before really getting into it.

 

I am really happy so many new fixes are in Phaser now, though. Love how far we've come since February.

[Michel (Starnut)]

Hi @Videlais, and @rich,

 

Next week, I'll be working on an update for my Phaser 2.0.4 / CocoonJS 2.0.1 game where I'll try and build back the workarounds I created for cocoonjs in order to reduce code complexity and improve maintainability. I'll be glad to contribute whatever I'll find. 

 

And I gotta say once more, that I'm also super happy with how things came along since spring!

[j0hnskot]

According to the tilesprite problem, it seems that a game i created with a tilesprite for scrolling background works perfectly fine.

 

Did something change? I'm using 2.0.7.

[Michel (Starnut)]

@korgoth

 

Hi, so I tried it myself and EXACT_FIT works for me and fixes the issue. It doesn't really seem to distort stuff, though, in contrast to my expectations. Maybe it just sets things right, since my app looks fine in the launcher, but the final compiled version has this glitch.

 

Anyways, just to make sure you're problem doesn't lie somewhere else, I init my game like this (Phaser 2.0.4, CocoonJS 2.0.2) and take care of the scaling within the game myself (work a bit with room):

 

var w = window.innerWidth * window.devicePixelRatio,    h = window.innerHeight * window.devicePixelRatio,    width = (h > w) ? h : w,    height = (h > w) ? w : h;// Hack to avoid iPad Retina and large Android devices. Tell it to scale up.if (window.innerWidth >= 1024 && window.devicePixelRatio >= 2){    width = Math.round(width / 2);    height = Math.round(height / 2);}// reduce screen size by one 3rd on devices like Nexus 5if (window.devicePixelRatio === 3){    width = Math.round(width / 3) * 2;    height = Math.round(height / 3) * 2;}var game = new Phaser.Game(width, height, Phaser.CANVAS, '');

And since you've asked, here is a link to the game on the web (which currently does not scale above 1024x768 on the web): http://sandbox.starnut.com/sensigame/

 

Hope this helps...

 

Cheers,

 

Michel

[Michel (Starnut)]

@j0hnskot since Rich has fixed (and integrated fixes for) quite a lot of issues for 2.0.6 and 2.0.7, there indeed is a good chance TileSprites were one of the issues solved.

 

Had no time to see for myself though.

[Videlais]

Finally had a chance to organize my random test cases into something worth posting today. They can now be found on GitHub here.

 

Summary: nearly everything works now with Phaser 2.0.7 and CocoonJS 2.0.2.

 

Details:

 

I worked through my older tests for various things and updated them all to Phaser 2.0.7. That's what is in that GitHub repo: simple test cases showing if certain functionality works now or not. Everything I tested (including Text, TileSprites, Images, Buttons, RetroFonts, Tweens, and Emitter/Particles) all work great. I didn't have to use any hacks or even really change the code I pulled from the official Phaser examples too much either.

 

The only two new things I noticed were that the 'DOMMouseScroll' and 'mousewheel' events throw warnings. (Should just be a quick change in Mouse.js around here to fix that, though.)

 

So, as far as I know, then, the outstanding issues include XML (for which I'm still -- yes, still -- working on finishing a solution for), Gamepad (which should now be fixed on all devices without needing my plugin, but will confirm soon), and organizing 'best practices' for scaling on different devices -- and as for the last, I'm liking @Starnut's code for that.

 

I'm going to wait a few days before I update the top post again, so if anyone else has something they think should be tested or included in that post, let me know. Otherwise, I'm probably going to go back to playing around with Phaser + CocoonJS on Ouya some and just declare everything working for mobile devices.

[rich]

That's great news. Also just to say that the guys at Ludei have submitted a couple of interesting pull requests yesterday, which should help things even more.

[korgoth]

I'm going to wait a few days before I update the top post again, so if anyone else has something they think should be tested or included in that post, let me know. Otherwise, I'm probably going to go back to playing around with Phaser + CocoonJS on Ouya some and just declare everything working for mobile devices.

 

game.add.text() is working fine for me even with truetype fonts ( cocoon 2.0.2, phaser 2.0.7 ), except the multiline feature. If I try to break a line with the newline character the space between the lines will be huge ( about 200px with 30px font size ).

[Michel (Starnut)]

Great work @Videlais, thank you so much for the effort! It's such great news that everything is finally coming along. And I'm really looking forward to your Gamepad adaption. Can't wait to get testing on my OUYA as well

 

And also great to hear that Ludei themselves have started contributing to improve integration. That's the kind of news I love waking up to

 

Now, I'm currently working on the best setup to make the game adapt device dimensions (for mobile, on desktop, under cocoon) which works best with the snippet I posted earlier. But that'll need some compiling and testing.

 

@Videlais, have you tried playback of various audio formats again? Wondering if anything changed about my from late May that WAV works (and loops) best across devices?

[ghostrifle]

Does anybody have problems with buttons and CocoonJS in canvas mode? Clicking the button works, but it doesn't get displayed. On desktop browsers everything is working. I thought it only doesn't work in WebGL mode?

[Videlais]

@korgoth: Okay, yeah, I'm seeing that too now. I didn't test for multi-line yesterday. That's something to definitely put on the list, then. (I've updated my case to test for multi-line now too.)

 

 

@Starnut: I put together an audio test today, but haven't tested file formats themselves lately either. WAV is probably still the safest bet, though. (My test has WAV, OGG, MP4, and MP3 files. As far as I know, that covers all the usual bases for file formats.)

 

I've been thinking about making a new thread for Phaser + CocoonJS on Ouya stuff at some point in the future. I explored it months ago, but when images stopped working I was also at the point of maximum frustration with CocoonJS and stopped completely. Now that they are working normally again, and gamepads should now be fixed I've been told, I'm interested to get into it again.

 

 

@ghostrifle: Buttons should now be working in Canvas mode. Can you let me know if this test works for you?

[korgoth]

@Videlais: also the text shadow fails in cocoonjs launcher ( with truetype fonts ). You can use something like this in your test case to check:

text.setShadow(3, 3, 'rgba(0,0,0,0.5)', 5);

[Binary Moon]

How do you test with 2.0.2? Do you have to actually compile the game on the cocoon site?

 

I'm using the ios launcher to test and it is 2.0.1 so everything is still incorrect for me.

[ghostrifle]

@ghostrifle: Buttons should now be working in Canvas mode. Can you let me know if this test works for you?

 

This test works! Did you apply a patch on phaser?

[Michel (Starnut)]

@Binary Moon: Yes, that's what I'd do. Request a compiled version from the ludei site and you'll get an XCode project you can build and test directly on your device. That way you'll make sure your app is as close as possible to the final product.

[ghostrifle]

Seems like I found a bug. Your button example works with just using one button. But if I add a sprite, the button disappears on Cocoon (2.0.1).

 

Here's an example: https://www.dropbox.com/s/toygn4u4sgd9nnq/cocoon_js_bug.zip