This is exactly what i was looking for, everytime i look up how to make an Rpg i get pseudo advice articles like "you have to work really hard" or "start making a cardboard game" thank you for showing how to literally make a game
Lol, hopefully this will help out a little more than the bits of advice you mentioned. That said, it definitely calls for you to step in and make it your own 🤘
Dude I am so glad you are doing this. Danger Crew inspired me to use my react skills to start working on my own turn based RPG. So excited to watch this whole series! You are an inspiration :)
started working on a game with a team of people and this series is the absolute perfect resource for learning what it takes to make a game from scratch, thank you
I've been struggling with building games in JS for months but you explained it in a way that is finally making sense. Thanks a bunch for sharing these tutorials!
Ive been struggling with js for so long and this one video opened my eyes to everything Ive been missing, The way you explain things as you're doing it is what makes you a great teacher! thank you for broadening my horizon and giving me motivation and inspiration!
Timestamps: 1:12 setup 5:39 css intro 8:11 javascript intro 14:30 render image to canvas 16:26 scale canvas 21:49 render image to canvas (advance) Note: * VScode have live server extension if you don't have python version 2 as shown in the setup
Such an underrated channel. Really excited to see you posting rpg game dev stuff again. The Danger Crew vids were the best. I really hope you get lots of new subs!
So, i ran in to a problem, that my hero sprite got placed behind the map. For everyone who has the same problem, here is how I solved it. My map had 200KB while my hero sprite had around 4KB, which caused the map to load longer and place it after my hero sprite. Tried to work around this with z Index settings, didn't work either. I rendered the map down to about 30KB and it worked how intended. Great tutorial btw, keep it up!
Thanks, I'm about to start a project to teach programming in C++ through a game and your series of videos on how to create an RPG game for the web will help me a lot.
I know this was a month ago, but when scaling your canvas, you could use transform-origin instead of translating 50% on the Y :) or you can use display flex on the body with align and justify to center the canvas :)
God dammit man, that's some GREAT content! I'm a webdev interested on learning how to build games and I wasn't sure I wanted to learn right now how to use Unity or something else. I'm loving to see that it's not only posible to create a game with JS but it's a good way to get started.
I was pretty hyped up when I saw this notification pop up, I’ve left it for a while so I’ve got a little backlog to work through. Thanks for this Drew, I’m excited to start coding along!
Great video! This was exactly what I was looking for! I will definitely go through this tutorial to learn the basics about this original way of game dev, and I hope to get the time eventually and add more functionality and content to share in the Discord community for this game. I will definitely follow your tutorial until the end. BTW, the media queries to make it completely responsive is: .game-container{ position: relative; width: 352px; height: 198px; margin: 0 auto; outline: 1px solid white; transform: scale(3) translateY(50%); } /* Resizing for all screens up until 1278px */ @media (max-width: 1072px){ .game-container{ transform: scale(2.75) translateY(50%); } } @media (max-width: 978px){ .game-container{ transform: scale(2.5) translateY(50%); } }
Feeling pretty dumb never thought to use the image editor to get the scaling... always spent 100 hrs trying to figure out the mathematicals... this is a great tutorial by the way. You got my Sub!
Finally I found a video that the guy just don't throw up the codes to my face. You are simply explaining are you doing. I just being to watch and thx for this content
Thank you Drew!!! This is my first on javascript ever, and it all worked perfectly! I was somehow lost when you started using Visual Studio Code, as I thought it was the same as the Visual Studio used with Unity, but made the switch right away. Anyway, I just wanted to make this comment to remind me (and encourage me) that I was able to finish part one. I know that for now I'm just copying your code, and that my results are because of your great work explaining us, but is a start. Lets dig into the javascript world! Thanks again, glad I found your channel!
the other day i was thinking of playing overcooked on browser and found that there isn't anything like that at the moment so i thought i should learn to create it thank you for making this series
I'm very excited for this series, because I'm also currently developing a top down adventure in JS with Phaser3 Framework. I hope I can learn some things from this
idk if you know this, but there is a vscode extension called "Live Server," and it makes a server that will also update in real time when you save, its very good, 10/10 reccomend
This is so helpful. I'm learning a lot! Especially researching every step to make it work the same as yours. Such as hosting a simple http server. On my system, the command is: python3 -m http.server Who knew!?
This is the best tutorial!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! all the other tutorials were not as cool as this or they were all in one super long video ;)
As a first time game dev with some basic understanding of JS all I can say is these seem to be great tutorials - Flexible, neatly organized and understandable code structure Efficient yet succinct arguments and declarations The core concepts being used in each and every video in the playlist summarizes some complex workflows and frameworks in a unique way Here's the entire playlist in case there's some trouble finding it ruclips.net/p/PLcjhmZ8oLT0r9dSiIK6RB_PuBWlG1KSq_
Such an awesome tutorial! As someone aspiring to dabble in developing small games this is truly inspiring and makes the whole process feel in reach. I have to say there’s probably ~25% of this that was still over my head - any recommendations for additional resources to brush up on the basics?
the first bit at around 15:30 is not working for me i have to go in the html and put in the demo lower thing its just not working for me in the javascript which is weird so i was wondering if you could help
Hi! I am so happy you uploaded these videos because I got the idea to make a game for my girlfriend for her birthday so I am following along with this :) I do just have one question though, for your backgrounds, did you get them from anywhere specific or did you have someone draw them? Just because I found assets, but they are tilesets so I am just a tad confused on that part. I look forward to your answer, thank you!!
This is such a great tutorial! I just completed this video but made it in React JS using functional components instead of classes - my code looks a lot different but it's working anyways.. I have no clue why I'm doing this, but inspired by this video nonetheless! amazing stuff
Great video series so far! I'm having a issue with the whole init process, specifically getting the expected results from 12:50. When changing the function to the overworld.init(); , I don't get the message proving connectivity. Any suggestions?
Your videos are fantastic man. I just wanted to note that instead of pushing the game-container down after scaling, you can use the css property transform-origin, and set it to transform-origin: center 0; which keeps the horizontal scaling centered and vertical scaling top down.
New episodes published every few days as we build this thing!
I'm waiting every single day pal !
what engine are you using for this?
@@ensignwilliampittsjr5216 vs code
This is exactly what i was looking for, everytime i look up how to make an Rpg i get pseudo advice articles like "you have to work really hard" or "start making a cardboard game" thank you for showing how to literally make a game
Lol, hopefully this will help out a little more than the bits of advice you mentioned. That said, it definitely calls for you to step in and make it your own 🤘
Well, I bet you need those advices because I dare you to make an RPG game. I will be the first to play it.
@@Griot-Guild Yeah! That's what I like.
I'll play your game :)
I came here for the same reason as you :)
I started making a game with an entire team just because of your videos and now you are making an entire series of making one, keep it up!
Dude I am so glad you are doing this. Danger Crew inspired me to use my react skills to start working on my own turn based RPG. So excited to watch this whole series! You are an inspiration :)
started working on a game with a team of people and this series is the absolute perfect resource for learning what it takes to make a game from scratch, thank you
I've been struggling with building games in JS for months but you explained it in a way that is finally making sense. Thanks a bunch for sharing these tutorials!
Ive been struggling with js for so long and this one video opened my eyes to everything Ive been missing, The way you explain things as you're doing it is what makes you a great teacher! thank you for broadening my horizon and giving me motivation and inspiration!
Timestamps:
1:12 setup
5:39 css intro
8:11 javascript intro
14:30 render image to canvas
16:26 scale canvas
21:49 render image to canvas (advance)
Note:
* VScode have live server extension if you don't have python version 2 as shown in the setup
Just started and finished this part one of this tutorial today. You explained everything great. I'm excited to continue this project!
Such an underrated channel. Really excited to see you posting rpg game dev stuff again. The Danger Crew vids were the best. I really hope you get lots of new subs!
So, i ran in to a problem, that my hero sprite got placed behind the map. For everyone who has the same problem, here is how I solved it. My map had 200KB while my hero sprite had around 4KB, which caused the map to load longer and place it after my hero sprite. Tried to work around this with z Index settings, didn't work either. I rendered the map down to about 30KB and it worked how intended.
Great tutorial btw, keep it up!
Thanks, I'm about to start a project to teach programming in C++ through a game and your series of videos on how to create an RPG game for the web will help me a lot.
as a front-end developer, I love so much this channel, mainly this playlist
I love these tutorial series about RPG games! Please keep them coming.
I know this was a month ago, but when scaling your canvas, you could use transform-origin instead of translating 50% on the Y :) or you can use display flex on the body with align and justify to center the canvas :)
God dammit man, that's some GREAT content! I'm a webdev interested on learning how to build games and I wasn't sure I wanted to learn right now how to use Unity or something else. I'm loving to see that it's not only posible to create a game with JS but it's a good way to get started.
I was pretty hyped up when I saw this notification pop up, I’ve left it for a while so I’ve got a little backlog to work through. Thanks for this Drew, I’m excited to start coding along!
Great video! This was exactly what I was looking for! I will definitely go through this tutorial to learn the basics about this original way of game dev, and I hope to get the time eventually and add more functionality and content to share in the Discord community for this game. I will definitely follow your tutorial until the end. BTW, the media queries to make it completely responsive is:
.game-container{
position: relative;
width: 352px;
height: 198px;
margin: 0 auto;
outline: 1px solid white;
transform: scale(3) translateY(50%);
}
/* Resizing for all screens up until 1278px */
@media (max-width: 1072px){
.game-container{
transform: scale(2.75) translateY(50%);
}
}
@media (max-width: 978px){
.game-container{
transform: scale(2.5) translateY(50%);
}
}
@media (max-width: 891px){
.game-container{
transform: scale(2.25) translateY(50%);
}
}
@media (max-width: 802px){
.game-container{
transform: scale(2) translateY(50%);
}
}
@media (max-width: 714px){
.game-container{
transform: scale(1.75) translateY(50%);
}
}
@media (max-width: 626px){
.game-container{
transform: scale(1.5) translateY(50%);
}
}
@media (max-width: 537px){
.game-container{
transform: scale(1.25) translateY(50%);
}
}
@media (max-width: 447px){
.game-container{
transform: scale(1) translateY(50%);
}
}
@media (max-width: 360px){
.game-container{
transform: scale(0.75) translateY(50%);
}
}
Feeling pretty dumb never thought to use the image editor to get the scaling... always spent 100 hrs trying to figure out the mathematicals... this is a great tutorial by the way. You got my Sub!
Finally I found a video that the guy just don't throw up the codes to my face. You are simply explaining are you doing. I just being to watch and thx for this content
Subbed! Going to watch your series, please don't stop making them!
Absolutely loved this. So clear and engaging. Thank you!
Bro, I'm just getting started with coding, started about two weeks ago, and coming across this is a Godsend. Thank you Drew! Earned a new sub!
Thanks for actually explaining the why's behind everything!
Amazing how you explain at 15:30 and at 18:32.
Thank you.
BTW: I didn't know Michael Ross of Suits was such a rad JS dev🤣.
Where we you all my life. I am excited to creating a game using html, also thanks for answering my questions In the video.
Thank you Drew!!! This is my first on javascript ever, and it all worked perfectly! I was somehow lost when you started using Visual Studio Code, as I thought it was the same as the Visual Studio used with Unity, but made the switch right away. Anyway, I just wanted to make this comment to remind me (and encourage me) that I was able to finish part one. I know that for now I'm just copying your code, and that my results are because of your great work explaining us, but is a start. Lets dig into the javascript world! Thanks again, glad I found your channel!
the other day i was thinking of playing overcooked on browser and found that there isn't anything like that at the moment so i thought i should learn to create it
thank you for making this series
I'm very excited for this series, because I'm also currently developing a top down adventure in JS with Phaser3 Framework. I hope I can learn some things from this
Great channel! Deserves way more attention.
I was looking for something like this, appreciated Drew o/
This will help me tons in getting started o/
idk if you know this, but there is a vscode extension called "Live Server," and it makes a server that will also update in real time when you save, its very good, 10/10 reccomend
Please don't stop this series. Please. I love RPG games. I am a big fan of pokemon games.
Your Content is The best I Ever came across
And so my adventure begins
This is exactly what I was looking for. Thanks a lot for the efforts you put on this, really appreciate it!
Whre can i find the images
Exactly what I needed !!! I'm so excited !!!
Wow this honestly is really interesting, detailed, and just really helpful and fun!! Thank you for this!
So excited for this series! the scaling with css and pixelated blew my mind! awesome channel!😁
Thanks!! This was great!! I'm coding while my pinky is broken!!
I'm very excited for this series
12/27/21 Part one finished! Thank you Drew!! I and trying to slowly get back into game programming I hope to try and finish one part each day!!
Awesome video! I'm watching and converting the vanilla js/html to React code
Dude I just stumbled upon your videos and your channel. Great tutorials man. Really well done.
Just found this channel. Really excited to try the project!
just awesome!!! thank you very much!!!
8k? subs? Your completely underrated!
Just discovered this channel. I have to say this project playlist is amazing. Keep it up 👊
This is super cool! I loved the demo for Danger Crew, so it's gonna be really exciting to see this one! :D
glad I found this channel
this is great, this should have more views
27:36 Overload resolution failed
This is gold please make more!
Can someone please explain to me from 4:21 - 5:02 , i'm completely lost, can I just use live server instead of the one that you used?
Any news?
@@Altazas I used live server on vs code and it worked fine. I just skipped all that stuff in the beginning
This is so helpful. I'm learning a lot! Especially researching every step to make it work the same as yours. Such as hosting a simple http server.
On my system, the command is: python3 -m http.server
Who knew!?
This is the best tutorial!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
all the other tutorials were not as cool as this or they were all in one super long video ;)
thanks for this, explain everything in detail which is great
thanks a lot for that.... i started learning and this is gold ❤
continue this series man! I like it a lot!
nice tutorial, but my browser won´t draw the image
thank you drew!!! loving it.
Awesome project!
Exactly what I was looking for, thanks!
I'm only 7 mins in but God Bless you man this is awesome
As a first time game dev with some basic understanding of JS all I can say is these seem to be great tutorials -
Flexible, neatly organized and understandable code structure
Efficient yet succinct arguments and declarations
The core concepts being used in each and every video in the playlist summarizes some complex workflows and frameworks in a unique way
Here's the entire playlist in case there's some trouble finding it ruclips.net/p/PLcjhmZ8oLT0r9dSiIK6RB_PuBWlG1KSq_
i'm loving this series!
Thank you for these tutorials, help me a lot!
very excited for this series !!
Thank you for this wonderful video! Love it!!!!!
I made it!!!! i love pizza :) can't wait to see where this goes!😁
Glad i found this just what I was looking for
Great series, learning lots from part 1!
whaaaaat? free upgrade for my frontend skill to make games? hallelujah, Drew, halle-freaking-lujah!
I'm excited to see how this series develops - Do you have plans to package inside of Electron at the end ?
I am considering it! There may be a bonus section at the end that covers basics of electron
Excellent video.
Viewed on 2024/08/01
Guys turn the scale down if your size is too big
Thanks for great lesson
You explain things soooooo well ty! 😁
Loving this series!
A legend ❤
thank you for golden content!
This is awesome can’t wait for more
This is so brilliant, thanks a lot !!!
Such an awesome tutorial! As someone aspiring to dabble in developing small games this is truly inspiring and makes the whole process feel in reach. I have to say there’s probably ~25% of this that was still over my head - any recommendations for additional resources to brush up on the basics?
I would recommend freecodecamp. Their focus is on html css and js so it's great for front end stuff like these!
Wowwww, I can't wait for the next one.
4:00 you DO NOT need a webserver, just drag your html file to your browser
Nice project, very good to learn JS
**Check Notes** --- LMAO ... That made my day
The favicon.ico file is missing in this drive folder (same thing with part 2)
the first bit at around 15:30 is not working for me i have to go in the html and put in the demo lower thing its just not working for me in the javascript which is weird so i was wondering if you could help
Is there a way to put the character sprite infront of the background? I can't figure it out.
very good job!
Hi! I am so happy you uploaded these videos because I got the idea to make a game for my girlfriend for her birthday so I am following along with this :)
I do just have one question though, for your backgrounds, did you get them from anywhere specific or did you have someone draw them? Just because I found assets, but they are tilesets so I am just a tad confused on that part. I look forward to your answer, thank you!!
for windows users, just right click on your index file and open with your fav browser.
no issues found, just the console.log ''it's working!'' doesn't show...
hi
how do i cd into the project directory ?? thank you !
using python3.12
This is such a great tutorial! I just completed this video but made it in React JS using functional components instead of classes - my code looks a lot different but it's working anyways.. I have no clue why I'm doing this, but inspired by this video nonetheless! amazing stuff
Im lost where you opened the code in a browser, not sure what you did to get there
Great video series so far! I'm having a issue with the whole init process, specifically getting the expected results from 12:50. When changing the function to the overworld.init(); , I don't get the message proving connectivity. Any suggestions?
Hmm, there must be a mismatch somewhere. Try comparing your code to the download code in this one. Often it’s a little forgotten or misspelled thing
Your videos are fantastic man. I just wanted to note that instead of pushing the game-container down after scaling, you can use the css property transform-origin, and set it to transform-origin: center 0; which keeps the horizontal scaling centered and vertical scaling top down.