Forums » Help » Cannot get the camera to work.

Hello,

I'm making a scrolling game and I want the camera to follow the player without showing anything outside the main/collision layer. I've used the example in the Jumpnrun game. But I can't get it to work, if I run it right now it doesn't load so. this is my whole main.js at the moment.

ig.module( 
	'game.main'
)
.requires(
	//Alles wat de engine nodig heeft.
	'impact.game',
	'impact.font',

	'game.entities.player',

	'plugins.camera',

	//Levels
	'game.levels.alphalevel'
)
.defines(function(){

MyGame = ig.Game.extend({
	
	gravity: 425,										//Zwaartekracht. Hoe hoog je springt. En hoe hard je loopt.
	
	instructText: new ig.Font( 'media/04b03.font.png' ),

	
	
	
	init: function() {
		
		//Level laden
		this.loadLevel( LevelAlphalevel );				//Het eerste level word geladen.

		//Besturing
		ig.input.bind(ig.KEY.LEFT_ARROW, 'left');		//Pijl naar links.
		ig.input.bind(ig.KEY.RIGHT_ARROW, 'right');		//Pijl naar rechts.
		ig.input.bind(ig.KEY.X, 'jump');				//X toets.
		ig.input.bind(ig.KEY.C, 'shoot');				//C toets.
		ig.input.bind(ig.KEY.UP_ARROW, 'jump');
	},

	loadLevel: function( data ) {
		this.currentLevel = data;

		this.parent( data );

		this.setupCamera();
	}

	setupCamera: function() {
		// Set up the camera. The camera's center is at a third of the screen
		// size, i.e. somewhat shift left and up. Damping is set to 3px.		
		this.camera = new ig.Camera( ig.system.width/3, ig.system.height/3, 3 );
		
		// The camera's trap (the deadzone in which the player can move with the
		// camera staying fixed) is set to according to the screen size as well.
    	this.camera.trap.size.x = ig.system.width/10;
    	this.camera.trap.size.y = ig.system.height/3;
		
		// The lookahead always shifts the camera in walking position; you can 
		// set it to 0 to disable.
    	this.camera.lookAhead.x = ig.system.width/6;
		
		// Set camera's screen bounds and reposition the trap on the player
    	this.camera.max.x = this.collisionMap.pxWidth - ig.system.width;
    	this.camera.max.y = this.collisionMap.pxHeight - ig.system.height;
    	this.camera.set( this.player );
	},
	

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

		this.camera.follow( this.player );		
	},
	
	draw: function() {
		// Draw all entities and backgroundMaps
		this.parent();
		
		var x = ig.system.width/2,
		y = ig.system.height - 10;
		this.instructText.draw(
			'Left/Right Moves, X/Up Jumps.', x, y, ig.Font.ALIGN.CENTER );
		
	}
});


// Start the Game with 60fps, a resolution of 320x240, scaled
// up by a factor of 2
ig.main( '#canvas', MyGame, 60, 400, 256, 2 );		// Resolutie van het spel en hoe veel het spel vergroot is.

});

Please don't watch the Dutch cometary :)

Doesn't load

Can you please be more specific. If you check in the JavaScript console, do you get an error? What do you see? Does the pre-loader bar get stuck part way through?

More detail...

I just see a Grey area when I go to the web page. How do I check into the JavaScript console? Sorry, I'm very new at this.

Chrome: https://developers.google.com/chrome-developer-tools/docs/console
Firefox: https://developer.mozilla.org/en/docs/Tools/Web_Console

Edit: You're missing a comma after your loadLevel() method:

loadLevel: function( data ) {
    this.currentLevel = data;

    this.parent( data );

    this.setupCamera();
}, // <- add this comma!

Thanks for your answer Dominic. I've added the comma and tried a few other things I still get a Grey area. The web console is giving me the following:

[18:32:12.276] The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol. @ http://localhost/2DPlatformer/
[18:32:12.333] uncaught exception: Failed to load module plugins.camera at lib/plugins/camera.js required from game.main

The first message is just a warning an can be ignored.

Failed to load module plugins.camera at lib/plugins/camera.js required from game.main indicates that... well the file at lib/plugins/camera.js could not be loaded. So... maybe check if the file is there? :)

Didn't know I had to add a file there. Now I get a different error :(.

[20:25:38.866] Fout tijdens het parsen van waarde voor ‘image-rendering’.  Declaratie genegeerd. @ http://localhost/2DPlatformer/
[20:25:39.213] TypeError: entity is undefined @ http://localhost/2DPlatformer/lib/plugins/camera.js:30

Please share the contents of camera.js so that we can see line 30 (which is where the error is occurring).

I've added a comment on line 30.

ig.module(
	'plugins.camera'
)
.defines(function(){ "use strict";

ig.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 is line 30.
		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
			);
		}
	}
});

});

I assume this.player is undefined in your Game class (main.js), so the camera has nothing to follow. The error message actually spells this out - if you have a look at line 30 of the camera.js, you'll see that the entity it tries to refer to, is the very entity you hand it over when calling this.camera.set( this.player ) in your main.js.

Also have a look at the lib/game/entities/player.js from the Jump'n'Run example, you'll see that the player entity sets itself as ig.game.player in its init() function:

ig.game.player = this;

You can either add this to your own player entity as well, or get the entity that the camera should follow by other means - e.g. getEntityByName or getEntitiesByType.

Btw., the reason you had to add the camera.js to your project is simply that the camera module is not a part of Impact itself, but a just a plugin for it. So when you download just the bare impact.zip from your download page, you wont have any plugins by default. Impact's sources reside in lib/impact/ (and lib/weltmeister/ for the editor), everything else isn't part of the "core package".

Thanks Dominic! I got it working now!