Common Phaser + CocoonJS issues

[Alexalten]

Hi tips4design, 

 

You're right!!!  I've made my previous test using an older version of phaser, with the latest everything work!!!!

 

Sorry for the lost time and thanks!

[totallybueno]

Hi there,

I´m having some problems with pretty basic stuff... I´m working with the cloud compiler at cocoon.io and it seems that the game links are not working at all, the openURL method (working fine on desktop with window.open)

 

I have this code (I´m getting the alerts but not linking)

this.myIcon.events.onInputDown.add(function(){     if(this.game.device.desktop){          alert("fb icon > desktop")          window.open("http://www.facebook.com/totallybueno", '_blank');     }else{          alert("fb icon > cocoon")          Cocoon.App.openURL("http://www.facebook.com/totallybueno");     }},this)

Does anyone know why this is happening? The code seems to be correct...

[Aer]

I've been especially stubborn this week and so worked out a way to get text input in Canvas+ without having to use the dialog.

 

Check it out - Textbox Plugin[GitHub]

 

See the example below on usage. Currently it ONLY works in CocoonJS, I'll soon be adding browser support.

this.game.mobile = this.game.plugins.add(Phaser.Plugin.Mobile); // Set some variables  var halfWidth = this.game.width/2,      halfHeight = this.game.height/2,      leftAlign = 100,      rightAlign = this.game.width - 100,      boxlength = this.game.width - 200,      boxheight = 72,      userFont = {          font: '50px sans-serif',          fill: '#000'      };  // Create a Mobile.Textbox  // game.add.textbox (x, y, width, height, text, group)  this.emailTextbox = this.add.textbox(      leftAlign,      halfHeight,      boxlength,      boxheight);  // Start listening for clicks  this.emailTextbox.enableKeyboard('phone');

[totallybueno]

 

I've been especially stubborn this week and so worked out a way to get text input in Canvas+ without having to use the dialog.

 

Check it out - Textbox Plugin[GitHub]

 

I´ll try it later, thanks for sharing

[Yora]

I've been having an issue with scaling after upgrading to Phaser 2.4.4 while using WebGL in Canvas+ (WebGL works fine in webview and webview+, Canvas works fine in Canvas+).

window.onload = function () {    var width = window.innerWidth * window.devicePixelRatio;    var height = window.innerHeight * window.devicePixelRatio;    var game = new Phaser.Game(width / (window.devicePixelRatio - 1), height / (window.devicePixelRatio - 1), Phaser.WEB_GL, '');    game.state.add('Boot', require('./states/Boot'));    game.state.add('Preloader', require('./states/Preloader'));    game.state.add('MainMenu', require('./states/MainMenu'));    game.state.add('Main', require('./states/Main'));    game.state.start('Boot');};

Trying different scale modes in 'Boot':

//this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;//this.game.scale.scaleMode = Phaser.ScaleManager.RESIZE;this.game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;

All scaling via the cocoonjs app is disabled so it would be handled by Phaser (have tried cocoonjs options on their own).  However after updating Phaser 2.4.4, I can't get the game to re-scale after creation, in which I want it to stretch and fill the whole screen via the Phaser scale manager.  Instead it's been doing this:

 

All inputs are handled as if the entire screen were filled, ex. the scroll bar moves around when touching the right end of the screen.

 

Also the bitmap texts that I'm converting to images are appearing funky, only in this setting; it works otherwise.

var _time = _game.make.bitmapText(-85 + (i * 90), 122, 'Agency_35', timeString, 25);time = _game.make.image(-85 + (i * 90), 122, _time.generateTexture());

^ gives the text that jarbled up appearance (only in WebGL Canvas+).

 

I've been fiddling and poking around but am not quite sure what exactly changed in the newest update that started causing this; with Phaser 2.4.3, the same code gives the desired result filling the screen.

 

I'd appreciate any help, since it could be something very obvious that's eating my time.  Thanks!

[totallybueno]

However after updating Phaser 2.4.4, I can't get the game to re-scale after creation, in which I want it to stretch and fill the whole screen via the Phaser scale manager.

 

I´m having the same problem, at the moment I´m working with Webview+ as Canvas+ is doing that weird stuff, but definitely, I´ll look at this.

[PrizrakPro]

new Phaser.Game('100', '100', Phaser.AUTO, '', {});

Try this.

[totallybueno]

Not working for me... I´m still having the same proble Yora said in the comment #280

[Aer]

I use:

