Common Phaser + CocoonJS issues

[smr]

The message I'm getting from this thread is: "Don't use CocoonJS."

[Videlais]

The message I'm getting from this thread is: "Don't use CocoonJS."

 

It's definitely got problems. There's no getting around that.

 

However, looking at Phaser's compatibility with other hybrid app frameworks like Cordova/PhoneGap and Crosswalk right now, it's pretty much on par with everything else.

 

You take on some risk using any of them. And they all come with their own issues and quirks to be aware of.

[patmood]

Is anyone else still having issues with buttons?

 

When the display was mirrored, they worked fine, but in 2.1.0 the display is fixed and some of my buttons disappear again. It's always the same 2 buttons (out of 10 or so).

 

One of them appears if I do a certain combination of actions, and even if I replace them with plain sprites and events they dont show.

 

Any new ideas on the issue now that 2.1.0 is out?

[Jirka1111]

Well, I have a big problem.

 

In attachment, there is my game with Coconut on Android. The game is in 320x480 and Zopo C2 has 1080x1920. What should I do?

[Jirka1111]

What is this? A game for ants? 

[Videlais]

In attachment, there is my game with Coconut on Android. The game is in 320x480 and Zopo C2 has 1080x1920. What should I do?

 

You should scale your game to the screen. See the section under "Scaling" here or the several threads covering scaling on the forums. Looking at Phaser's ScaleManager might help too, depending on your needs.

[Binary Moon]

To fix the button issue I created a weird hack that involves adding a tiny transparent image after everything else in the scene. Not sure why this works, but it stops everything from hiding randomly. I haven't tested this in 2.1.0 though so not sure if it still works there.

[dragonking88]

To fix the button issue I created a weird hack that involves adding a tiny transparent image after everything else in the scene. Not sure why this works, but it stops everything from hiding randomly. I haven't tested this in 2.1.0 though so not sure if it still works there.

 

Brilliant!, you've saved my day. I tried this with 2.1.1 and it works perfectly.

[Videlais]

To fix the button issue I created a weird hack that involves adding a tiny transparent image after everything else in the scene. Not sure why this works, but it stops everything from hiding randomly. 

 

Just to clarify, @BinaryMoon, are you writing that you are adding an extra image at the end of your create() function per scene?

 

Something like the following:

function create() { //Creating stuff game.add.image(0,0,'');}

If so, and we can verify this is a working solution to the problem, we could probably roll it into a patch for Phaser at some point. (This was, in fact, the solution previous to 2.0, anyway. Looks like it might need to be added to this hack.)

[Binary Moon]

Videlais - yeah, that's it exactly. I have a 1 x 1 transparent png I am inserting as the very last item in the create funciton. No idea why it works but it seems to stop things from vanishing randomly.

[Jirka1111]

You should scale your game to the screen. See the section under "Scaling" here or the several threads covering scaling on the forums. Looking at Phaser's ScaleManager might help too, depending on your needs.

 

I still don't get it. I have used the hack by Starnut. Now screen is really fullscreen. But how about scaling sprites? If I have bird sprite 30x30 px, on the full HD screen it's just a dot...

[patmood]

That empty image hack works perfectly! I was seeing the last button disappear, so I guess the solution makes sense. Kudos for finding that one!

[SignalSin]

I still don't get it. I have used the hack by Starnut. Now screen is really fullscreen. But how about scaling sprites? If I have bird sprite 30x30 px, on the full HD screen it's just a dot...

You can scale the sprites using code found in this thread. However, as I've mentioned in another thread, the physics.arcade.moveToPointer function doesn't work correctly, so you'll have to come up with a work-around if you're using that. I haven't looked into it much further than that, so I can't guarantee that there won't be additional issues too.

[Jirka1111]

Still don't get it. Everything is outdated and is really hard to understand what should I do.

[Oliganti]

Can you give us the details of this hack? I've created 1x1 transparent image in every state I had, but it still doesn't work.

//preload state

this.load.image('pixel', 'assets/hack.png');

 

// any other

this.game.add.image(0, 0, 'pixel');

 

+ image http://i.imgur.com/33DOVsW.png 

 

This combination doesn't work for me. Halp! 

[patmood]

I didnt even need to preload anything, just used this.game.add.image(0, 0, '') as @videlais described.

 

Make sure you put that line at the END of your create() function. Cocoon seems to drop the last sprite/button added.

[Oliganti]

It seems that my problem is a result of some dynamically created elements during the game.

[Michel (Starnut)]

@Jirka1111 Maybe check you max scale settings in the boot code of the game? Maybe you currently don't allow the game to scale up all that much?

[Jirka1111]

The game is scaled weird. It is scaling only width, not height. I don't know what that code should do. Some game elements are on fixed position. Should I give every sprite not absolute, but relative position? Does every sprite expand, too? I thought this code scale everything just like when you used Appgyver Steroids or Phonegap.

[Videlais]

I thought this code scale everything just like when you used Appgyver Steroids or Phonegap.

 

I wish it did. That would be very helpful. Sadly, though, CocoonJS works as sort of a reduced browser environment. Unlike PhoneGap (Cordova), it doesn't use the native platform's WebView framework, but renders things itself. It works more like an abstract to a graphics engine than as something common to nearly all other browser-like user agents.

 

I don't know what that code should do. Some game elements are on fixed position. Should I give every sprite not absolute, but relative position? Does every sprite expand, too?

 

Since everything is not scaled together (although maybe using ScaleManger would help with that?), you might need to scale things yourself, too. I know this can be frustrating, accounting for position changes, but it is, unfortunately, a part of building apps for different mobile devices. Because they can have different dimensions and pixel ratios, you have to make decisions about what to support and where you employ different scaling.

Only supporting certain device types or platforms may help with that, depending on what you want, but as of right now, there isn't an easy way to scale things perfectly in Phaser when using it with CocoonJS. And while we've made some progress on responsive scaling (see 2.1.1's RESIZE under ScaleManager), patches accounting for hybrid app frameworks still lag behind.

 

So, yeah, you might need to position things relative to each other. And will probably need to scale sprites to match the increased canvas size too.

[Jirka1111]

Thank you, guys 

 

Videlais: So should I write some variable and then multiply every sprite and position? And then use innerWidth and innerHeight to scale game?

[Videlais]

Videlais: So should I write some variable and then multiply every sprite and position? And then use innerWidth and innerHeight to scale game?

 

That might be the fastest way, yeah. I've been hoping someone would come along and write a patch for mobile resizing, but that hasn't happened yet. So, in the mean time, what you outlined, scaling sprites and using innerWidth and innerHeight, is probably the easiest way.

[Jirka1111]

I used innerWidth and innerHeight and game is not scaled properly. Left side is ok (is right in the left edge), but right side is (I think) two times wider than screen (width is not 1024, but 2048 or maybe more).

[Oliganti]

Does anyone have strange audio problems with using Canvas+? I have the same issue on adroind & ios. Randomly music is not played, or loop is skipped. I'm using ogg.

[Jirka1111]

Debugger is not showing some error?