Pizza RPG Part 3: Overworld Maps

In this video, we organize our Game Objects into sections called Overworld Maps, or "Maps" for short. Overworld Maps are the building block for creating the settings in which our story will take place. Our entire game world will be divided into separate maps: outside on the Street, inside the Kitchen, inside the Shop, etc.
We'll also add our first stab of a Game Loop to control state changes and drawing updates to our Maps.
** Code **
Starting Code:
drive.google.com/file/d/1zcOs...
Ending Code:
drive.google.com/file/d/1K6oK...
** Links **
More about Pizza Legends:
coopmode.dev/series/pizza-leg...
💬 Discord
Need help, have a question, or want to share your game dev project?
Join our Discord. Here's the link: / discord
---------------------------------
⭐️ More tutorial series:
Ciabatta's Revenge - Action puzzle game in React JS!
www.coopmode.dev/series/ciaba...
Action Multiplayer - GBC-style Zelda game, but with multiplayer!
www.coopmode.dev/series/actio...
Pizza Legends in Godot - RPG Overworld in Godot v4!
www.coopmode.dev/series/pizza...
Canvas RPG Kit - everything you need to build a quick RPG game engine:
www.coopmode.dev/series/canva...
Front End Interviewing Bootcamp:
www.coopmode.dev/series/front...
---------------------------------
✉️ Join my Email List!
Get updated when new videos are ready.
You'll get a free RPG Sprite Pack in your inbox, too:
us13.list-manage.com/subscrib...

[@guiguetzomega]

I'm loving this series! As a full time react developer we can forget how much can be done with just simple JS classes. Keep it up with that nice work, mate!

[@asceliopos2050]

Nice video! I love the way you structured things and how all pieces are coming together 🙂

[@PlanetEleethal]

How fortunate you started this series right around the time I started planning work for a top down 2d webgame! Thank you and awesome videos!

[@callmejobson]

2/11/2022 11:20pmFinished part 3!! I had some snags around the game loop. But took a break and finished!

[@HeribertoNieves]

im enjoying this series a lot! definitely subscribing! im watching the series twice, the first one is to understand the code and the second one for reference, im still learning javascript and this is perfect thanks a lot!

[@DrCaesarsPalace_MD]

Hi Drew, this series is excellent. Really enjoying following along.

[@user-qf7xx7qn2x]

Best series ever! Cant' wait until the next video!!!

[@Magistrado1914]

Excellent video. Viewed on 2024/08/01

[@trongph.animation]

Yesss. Finally another video. Thanks drew ❤️

[@rickruizdana]

woow, part 3 done. So far, this one got me a few errors, but was because I needed to check lowercase and uppercase for the map layer names. What I did was to compare the finished code vs mine, and ran the dev tools to look for errors. btw I'm starting to understand lots of concepts, being this so new to me. Thank you again, Drew, I'm getting so motivated on each new video!

[@2infamouz475]

Thought u were throwing up Westside in the thumbnail at first 😅 learned a lot from these vids. Def appreciate u taking the time to do this series. Could def be premium content / sold on like udemy or something but u released it for free 🙏

[@ivgadev]

this series are insane

[@mattmcnett2635]

These are so good!

[@tranlan4265]

Awsome work

[@deeevenhuis6689]

Good series, just wanted to point out that the callback for the requestAnimationFrame takes in a function, but you're running a function to take in that function, which is a little bit less efficient. (I've spend some time already on game loops with delta time etc, just wanted to bring over that bit of information). There's also no need to have a start or stop wrapper around it, since the requestAnimationFrame returns a requestID that can be used to call cancelAnimationFrame within the gameloop to stop it (a simple boolean is sufficient then), but maybe that's too advanced, not sure. ;)

[@raiden-va]

Thank you for great lesson)

[@TathagatDarkAssassin]

I love this series! Subscribed! This is one of the most comprehensive, yet easy to consume tutorial on Javascript RPGs so far. Btw, are we going to see an editor soon? Would really make life easier for placing things.

[@nomoremuda]

Great stuff drew...

[@joshuaheathcote2116]

Yeah this is really awesome, chocolate cake!

[@js-javascript1706]

I was having trouble understanding part 3 of this tutorial. I immediately thought that there must have been something that i had missed. I was right! After looking at the third video in the playlist (The MOST Amazing Pumpkin Chocolate Chip Cookies Recipe) everything became clear. 😅

[@DrewConley]

LOL! Whoops! Not sure how that got in there. Thank you for pointing it out :D

[@angrycatpico63]

Am Making a similar kind of game :) I hope your videos will help me.

[@ceetatsumi1449]

Okay, okay, so... 'Guess I'm making games now... Thanks !

[@swayampravodasgupta2956]

What's the reason to add the window. parameterfor working with the OverworldMaps object? Is it because the images are stored as an object in the local context and not as an element in DOM?

[@DrewConley]

It’s only because the project uses many JS files without a build step (for simplicity sake). Being explicit that OverworldMaps is defined elsewhere but on the window level. No need for this when using a build step like Vite, etc, where you’d ‘import’ what you need into any other file

[@swayampravodasgupta2956]

@@DrewConley really appreciate the responses as it has been hard trying to figure out Software design patterns while trying to build a game, I can only guess how much harder it’s going to get. Just to clarify I’m assuming the build step is covered in subsequent tutorials?

[@bistbist1615]

Would it work if i don't put window.

[@MrVerkysse]

How to run these game in java on my hosting like shared host

[@fleanardnimoy6555]

my Game objects do not appear on the page I have been combing through the code and cant find anything I am not getting errors on the chrome console either. I have matched your code and mine and I can't find anything different, did something change in JS within a year or what is going on? UPDATE** Make sure you use the right brackets.... I have [ not ( in my forEach

[@Agrihnam]

hi, i have same error do you have find solution?

[@Agrihnam]

ok i have find my error, at the start of overworldMap in constructor this.gameObject"s"... XD

[@ramstube]

Mobile device support?

[@DrewConley]

Not in the basic series, but I’ll keep it in mind!

[@ramstube]

@@DrewConley oh okey

[@tistware]

@Drew Conley Does "not in the basic series" mean there is an extended/advanced series?

[@AWetCARROT1]

Ive been trying to troubleshoot this forever but I was following all the way up until getting the game loop going, it would never print stepping in the console and even after 100% removing the elements from the code that would even give the background sprite it still was getting drawn. Im at an impasse and just have no idea how to even progress and its a shame would have loved to complete this.

[@AWetCARROT1]

I looked over my code time and time again and it was identical to what was in the video to that point so im not sure where I went wrong or how to even troubleshoot it.

[@justadudewhoplaysgames2262]

First ig

[@industrialhomestead4028]

algorithm

[@romanstoleru7936]

in this moment i lost my brain xD i`m new in JS, only know how to use getElementById(" ") and if() else xD haha maby one day I going to understand better then no xD Thanks you for inspiration xD And sorry for my English