Game - avatar movement

Question

I want to make a game in which you have a avatar, and you can walk around a map.

The question is:
How do I make the avatar always be in center even when he is walking around the map?

Answer 1

Since you're a veteran, I will simply say that if it were up to me, I would see how far horizontal/sideways parallax scrolling gets me. I would hope that it could be attached to the horizontal scroll just as well as the traditional vertical scroll, but I haven't tried it, so I could be very wrong. (Has been on my bucket list though.)

Answer 2

As Bagon has pointed out, game engines can handle that for you so that the logic of moving your avatar instead of the map remains intact and sound. Under the hood, however, the engine ultimately ends up shifting background graphics across the screen.

Take Flappy Bird implemented via JS as a crude example, we are really moving the pipes towards the bird instead of the other way around.

https://github.com/CodeExplainedRepo/FlappyBird-JavaScript

Answer 3

You move the map instead of avatar. :>

Answer 4

If you use any game engine you can configure the camera to do that with just a few clicks, tho otherwise you might have to move the whole map instead of an avatar

Answer 5

Do you want such kind of a movement?

https://code.sololearn.com/WdULpHU5nr5y/?ref=app

Answer 6

Mirielle[ InAcTiVe ] Yes, but under the default premise that Alex wants to "make the avatar always be in center even when he is walking", I'd say that we are discussing in additonal context now.

Answer 7

I have been thinking at that but to be honest it doesn't sound good. Moving the terrain under someone's feet. 😂

edit: If this is the only choice then I'll do it.

Answer 8

As everyone pointed out - MOVE THE MAP.
But move it in a way that it will create illusion of moving player.

Answer 9

•Try three.js
•simple enough then babylon.js or other
•understand the camera perspective and scene rendering.
•Your 90% of the doubts will be solved

https://gamedevelopment.tutsplus.com/tutorials/creating-a-simple-3d-endless-runner-game-using-three-js--cms-29157

HAPPY coding 😃
Hope this was helpful

Answer 10

Mirielle[ InAcTiVe ] is right. Moving the map is not a long term solution. It may trick the player into thinking that he is making the avatar move, but the moment I need to add colision between the avatar and other objects from the map, the code becomes a mess.

I will continue to search for solutions.

Answer 11

I made a quick demo using Janning⭐ 's idea. It works exactly as I wanted.
I put a div (1000vmin/1000vmin) inside another div which has the exact width and height as the screen. I used the scrollTo() function to change the scroll posion of the camera, when the avatar is in the middle of the screen.
(wip, events to be added)

https://code.sololearn.com/WbQca4Xk604n/?ref=app

Answer 12

💜 Alex Tușinean 🍇 👍👌
That's nicee 🙌
(Somewhat similar to my idea ig 🤔)

And here's another code that I tried to make!

Only key presses 😄
https://code.sololearn.com/WBKgXWEicB3E/?ref=app

Answer 13

I don't think that moving the map is very different from the player movement!
If we want to show that the player is moving at a speed of 'a' along the x-axis and 'b' along the y-axis then to make the viewers pretend that the player is moving, the map has to move exactly '-a' along the x-axis and '-b' along the y-axis

Answer 14

i did not understand the question

Answer 15

Camera following the avatar

Answer 16

Please start with basic code base. Have a look at Quintus game engine