Forums » Help » Drawing a "laser beam" effect

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

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

I didn't have time to put together a demo, but have you taken into account ig.game.screen.x and y? And ig.system.scale possibly too. :)

That's why I'm using ig.system.getDrawPos which takes those into account

ig.system.getDrawPos() does not take the screen position into account, it only accounts for scaling. If it did take the screen position into account, drawing a HUD or text overlay would be difficult. I guess I should make this more clear in the documentation :/

You have to subtract the screen position yourself:

var drawX = this.pos.x - ig.game.screen.x;
var drawY = this.pos.y - ig.game.screen.y;
//... etc.

You should do this in the draw() method, as the screen position could change between the init (or update) and actually drawing the line.

Thanks! That fixed it! I also forgot to use beginPath and closePath to complete each laser shape. Here's what the code looks like now:

ig.module("game.entities.laser").requires("impact.entity").defines(function() {
    EntityLaser = ig.Entity.extend({
        start: {},
        target: {},
 
        init: function(x, y, settings) {
          this.parent(x,y,settings);

          this.target.x = (settings.target.x * 32) + 16;
          this.target.y = (settings.target.y * 32) + 16;

          this.timer = new ig.Timer(0.25);
        },
 
        update: function() {
          if (this.timer.delta() >= 0) {
            this.kill();
          }

          this.parent();
        },

        draw: function() {
          var startX = ig.system.getDrawPos(this.pos.x - ig.game.screen.x);
          var startY = ig.system.getDrawPos(this.pos.y - ig.game.screen.y);
                
          var endX = ig.system.getDrawPos(this.target.x-ig.game.screen.x);
          var endY = ig.system.getDrawPos(this.target.y-ig.game.screen.y);
                
          ig.system.context.strokeStyle = "red";
          ig.system.context.beginPath();
          ig.system.context.moveTo(startX,startY);
          ig.system.context.lineTo(endX,endY);
          ig.system.context.stroke();
          ig.system.context.closePath();
        }
    });
});

Thanks for updating with your solution, Subelsky. I want to do something similar soon, so this will be a great help :)

How do you get collision against this though as its not an entity?

and i also guess this wouldnt work on ios?

I am wondering the same thing, how do you get collision from two drawings

It is an entity only difference is that its using canvas drawing instead of sprites. Heres a small sample based on the above code that will create a pulse style laser. The point of the laser is the bit that does all the work the line is just for looks.

 EntityLaser = ig.Entity.extend({

            start: {},
            target: {},
            gravityFactor:0,
            laserLength:null,
            maxVel:{x:1000, y:1000},
            type:ig.Entity.TYPE.NONE,
            checkAgainst:ig.Entity.TYPE.B,
            collides:ig.Entity.COLLIDES.PASSIVE,

            init: function(x, y, settings) {
                this.parent(x,y,settings);

                this.vel.x = (settings.flip ? this.maxVel.x : -this.maxVel.x);
                this.laserLength= (settings.flip ? 50 : -50);
                this.timer = new ig.Timer(1);
            },

            update: function() {
                if (this.timer.delta() >= 0) {
                    this.kill();
                }

                this.parent();
            },

            draw: function() {

                var laserEndX = ig.system.getDrawPos(this.pos.x-ig.game.screen.x);
                var laserEndY = ig.system.getDrawPos((this.pos.y-ig.game.screen.y));

                var laserStartX  = ig.system.getDrawPos((this.pos.x-ig.game.screen.x)+ this.laserLength);
                var laserStartY  = ig.system.getDrawPos(this.pos.y-ig.game.screen.y); // straight line laser only demo

                ig.system.context.strokeStyle = "red";
                ig.system.context.lineWidth = .5;
                ig.system.context.beginPath();
                ig.system.context.moveTo(laserStartX,laserStartY);
                ig.system.context.lineTo(laserEndX,laserEndY);
                ig.system.context.stroke();
                ig.system.context.closePath();
            },
            check:function (other) {

                    other.receiveDamage(10, this);
                    this.kill();

            }
        });

You can then simply spawn the laser from your player:

if( ig.input.pressed('shoot') ) {
                			ig.game.spawnEntity( EntityLaser, this.pos.x, this.pos.y+(this.size.y/2) , {flip:this.flip} );
                		}

Hope that helps.

Thanks for this code. It helped me make this rope effect for a moving platform which is a well in the sky. The bucket goes up and down and can be jumped on.

Page 1 of 1