Phaser Points rendering incorrect location after adding sprite?

[shawnbless]

I'm having a problem rendering phaser points after adding an animated sprite.

 

I have created a screen full of stars and they are initially rendering as I would expect:

 

 

Now if I add an animated sprite to the center of the world:

 

rocketStarShip = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'rocketstarship');
            rocketStarShip.anchor.setTo(0.5,0.5);
            rocketStarShip.scale.setTo(1.0, 1.0);
            rocketStarShip.animations.add('fly');
            rocketStarShip.animations.play('fly', 3, true);

 

My stars render into the lower right quadrant of the canvas:

 

But if I turn on debug for Points:

 

this.game.debug.renderPoint(starPoint, 'rgb(197,193,170)');

 

I can see that my Points are still rendering into the full screen:

 

I'm not sure if I have a bug, or if I have a fundamental problem in understanding Phaser coordinates.

 

I've put up a test demo at :http://rocketstar.comxa.com/Test/

 

Click the screen to rotate thru example states.

 

Thanks for taking a look.  I'm having a ton of fun with Phaser.

Shawn Blessing

Rocket Star

 

[rich]

How are you rendering the stars? The problem is the canvas transform. If you look at the debug class, look at what renderPoint does first (resets the canvas transform), then does the render, then sets is back again. You'll need to do the same in whatever function you're using to render the points.

[shawnbless]

Rich,

 

I don't think I'm doing anything out of the ordinary.  I initialize the star array on create:, also set the rocketship sprite in the on create:, in update I calculate new positions for the stars, and in render draw them, following the rotate point phaser example.  Below you will find the code.  I'll examine debug the renderPoint code and see if I can duplicate the transform.  Thanks.

 

I'm not sure I understand why adding a sprite would change the transform?

TestGame.MainMenu = function (game) {	//	Our main menu	this.game = game;};TestGame.MainMenu.prototype = {	create: function () {        this.game.stage.backgroundColor = '#000000';        this.game.world.setBounds(0,0, 1280, 720);                //Setup Stars        for( var i=0; i<starscount;i++)        {            starArrayX[i] = this.game.rnd.integerInRange(starPosX, starPosX + starsWidth);            starArrayY[i] = this.game.rnd.integerInRange(starPosY, starPosY + starsHeight);            starPoint[i] = new Phaser.Point(starArrayX[i], starArrayY[i]);            starSpeed[i] = 1;        }                rocketStarShip = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'rocketstarship');        rocketStarShip.anchor.setTo(0.5,0.5);        rocketStarShip.scale.setTo(1.0, 1.0);        rocketStarShip.animations.add('fly');        rocketStarShip.animations.play('fly', 3, true);                titlemusic.play();        titlemusic.volume = 0.8;        this.game.input.onDown.add(this.startGame, this);                t = this.game.time.now + 80;	},        update: function() {        for (var i=0; i<starscount; i++)        {            starSpeed[i] = 1 + (i % 3);            starArrayX[i] = starPoint[i].x + starSpeed[i];            if (starArrayX[i] >= starsWidth)            {                starArrayX[i] = 0;            }        }    },        render: function() {        for (var i=0; i<starscount; i++)        {            if (starArrayX[i] > -1 && starArrayY[i] > -1 && starArrayX[i] < (starPosX + starsWidth) && starArrayY[i] < (starPosY + starsHeight))            {                //Draw a star                starPoint[i].setTo(starArrayX[i], starArrayY[i]);                                this.game.context.fillStyle = 'rgb(197,193,170)';                this.game.context.fillRect(starPoint[i].x, starPoint[i].y, starSpeed[i], starSpeed[i]);                //this.game.debug.renderPoint(starPoint[i], 'rgb(197,193,170)');            }        }        this.game.debug.renderCameraInfo(this.game.camera, 32,32);        this.game.debug.renderSpriteInfo(rocketStarShip, 32, 100);            },    startGame: function () {        titlemusic.stop();        		this.game.state.start('game');	},}

[shawnbless]

Thanks Rich!  Doing what you said worked.  Maybe this should be in the examples?

 

Modified render function:

    render: function () {                this.game.context.save();        this.game.context.setTransform(1, 0, 0, 1, 0, 0);                // draw stars        for (var i=0; i<starscount; i++)        {            if (starArrayX[i] > -1 && starArrayY[i] > -1 && starArrayX[i] < (starPosX + starsWidth) && starArrayY[i] < (starPosY + starsHeight))            {                //Draw a star                starPoint[i].setTo(starArrayX[i], starArrayY[i]);                                this.game.context.fillStyle = 'rgb(197,193,170)';                this.game.context.fillRect(starPoint[i].x, starPoint[i].y, starSpeed[i], starSpeed[i]);            }        }                this.game.context.restore();    },

[rich]

Yeah maybe, this specific use is a bit of an edge case, but definitely something that shows how to reset the transform first.

[rich]

Actually, what would make more sense is for Phaser to just reset the transform automatically before running your render function

[Mike]

Beside that, very cool stars!

 

And I have a question, the scene animates cool without the ship, but with the ship it lags a bit, are the stars twice as much, or is there something else 

slowing down the render (maybe on purpose) ?

 

I didn't dig in the code, just a fast impression.

[rich]

I  would recommend that instead of using fillRect (which afaik the browser cannot GPU optimise at all) you would be better off just making a 2x2 sized PNG and using drawImage on it. You could do this at run-time using a RenderTexture if you like, but could also just load one in.

[shawnbless]

@Mike: Depends on what demo you are looking at.  If you are looking at the test that I setup online, without the ship it is just the stars rendering.  With the ship, and debug render point on, you can still see the original problem because the stars still render in the lower right quadrant and in the debug render, twice, causing the slowdown.

 

If you look at the fixed code, yes it appears slower with the ship and my assumption is the context save, new transform and context restore on every update is taking a pretty big hit.

 

@Rich: Man, I would love to use a RenderTexture, but I'll be damned if I'm not smart enough to figure out how to draw pixels x & y on them.  I actually want to use one for a rasterbar and change the pixel colors every update, but how do I change to the next pixel?  I would love to see an example of how to use them.  I looked at some Pixie examples and all it seems to do is repeatedly copy into another texture.

 

I will be looking at using drawImage, sprites, or some other means.  The stars are kind of vital to my logo.

 

Thanks for all your help Rich!

[rich]

Whatever you do, don't use sprites for your stars. I've got several starfield routines kicking around and will port one over when I get back to the UK.