Videlais

Common Phaser + CocoonJS issues

Recommended Posts

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!

 

 

 

 

post-6330-0-81699400-1404031323_thumb.jp

Share this post


Link to post
Share on other sites

@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 :)

Share this post


Link to post
Share on other sites

@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? :)

Share this post


Link to post
Share on other sites

@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]

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

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

post-6330-0-89256100-1404454686.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 ).

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

@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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.