Phaser 2.1.0 Ready for testing

[pandavigoureux29]

I agree with Niklas. I didn't noticed it before, but actually anything fixed to the camera  - in a group or not - has this shaky behaviour.

 

It works fine with 2.0.7 with me too

[rich]

The camera shake is due to a PR that floored the camera values. I will undo it before going live.

[rich]

Ok I've fixed the Camera shake issue. Before it was showing me the 1px jitter on the right of maps, but it's fine now. If you guys could confirm that'd be great (note it's just fixed in source, you'll have to 'grunt build' it first, sorry).

 

I'll look at the emitter issue next.

 

Still no word from Ludei on the Cocoon 'flipped' issue. Is there any chance someone here could tell me if the Pixi DEV branch exhibits the same behaviour please? At least we could narrow down the issue then. Ironically this only appears to have started happening after merging a pull request from ludei

[enriqueto]

tested on the physics game we are currently doing, everything works fine.

 

Thanks for the update Rich!

[pandavigoureux29]

Sorry for the delay.

 

I just tested the last version. It fixed the shaking problem for me. 

 

thanks !

[nkholski]

Sorry. I was away with no internet access until now. I can confirm that whatever you did solved the issues I had with the shaky camera and the 1px jitter on the right. Great work!

[Wavertron]

Did P2 onEndContact get fixed in this release?

[pandavigoureux29]

Yes it would seems. 

 

I tested it and the onEndContact callback is called onto the two objects concerned by the collision. I think that was the problem back then.

[ram64]

I was trying out the ScaleManager.RESIZE mode but it doesn't seem to work properly. It seems that the game scales opposite to the scale direction. I have made a simple demo to show this effect: http://www.ram64.com/tests/phaser-resize/

 

Or you can see it in the images:

 

Also the behavior is a bit strange as the canvas doesn't resize to fit the new dimensions, yet the game does. Or actually the canvas does resize, but it's inline style keeps it at the original dimensions.

 

EDIT: Actually this is the problem, the Canvas does resize, but the inline style keeps it at the original dimensions when the game was created, hence the game will be scaled to fit the Canvas.

 

This happens both when the game is inside the body and when it is inside another container, the only difference being the resize check rate. 

 

Or am I using it the wrong way?

 

I have used the following code (a bit messy but needed a quick demo):

var game;var logo;var tl;var tr;var bl;var br;function init() {    game = new Phaser.Game(400, 400, Phaser.CANVAS, '', { create: create, update, preload: preload, init: gameInit });}function gameInit() {    this.input.maxPointers = 1;    this.stage.disableVisibilityChange = true;    if (this.game.device.desktop) {        this.scale.scaleMode = Phaser.ScaleManager.RESIZE;        this.scale.setMinMax(320, 320, 1024, 1024);        this.scale.setResizeCallback(gameResized);        this.scale.setScreenSize(true);        this.scale.refresh();    } else {        this.scale.scaleMode = Phaser.ScaleManager.RESIZE;        this.scale.setMinMax(320, 320, 1024, 1024);        this.scale.setResizeCallback(gameResized);        this.scale.setScreenSize(true);        this.scale.refresh();    }}function gameResized() {    if (tl && tr && bl && br) {        tl.position.setTo(0, 0);        tr.position.setTo(game.width, 0);        bl.position.setTo(0, game.height);        br.position.setTo(game.width, game.height);    }}function preload() {    game.load.image('logo', 'assets/Phaser-Logo-Small.png');    game.load.image('cross', 'assets/cross_cross.png');}function create() {    logo = game.add.sprite(game.width * .5, game.height * .5, 'logo');    logo.anchor.setTo(.5, .5);    game.stage.backgroundColor = 0xcccccc;    tl = game.add.image(0, 0, 'cross');    tr = game.add.image(game.width, 0, 'cross');    tr.anchor.setTo(1, 0);    bl = game.add.image(0, game.height, 'cross');    bl.anchor.setTo(0, 1);    br = game.add.image(game.width, game.height, 'cross');    br.anchor.setTo(1, 1);    tl.scale.x = tr.scale.x = bl.scale.x = br.scale.x = .05;    tl.scale.y = tr.scale.y = bl.scale.y = br.scale.y = .05;}

