How to set sprite on window position not game.world?

[Mizukage]

My game have 1280x720 but tilemap is much larger so if I want to set HP bar on the left top screen corner it's not working..

 

 

If I use this, than ofc sprite will be on the center of huge map, not game window 

this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, this.bar);

Same here

this.game.add.sprite(50, 50, this.bar);

[chongdashu]

in update(), set the sprite's position to be camera.x + 50 and camera.y + 50 to make it fixed to the window?

[Mizukage]

Hmm, how works 

this.game.debug.text('Name: ' + this.player.name, 30, 30);

Is is always in correct position, 30 30 for game window not map. 

[chongdashu]

this.game.debug.text('Name: ' + this.player.name, this.game.camera.x + 30, this.game.camera.y + 30);

[Mizukage]

I mean in this case its working - > this.game.debug.text('Name: ' + this.player.name, 30, 30);

 

BTW Your code is almost fine, but there is problem with drawing, working like a paint

[chongdashu]

I think it's because Debug.text renders using a canvas context, which is aligned to the window, not the game world.

 

https://github.com/photonstorm/phaser/blob/v2.4.4/src/utils/Debug.js line 659

[chongdashu]

BTW Your code is almost fine, but there is problem with drawing, working like a paint

 

 

Are you doing

 

this.game.add.sprite(this.game.camera.x + 50,  this.game.camerae.y + 50, this.bar); 

 

in the update method? If so, it will keep creating new instances and cause the smearing effect. That's not what you want.

 

You want to do:

function create() {   // ...   this.theSprite = this.game.add.sprite(50, 50, this.bar);}

function update() {  this.theSprite.x = this.game.camera.x + 50;  this.theSprite.y = this.game.camera.y + 50;}

[Mizukage]

Create 

      this.barProgress = this.player.hp;this.bar = this.add.bitmapData(100, 8);this.game.add.sprite(this.game.camera.x + 50, this.game.camera.y + 50, this.bar);

Global

    barUpdate: function() {            if (this.player.hp < 32) {               this.bar.context.fillStyle = '#f00';               }            else if (this.player.hp < 64) {                this.bar.context.fillStyle = '#ff0';            }            else {                this.bar.context.fillStyle = '#0f0';        }        // draw the bar        this.bar.context.fillRect(0, 0, this.player.hp, 8);                        // important - without this line, the context will never be updated on the GPU when using webGL        this.bar.dirty = true;        },

Update

this.game.add.sprite(this.game.camera.x + 50, this.game.camera.y + 50, this.bar);....this.barUpdate();

There is some problem with no erasing old bar, like a :

 

draw a bar with full hp -> after dmg function check -> erase old and draw new bar -> .....

[chongdashu]

Like I said, do not put this.game.add.sprite(this.game.camera.x + 50, this.game.camera.y + 50, this.bar); in update.

Put the code in create() and assign the sprite created to a variable.

 

In update(), simply update the of the sprite using the stored variable.

 

Take a look at what I posted above.

[Mizukage]

I have in create, but when I remove it from update then is't not visible on screen

[chongdashu]

Please take a look at this fiddle: https://jsfiddle.net/chongdashu/9geex7ap/

 

You are creating a BitmapData object, and adding it to the game as a sprite in create():

 

in create():

this.game.add.sprite(this.game.camera.x + 50, this.game.camera.y + 50, this.bar);

You need to get a reference to that sprite, so

this.barSprite = this.game.add.sprite(this.game.camera.x + 50, this.game.camera.y + 50, this.bar);

Then in update, remove the code where you recreate a sprite an add it and replace it with:

 

In Update()

this.barSprite.x = this.game.camera.x + 50;this.barSprite.y = this.game.camera.y + 50;// ...this.barUpdate();;

[Mizukage]

Thanks, working greate