Mizukage Posted October 24, 2015 Share Posted October 24, 2015 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 herethis.game.add.sprite(50, 50, this.bar); Link to comment Share on other sites More sharing options...
chongdashu Posted October 24, 2015 Share Posted October 24, 2015 in update(), set the sprite's position to be camera.x + 50 and camera.y + 50 to make it fixed to the window? Link to comment Share on other sites More sharing options...
Mizukage Posted October 24, 2015 Author Share Posted October 24, 2015 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. Link to comment Share on other sites More sharing options...
chongdashu Posted October 24, 2015 Share Posted October 24, 2015 this.game.debug.text('Name: ' + this.player.name, this.game.camera.x + 30, this.game.camera.y + 30); Link to comment Share on other sites More sharing options...
Mizukage Posted October 24, 2015 Author Share Posted October 24, 2015 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 Link to comment Share on other sites More sharing options...
chongdashu Posted October 24, 2015 Share Posted October 24, 2015 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 Link to comment Share on other sites More sharing options...
chongdashu Posted October 24, 2015 Share Posted October 24, 2015 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 More sharing options...
Mizukage Posted October 24, 2015 Author Share Posted October 24, 2015 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; },Updatethis.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 More sharing options...
chongdashu Posted October 24, 2015 Share Posted October 24, 2015 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. Link to comment Share on other sites More sharing options...
Mizukage Posted October 24, 2015 Author Share Posted October 24, 2015 I have in create, but when I remove it from update then is't not visible on screen Link to comment Share on other sites More sharing options...
chongdashu Posted October 24, 2015 Share Posted October 24, 2015 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, sothis.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 More sharing options...
Mizukage Posted October 24, 2015 Author Share Posted October 24, 2015 Thanks, working greate chongdashu 1 Link to comment Share on other sites More sharing options...
Recommended Posts