Forums » Help » Draw images pixel by pixel

I want to make a game without using images, I was trying to create a plugin to draw pixel by pixel but it is quite slow ...

How I can improve this little plugin?

Plugin:

ig.module('plugins.drawsprite')
.defines(function() {
	ig.drawsprite = function(data) {
		if(data.flip)
			for (var y = 0; y < data.sprite.length; y++) {
				data.sprite[y] = data.sprite[y].reverse()
			}

		var scale = ig.system.scale
		var ctx = ig.system.context
		ctx.save()
	
		for (var y = 0; y < data.sprite.length; y++) {
			for (var x = 0; x < data.sprite[y].length; x++) {
				ctx.fillStyle = 'rgba(' + data.palette[data.sprite[y][x]] + ')'
				ctx.fillRect(data.pos.x + (x * scale), data.pos.y + (y * scale), 1 * scale, 1 * scale)
			}
		}

		ctx.restore()
	}
});

Code:

ig.drawsprite({
	palette: {
		0: '0,0,0,0',
		1: '202,69,36,1',
		2: '171,58,50,1',
		3: '119,40,34,1'
	},
	sprite: [
		[1,2,3,3,2,2,2,2,1,2],
		[1,2,3,3,2,2,2,2,1,2],
		[1,2,3,3,2,2,2,2,1,2],
		[1,2,3,3,2,2,2,2,1,2],
		[1,2,3,3,2,2,2,2,1,2],
		[1,2,3,3,2,2,2,2,1,2],
		[1,2,3,3,2,2,2,2,1,2],
		[1,2,3,3,2,2,2,2,1,2],
		[1,2,3,3,2,2,2,2,1,2],
		[1,2,3,3,2,2,2,2,1,2]
	],
	pos: { x: 20 * ig.system.scale, y: 20 * ig.system.scale }
})

THANKS!

Just a couple thoughts for you...

If you are doing things on a pixel level you should look into canvas pixel manipulation rather than doing draw rects. Looks like you are adjusting for scale. You could draw it by pixel to an offscreen canvas and then scale it. The drawing would be cached then also.

Thanks for the tip!
Now is really fast, this week i update the post with final code.
It's fun not use any image file on the game