var game = new Phaser.Game(720, 1280, Phaser.CANVAS, 'gameContainer');

And:

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;if (this.game.device.desktop) {    var body = document.querySelector('body');    body.style.width = '400px';    body.style.margin = '40px auto';} this.scale.pageAlignHorizontally = true;this.scale.pageAlignVertically = true;

This seems to work on the latest Cocoon & Phaser

[Yora]

Yes, there is no problem having it work in Phaser.Canvas mode, it was only occuring in WebGL on Canvas+.

 

However when I accidentally uploaded an older version of my game code, suddenly the scaling problem was gone and the entire screen is filled again, and I haven't even been able to replicate the problem after I replaced my current main.js with the old one, so I'm not sure what fixed it to share the information.

 

The bitmap text used as a texture as shown below is still creating the distorted image as before, only with WebGL on Canvas+.  I'll keep trying to fix.

var _time = _game.make.bitmapText(-85 + (i * 90), 122, 'Agency_35', timeString, 25);time = _game.make.image(-85 + (i * 90), 122, _time.generateTexture());

[totallybueno]

 

Yes, there is no problem having it work in Phaser.Canvas mode, it was only occuring in WebGL on Canvas+.

 

However when I accidentally uploaded an older version of my game code, suddenly the scaling problem was gone and the entire screen is filled again, and I haven't even been able to replicate the problem after I replaced my current main.js with the old one, so I'm not sure what fixed it to share the information.

 

The bitmap text used as a texture as shown below is still creating the distorted image as before, only with WebGL on Canvas+.  I'll keep trying to fix.

var _time = _game.make.bitmapText(-85 + (i * 90), 122, 'Agency_35', timeString, 25);time = _game.make.image(-85 + (i * 90), 122, _time.generateTexture());

 

Hahaha, ok, let me know if you discover it because it seems that I´m writting the same (bad) code

 

(I changed to Phaser.CANVAS and is working fine but I guess WebGL should be faster)

[Yora]

Aaah I'm not sure how I missed how this was the change, but the fix to my original resolution problem was actually in the cocoonjs launcher settings where I had to disable the "WebGL screencanvas" option, then my game filled the screen again.  I'm not sure what this option is for, though.

 

