Jump to content

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


Recommended Posts

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);
Link to comment
Share on other sites

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;}
Link to comment
Share on other sites


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


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


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 -> .....

Link to comment
Share on other sites

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();;
Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...