HTML5 game scrolling

Question

so here I am, making a HTML5 and javascript game, and I'm trying to make the character walk to the middle of the screen, stop scrolling, and then continue walking when the camera hits the edge of the screen.

http://gifmaker.me/PlayFrameAnimation.php?folder=20140629160DoiXmJ9u4hISNMxDsnhUI like this thing.

if (world.regX > 0 && world.regX < backgroundEdge-camera.width && jerome.x > camera.width/2) {
                jerome.x = camera.width/2 };
if (world.regX > 0 && world.regX < backgroundEdge-camera.width && jerome.x < camera.width/2) { 
                jerome.x = camera.width/2 };

(world is the container for the background image.)

this works fine, so long as you're not turning around near the edges of the screen, because it will just jump forward to the middle of the screen, and go from there.

the answer to this question is probably incredibly obvious, but I just cannot think of it for the life of me, so sorry if I'm sounding stupid here.

any kind of help would be appreciated, because I've been stuck on this for a while now.

thanks in advance!

Do you mean moving the camera [like this](http://jsfiddle.net/Zeaklous/6VMLk/13/)? Please excuse the project's code quality, it's very old and un-finished :P — Zach Saucier, Jun 30 '14 at 02:41
well, it's less of making the camera move, and more of making the character move within the camera. I should make a gif of it. — puffballinthedark, Jun 30 '14 at 04:43

score 0 · Accepted Answer · edited May 23 '17 at 11:56

0

Using Simon Sarris' answer as a base, I came up with this demo

All I added was the following:

if(offsetX >= -worldW + can.width / 2) { // Handle right edge
    if(offsetX <= 0) {                   // Handle left edge
        ctx.translate(offsetX, offsetY);
    } else {
        // Do nothing, default position
    }        
} else { 
    ctx.translate(-worldW + can.width / 2, 0);
}

Essentially, this just checks to see if the object is within half of a screen of the "world's width". If it's not within that, it moves the "camera" by translating the context. If it is within that, it keeps a set position depending on which requirement is not being met.

Hope it helps!

edited May 23 '17 at 11:56

Community

1
1

answered Jul 01 '14 at 04:20

Zach Saucier

24,871
12
85
147

argh, I just can't seem to get this to work. I'm using easeljs, and trying to put something like this in would mess up a lot of the code I already have. maybe if I could find a way to keep the background from moving until the player is halfway across the screen, it would fix it. but I just can't figure out how to do that either. – puffballinthedark Jul 02 '14 at 17:21
@puffballinthedark Unfortunately I cannot provide any more help over what I have already. I answered the question you asked, providing a way to accomplish it. Without seeing more of your setup no one can help you – Zach Saucier Jul 02 '14 at 17:27
yeah, I kinda figured that. I guess I'm just gonna have to think about this a lot more. thanks for the help anyway! – puffballinthedark Jul 02 '14 at 17:28

HTML5 game scrolling

1 Answers1