Using generateTexture on any display object and then using that texture on a sprite/image is still giving me the same problem though.  It seems to work okay the first time I do it (although instead of transparency in the background of the texture it's solid black), then any subsequent textures formed by generateTexture seem to result in a deformed texture when it's used on a sprite.  This is only happening in WebGL and Canvas+.  WebGL and WebView+ is fine.

[totallybueno]

Thanks mate, that worked for me too

[Sébastien MOUGEL]

Hello everybody.

 

I'm a new user of phaser and cocoon.js since few days .... I'm reading tuts, make experiments and trying to compile to android. So I'm using cocoon.js.

 

I'm unable to login from cocoonjs launcher app from android...(but able to log in from their website) do you have the same issue ?

 

Thx.

 

Sébastien

[existenzial]

My menu backgrounds and text are being sized abnormally small but the game is being resized properly. The game is instantiated on the index.html with the following code:

        var width = window.innerWidth * window.devicePixelRatio;        var height = window.innerHeight * window.devicePixelRatio;        var game = new Phaser.Game(width, height, Phaser.CANVAS, 'game');

and the main resize behavior is defined in the init function of my Boot state: 

 

        if (this.game.device.desktop) {            this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;            this.scale.setMinMax(400, 300, 1400, 1050);            this.scale.pageAlignHorizontally = true;            this.scale.pageAlignVertically = true;            this.scale.updateLayout(true);                        var ow = parseInt(this.game.canvas.style.width, 10);            var oh = parseInt(this.game.canvas.style.height, 10);            var r = Math.max(window.innerWidth/ow, window.innerHeight/oh);            var nw = ow*r;            var nh = oh*r;            this.game.canvas.style.width = nw + 'px';            this.game.canvas.style.height = nh + 'px';            this.game.canvas.style.marginLeft = (window.innerWidth/2 - nw/2) + 'px';            this.game.canvas.style.marginTop = (window.innerHeight/2 - nh/2) + 'px';            document.getElementById('game').style.width = window.innerWidth + 'px';            document.getElementById('game').style.height = window.innerHeight - 1 + 'px'; //css for body includes 1px top margin that we want to eliminate            document.getElementById('game').style.overflow = 'hidden';                    } else {            this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;            this.scale.setMinMax(480, 260, 1400, 1050);            this.scale.pageAlignHorizontally = true;            this.scale.pageAlignVertically = true;            this.scale.forceOrientation(true, false);            this.scale.setResizeCallback(this.gameResized, this);            this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);            this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);            this.scale.updateLayout(true);        }

 

I'm not sure how to get the menus to sync up with the sizing/scaling of the game itself. After several iterations of attempts, I'm at a loss of what to try. Any ideas?

[tips4design]

Well, where (how) do you create those menus and backgrounds?

[totallybueno]

Hi there,

I´m scalling my game with Phaser.ScaleManager.SHOW_ALL and I´m having this problem, the green area is the actual game (scaled without any scale distortion) but then I have this red area, where I can see part of my canvas repeated and that really sucks.

I´m using a cocoon.io developer app and I´m trying (and I´m not being able) to center the game on the screen and avoid that red part, does anyone how can I fix this?

 

Thanks in advance.

[carlosnufe]

On 2/3/2016 at 3:27 PM, totallybueno said:

Hi there,

I´m scalling my game with Phaser.ScaleManager.SHOW_ALL and I´m having this problem, the green area is the actual game (scaled without any scale distortion) but then I have this red area, where I can see part of my canvas repeated and that really sucks.

I´m using a cocoon.io developer app and I´m trying (and I´m not being able) to center the game on the screen and avoid that red part, does anyone how can I fix this?

 

Thanks in advance.

Maybe, image aspect ratio is not equal to the device aspect ratio ?

[totallybueno]

Hi Carlos,

of course the game isn´t the same aspect ratio of the device, when you choose the size of your game, you choose a size and then the idea is to adapt that size/game to every screen, right? Well, I was trying to make that adaptation of the game and the weir thing is that I didn´t have a black area in that part, the canvas was repeating all along the screen, and that´s not part of the proper canvas of the game.

[carlosnufe]

48 minutes ago, totallybueno said:

Hi Carlos,

of course the game isn´t the same aspect ratio of the device, when you choose the size of your game, you choose a size and then the idea is to adapt that size/game to every screen, right? Well, I was trying to make that adaptation of the game and the weir thing is that I didn´t have a black area in that part, the canvas was repeating all along the screen, and that´s not part of the proper canvas of the game.

Follow me on twitter, we will talk in private to solve this issue.

[BunBunBun]

any actual info about CocoonJS wrapper? are all okay with the latest version of Phaser?

[totallybueno]

6 minutes ago, BunBunBun said:

any actual info about CocoonJS wrapper? are all okay with the latest version of Phaser?

Not sure about what you mean... but yes, I just compiled a game with the last Phaser and everything goes ok...

[BunBunBun]

1 hour ago, totallybueno said:

Not sure about what you mean... but yes, I just compiled a game with the last Phaser and everything goes ok...

I tried to use Cocoon about 2 years ago and interesting how it work now on Android and iOS, I see they updated his site and remove CocoonJS app from AppStore (changed it to CocoonDev).
@Ludei was online only in March 2016. I'm finding actual info about issues with Phaser and etc.

[tips4design]

8 hours ago, BunBunBun said:

I tried to use Cocoon about 2 years ago and interesting how it work now on Android and iOS, I see they updated his site and remove CocoonJS app from AppStore (changed it to CocoonDev).
@Ludei was online only in March 2016. I'm finding actual info about issues with Phaser and etc.

It's called Coocon.io now and I recently compiled a game with 0 issues that runs at 60FPS on all devices tested (even cheap android phones from 2014)

[espace]

hi,

Have you this effect ?... When i run my game on chrome or firefox my tweens works very well. Exactly the same on my android phone with my game's site.

But when i 'm on cocoon with webview mode the tweens works not properly (it seems appears after changing a state)... Sometimes i just see the end of the transition or the effect appears not properly.

Have you similar issues and a solution for that ? Below a piece of code of my tweens :

intermediate_screen=(obj,next_action) => {
	obj.alpha =1
	obj.scale.setTo(0,0)
	this.tween_rotate = game.add.tween(obj).to({angle:45},1100,Phaser.Easing.Elastic.Out,true,500)
	this.tween_scale = game.add.tween(obj.scale).to({x:1.5,y:1.5},1100,Phaser.Easing.Elastic.Out,true,500)
	this.tween_alpha = game.add.tween(obj).to({alpha:1},800,Phaser.Easing.Linear.None,true,800)
	this.tween_alpha.onComplete.add(next_action)	
}

//next_action is go to another state.