Pizza RPG Part 2: Adding Game Objects

We continue our Pizza Legends adventure by refactoring pieces on the screen to entities called Game Objects. These Objects will contain state and behavioral code for any "thing" you can interact with in the game world. Game Objects will be a foundational building block for us as we build the game.
Reminder that new episodes are posted every few days until the project is complete!
** Links **
Download the code from Google Drive.
Starting code:
drive.google.com/file/d/1n4Oe...
End code:
drive.google.com/file/d/1zcOs...
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...
---------------------------------
Twitter / X:
/ drewconley13
Be my friend on LinkedIn:
/ drew-conley-a7865a29

[@LucasGiraldelli]

This is gold, using only html/css/js and applying logic to create a game engine, it's amazing.

[@meowmeowpaupau]

I'm a web dev with dreams of building my own RPG, but didn't know where to start and this is exactly what I needed : ) This has been super helpful thank you so much!

[@wonky3854]

These are absoloutely fasntastic, your delivery is clear and concise, yet detailed enough to cover why things are working. Massively impressed, can't wait to get my own game working

[@DrewConley]

Thanks, John!

[@vincentpena7017]

This is very nice, this is much better in learning JS than a todo list app. Keep it up mate! Thanks for doing this

[@industrialhomestead4028]

thank you for the putting in this time and sharing your knowledge. i'm just starting out and this is gold.

[@asceliopos2050]

Thank you so much for this series! I've been binge watching your videos recently after discovering Danger Crew. You have really awakened a passion for game development and I can't wait to dive in even more :)

[@trongph.animation]

So excited mate!! I just found out your channel today to learn js game making, and you might be only man doing this. Thanks for sharing I’m looking forward on this project

[@LucasGabriel-xz8nk]

This series is being really helpful to me :) thank you

[@CedricDiccory]

Thank you Drew! This series is awesome so far and very helpful and has taught me a lot already! You Rock!

[@liuchuanyuan4301]

Approximate Timestamps 1:30 GameObject Class 3:50 Sprite Class 10:48 Include JS to HTML 11:35 GameObject Class 14:52 Game Loop 17:00 Add Shadow 20:20 More to Come

[@gabrielveloz3296]

amazing tutorial man! thank you for helping me understand game logic paradigms as a web developer

[@jip8793]

I love this tutorial so much! You are explaining things in a simple way and it's very easy to follow. Thank you!

[@luki4]

Thank you very, very much!! This is great, that you share all of that videos with us. And please don't stop until the game is completed! 💪🏻

[@lawliex1]

this series it is amazing dude, thanks for that !

[@itzneloo]

this series is really cool. i cant wait to finish it

[@saintoz]

genial esta serie de videos, muchisimas gracias.

[@besterezepte4064]

thank you for this great Tutorial, it is the best from the videos i have found yet

[@jakwoun]

Thank you so much for this series! I am working on a project for my internship and this is just what i needed!

[@spifet]

Another excellent video! Thanks!!

[@carlcolisson4293]

Thanks you so much for this series

[@BinngBongg]

youre a god! im just beginning to try to figure out making games, and you make it look so damn easy

[@javitv454]

Thanks for the free informative content, bless you my man!

[@albertolotz7273]

Thanks for share your knowledge 🙏

[@mitejmadan8672]

Thank you so much !!!. This will really improve my programming skills.

[@oshembandara2409]

Thank you for the video. and thank you again for explaining it very well.👍

[@BruceOnder]

Great series so far! Nice break for a cookie baking session too! 😃

[@osamayounis971]

Please don't stop, this subject is really amazing and I wanna learn it

[@gregoryedwards9097]

Nothing better than watching this while eating Pizza lol

[@DrewConley]

This made my night!

[@danthegamerx]

Awesome video man!!

[@AutMouseLabs]

Learning a lot. its interesting doing this without and engine. I feel like it is a lot harder but also that I am learning how to do game programming vs how to use an engine. It is pretty neat. Subscribed :)

[@rafaeladao4253]

amazing video bro, hugs from Brazil! 🇧🇷

[@vonderklaas]

You are pro, thanks buddy!

[@rodrigoronin_]

I want to say that this series is helping me make my first web RPG game and learn TypeScript. I want to point out something: at 10:30, when you add a reference to the gameObject inside the sprite class, you create a circular reference. By outputting the data from an instantiated GameObject, you can see that it has a sprite, and that sprite has a gameObject that, in turn, has a sprite, and so on. To get the position reference, I've created two properties inside my class for positionX and positionY, so I don't need the entire gameObject.

[@binaryreliantmind1611]

So far this seems like a great tutorial. Been a Django web developer for a few years now and finally decided to study JavaScript to enhance my skills. Learning from scratch is the way to go with programming.

[@rickruizdana]

Amazing as always, Drew! I just finish part 2 and everything worked perfectly. Getting very excited to start part 3. Btw, love the levitating pizza chefs!, why about a levitation battle? , jk. Thank you again!!

[@user-ql3pe4nm3i]

This series is super cool

[@Magistrado1914]

Excellent video. Viewed on 2024/08/01

[@nomoremuda]

so much game objects... so much pizza... so much rpg'ness... love it

[@ggyoug]

Thx for video! It is very fine after unity)

[@mattmcnett2635]

Im so excited for this series. Keep up the great work Drew. How many videos do you think it will take to complete the series?

[@DrewConley]

Thank you! I think somewhere in the realm of 20. I’m trying to explain every single line of code and it’s a giant project, so we’ll see!

[@JuaniDev]

you are the best!!!!!!!!!!

[@yanneyesbreakers9220]

