phaserjs / phaser Goto Github PK

Found in some parts of your code:

var that = this;
image.onload = function () {
that.context.drawImage(image, 32, 32);
};

As you are using Typescript would be better to use arrow notation to preserve context:

image.onload =()=> {
this.context.drawImage(image, 32, 32);
};

Anyway awesome project!!

When you mouse over the features like "input" it shows the details in the game window, but if you inadvertently click that "input" text it jumps you back to the top of the page because you are linking to "#" you need to add some preventDefault js or change those anchors to something else...

Hi.

I finally got around to checking the fix for my previous map collision issue. (#18) The fix works great thanks. But now I have a different issue.

A sprite collision with a map tile is being allowed to "passthru" the tile even though stop sprite is set to true.

map.setCollisionByIndex([51,52,53,61,62,63,71,72,73,74,81,101,102,111,112], Phaser.Collision.ANY, true, true, true);

However, this is only happening from 1 side of the tile(s) and if you persist in colliding on that single side. The other 3 sides of the tile(s), block the sprite properly. This means if you are controlling the sprite with an arrow key and keep pressing the key to keep the sprite moving even after you've collided with the tile. (e.g. not change the direction of movement)

I am not sure if this is related, but the sprite that is colliding into the map tile, is rotated 90 degrees and that is the orientation that is allowed to passthru. The other rotation angles are properly stopped on collision.

Thanks for both your help and providing us with your great engine.

Arnie Forte

The first time I call:
myGame.sound.play('gameOver', 0.1, false);

the volume is ignored and is played at volume=1. Subsequent times it is played, the volume param works.

There should be a destroy method you can override in order to better organize state tear down when moving from state to state. Also the Game class will need to automatically call this when switching to the next state.

Hi,

There are lots of garbage collections going on even when nothing happens on screen. I analyzed it and it seems that one of the reasons for the GC is because in several places in the code arrays are cleared by creating new arrays:

PIXI.texturesToUpdate = [];

The proper way to clear an array is to set its length to 0

PIXI.texturesToUpdate.length = 0;

Would you like me to fix this and submit a pull request?

If you continuously call sprite.animation.play(...) it will not play the animation. The play method of AnimationManager needs a guard clause:

public play(name: string, frameRate?: number = null, loop?: bool) {

            if (this.currentAnim == this._anims[name])
                return;

            if (this._anims[name])
            {
                this.currentAnim = this._anims[name];
                this.currentAnim.play(frameRate, loop);
            }

        }

Here is an example of the use case:

function update(){
// Player animations
        if (Math.abs(player.velocity.x) > 10) {
            player.animations.play('walk');
        }
        else{
            player.animations.play('idle');
        }
}

This way I can continuously call the correct animation based on a Sprite's velocity for example but the animation shouldn't get interrupted.

In your docs you recommend getting mamp or wamp. However, on Mac at least if someone had python (very likely) they can just cd to a directory and type:

python -m SimpleHTTPServer

source: http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python

Which can be a much easier way to get things going quickly.

There is an event for when drag has started, and one for when drag has ended - however there is no accompanying event for while an object is being dragged.

For example I need to update some information while an object is being dragged, but I have no way of knowing when that is occurring without polling each frame. This is fine, except if you have many objects, now you have to wire up that booking, and it seems like a simple signal would side step those problems

Hi
Just to let you know that on my freshly installed Safari for snow leopard (5.1.9), with javascript enabled, all out of the box, etc, Phaser's demo don't work
For instance, when I go here:
"http://gametest.mobi/phaser/index.php?f=follow%20sprite.js&d=cameras"

All I get is the blue background screen, the 3 buttons at the top "Home", "View JavaScript", "view TypeScript" and
"You'll learn best from these Tests by viewing the source code
Use the arrow keys / mouse to move around most of them.
Phaser"
At the bottom of the page

I'm using Mac OSX 10.6.8

Since I'm new to github I don't know if this issue was already reported, I've googled and found nothing

In Flixel you could set a group's x,y position. In Phaser Group extends Basic which doesn't have x,y position.

Not sure if group needs things but it would be a nice to have especially when you want to bulk move a group of Sprites into place at the start of a level.

Color param supplied to sprite.makeGraphic does not correctly set a color on a sprite without an image. You can pass in a number but it is not saved in the makeGraphic method:

line 93:

public makeGraphic(width: number, height: number, color: number = 0xffffffff): Sprite {

            this._texture = null;
            this.width = width;
            this.height = height;

            this._dynamicTexture = false;

            return this;
}

And since the color param is not being saved it appears to be hard coded to the render code on line 288:

this._game.stage.context.fillStyle = 'rgb(255,000,255)';

Suggested solution: supply a rgb string in makeGraphic or accept a color and convert it to rbg before storing it to a variable on the sprite instance to be used in the render logic.

Look at the end of this function.

I think that the last couple of items are copy paste errors in the if statement.

Also, shouldn't the conditions be both ways?

This can be even replicated from the starstruck example. Try moving towards the wall and then press jump. The character will suddenly collides to the wall tile's ceiling thus preventing the jump. Is there a solution to this?

Thanks.

Hi Richard!

Suppose the following code:

function update() {
    // game's world size = 800 x 600
    // At the begining sprite is located at (400,300)
    if ( player.position.x < -player.width ) {
      player.position.x = game.width
    } 

    if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
      if ( 0 == player.velocity.x ) {
        player.velocity.x = -200;
        player.animations.play('walk');
      }
    }
  }

