1 decade ago by subelsky
Hello,
I have an entity I'm trying to draw not as a particle in motion but as a beam of light. I can't quite figure out how to get the start and ending coordinates of the line correct, though.
Here's the code I'm using. The reason I'm multiplying by 32, below, is because this is actually part of an MMO and those coordinates come from the server, which I'd written before discovering Impact. My map tiles are 32 pixels square, so that multiplier is what translates from server map coordinates to Impact pixel coordinates.
The lines representing laser beams end up getting drawn but always from the upper left portion of the canvas to the lower right, in a diagonal line. Very strange. Does anyone see anything I'm missing?
-Mike
I have an entity I'm trying to draw not as a particle in motion but as a beam of light. I can't quite figure out how to get the start and ending coordinates of the line correct, though.
Here's the code I'm using. The reason I'm multiplying by 32, below, is because this is actually part of an MMO and those coordinates come from the server, which I'd written before discovering Impact. My map tiles are 32 pixels square, so that multiplier is what translates from server map coordinates to Impact pixel coordinates.
The lines representing laser beams end up getting drawn but always from the upper left portion of the canvas to the lower right, in a diagonal line. Very strange. Does anyone see anything I'm missing?
-Mike
ig.module("game.entities.laser").requires("impact.entity").defines(function() { EntityLaser = ig.Entity.extend({ start: {}, finish: {}, init: function(x, y, settings) { this.parent(x,y,settings); this.start.x = ig.system.getDrawPos(this.pos.x); this.start.y = ig.system.getDrawPos(this.pos.y); this.finish.x = ig.system.getDrawPos(settings.target.x * 32); this.finish.y = ig.system.getDrawPos(settings.target.y * 32); this.timer = new ig.Timer(1); }, update: function() { if (this.timer.delta() >= 0) { this.kill(); } this.parent(); }, draw: function() { ig.system.context.strokeStyle = "red"; ig.system.context.moveTo(this.start.x,this.start.y); ig.system.context.lineTo(this.target.x,this.target.y); ig.system.context.stroke(); } }); });