P.S. Is it possible to offer a Stage align property (TopLeft, BottomRight and so on)?

[spencerTL]

I'm getting the following error when I emulate iPad on Chrome:

 

Uncaught TypeError: undefined is not a functionphaser.js:52010

Phaser.SoundManager.unlockphaser.js:24749

Phaser.Mouse.onMouseDownphaser.js:24694

_onMouseDown

 

It occurs on the first click of the title screen which is the first state shown and does nothing other than display an image and detects a click/tap to move on to the main state.  It is not fatal and, aside from not responding to the first click and showing the error, a second click then behaves as expected.  The error does not show on Chrome when it is not emulating iPad.  Unfortunately I don't have the equipment on hand at the moment to see if this is due purely to Chrome having a flawed emulation or whether it also occurs on device.  I thought it worth flagging up though in case there is an obvious cause.

 

EDIT:  Just tested similar app with built with an older Phaser and it has the same error.  Also tested both on an iPad, although not with debug facility, and the absence of the failed first click suggests there is no error on device.  Possibly Chrome's emulation of touch is a bit of a fudge between mouse and touch and so isn't reporting correctly as either so that Phaser can handle it properly.

[rich]

ram64 - don't called setScreenSize() or refresh(), it will seriously confuse the scale mode. To be honest I ought to make those 2 functions not do anything if the scale mode is set to RESIZE. Here is an example showing how you use resize with a 100% width/height:

