Pizza RPG Part 4 - Grid Based Movement

In this episode of our Pizza Legends game, we add movement on a grid in the style of Pokemon. The player will be able to control the hero with both arrow keys and WASD. We'll also refactor some of our previous coordinate code to set us up for subcell positioning in the future.
Starting Code:
drive.google.com/file/d/1K6oK...
Ending Code:
drive.google.com/file/d/1x8ED...
** 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...

[@LucasDev]

Hi Drew, please continue with this amazing playlist. I am a software developer for almost a decade and a huge game lover. I never thought a game like this would be possible to make using only html/css/js, every time I wanted to do something similar, I was thinking about rpg maker or something related, but the idea of create everything from scratch is amazing. congratulations. I didnt watch all videos yet, but surely will do and create my version of Pizza Legends soon.

[@fingersnap]

Been working very slowly following these tutorials for a week but I finally finished this part. Definitely very satisfying to finally get the main character moving around!

[@muhammadamirhuzaifahbinsam4541]

Thank You Man!!! My team really loves your videos! FrFr keep up the grind!

[@darmilouch2808]

Hi from France :D ! It's amazing, please don't stop this project, I learn so much thx !

[@AutMouseLabs]

Wow, just every video I learn more about what the game engines I have used are doing! Thanks for this series!

[@2infamouz475]

Every time I get lazy on my rpg project I end up watching another video in this series & being inspired again. Appreciate this a lot. Shared 2 LinkedIn so hopefully others are inspired as well 🙏

[@heliosaiden]

With my limited knowledge about js, this series has me learning A LOT of things i didn't know I was missing. And learning about game development process is such a thrill. Simply just AMAZING!

[@mattmcnett2635]

Great job again!!!! This is so exciting!

[@m.a.3083]

Really enjoying this series!

[@liotr6737]

Thank you for the video! It's very cool :D

[@victorhugofranciscon7899]

I am loving this tutorial series, maybe after I finish the tutorials I will put my own ideas to make my very own game using this code base.

[@angrycatpico63]

Exactly what i was waiting for :)

[@diegoferreira3145]

Your videos are very good, please continue!

[@tranlan4265]

Waiting for next video :d

[@rock4459]

this what we have been waiting for 🖒

[@evgeniygaragan2184]

Very interesting! I'm making my first game along with you! (WOW!!)

[@Magistrado1914]

Excellent video. Viewed on 2024/09/01

[@uppast420am]

great tutorial as always, glad i'm a hardcore gamer in your eyes lmao

[@afili7265]

Building a game is way complex for me then building a webpage. Like i am so used to build webpage, then i can architect everything in my head. But because i never made games (only web puzzles), its super hard to figure out all required pieces which are needed. good job, interested in tutorial how ti make a grid / map and how to do animations in game. The rest should be easier. Planning to do survival game with sockets. Thats why i want to say Thank you, and good job.

[@Falney]

I actually left the NPC as a game object. I was figuring that, if you didn't, I was going to make a new class for the NPC's then they could have pre-programmed movement. That being said, I kinda saw the NPC moving with the PC coming.

[@andremp1927]

Continue pls, so f.. good, much ty

[@fabioculmone2652]

i called my Hero... Gennarino the Pizza Hero from Little Italy ... and i laughed so much ahahahahaha i love it

[@allanaek]

When is the next one coming out?! Awesome videos! Maybe propose some exercises at the end?

[@tariklancelot6748]

Who felt like just copying the code at about 15'. How to handle user input seems a bit confusing to me at the moment ?! Nonetheless , high quality content, mille mercis !

[@olivermetz8242]

Loving the series so far, just wondering is there anyway to make the character like bounce a little or hop to the next tile they work, as I love grid movement and having that little effect adds that detail, just wondering if this is possible?

[@DrewConley]

Totally possible! The y offset of the character could be computed by progress through the move, like have them rise up in the middle then back down by the end. Love this idea

[@nomoremuda]

I need more... more.... MOOOOOOOORRREEEE!!!!!

[@siete3d950]

I had a typo on movingProgressRemaining and it took me about 2-3 hours to find out, now I can laugh xD

[@guiguetzomega]

Awesome! How are you planning on collision checking? Calculating overlapping position between two objects?

[@DrewConley]

Exactly, yes. That’s coming soon!

[@austinmurphy9074]

P I Z Z A L E G E N D S !

[@muhammadhusseinnematollahi9867]

Hey Drew, thanks for your awesome tutorial I was wondering if i can add an element on screen like a btn that can act like a touch screen arrow keys, How can i assign an e.code for that btn that can be used in this directionInput map?

[@xycko4122]

the same question for me, man… i’ve been trying to add a touch control.

[@trongph.animation]

Hi Drew, I noticed that all gameObject are being render to canvas at the same time, so we can't decided which character is drawn first. What if the player is rendered first and the npc 2nd, how the player sprite's show above the npc when we move to in front of the npc (because we currently update the position, not actual re-draw with different order). Thank you all for this amazing series

[@uppast420am]

not completely sure why that would be necessary unless you would want to change the order in which they're drawn based on their Y value, say if hero was above npc1, npc1 would be drawn first making it appear as if they are in front; and vice versa.

[@McFamily25]

I tried to like it twice, but it only lets me like it once.

[@douqwry]

ayo, a new tutorial c:

[@independentnavbcdeveloper3342]

I started learning here and my target for 2023 is to be a game developer too!

[@uppast420am]

this is wholesome, i hope it works out man

[@user-ss5jj4wb4p]

Hello Bro what theme are you using vs code editor?

[@Akosiyawin]

It would be really great if we could implement something like 'Delta Time' if you are familiar in unity. I would really love to, but I have no idea how that would be possible 😀

[@DrewConley]

Good call - delta time is definitely the way to be. It’s possible to pass in the amount of time since last frame to the loop frame with a little bit of Date.now() diffing

[@SamuelKoh521]

Hi, i took your end code you left in your description below, and ran it on my browser. Followed the steps you did, except that the hero character does not move when i try to press the arrow keys. However, there is the printing of the 'left', 'down', etc, printed in the console. This shows that the browser knows i am pressing the arrow keys, and which arrow keys, but does not move the character at all. Would appreciate if anyone could help, thanks!

[@whyareyoureadingthissss]

I'm 9 months late but experiencing this problem aswell... did you find an answer? Dw if you can't remember though

[@mitejmadan8672]

How to design such maps. Is there any specific tool or software used to create such maps?

[@douqwry]

i'm not sure, but you can check his "tile set map editor" video and make your own maps with it ~

[@UnderArea51]

Question: Would a Raspberry-Pi 4 work as a development computer for a game project like this? I'm trying find an affordable small PC to develop on. Shoe-string budget.

[@DrewConley]

I think it would be fine for developing, but it may run the game at a little slow? I don't have any experience with Raspberry Pi's, but maybe somebody else here will know and comment. Good luck!

[@afili7265]

You can spin up multiple basic websites and run them. But game needs gpu. You can build a ton of stuff on top of pi4.

[@ilug5197]

i saw a rasberry pi video running minecraft at 14~ fps, this will run smooth

[@SwagBudder]

I'm struggling to change the speed of the sprite, I work on 64-bit and the movement of the character is a bit slow, does anyone know how to fix it?

[@0AwS]

position.x -= ( a larger amount );

[@ascb]

change the numbers in the direction update map in the person js file and decreast this.movingprogressremaining by that same number in the updateposition function

[@Tecno_Senior]

Make a simple card game. Like yugioh.