Game - avatar movement | SoloLearn: Learn to code for FREE!

+12

Game - avatar movement

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?

9/18/2020 12:09:54 PM

💜 Alex Tușinean 👻

20 Answers

New Answer

+8

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.)

+14

You can try my game engine Canva2D, it supports camera in tiled based game development. to understand, the maths used, check the source code on github @ Mirielle2004/Canva2d/components/camera.js Yes, there are detailed comments in the source code Example https://code.sololearn.com/Wi6Bb97dGx3u/?ref=app https://code.sololearn.com/WYy8Mq8g0aA0/?ref=app

+7

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

+6

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

+6

Do you want such kind of a movement? https://code.sololearn.com/WdULpHU5nr5y/?ref=app

+5

You move the map instead of avatar. :>

+5

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.

+5

RDC moving the map isn't the best way to animate a "moving player".. Assume you're walking along a path, the path and everything around you are static while your velocity vector's changes to the direction you're moving through. This is how game movement are represented, the world are static while the player moves around the world, I'll say the motion going on is relative. Also, moving the map while the player's location is static can be buggy when checking for collisions cos the map movement can float accross an index and this would be undefined.

+5

Hatsy Rei My point is the camera can NEVER be centered if the player position is static. An example for a quadrilateral player with a defined width and height. If there's a screen of width 300 and height of 730, the player would be at the centered on the x-axis if it's position is at X = player.x - player.width * .5 + 150; Now, the player need to eat some fruit at the location (x0, y0). Taking vector's subtraction into account, the camera's location when the player position is at (x0, y0) would be (x:-150, y:-150). this is never centered. Also, the game will crash immediately the camera location reaches -1 because this location is undefined

+4

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

+4

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.

+4

•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

+3

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.

+3

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

+3

💜 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

+2

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

+2

Just to backup my word when I say "can NEVER be centered" because I've made the calculations before saying that and it's just a linear algebra thing which I'm right. By default, check line 36 ( you'll notice the player is moving while the world are fixed) Now replace line36 with `camerax++`, and delete line27, 28 and see what happens. I've added some if-else statement to prevent the game from crashing when moving the world instead of the camera because this is synonymous to you staying at a place while your eyes travels without you. also, a new bug will occur if you moved towards the end of the Y-axis, it has nothing to do with this https://code.sololearn.com/WDuGptNAOq3G/?ref=app

+1

i did not understand the question

-1

Camera following the avatar

-1

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