Forums » Help » locking camera to map

all-

i am trying to lock my camera so that it only shows my map and not the outside bounds. currently when i start the game i see the end of the map plus dead space (black space). i want to lock the camera so that when i start the game i only see the end of my map and as i move to the top of it i stop when i hit the end of the map and do not see any black screen. i am currently doing the following in my update function in main.js
any help would be appreciated.

MCommute = ig.Game.extend({
	font: new ig.Font( 'media/04b03.font.png' ),
	camera: null,
	
	init: function() {
		// Initialize your game here; bind keys etc.
		// bind keys
		ig.input.bind(ig.KEY.A, 'left');
		ig.input.bind(ig.KEY.D, 'right');
		ig.input.bind(ig.KEY.W, 'gas');
		ig.input.bind(ig.KEY.S, 'break');

		camera = this.getEntitiesByType(EntityPlayer)[0];

		ig.game.screen.y = 2500;
		ig.game.screen.x = 0;
    	// load level
		this.loadLevel(LevelLevel1);
	},

	update: function() {
    	this.parent();

    	//move the camera with the player
		if(camera){
			this.screen.x = camera.pos.x - ig.system.width/2;
			this.screen.y = camera.pos.y - ig.system.height/2;
		}
	},

I would put some logic in the update function that simply limits how high the value of camera.pos can go in relation to the system width/height.

I'm on my iPhone and can't quickly hack out some code for you but I can when I'm home if you're still having trouble.

Please do. I'm not sure what to check to limit the camera. I am starting at the bottom of the map and going to the top vertically so i'm not doing the traditional left to right.

Quote from Nico
I would put some logic in the update function that simply limits how high the value of camera.pos can go in relation to the system width/height.

I'm on my iPhone and can't quickly hack out some code for you but I can when I'm home if you're still having trouble.

Check out this sweet Camera plug in Dom wrote:

In main:

.requires(
	'plugins.camera',
)
.defines(function(){

MyGame = ig.Game.extend({
	init: function() {

		
		this.camera = new Camera( ig.system.width/3, 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;
		
		// Load the LevelTest as required above ('game.level.test')
		this.loadLevelDeferred( LevelIslandAtNight );
	},


	update: function() {		
		// Update all entities and BackgroundMaps
		this.parent();
		
		// screen follows the player
		var player = this.getEntitiesByType( EntityPlayer )[0];
		this.camera.follow( this.player );
	},

loadLevel: function( level ) {        
    this.parent( level );
    this.player = this.getEntitiesByType( EntityPlayer )[0];
    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 );	
},

^ Don't forget to replace any previously in place camera logic.

And in your plugins folder (or wherever you want to put it):

ig.module( 
    'plugins.camera' 
)
.requires(
    'impact.impact'
)
.defines(function(){

Camera = ig.Class.extend({
    trap: {
        pos: { x: 0, y: 0},
        size: { x: 72, y: 72}
    },
    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 ) {
//Some of this stuff is specific to my game (like the ig.game.things.level stuff)
		var entity = ig.game.getEntityByName('ninja');
        if (ig.game.things.level == 0){
		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 ) {
        var entity = ig.game.getEntityByName('ninja');
		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
            );
        }
    }
});
});

There's a better thread on this somewhere around here...

yes, i read the camera post. perhaps i should re-read it and get a better understanding of whats occurring.