var game = new Phaser.Game("100%", "100%", Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render, resize: resize });function preload() {    game.stage.backgroundColor = '#4d4d4d';    game.scale.scaleMode = Phaser.ScaleManager.RESIZE;    game.load.image('backdrop', 'assets/pics/remember-me.jpg');    game.load.image('card', 'assets/sprites/mana_card.png');}var card;var cursors;function create() {    game.world.setBounds(0, 0, 1920, 1200);    game.add.sprite(0, 0, 'backdrop');    card = game.add.sprite(200, 200, 'card');    game.camera.follow(card);    cursors = game.input.keyboard.createCursorKeys();}function resize(width, height) {    // game.world.setBounds(0, 0, width, height);}function update() {    if (cursors.left.isDown)    {        card.x -= 4;    }    else if (cursors.right.isDown)    {        card.x += 4;    }    if (cursors.up.isDown)    {        card.y -= 4;    }    else if (cursors.down.isDown)    {        card.y += 4;    }}       function render() {    // game.debug.text(game.width + " x " + game.height, 32, 32);    // game.debug.cameraInfo(game.camera, 32, 32);    // game.debug.inputInfo(32, 200);    game.debug.cameraInfo(game.camera, 500, 32);    game.debug.spriteCoords(card, 32, 32);}

spencer - That's just a Chrome error, it doesn't happen on an actual iPad. I'll see if we can remove it, although I rarely use Chrome iPad testing as it's so far removed from the actual device. Even so it's annoying enough that I'll see if we can override it.

[ram64]

Oh, I see. My bad. It works like a charm now. Thank you!

[spencerTL]

Thanks Rich, that's what I thought.  It's no problem once the cause of it is known, I'd have probably looked into it a bit more before initially posting but with it being the Release Candidate I wanted to raise it before the chance was missed in case it was something.

[Noid]

When using WebGL, debug.body() and debug.bodyInfo() stop updating but don't dissapear from the screen when you stop calling them. 

 
I have the following code in my render loop:

render: function () {    if (_debug)    {        game.debug.body(_sprite);        game.debug.bodyInfo(_sprite, 16, 24);    }}

the value of _debug is switched by pressing P. 
If I'm using Canvas I can use the key to enable and disable the display of debug information. However, when using WebGL, once I enable and disable the debug display it just stops updating without dissapearing from the screen.
You can check it here by pressing P twice once the game loads.
I'm using the latest phaser.js and phaser-arcade-physics.min.js builds as of commit 3102ad5
 
[https://github.com/photonstorm/phaser/issues/1178]

[ram64]

Nevermind... This happens only if you set the key of the button to a image and not a spritesheet.

 

When you create a button if you set any of the overFrame, outFrame, downFrame and upFrame parameters you will receive the following errors:

 

Uncaught TypeError: Cannot read property 'crop' of undefined phaser.js:1747    b.Sprite._renderCanvas phaser.js:1747    b.DisplayObjectContainer._renderCanvas phaser.js:1428    b.DisplayObjectContainer._renderCanvas phaser.js:1428    b.CanvasRenderer.renderDisplayObject phaser.js:8156    b.CanvasRenderer.render phaser.js:8105    b.Game.update phaser.js:22393b.RequestAnimationFrame.updateRAF phaser.js:40370    window.requestAnimationFrame.forceSetTimeOut._onLoop phaser.js:40356Uncaught TypeError: Cannot read property 'frame' of undefined phaser.js:23445    b.Input.hitTest phaser.js:23445    b.InputHandler.checkPointerOver phaser.js:28455    b.Pointer.processInteractiveObjects phaser.js:25669    b.Pointer.move phaser.js:25633    b.Mouse.onMouseMove phaser.js:24789    _onMouseMove phaser.js:24698

[rich]

ram64 - do you have a specific test case please, because all the buttons in our current games (based on 2.1.0) and the Examples work fine.

[ram64]

Here: http://www.ram64.com/tests/phaser-buttons/

It's because I used it wrong, passing in an image instead of spritesheet. I defined a frame (overFrame) for the first button and it gives the error specified in the previous post. The button with the spritesheet works without error. However, maybe this should not throw an error but just ignore the frame parameters if the key specified in the creation of the button is an image.

var game;function init() {    game = new Phaser.Game(320, 240, Phaser.AUTO, 'game', {create:create, preload:preload});}function create(){    var s = {font:'16px Arial', fill:'#FFFFFF'}    game.stage.backgroundColor = 0x363636;    game.add.button(10, 30, 'blueButton', onButtonClick, null, 0); // this one uses an image    game.add.button(10, 100, 'buttons', onButtonClick, null, 0, 1, 2, 3); // this one uses a spritesheet    game.add.text(10, 10, 'Button using image', s);    game.add.text(10, 80, 'Button using spritesheet', s);}function preload(){    game.load.image('blueButton', 'assets/buttonBlue.png');    game.load.spritesheet('buttons', 'assets/sprites.png',222, 39, 4);}function onButtonClick(a){    console.log('Button clicked', a);}

[rich]

Ok everyone I've fixed the bug with CocoonJS inverting the display. In the latest version (just pushed) you need to set the renderer to CANVAS (not WebGL or Auto) and it will activate screencanvas mode in Cocoon which, for me on my test devices tonight, works fine. Performance was fast, nothing was mirrored.

 

If I used WebGL mode then performance was pretty terrible, but still nothing was mirrored.

 

If I disabled screencanvas in Game.js and used Canvas mode (which was the 2.0.7 default) then it was all mirrored.

 

I'm happy with this outcome so I'll be looking at releasing 2.1 tomorrow.

[patmood]

Cheers Rich,

 

I'm still getting the cocoon mirror issue on Nexus 5, but maybe it's my code. I tried making a clean template using the Yeoman generator to isolate it, but it didn't help:

 

https://gist.github.com/patmood/4d7d3c69941ad90078ef

 

Any suggestions?

[rich]

Did you rebuild Phaser? As I didn't push any build files, just the source.

[rich]

I will test it on my Samsung Android devices shortly.

[patmood]

Ah my bad - Rebuilt and confirm cocoon mirror bug is fixed!

 

In the mirrored version all my buttons were showing, but in the latest fix some are hidden again (in cocoon). I'm also still experiencing the erratic emitter issue (browser and cocoon).

 

I can live with those if the canvas is upright though!

[pandavigoureux29]

@Rich

Yes the mirroring issue disappears with renderType as Phaser.CANVAS, and I agree about the performances with WebGL.

 

The main issue for me is that TileSprite are not displayed ( or displayed in black, I can't really say ) in CocoonJS when using Canvas+.

 

Is there a workaround for this? I did some research on the forum but nothing came out. I cannot afford not to use TileSprite in my platformer game, they are too useful and time saving.

 

Thanks anyway