Forums » Help » Can't get camera scrolling to work as in demo & tutorial

Hi guys,

I just got Impact yesterday and am working on a small game to learn the ropes. Regular 2D platformer, character runs on screen collecting items for points etc.

So far I have the entity moving on an image background (the background image is wider than the canvas) and animating successfully with placeholder sprites. Movement so far is left, right, and jump (I'll need to build crouch in later).

My big problem right now is getting the camera to stay centered on the player entity. I read through Jesse Freeman's tutorial on Adobe.com and also checked out the demos (specifically the Jump n Run). These were very helpful and I've used them greatly in what I have so far. However the method both of these things suggest to center the camera on the entity doesn't seem to work for me. I've been searching the forums for hours now, and Googling, but no luck.

What I need: For the player entity to be in the center of the camera. As the player moves the player entity using WASD the camera scrolls with it, displaying different parts of the background image.

What is happening: When I try to implement this code the player entity loads above the ground, moves very slowly (~1px at a time), and can only move maybe up to 5 pixels in either direction.

My main.js:

ig.module( 
	'game.main' 
)
.requires(
	'impact.game',
	'impact.font',
	
	'game.entities.red-player',
		
	'game.levels.main'
)

.defines(function(){

MyGame = ig.Game.extend({

	// Load a font
	font: new ig.Font( 'media/04b03.font.png' ),
	clearColor: null, // no clear color
	gravity: 500,
	// Load background
    background: new ig.Image ( 'media/background.jpg' ),
	
	init: function() {
		// Initialize your game here; bind keys etc.
		ig.input.bind( ig.KEY.RIGHT_ARROW, 'right' );
		ig.input.bind( ig.KEY.D, 'right' );
		ig.input.bind( ig.KEY.LEFT_ARROW, 'left' );
		ig.input.bind( ig.KEY.A, 'left' );
		ig.input.bind( ig.KEY.UP_ARROW, 'jump' );
		ig.input.bind( ig.KEY.W, 'jump' );

		this.loadLevel( LevelMain );
	},
	
	update: function() {		
	
	// screen follows the player
		var player = this.getEntitiesByType( EntityRedPlayer )[0];
		if( player ) {
			this.screen.x = player.pos.x - ig.system.width/2;
			this.screen.y = player.pos.y - ig.system.height/2;
		}
	// Update all entities and BackgroundMaps
	this.parent();
	
},
	
	draw: function() {
        this.background.draw( 0, 0 );
        
        // Draw all entities and backgroundMaps
        this.parent();
	}
});


// Start the Game with 60fps, a resolution of 320x240, scaled
// up by a factor of 2
ig.main( '#canvas', MyGame, 60, 800, 560, 1 );
});

I must be missing something very simple here. I'm using the main.js camera follow code as shown in the tutorial and Jump n Run and compared my player entity code to the Jump n Run demo, but couldn't find anything that looked relevant (although I'm sure I may be missing something). Was something meant to be happening in the player entity file that has an impact on this, or am I making some other mistake?

Thanks in advance for your help!

Are you certain the name of your player entity is EntityRedPlayer?

Try logging to the console to verify the camera is getting updated:

        if( player ) {
            console.log( 'Camera Updating!');
            this.screen.x = player.pos.x - ig.system.width/2;
            this.screen.y = player.pos.y - ig.system.height/2;
        }

Thanks, quidmonkey. I've tried that and the camera appears to be being updated as the message is displayed in the log. The movement problem disappears if I remove:

this.screen.x = player.pos.x - ig.system.width/2;
this.screen.y = player.pos.y - ig.system.height/2; 

Oh, I just realised why the player entity is floating above the ground. It's because it's now being centered, but my 'ground' on the background image and in the collision layer is not perfectly centered on the Y axis. So that explains that, but there's still the not being able to move properly problem. The placeholder movement animations still appear to be trigger as they should, the character just isn't going anywhere other than 3-5 pixels in either direction.

Edit: On second thought...this should be moving the camera position, not the player position, should it not? So I'm not sure why the player entity is appearing above the ground after all..unless it has something to do with moving the background image as well?

Edit #2: I think the player and camera are moving, but so is the background image...maybe? When I print out the player position and the screen position, their values are changing in the log. I tried creating a 2500 x 2500 image for the background and setting it as a giant tile in the level editor to replace the way of drawing the background in main.js above, but for some reason the image wouldn't appear as a tile option when I pressed Space. My lunch break was finishing so I had to leave it.

I'll keep looking into this as soon as I'm off work. In the meantime - am I on the right track here? Was there another way to set the background and make it behave properly without making a giant square image (I don't actually need it to be that high and it just adds to the file size) and using it as a tile? And if not...any ideas on why the tile wouldn't work?

I guess the reason why your entity doesn't move is because that it's centered in the view - which is exactly what you wanted.

The problem is, that your background image doesn&039;t move. #ig.Image takes "screen coordinates", not "world coordinates" and you&039;re always drawing the background image at #0, 0:

What you want to do instead, is this:

this.background.draw( -this.screen.x, -this.screen.y );

Thanks so much, Dominic, that worked!

And thank you for the great engine. As someone who's only really familiar with the web development HTML/CSS side of things with fairly minor JavaScript and PHP experience Impact has been amazingly intuitive to grasp.