Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

1 decade ago by bram

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 :)

1 decade ago by Joncom

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...

1 decade ago by bram

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.

1 decade ago by dominic

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

Edit: You&039;re missing a comma after your #loadLevel() method:
loadLevel: function( data ) {
    this.currentLevel = data;

    this.parent( data );

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

1 decade ago by bram

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

1 decade ago by dominic

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? :)

1 decade ago by bram

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

1 decade ago by Joncom

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

1 decade ago by bram

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
			);
		}
	}
});

});

1 decade ago by dominic

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&039;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&039;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&039;s sources reside in #lib/impact/ (and lib/weltmeister/ for the editor), everything else isn't part of the "core package".

1 decade ago by bram

Thanks Dominic! I got it working now!
Page 1 of 1
« first « previous next › last »