Drawing sprites with bitmapdata

[Ocelot]

Im trying to make a game where player will run on whatever I draw. I tried just drawing(adding) sprites where my mouse is but as we know, if you move your mouse/finger a bit faster it draws little dots (assuming sprite is a dot). Then I tried inserting some sort of manual interpolation or something similar and it was a partial success but my drawings where too rough ( I want a smooth line, not zigzags or stairs looking line) and I dont know how to do it right. Last thing I tried is using bitmapdata and drawing is perfect but I cant use physics on it. For example I want it to move left all the time just like in 2d endless runners and for player to be able to run on it. Im sure there is a solution but I cant find it so I would really need your help with it.

RoadDraw.Game = function(game) {
  this.totalBuildings;
  this.buildings;
  this.spriteMaterial;
  this.worldMaterial;
  this.boxMaterial;
  this.dotMaterial;
  this.lastX;
  this.lastY;
  this.currentX;
  this.currentY;
  this.betweenClicks = false;
  this.player;
  this.loop;
};

var bmd;

RoadDraw.Game.prototype = {
    
  create: function() {
    this.physics.startSystem(Phaser.Physics.P2JS);
    this.physics.p2.gravity.y = 350;
    this.totalBuildings = 4;
    this.buildWorld();
  },

  buildWorld: function() {
    this.add.image(0,0, 'sky');
    player = this.add.sprite(50, 50, 'player');
    player.anchor.setTo(0.5, 0.5);
    player.scale.setTo(1,1);
    this.physics.p2.enable(player);
    player.animations.add('run', [5, 6, 7, 8], 10, true);
    player.body.fixedRotation = true;
    bmd = this.add.bitmapData(800,600);        
      sprite = this.add.sprite(0, 0, bmd);         
      bmd.ctx.beginPath();        
      bmd.ctx.strokeStyle = "black"; 
      //bmd.addToWorld();
	  bmd.smoothed = false;
  },

  update: function() {
      if(this.input.activePointer.isDown) {
            if(!this.betweenClicks) {                 
				bmd.ctx.lineTo(this.input.x, this.input.y);
				bmd.ctx.lineWidth = 2;
				bmd.ctx.stroke();
				bmd.dirty = true; 
				this.loop = this.add.sprite(this.input.x, this.input.y, bmd);
				bmd.draw(this.loop);
				this.loop.scale.setTo(0.004,0.004);
				this.loop.anchor.set(0.5);
				this.loop.checkWorldBounds = true;
				this.loop.outOfBoundsKill = true;
				this.physics.p2.enable(this.loop);
				this.loop.body.damping= 0;
				this.loop.body.mass= 0.1;
				this.loop.body.immovable = true;
				this.loop.body.moveLeft(140);
				this.loop.body.kinematic = true;
            }
            this.betweenClicks = false;
		}
        else {
            bmd.ctx.closePath();
			bmd.ctx.beginPath();
			bmd.ctx.beginPath();
            this.betweenClicks = true;
        }
		
        if(player) {
		  player.animations.play("run");
		  player.body.velocity.x = 0;
        }
	}
}

 

 

[benlooi]

Not a good idea to do your drawing within UPDATE, as it cycles about 60 times a second. I tried that before for inputDown events and it was disastrous....I guess that's why you are getting dots when you move.

 

Try doing it within CREATE with something like:

sprite.inputEnabled = true;

sprite.input.enableDrag();

sprite.events.onInputDown.add(drawPoints, this);

sprite.events.onDragStart.add(pathToPoints, this);

sprite.events.onDragStop.add(pathEndPoints,this);

 

Good luck!

[Ocelot]

Thank you for advice, I will try that.

[Ocelot]

Unfortunately that didnt do it. Im almost sure that the only way to do what I want is not bitmap, but to put inside update function some sort of custom drawing. Like Line(startX, startY, endX, endY), but I dont know how to do it manually, I only know how to create a new line with new Phaser.Line. I tried to but failed (mostly it wasnt a straight or "fluid" curve but something like "mini" sin function).