It simply moves the sprite to the left side, and when it reaches the border it will appear on the right side then. Unfortunatelly this won't happen until I change player.position.x by player.x:

function update() {
    // game's world size = 800 x 600
    // At the begining sprite is located at (400,300)
    if ( player.x < -player.width ) {
      player.x = game.width
    }
   ...
  }

So my question is, what is the correct attribute I should use? Sprite.{x, y} or Sprite.position.{x,y}?

Thanks!

If you use recycle to create an object when the group is empty it will not correctly supply the passed in ObjectClass a reference to game. I have modified this in my own build to do:

return this.add(new ObjectClass(this._game));

on lines 289 and 317. Since the ObjectClass parameter is not typed nor is the return I am just making the assumption that the simplest primitive a Group can accept is Basic. Is there a use case where you would use group to manage other objects that are not extended from basic?

Here is my use case:

function creatBullet() {
        var bullet:Phaser.Sprite = <Phaser.Sprite>bulletGroup.recycle(Phaser.Sprite);
        bullet.x = player.x + (player.flipped ? 0 : player.width);
        bullet.y = player.y + 25;
        bullet.loadGraphic("entities");
        bullet.flipped = player.flipped;
        bullet.animations.frameName = "bullet-gun.png";
}

You should probably add some more tests for groups.

Hi,

I am just starting with Phaser. I call loader.addImageFile with a presumably incorrect path but it fails silently (no error message in the console). It took me some time to figure that this is the problem. I am using the build product directly (not bringing the entire repo).
Is there some sort of a "Debug" flag I need to turn on to get errors when something fails?

Collision bug when manual reposition object with "x/y" coordinate.

Please see the console.log of this modified example:

http://mihail.ilinov.eu/games/phaser/examples/quadtree/quadtree2-BUG.php

I've added some console.logs and debugger in ArcadePhysics.js when the "abnormal" collision occurred.

Then you can see that before:

        //  Check if the Y hulls actually overlap
        this._bounds1.setTo(body1.x, body1.y - ((body1.deltaY() > 0) ? body1.deltaY() : 0), body1.width, body1.height + body1.deltaAbsY());
        this._bounds2.setTo(body2.x, body2.y - ((body2.deltaY() > 0) ? body2.deltaY() : 0), body2.width, body2.height + body2.deltaAbsY());

