Forums » Help » Keeping player within screen in an autoscrolling map?

Hi!

I just bought and started looking at ImpactJS (it requires a higher level of Javascript knowledge than I had hoped, but I'm up to the challenge!)

I have set up a level that will autoscroll, however, the player can travel backwards and forwards past the current screen.

Can anyone lead me to the right path(s) to solving this?

Hi there and welcome to the community. One of the best ways to learn the engine is to take a look at the example code on the download page. Take a look at each of the demos and if one implements a functionality you like, you can go in there and investigate how it's done. In this case, take a look at the Box 2D Physics demo. Look into the main game file (that's in /lib/game/main.js, it's covered in the Pong video tutorial), and take a look at the update function there. That should get you started. Check out the rest of that demo as well as it shows off some good practices (like preparing for mobile gaming).

If you are wondering how to keep the player in the boundaries of the screen and already have a camera following them, the best method I know is to draw a collision layer at the edge of your map.

@Bobdabuilda I too would like to know how to do this.

@Ransome Putting collision tiles around the edge of the map wouldn't really work in this situation. What I think Bobdabuilda wants to do is basically have a camera akin to ones found in shoot em up games, where the camera is always moving forward, and the character can only move within the view of the camera.

Thanks for the welcome!

Rootbeerking is right in what I'm trying to do.

I did look at the demos and they weren't much help in what I wanted to do. I thought if I can do TWO collision layers, and set one at a distance that always stay with the auto-scroll layer, then I could achieve the desired effect. But I haven't been able to set two collision layers, I guess I have to go into the lib files and add that ability...but my level of Javascript expertise is about as advanced as restricting right-clicks and setting up pop-up banners back in the 90's :)

Another way might be to change player's x velocity to match the autoscrolling when the player gets near the either ends of the viewport. I'm still trying to figure this method out, since it seems to be easier and would not require messing with the engine itself (see above about my level of JS knowledge :) )

Calculate the size of your level and limit your camera's coordinates between 0 and levelSize - screenSize. Check the limit() method for numbers; it's basically a shorthand for Math.max( lowerBound, Math.min(upperBound) ).

Untested:

// Center on the player
var newCamX = player.pos.x - ig.system.width/2;
var newCamY = player.pos.y - ig.system.height/2;

// Calculate the level width and height in pixels, subtract screen size
var maxX = this.collisionMap.width * this.collisionMap.tilesize - ig.system.width;
var maxY = this.collisionMap.height * this.collisionMap.tilesize - ig.system.height;

// Set new screen coordinates
this.screen.x = newCamX.limit( 0, maxX );
this.screen.y = newCamY.limit( 0, maxY );

Also have a look at this topic. I posted the camera class from Biolab Disaster there - it does some additional stuff like damping and has a "trap" for the player.

@dominic How would one use the camera class from Biolab and also restrict the player's movement to inside the camera's view?

Currently I'm using the Biolab Camera class assigned to an always moving entity, and the player is an entity that has it's own controls, but at the same time moves forward at the same velocity as the entity which the camera is assigned to. This works perfectly, however I have no idea how to stop the player entity from going beyond the view of the camera, or getting left behind.

That very much depends on your game. Do you want your player to be "pushed" by the edge of the screen? Should he be "crushed" if he gets stuck between the edge and an object? Should the screen scrolling stop?

So in general: calculate where the screen edges are ({left: this.screen.x, top: this.screen.y, right: this.screen.x + ig.system.width, bottom: this.screen.y + ig.system.height}), check if the player is inside, and if not... well, depending on your game, give him some velocity or manipulate his .pos.x and .pos.y directly.

Quote from dominic
That very much depends on your game. Do you want your player to be "pushed" by the edge of the screen? Should he be "crushed" if he gets stuck between the edge and an object? Should the screen scrolling stop?

So in general: calculate where the screen edges are ({left: this.screen.x, top: this.screen.y, right: this.screen.x + ig.system.width, bottom: this.screen.y + ig.system.height}), check if the player is inside, and if not... well, depending on your game, give him some velocity or manipulate his .pos.x and .pos.y directly.

Well, my game is a vertical scrolling shooter where the camera(set to "this.scroller") is always moving up, and the player has full 8 way movement on the screen(though at the same time it is also moving forward, currently using "this.player.vel.y = this.scroller.vel.y;" in the update function of my main.js file).

I'd like it so that the player can't move beyond all sides of the camera(though mainly the issue is the top and the bottom of the camera). If the player was to get caught between the edge of the screen and an object, it would cause the player to be crushed, causing game over.

Any example code on how to do this could be very appreciated.

EDIT:
I got the restriction for every side of the screen working, however I've run into an other problem(see below)

I'm using this code to stop the player from moving past the screen:

// Restrict Bottom    
            if (this.player.pos.y > this.camera.pos.y + ig.system.height - this.collisionMap.tilesize) {
                this.player.pos.y = this.camera.pos.y + ig.system.height - this.collisionMap.tilesize;
            }
            // Restrict Top 
            if (this.player.pos.y < this.screen.y) {
                this.player.pos.y = this.screen.y;
            }
            // Restrict Right
            if (this.player.pos.x > ig.system.width - this.collisionMap.tilesize) {
                this.player.pos.x = ig.system.width - this.collisionMap.tilesize;
            }
            // Restrict Left 
            if (this.player.pos.x < this.screen.x) {
                this.player.pos.x = this.screen.x;
            }

Problem with this though is that if the player is crushed between a collision tile and the bottom of the screen, the player instead of being stopped by the collision tile goes through it instead, how do I stop that from happening?

EDIT 2: I know I can do something like

handleMovementTrace: function ( res ){
    if( res.collision.y && this.pos.y < res.pos.y) {
        this.kill();  
    }
    else {
        this.parent( res );
    }
},

But this results in if the player touches the top of the tile it is killed. How would I detect if the player and tile are overlapping, and not just at the same position?