Mini posted a year ago
chris posted a year ago

Hey Mini - would you be able to post a link with your image here? Unfortunately don't have images set up on since it requires a bit of extra moderation when it comes to spammers.

A CodePen to what you have so far would be great also!

Mini posted a year ago

Thanks for getting back

I worked on it a bit more, I was able to create the mechanic I wanted but not sure if I went with the best approach. I eventually want to make this multiplayer.

(btw I restarted and not using the previous code I posted)

chris posted a year ago

So after checking things out, I think I have a better idea of where you're going with it. I haven't personally done a top-down game, but I found a CodePen that might push you in the right direction:

In there, check out the MapProcessor function as well as the Camera function, both should give you some tips in regards to how to set the game up correctly.

Basically, the MapProcessor will create rectangles and walls based on your map array, and then the Camera is responsible for moving the walls and everything in-between.

This sounds like something I'll cover in a future course, maybe after the Pacman one I'm doing next.

Mini posted a year ago

Thanks, I checked that out, and after a lot more trial and error, I was able to find what I think is the most simple solution.

Just in case anyone was following along with the same problem, I found what seems to be the best solution. My solution was to translate the canvas by (-myPosition.x + canvas.width/2, -myplayer.y + canvas.height/2)

This makes it so the player will always be seen in the center of the screen, regardless of its x and y coords.

Inside the after the translation between the save and restore, you can draw stuff that would appear on the games map, (example: game-borders, other players, ect...)

Outside that translation is where you can draw stuff that doesnt move according to the player. (exmaple: leaderboard, inventory, status bar etc...)

function loop() {
	if (GameState.runloop) GameState.loop = requestAnimationFrame(loop);

	c.fillStyle = GameState.backgroundColor;
	c.fillRect(0, 0, canvas.width, canvas.height);; // needs save before this translation
	c.translate(-myplayer.x + canvas.width / 2, -myplayer.y + canvas.height / 2);

	/* --- Entity Updates --- */

    /* draw everything that should be moving with the games map in between this save/restore
 example: other players. 
coords example:
u can draw this at x:4000,y:4000, and as long as ur player is close to it, it will be visable on the screen
	c.restore(); // if drawing inside this save/restore, it will draw on game borad (entities), if outside: will draw on screen (ui)

	// draws on real canvas width/height

Want to participate?

Create a free Chris Courses account to begin

Sign In

Providing the lift to launch your development career

© 2023 Chris Courses. All rights reserved.