Forums » Help » Scroll movement

Hi,

I'm new at Impact and I'm trying to make my first game with this awesome engine. I want to make a game like Galactic Plunder so, I was trying to make the scroll movement like in the game (camera x movement + ship constant velocity + when an arrow key is pressed the ship could move faster within the camera area).

I tryied to achieve this by first moving the camera at a constant "velocity":

update: function() {		
		// screen follows the player
		var player = this.getEntitiesByType( EntityPlayer )[0];
		if( player ) {
			this.screen.x = this.velScrollX;
			this.screen.y = player.pos.y - ig.system.height/2;
		}
		
		// Update all entities and BackgroundMaps
		this.parent();
		this.velScrollX += 1;
	},

Then I move the ship:

update: function() {

	if( ig.input.state('left') ) {
			this.vel.x = -100;
			this.flip = true;
		}
		else if( ig.input.state('right') ) {
			this.vel.x = 100;
			this.flip = false;
		}
		else {
			//this.pos.x += 1;
			this.vel.x = 68;	
		}
                // shoot
		if( ig.input.pressed('shoot') ) {
			ig.game.spawnEntity( EntitySlimeGrenade, this.pos.x, this.pos.y, {flip:this.flip} );
		}
                this.currentAnim.flip.x = this.flip;
		
		// move!
		this.parent();

}

When I make this, I get an extrange behavior: when the ship shoots it goes up some distance with every shoot and also when no key is pressed the ship start to advance more some times and smooth others like if some kind of force where pushing it forward in some frames. Then I tryied to move the ship with something like:

this.pos.x += 1; // when no Arrow (right or left) key is pressed

And I get a nice behavior but no vertical collisions against the solid tiles :(

I am a big fan of space shooter games. But I have not yet attempted a scroller. One suggestion is to create a 'camera' entity which simply moves to the right at a constant velocity. It will have no image associated with it. Have the screen follow the camera just as the screen follows the player in Dominic's jumpnrun example.

Keep the ship movement coded for left and right as you have above, but instead of:

            this.vel.x = 68;  

under else, make the ship's velocity identical to the camera's velocity.

(After testing that you may need to adjust the ship's left and right movements also to make them relative to the camera. i.e. if the camera vel.x is moving at +25, the left vel.x will probably be -75, and right vel.x will probably be 125. This way both directions will appear to be 100.)

You may additionally want to create a separate class, as some of us have done, to oversee the player. In my case, I created a 'player-controller' class which can track things about the player throughout the levels and between level changes (score, lives, etc.) It could also manage communication between the ship and camera for example when the ship is killed and the camera potentially needs to move somewhere else.

Here is how I get the expected behavior

In the main.js:

update: function() {		
		// screen follows the player
		var player = this.getEntitiesByType( EntityPlayer )[0];
		if( player ) {
			this.screen.x = this.xPosition;
			this.screen.y = player.pos.y - ig.system.height/2;
		}
		if( this.screen.x < 4120 ){
			this.xPosition += 1;
		}
		// Update all entities and BackgroundMaps
		this.parent();	
	},

In the player.js:

update: function() {
		
		// The movement of the ship
		if( ig.input.state('left') ) {
			this.vel.x = -100;
			this.flip = true;
		}
		else if( ig.input.state('right') ) {
			this.vel.x = 100;
			this.flip = false;
		}
		// If no key is pressed and we are in the domain of the map
		// then update the position the same way
		// as the screen is moving and keep a constant minimal velocity
		// to have correct collisions with enemies and tile map.
		// NOTE: a greater velocity like 5,10,20, etc. will make the
		// ship to move forward in a rare way
		else if( this.pos.x < 4120 ){
			this.pos.x += 1;
			this.vel.x = .0004;
		}
		// End of the map, woh! woh! woh! hold your horses
		else{
			this.vel.x = 0;
		}
		if( ig.input.state('up') ){
			this.vel.y = -100;
		}
		else if( ig.input.state('down') ){
			this.vel.y = 100;
		}
		else{
			this.vel.y = 0;
		}
		
		// jump
		/*if( this.standing && ig.input.pressed('jump') ) {
			this.vel.y = -this.jump;
		}*/
		
		// shoot
		if( ig.input.pressed('shoot') ) {
			ig.game.spawnEntity( EntitySlimeGrenade, this.pos.x, this.pos.y, {flip:this.flip} );
		}
		
		this.currentAnim.flip.x = this.flip;
		
		// move!
		this.parent();
		
	},

Thanks for the suggestion MikeL!

The reason why your first attempt didn&039;t work as expected is, that you didn't factor in the game's #tick value.

The tick is the time in seconds since the last frame was drawn. To make all movement in Impact independent of the frame rate, the tick is automatically taken into account for all entity movements.

E.g. when you say have something like this.vel.x = 50 for an entity, it means "50 pixels per second". The engine calculates the new position for the entity like this:

this.pos.x += this.vel.x * ig.system.tick;

So, to move your background with the same speed as your ship (assuming your ship has a vel.x of 68 like in your example), do the following in your Game class:

this.screen.x += 68 * ig.system.tick;

@dominic after reading your answer, I tried that but I didn't get the expected behavior, I got now a trembling ship :( The second code examples that I wrote at this thread seems to work nice.

Thank you!