Jump to content

Bitmapdata sprite line on large map


gabdab
 Share

Recommended Posts

[SOLVED]

line end (pointer position) must be relative to bitmapdata so : bitmapdata center +( pointer.pos - sprite.pos):

      this.bmd.ctx.lineTo(148+this.input.worldX-this.sprite.x,148+this.input.worldY-this.sprite.y);

How does phaser handle such relative positions ?

    drawLine: function(){ 
        

         this.sprite.x= player.body.position.x;
        this.sprite.y=player.body.position.y;
      this.bmd.clear();
      this.bmd.ctx.beginPath();
      this.bmd.ctx.moveTo(148,148);
      this.bmd.ctx.lineTo(148+this.input.worldX-this.sprite.x,148+this.input.worldY-this.sprite.y);
        //this.input.x-this.sprite.x , this.input.y-this.sprite.y);
        //this.input.activePointer.position.x+this.sprite.x,this.input.activePointer.position.y+this.sprite.y);
        //this.input.activePointer.position.x,this.input.activePointer.position.y);
        console.log(this.sprite.x-this.input.worldX,this.sprite.y-this.input.worldY);
        //this.sprite.x+this.input.activePointer.position.x,this.sprite.y+this.input.activePointer.position.y);
      this.bmd.ctx.lineWidth = 4;
      this.bmd.ctx.stroke();
      this.bmd.ctx.closePath();
      this.bmd.render();
      //this.bmd.refreshBuffer();
      this.bmd.update();

}

[WAS]

-larger than canvas map scrolling  - 

I am struggling to get a simple mouse pointer / player line behaving properly on a   2516x2146 map inside a 960x640 canvas .

Looks like mouse pointer position is wrong , not calculating map scroll somehow.

I am using  this example , which doesn't work as expected in my code : http://codepen.io/codevinsky/pen/dAjDp

create:

                
        this.bmd = game.add.bitmapData(296, 296);
        var color = 'white';
        this.bmd.ctx.beginPath();
        this.bmd.ctx.lineWidth = "4";
        this.bmd.ctx.strokeStyle = color;
        this.bmd.ctx.stroke();
        this.sprite = game.add.sprite(player.body.position.x, player.body.position.y, this.bmd); 
        this.sprite.anchor.set(0.5);

update:

    drawLine: function(){ 
        
        this.sprite.x= player.body.position.x;
        this.sprite.y=player.body.position.y;
      this.bmd.clear();
      this.bmd.ctx.beginPath();
      this.bmd.ctx.moveTo(148,148);
      this.bmd.ctx.lineTo( this.input.activePointer.position.x,this.input.activePointer.position.y);

      this.bmd.ctx.lineWidth = 4;
      this.bmd.ctx.stroke();
      this.bmd.ctx.closePath();
      this.bmd.render();
      //this.bmd.refreshBuffer();
      this.bmd.update();
    },

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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