The max screen.x and y is the collision map size minus the screen size:
var maxX = this.collisionMap.width * this.collisionMap.tilesize - ig.system.width;
Here's the camera class from
Biolab Disaster, that uses a "trap" as described in
Shaun Inman's excellent video/article.
You can see it in action by starting a game in Biolab Disaster and typing
ig.game.camera.debug = true
in your browser's console.
Camera = ig.Class.extend({
trap: {
pos: { x: 0, y: 0},
size: { x: 16, y: 16 }
},
max: { x: 0, y: 0 },
offset: {x: 0, y:0},
pos: {x: 0, y: 0},
damping: 5,
lookAhead: { x: 0, y: 0},
currentLookAhead: { x: 0, y: 0},
debug: false,
init: function( offsetX, offsetY, damping ) {
this.offset.x = offsetX;
this.offset.y = offsetY;
this.damping = damping;
},
set: function( entity ) {
this.pos.x = entity.pos.x - this.offset.x;
this.pos.y = entity.pos.y - this.offset.y;
this.trap.pos.x = entity.pos.x - this.trap.size.x / 2;
this.trap.pos.y = entity.pos.y - this.trap.size.y;
},
follow: function( entity ) {
this.pos.x = this.move( 'x', entity.pos.x, entity.size.x );
this.pos.y = this.move( 'y', entity.pos.y, entity.size.y );
ig.game.screen.x = this.pos.x;
ig.game.screen.y = this.pos.y;
},
move: function( axis, pos, size ) {
var lookAhead = 0;
if( pos < this.trap.pos[axis] ) {
this.trap.pos[axis] = pos;
this.currentLookAhead[axis] = this.lookAhead[axis];
}
else if( pos + size > this.trap.pos[axis] + this.trap.size[axis] ) {
this.trap.pos[axis] = pos + size - this.trap.size[axis];
this.currentLookAhead[axis] = -this.lookAhead[axis];
}
return (
this.pos[axis] - (
this.pos[axis] - this.trap.pos[axis] + this.offset[axis]
+ this.currentLookAhead[axis]
) * ig.system.tick * this.damping
).limit( 0, this.max[axis] );
},
draw: function() {
if( this.debug ) {
ig.system.context.fillStyle = 'rgba(255,0,255,0.3)';
ig.system.context.fillRect(
(this.trap.pos.x - this.pos.x) * ig.system.scale,
(this.trap.pos.y - this.pos.y) * ig.system.scale,
this.trap.size.x * ig.system.scale,
this.trap.size.y * ig.system.scale
);
}
}
});
This class supports damping for the camera movement and a "lookahead" - which moves the screen a bit in the direction you're facing, so you can see where you're going. In Biolab Disaster, the lookahead is only used in the mobile version.
Here's the code needed in your game class to make it work, as from Biolab Disaster:
init: function() {
this.camera = new Camera( ig.system.width/4, ig.system.height/3, 5 );
this.camera.trap.size.x = ig.system.width/10;
this.camera.trap.size.y = ig.system.height/3;
this.camera.lookAhead.x = ig.ua.mobile ? ig.system.width/6 : 0;
},
loadLevel: function( level ) {
this.parent( level );
this.player = this.getEntitiesByType( EntityPlayer )[0];
// Set camera max and reposition trap
this.camera.max.x = this.collisionMap.width * this.collisionMap.tilesize - ig.system.width;
this.camera.max.y = this.collisionMap.height * this.collisionMap.tilesize - ig.system.height;
this.camera.set( this.player );
},
update: function() {
this.camera.follow( this.player );
this.parent();
}
If you want to see the camera trap, call
this.camera.draw()
in your game&
039;s #draw()
method and set
this.camera.debug
to
true
.
I apologize for this mess. I've been meaning to clean this up and release it with Impact for a while now, but... oh well.