rich

Phaser 2.1.0 Ready for testing

Recommended Posts

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

Share this post


Link to post
Share on other sites

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:

post-5184-0-31133300-1410082261.pngpost-5184-0-81162900-1410082260.pngpost-5184-0-13649300-1410082260.png

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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]

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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);}

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

@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

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.