siemiatj/parallax.js

## parallax.js
/*  jerev - 10/2012 - parallax.js

Be sure to require plugins.parallax, and place this file in lib/plugins/

Parallax usage
    p = new Parallax();
    p.add('path/to/image.ext', {distance: 1, y: 0})
    p.add('path/to/other/image.ext', {distance: 5, y: 0})

    p.move(speed);

    p.draw();

Please note: you need to preload the images, you can do this before you call ig.main()
    new ig.Image('path/to/image.ext');
    new ig.Image('path/to/other/image.ext');
    ig.main(..);

I've modified it to draw parallax backgrounds on a separate canvas. My html/css is as follows :

<!DOCTYPE html>
<html>
<head>
    ...
    <style type="text/css">
        canvas {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        #game {
            transform-origin: 0 0;
            -webkit-transform-origin: 0 0;
            user-select: none;
            -webkit-user-select: none;
        }
    </style>
</head>
<body>
    <div id="game">
        <canvas id="canvas"></canvas>
    </div>
    ...
</body>
</html>

 */
ig.module(
    'plugins.parallax'
)
.requires(
    'impact.image'
)
.defines(function(){
    Parallax = ig.Class.extend({
        layers: [],
        canvas: ig.$new('canvas'),
        screen: {x: 0, y: 0},
        context: null,

        init: function(settings) {
            ig.merge(this, settings);

            this.context = this.canvas.getContext('2d');
            this.canvas.width = ig.system.canvas.width;
            this.canvas.height = ig.system.canvas.height;

            ig.system.canvas.style.zIndex = 2;
            this.canvas.style.zIndex = 1;

            document.getElementById('game').appendChild(this.canvas);
        },

        add: function(path, settings) {
            var layer = new ParallaxLayer(path, settings, this.context);
            this.layers.push(layer);
        },

        move: function(x) {
            this.screen.x += (x * ig.system.tick);
        },

        draw: function() {
            var sX = this.screen.x,
                sW = ig.system.width;

            this.context.clearRect(0, 0, ig.system.realWidth, ig.system.realHeight);

            for(var i=0, l=this.layers.length; i < l; i+=1) {
                var layer = this.layers[i],
                    x = -((sX / layer.distance) % layer.w);

                if (sX <= 0) x = x - layer.w;
                layer.x = x;

                while (layer.x < sW) {
                    layer.draw();
                    layer.x += layer.w;
                }
                layer.x = x;
            }
        }
    });

    ParallaxLayer = ig.Class.extend({
        distance: 0,

        x: 0, y: 0,
        w: 0, h: 0,

        img: null,
        context: null,

        init: function(path, settings, ctx) {
            if (settings && settings.distance == 0) settings.distance = 1;

            this.img = new ig.Image(path);
            this.w = this.img.width;
            if (this.w < ig.system.width) {
                this.w = ig.system.width;
            }
            this.h = this.img.height;
            this.context = ctx;

            ig.merge(this, settings);
        },

        draw: function() {
            this.drawBg(this.x, this.y);
        },

        drawBg: function( targetX, targetY ) {
            var scale = ig.system.scale,
                sourceX = 0,
                sourceY = 0,
                width = this.img.width * scale,
                height = this.img.height * scale;

            this.context.drawImage(
                this.img.data, sourceX, sourceY, width, height,
                ig.system.getDrawPos(targetX),
                ig.system.getDrawPos(targetY),
                width, height
            );
        }
    });
});
	/* jerev - 10/2012 - parallax.js

	Be sure to require plugins.parallax, and place this file in lib/plugins/

	Parallax usage
	p = new Parallax();
	p.add('path/to/image.ext', {distance: 1, y: 0})
	p.add('path/to/other/image.ext', {distance: 5, y: 0})

	p.move(speed);

	p.draw();

	Please note: you need to preload the images, you can do this before you call ig.main()
	new ig.Image('path/to/image.ext');
	new ig.Image('path/to/other/image.ext');
	ig.main(..);

	I've modified it to draw parallax backgrounds on a separate canvas. My html/css is as follows :

	<!DOCTYPE html>
	<html>
	<head>
	...
	<style type="text/css">
	canvas {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	}
	#game {
	transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	user-select: none;
	-webkit-user-select: none;
	}
	</style>
	</head>
	<body>
	<div id="game">
	<canvas id="canvas"></canvas>
	</div>
	...
	</body>
	</html>

	*/
	ig.module(
	'plugins.parallax'
	)
	.requires(
	'impact.image'
	)
	.defines(function(){
	Parallax = ig.Class.extend({
	layers: [],
	canvas: ig.$new('canvas'),
	screen: {x: 0, y: 0},
	context: null,

	init: function(settings) {
	ig.merge(this, settings);

	this.context = this.canvas.getContext('2d');
	this.canvas.width = ig.system.canvas.width;
	this.canvas.height = ig.system.canvas.height;

	ig.system.canvas.style.zIndex = 2;
	this.canvas.style.zIndex = 1;

	document.getElementById('game').appendChild(this.canvas);
	},

	add: function(path, settings) {
	var layer = new ParallaxLayer(path, settings, this.context);
	this.layers.push(layer);
	},

	move: function(x) {
	this.screen.x += (x * ig.system.tick);
	},

	draw: function() {
	var sX = this.screen.x,
	sW = ig.system.width;

	this.context.clearRect(0, 0, ig.system.realWidth, ig.system.realHeight);

	for(var i=0, l=this.layers.length; i < l; i+=1) {
	var layer = this.layers[i],
	x = -((sX / layer.distance) % layer.w);

	if (sX <= 0) x = x - layer.w;
	layer.x = x;

	while (layer.x < sW) {
	layer.draw();
	layer.x += layer.w;
	}
	layer.x = x;
	}
	}
	});

	ParallaxLayer = ig.Class.extend({
	distance: 0,

	x: 0, y: 0,
	w: 0, h: 0,

	img: null,
	context: null,

	init: function(path, settings, ctx) {
	if (settings && settings.distance == 0) settings.distance = 1;

	this.img = new ig.Image(path);
	this.w = this.img.width;
	if (this.w < ig.system.width) {
	this.w = ig.system.width;
	}
	this.h = this.img.height;
	this.context = ctx;

	ig.merge(this, settings);
	},

	draw: function() {
	this.drawBg(this.x, this.y);
	},

	drawBg: function( targetX, targetY ) {
	var scale = ig.system.scale,
	sourceX = 0,
	sourceY = 0,
	width = this.img.width * scale,
	height = this.img.height * scale;

	this.context.drawImage(
	this.img.data, sourceX, sourceY, width, height,
	ig.system.getDrawPos(targetX),
	ig.system.getDrawPos(targetY),
	width, height
	);
	}
	});
	});