Forums » Help » Stretching one pixel height tile.

I have the following image:

ig.module('game.entities.laser-beam').requires('impact.entity').defines(function() { EntityLaserBeam = ig.Entity.extend({ size: { x: 6, y: 0 }, offset: { x: 0, y: 0 }, _wmIgnore: true, type: ig.Entity.TYPE.B, checkAgainst: ig.Entity.TYPE.A, collides: ig.Entity.COLLIDES.NEVER, gravityFactor: 0, animSheet: new ig.AnimationSheet('media/sprites/laser-beam.png', 6, 1), lifetime: 1, fadetime: 1, canKill: false, sfxOn: new ig.Sound('media/sounds/respawn.*'), sfxOff: new ig.Sound('media/sounds/die-respawn.*'), init: function(x, y, settings) { this.parent(x, y, settings); this.addAnim('idle', 1, [0, 1]); this.idleTimer = new ig.Timer(); }, check: function(other) { if (this.canKill) { other.receiveDamage(2, this); } }, update: function() { if (this.currentAnim.frame == 0) { this.canKill = true; } else { this.collides = ig.Entity.COLLIDES.PASSIVE; this.canKill = false; } this.parent(); }, receiveDamage: function(amount, from) {} }); });
The LaserDoorTopEntity door entity:

ig.module('game.entities.laser-door-top').requires('game.entities.laser-beam', 'impact.entity').defines(function() {
    EntityLaserDoorTop = ig.Entity.extend({
        size: {
            x: 16,
            y: 16
        },
		gravityFactor: 0,
        animSheet: new ig.AnimationSheet('media/sprites/laser-door-top.png', 16, 16),
        target: null,
        targets: [],
        currentTarget: 0,
		finished: false,
		init: function(x, y, settings) {
			this.addAnim('idle', 1, [0]);
			this.parent(x, y, settings);
            this.targets = ig.ksort(this.target);
		},
        update: function() {
			this.parent();
            var target = ig.game.getEntityByName(this.targets[this.currentTarget]);
			//console.log("this.targets[0]=" + this.targets[0]);
			//console.log("target=" + target);
            
			if (target) {
				if (!this.finished) {
		            var distanceTo = this.distanceTo(target) + 8;
					//console.log("distanceTo=" + distanceTo);
					for (var i = 0; i < distanceTo; i++) {
						var posX = (this.pos.x + 5);
						var posY = (this.pos.y + i + 4);
						// BIG performance hit:
						ig.game.spawnEntity(EntityLaserBeam, posX, posY);
					}
					this.finished = true;
				}
			}
		}
    });
});

This creates the following with collision boxes turned on:

// This line is the big performance hit: ig.game.spawnEntity(EntityLaserBeam, posX, posY);
What I would like to do is stretch the EntityLaserBeam to a certain height by using the draw() method and ig.system.context.scale and only ever spawn it once.

This was the post I found it on:

http://impactjs.com/forums/help/how-to-stretch-an-image-during-gameplay

Also keep in mind that this will be an iOS game and ig.system.context as far as I know has not yet been completely implemented in the current version of iOSImpact.

draw: function() {
    ig.system.context.save();
    ig.system.context.scale(0, 1);
    
    // draw whatever you want here. E.g. you could just call 
    this.parent() 
    // to draw the entity's animation
    
    ig.system.context.restore();
}

I tried using the code above, however it doesn't seem to be working as expected. I don't see the image at all let alone stretched. Perhaps I'm using it the wrong way?

Thanks in advance for this one. I've been struggling with it for a while so any help would be greatly appreciated.

What sort of range are the door heights ? would it not be better to create 2 or 3 larger sprites and overlap them ?

Quote from StuartTresadern
What sort of range are the door heights ? would it not be better to create 2 or 3 larger sprites and overlap them ?

The heights don't really exceed 200px in height, however I've already tried your suggestion of creating 2 or 3 sprites and overlapping them. The problem is the decrease in the performance still.

I figure only ever spawning one sprite and stretching it would mean that it's only one entity as opposed to 2 or 3.

I can give it another shot but the performance is really shocking using iOSImpact.

Looks like a lot of entities for such a minor effect.

Perhaps consider creating a larger laser graphic, say 6 x 256 pixels (which should be enough since your heights "don't really exceed 200px").

Then only create one laser entity but when you set the animation image for it, make it 80px, 120px, 200px, or whatever height you need it to be.

// Load image resource and set visual height to 200px.
animSheet: new ig.AnimationSheet('media/laser.png', 6, 200),

@Joncom: This is actually what I ended up implementing in the end. Thanks for the response, much appreciated.

Also thanks to @StuartTresadern who gave me the original idea.