Тhe _bounds2.height is ok 16px, and after that when the object.x and object.y is changed than _bounds2.height goes to 314.4999999998763 which is wrong value for shure...

I am running into an issue where a chrome plugin is breaking the ability for Phaser to detect when the focus returns to the game. While I have been able to isolate the issue to a specific plugin one way to resolve this would be to simply add the ability to click back inside of a game to reactivate it once it is paused.

Music will pause when the game pauses, but it will not resume upon unpausing the game.

game.onPause.add(function () {
music.pause();
});
game.onResume.add(function () {
music.resume();
});

var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
console.log("done")

function init(){
    console.log("and initialized")
    myGame; // may not be initialized
}

produces

$ and initialized
$ done

Especially if files are loaded async or via requirejs.

Hi, I could be completely wrong about this (I don't really know JavaScript or TypeScript...), but I think the renderPoint() function starting on line 333 in GeomSprite.ts currently looks like it'll ignore the offset and size parameters passed to it.

public renderPoint(offsetX, offsetY, point, size) {

    offsetX = 0;
    offsetY = 0;
    this._game.stage.context.fillRect(offsetX + point.x, offsetY + point.y, 1, 1);

}

Looking at it's signature I'm guessing it was probably intended to go something like this with the offsets and size being optional:

public renderPoint(offsetX?: number = 0, offsetY?: number = 0, point: Point, size?: number = 1) {

    this._game.stage.context.fillRect(offsetX + point.x, offsetY + point.y, size, size);

}

Though I'd move the point over to be the 1st parameter like this:

public renderPoint(point: Point, offsetX?: number = 0, offsetY?: number = 0, size?: number = 1) {

    this._game.stage.context.fillRect(offsetX + point.x, offsetY + point.y, size, size);

}

I sent this through on twitter, but just in case:

this.bounds.y -= this._cache.boundsy - this._cache.y;

should be:

this.bounds.y -= this._cache.boundsY - this._cache.y;

https://github.com/photonstorm/phaser/blob/master/src/gameobjects/Sprite.js#L293

If I find anything more I'll start doing PRs

I am noticing a strange issue where I see the default frame of a texture atlas before an animation starts playing. In my case I'll see a "bag" graphic (which is my frame 0 in the atlas) and then I'll see the correct zombie animations. After that initial flicker everything is fine. The way I get around this is by setting the sprite.animation.frameName to the first frame of my "walk" animation before adding and playing the animation:

zombie.animations.frameName = "zombie-a-" + style + "-00.png";
zombie.animations.add('walk', ['zombie-a-' + style + '-00.png', 'zombie-a-' + style + '-01.png', 'zombie-a-' + style + '-02.png', 'zombie-a-' + style + '-03.png', 'zombie-a-' + style + '-04.png', 'zombie-a-' + style + '-05.png'], 10, true, false);
zombie.animations.play("walk");

This most likely has to do with the fact that you automatically default the animation to frame 0 which makes sense if you forget to set a graphic for a Sprite but when you are stringing together something more complex it is a problem since you have to manually clear that default image before it renders to the display.

Possible solution:
When you add an animation, assuming no other animations have been added, that should become the default animation. It's first frame should be set so that when it displays for the first time you see the correct animation frame.

This is for the Shoebox application for animating sprites / addTextureAtlas

There are 2 inconsistent ways to get reference to the game instance depending on what class you are in. Game Objects have a private variable _game while states have game. This should be the same throughout the Framework. I suggest using a game getter/setter to clean things up in the Basic class

Plus this is a TS issue since technically you shouldn't be able to access private vars when extending a class so it would be best to shy developers away from directly accessing anything with an underscore.

Particles emitted while the camera is panned away from the world origin, and where the emitter would be outside the visible area if the camera were at world origin, are displayed for their first frame in an incorrect location. After the first rendered frame of the particle's existance, the position is correct, resulting in a brief flash in the incorrect position.

This appears to be because of the following in the reset function setting sprite.position.x/y, which I believe are the display coordinates, to be the passed world coordinates:

Phaser.Sprite.prototype.reset = function(x, y) {
    this.x = x;
    this.y = y;
    this.position.x = x;
    this.position.y = y;

Upon replacing:

    this.position.x = x;
    this.position.y = y;

with:

    this.position.x = this.x - (this.game.world.camera.x * this.scrollFactor.x);
    this.position.y = this.y - (this.game.world.camera.y * this.scrollFactor.y);

the behavior ceases to occur.

While I assume that this issue can occur with any other sprite, I've been unable to replicate it outside of the particle emitter.

In World.ts line 21 is this._game.camera = this.cameras.current; so all games break on this line since in Game.ts line 445 there's a get method but no public set. Commenting out that line in World.ts seems to work but I haven't tested it much.

When setting up texture atlas animation by framename (and possibly any animation) if you request a frame that doesn't exist it defaults to frame 0. Example:

player.animations.add('idle', ['player-fire-' + weaponId + '-00.png', 'player-fire-' + weaponId + '-01.png'], 10, true, false);

In the above example I don't have the last frame in the atlas so the entire animation breaks and only displays whatever is the first frame in the atlas.

The solution would be to have the animation class throw an error if the frame is not found when adding or animating.

So this is a poor setup on my part but it exposed this issue. Basically if you have a base class that sets up a bunch of animations and have another class that extends it then attempts to change its graphics by calling loadGraphic it will not correctly clear the previous reference to the base class's animation image. Here is the example:

// Class 1
constructor(...) {
     super(...);
     this.animations.add("test", [1, 2, 3], 3, true);
     this.animations.play("test");
}

// Class 2
constructor(...) {
     super(...);
     this.loadGraphic("newGraphic"); // <- this is a new size image but with same # of frames
     this.animations.play("test"); // <- should use newGaphic but shows graphic setup in base class
}

Ideally any call to loadGraphic should clear out the previous set of animations or, retain the previously set up animations in the child class but link to the proper sprite/texture image (which would be more ideal in this particular use case). I am using this for two classes that basically have the same exact animations but each one has different base values defined in the class. So technically you should be able to swap out the sprite on the fly and still retain all the animation setup.

Hope that makes sense?

In the Stage constructor we need something like added

this.canvas.id = "game-canvas"

or let us pass in a reference to the canvas element to be used. This is important for specifically styling the canvas element, in my case I want to add some custom re-size logic for Windows 8 but I don't have an easy way to access the canvas tag used by stage.

Hey,
I saw you are calculating the running game time by yourself:
https://github.com/photonstorm/phaser/blob/master/Phaser/Game.ts#L154

Thats not necessary! The callback function for requestAnimationFrame gets the delta time passed in as first argument.

Read more about RAF in this article: http://paulirish.com/2011/requestanimationframe-for-smart-animating/

When Game.prototype.switchState() is called, it calls CameraManager.prototype.destroy() which creates and assigns a new camera to its current instance variable, but the camera instance variable in the Game instance is not updated.

Wouldn't it make sense to use a getter instead of an camera instance variable for the Game class, like this:

public get camera(): Camera {
  return this.world._cameras.current;
}

That way you do not have to keep it in sync manually.

The code that helped detect the problem:

    Phaser.Game.prototype.transitionToState = function(state, color, duration, completeCallback) {
        if (color == null) {
            color = 0x000000;
        }
        if (duration == null) {
            duration = 0.6;
        }

        var _this = this;

        var debugCameras = function(msg) {
            var id1 = _this.camera;
            id1 = id1 && id1.ID;
            var id2 = _this.world;
            id2 = id2 && id2._cameras;
            id2 = id2 && id2.current;
            id2 = id2 && id2.ID;

            console.log('--- ', msg, ' ---');
            console.log(_this.time && _this.time.now);
            console.log('Game#camera.ID: ', id1);
            console.log('Game#world._cameras.current.ID: ', id2);
        };

        var onFadeCompleted = function() {
            debugCameras('Before switchState');
            _this.switchState(state);
            debugCameras('Before flash');
            _this.camera.flash(color, duration / 2, onFlashCompleted);
        };

        var onFlashCompleted = function() {
            debugCameras('After transition');
            completeCallback();
        };

        if (_this.camera) {
            debugCameras('Before fade');
            _this.camera.fade(color, duration / 2, onFadeCompleted);
        } else {
            onFadeCompleted();
        }
    };

That code above behaves differently depending on when and how often it is called. But the third and all following calls to the function print out the "Before fade" message and then do nothing at all, since the fade is called on the wrong Camera instance.

Would be helpful for those of us not using TypeScript.

renderSpriteBounds: function (sprite, color) {

    if (this.context == null)
    {
        return;
    }

    color = color || 'rgba(0, 255, 0, 0.2)';

    this.start();
    this.context.fillStyle = color;
    this.context.fillRect(sprite.worldView.x, sprite.worldView.y, sprite.worldView.width, sprite.worldView.height);
    this.stop();

}

The fix:
this.context.fillRect(sprite.x, sprite.y, sprite.width, sprite.height);

The proposal:
color = color || 'rgba(0, 255, 0, 0.5)';

Because 0.2 was way to hard to be detect :P

I tried to set frames of spritesheet while sprite.animations.add(). But it walks on all frames. I looked your game example (starstruck) and it was not running correctly. There was no log about issue

Normally I reference Game.ts in my classes to "include" most of the core library and started realizing that Game.ts does not have a reference to State.ts. Also, switching between states should be typed to a State class to avoid issues with passing in the wrong type of Class:

public switchState(state, clearWorld: bool = true, clearCache: bool = false) {

Here it doesn't have a type. I would actually suggest using an Interface at the very least.

The Breakout example tries to load breakout.png from there but the folder does not exist.

Hello,

I have been working with the latest Phaser build 0.9.4 and have configured a map. Collision with the map works but when I try to add a callback to the map.collide() call, it does not fire.

Here is my code snippet of what I am trying to accomplish, which is destroy a particular sprite when it collides with an obstacle in the map.

function bulletCollides(targetA) {
console.log("bullet crash");
recycleBullet(targetA);
}
.
.
.
function recycleBullet(bullet) {
if(bullet.exists && bullet.x < -40 || bullet.x > 1640 || bullet.y < -40 || bullet.y > 840) {
bullet.exists = false;
}
}
.
.
function create() {
.
.
map = myGame.createTilemap('jsontiles', 'jsontest', Phaser.Tilemap.FORMAT_TILED_JSON);
map.setCollisionRange(51, 53);
map.setCollisionRange(61, 63);
map.setCollisionRange(71, 73);
.
bullets = myGame.createGroup(50);
// P.S. Bullets are TextureAtlas Animations.
for(var i = 0; i < 50; i++) {
.
.
tempBullet.animations.add('fire_ball', [
'fireball01_01.png',
.
.
],9,true,false);
bullet.add(tempBullet);
}
.
.
.
}

function update() {
.
.
.
map.collide(r_dragon); // Player Collision with map obstacle
map.collide(bullets, bulletCollides); // Player's bullet crashes with map obstacle
}

As you can see I pretty much combined code from the examples. I am not sure if I am missing something.

Thanks,
Arnie Forte

The Sprite animation needs a callback or way to know when it is finished.

Sorry to not include a pull request for this, but:

this._images['__default'].frame = new Phaser.Animation.Frame(0, 0, 32, 32, '', '');

leads to an invalid default, as the first argument to Frame() should be an index.

https://github.com/photonstorm/phaser/blob/master/src/loader/Cache.js#L180

I'd like to propose removing the tightly coupled create methods you have on Game and State for groups, sprites, particles, etc and add them into a Create Factory class. Ideally you would get a reference to create in the game instance like so:

game.create

examples:

game.create.createCamera()
game.create.createSprite()
game.create.createGroup()

which would contain the same helper methods you already have. All this factory would need is a reference to game. Once this is in place, the State class can simply use the same game.create instance allowing developers to extend the create factory with their own class and add additional functionality to it that will work throughout the game engine.

This would also allow you to decouple the hard coded methods and project the engine from future updates down the line in case you add new primitive elements to the game.

Flixel had a helper method called add() which quickly allowed you to add sprites to the world without having to talk to the world directly. Currently there are a bunch of create helper methods but no simple way to add something created manually such as custom sprites.

I'm trying to create a game canvas within a specific container element. So I've got:

var game = new Phaser.Game(width, height, Phaser.AUTO, container,
{preload: preload, create: create, update: update}, true);

But the canvas element is not created inside the 'container' element - it's just appended to the end of the DOM.

What am I doing wrong?

Thanks!

If a state contains a preloader that does not load anything and has a create() function that calls start() to another state, the create() function of the new state will be called twice. To repro, comment out the load() calls in Preloader class of the wip/examples/state example; MainMenu.create() should show up twice.

A convoluted situation, but it's a dormant bug that may show up in other, more normal circumstances.

In Flixel there were direction constants for up, right, down, left, floor and ceiling. I noticed .facing still exists but there is no addition logic to support this which was helpful in Flixel. Can these constants bee added in Phaser or should they stay out and consider deprecating facing?

No matter which animation_id you use in Animation.play() method, it will always play the last animation added.

Suppose this code:

  player.animations.add('idle', ['idle_0.png'] , 1, false, false);
  player.animations.add('run', ['run_0.png', 'run_1.png', 'run_2.png'], 1, true, false);
  player.animations.add('jump', ['jump_0.png', 'jump_1.png', 'jump_2.png'], 1, true, false);

  player.animations.play('idle');

Despite the fact I choose the 'idle' animation to be played actually the 'jump' animation will be played, no matter which animation_id I choose.

Looking at the code Phaser.Animation#L61 I found:

  this._frames = frames;

The value of "frames" variable is the pointer of "this._outputFrames", not its value.

It means the next time Animation.add() method is invoked the attribute this._outputFrames will be updated with a new set of frames AnimationManager.js#L129 :

  this._frameData.getFrameIndexes(frames, useNumericIndex, this._outputFrames);

Therefore the attribute "_frames" from all animations will point to the last animation added, because all _frames variables points to this._outputFrames attribue.

My suggestion to fix this problem could be make those changes at AnimationManager.js#L127:

  var outputFrames = [];
  this._frameData.getFrameIndexes(frames, useNumericIndex, outputFrames);

  this._anims[name] = new Phaser.Animation(this.game, this.sprite, name, this._frameData, outputFrames, frameRate, loop);

  // If this._outputFrames is used in another place, then you could do this
  this._outputFrames = outputFrames;

Been talk to you about this for a while but wanted to get it on the to do list. We need a Texture Atlas based font class. Ideally it would extend Basic and allow you to add to the world just like a Sprite so it's part of the render loop. Also I'd like to have some way of having it cache the text so when you set text on it, that gets rendered to an off screen canvas so when it draws to the display it's not rendering each character individually. This should be optional since it would be expensive for something that gets updated frequently.

I have been working on my own version and will try to clean it up and attach to the issue if you don't get to it first.

When testing animations.frame and animations.currentFrame.index the two properties don't return the same value. I am expecting animations.frame to return the current frame number of an animation similar to how Flixel worked.

Here is an example:

//create
this.animations.add("hide", [1, 2, 3], 1, false);
this.animations.play("hide");

//update
console.log("frame", this.animations.frame, this.animations.currentFrame.index);

Right now animation.frame will continue to return 0 even when currentFrame returns 3 which is the correct frame at the end of the animation.

In isEmpty(), line 265 is:

if (this._diameter < 1)

I think it should probably be:

if (this._diameter <= 0)

Sorry, if I knew how to use Git I'd submit a fix.