Really great content , I was busy refreshing my JS skills and it s the most fun way to do it I found on the web..thanks a lot...Question: would it be an option for you to build a react version of another rpg game?

[@DrewConley]

Thanks for the kind words. Maybe someday, but no plans right now for a React rpg. (I like React a lot, I’m just trying to do other projects right now)

[@Chuckzplace]

When it comes to the constructor class how does just passing 1 argument "config" into the constructor work. My usual method for creating constructors for objects is to create each individual argument like x and yes something that needs to be passed in. I'm just very confused. Other than that this is an amazing series and i really y am enjoying using OOP in JavaScript

[@callmejobson]

2/10/22 Part 2 finished! I had to go back and redo part one but I understand more now!! I have been taking notes using comments and writing a show paragraph on what I learned!! See yall in the next one!! Edit: I ran into one hiccup I needed to put the game object js file and the Sprite js file before overworld js file. I thought I would share that incase some else got stuck!

[@Pablito_Dev]

dude! i was wondering what was wrong i read the code 1000 times and couldn 't find it , but thanks to you now its fixed! TYSM

[@callmejobson]

@@Pablito_Dev I'm glad you got it working!! Teamwork!!

[@2infamouz475]

🔥🔥👌

[@gisen100ify]

Like!

[@aaronh920]

For the life of me I cannot make the shadow work with the new shadow method.

[@xck27x78]

11:40 I'm not familier with javascript project, so I wonder if passing class itself into its children class is safe? Just like GameObject send itself to its children attribute Sprite.

[@kiddbuu808]

I was the 1000 like for the video haha

[@edenpope5475]

Great tutorials! However, I've had a problem with my code where it tells me that in the "hero.sprite.draw(this.ctx);" "draw" is undefined. I am not using sprite sheets so therefore I have also had problems figuring out what to do in the draw(ctx). if anyone could help that would be great! This is my second time attempting this project and my second time with this exact problem

[@ufdas-wu1cr]

not sure why this is... if you write setTimeout(function(){},200); I run into an error................ however the setTimeout(()=>{},200); It works perfectly... I'm so confused-- it's a "Uncaught TypeError: Cannot read properties of undefined (reading 'drawImage')" error.

[@nicosoftnt]

That's probably because normal functions cannot be declared as an argument, lambda functions were created for that.

[@tranlan4265]

Hi @drew Im frontend dev too and i want to make game. I wondering learn gdscript godot with canvas use javascript. I want to build game with multiplayer so use canvas it is possible? Can scale up without game engine? And can earn money with it? I watch many serries from you. And very happy with new serries.

[@DrewConley]

Hello! Lock in as many decisions as you can right now. All the things you mentioned are great options, and yes you can scale any of them up. It’s easy to be distracted by all of the possible options. Just focus on building your game with a few guard rails and go from there 🤘

[@DaStorm7093]

would it not be easier to just do class GameObjct { constructor(config) { this.x = config.x || 0; ..... } } class Sprite extends GameObjct { constructor(config) { super(config); this.src = config.scr; ...... } } const player = new Sprite({ x: 0, y: 0. src: "../sus.png" })

[@DaStorm7093]

This is what I have right now after playing with the code: class GameObject { constructor(config) { this.x = config.x || 0 this.y = config.y || 0 this.canvas = document.querySelector('canvas').getContext('2d') } } export class Sprite extends GameObject{ constructor(config) { super(config) this.image = new Image(); this.image.src = config.src; this.image.onload = () => { this.loaded = true this.canvas.drawImage(this.image, 0, 0, 32, 32, this.x, this.y, 32, 32) } this.animations = config.animations || { idleDown: [[0,0]] } this.currentAnimation = config.currentAnimation || "idleDown" this.currentAnimationFrame = 0 } draw = () => this.loaded ? this.canvas.drawImage(this.image, 0, 0, 32, 32, this.x, this.y, 32, 32) : setTimeout(() => this.draw(), 200) } I also dew once in the onload event so it automatically draws on load. With this code, any code inside the Sprite class can access any variables or methods inside the GameObject function(see how I didn't have to define this.x and this.y again cuz it is defined in the Game Object class), you also don't have to pass in the canvas manually everytime to do any functions in the future(hard coded into GameObject). The draw function will now also call itself after 200 miliseconds if the image is not loaded, until the image is loaded. That way you can remove the setTimeout in the overworld.js and just do hero.draw() /*overworld.js*/ const hero = new Sprite({ x: x, y: y, src: "../assets/character/player/hero.png", }) hero.draw() the hero is actually being drawn twice(auto drawn when image is loaded, then the hero.draw()), but this is just to show how it will work

[@Nitay]

Uncaught ReferenceError: GameObject is not defined tried most of the fixes and cant find the issue. Ive done everything right. bit of help?

[@MyNewSoundtrack]

In case you haven't fixed it yet or someone stumbles across this in the future, I had the same problem. My mistake was at GameObject.js, inside the Sprite object I set the property as "GameObject: this", it's supposed to be "gameObject: this" (lowercase). Drew almost makes the same mistake at 11:47

[@JohnathonMasias]

@@MyNewSoundtrack thank you so much! I searched my code everywhere and that's what I was missing!

[@MyNewSoundtrack]

@@JohnathonMasias oh man I know that feeling too well, you're welcome!

[@StrasRockerz]

The GOAT, thx

[@migueltan7908]

@@MyNewSoundtrack Thanks

[@jona5949]

Woher haben sie die Grafiken ?

[@nursegilbey]

Is the only requirement for such a game that the user has a JS-capable browser?

[@mgnfy-view]

Yes