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 🤘
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
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!
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.
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
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 :)
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!
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!
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!
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!
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
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!
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%); } }
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
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
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 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 :)
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!
This is the best tutorial!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! all the other tutorials were not as cool as this or they were all in one super long video ;)
Hello I am very new to programming and I am lost in the live web server starting at 4:14. I do not know how to do this at all. If anyone could help that would be great! I did see the comment from Liu Chaunyuan about VScode having a live server extension but I do not understand how to do that either.
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
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?
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?
Hello ! I have a problem, my character is going sometimes under the background probably because my character is loaded faster than my background, do you have an idea how can I fix that ?
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!?
Hey there, I checked my code is exactly the same as the video but when I launch it in the browser, I get this error: Uncaught SyntaxError: Unexpected token '.' (at init.js:4:13) I am not sure how I could fix it. I appreciate your help!
i'm getting lots of "Failed to load resource: net::ERR_FILE_NOT_FOUND" errors when i lunch the html file. any ideas what could fix it? (everything's the same like in the video)
Im really confused about the running a web server thing. Cant we just open the file of our game into a test offline web browser already by just clicking it open?
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!
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
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!
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.
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
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 :)
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!
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!
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.
Just started and finished this part one of this tutorial today. You explained everything great. I'm excited to continue this project!
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!
Subbed! Going to watch your series, please don't stop making them!
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!
I love these tutorial series about RPG games! Please keep them coming.
Great channel! Deserves way more attention.
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
27:36 Overload resolution failed
Absolutely loved this. So clear and engaging. Thank you!
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!
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%);
}
}
I was looking for something like this, appreciated Drew o/
This will help me tons in getting started o/
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🤣.
as a front-end developer, I love so much this channel, mainly this playlist
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
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!
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 !!!
Your Content is The best I Ever came across
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
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
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!😁
Dude I just stumbled upon your videos and your channel. Great tutorials man. Really well done.
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
Loving this series!
Thanks for actually explaining the why's behind everything!
this is great, this should have more views
continue this series man! I like it a lot!
This is super cool! I loved the demo for Danger Crew, so it's gonna be really exciting to see this one! :D
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 :)
Awesome video! I'm watching and converting the vanilla js/html to React code
Great series, learning lots from part 1!
This is gold please make more!
I'm only 7 mins in but God Bless you man this is awesome
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!
i'm loving this series!
just awesome!!! thank you very much!!!
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 a lot for that.... i started learning and this is gold ❤
Where we you all my life. I am excited to creating a game using html, also thanks for answering my questions In the video.
thanks for this, explain everything in detail which is great
very excited for this series !!
Hello I am very new to programming and I am lost in the live web server starting at 4:14. I do not know how to do this at all. If anyone could help that would be great! I did see the comment from Liu Chaunyuan about VScode having a live server extension but I do not understand how to do that either.
Thank you for this wonderful video! Love it!!!!!
Just found this channel. Really excited to try the project!
thank you drew!!! loving it.
Exactly what I was looking for, thanks!
Awesome project!
Thank you for these tutorials, help me a lot!
And so my adventure begins
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.
Just discovered this channel. I have to say this project playlist is amazing. Keep it up 👊
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
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!!
glad I found this channel
Im lost where you opened the code in a browser, not sure what you did to get there
This is awesome can’t wait for more
Glad i found this just what I was looking for
You explain things soooooo well ty! 😁
This is so brilliant, thanks a lot !!!
thank you for golden content!
how do you run the web server in this directory? Im totatlly lost
any links to a video that explains whats going on at 4:26? I'm stuck there.
8k? subs? Your completely underrated!
Wowwww, I can't wait for the next one.
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
nice tutorial, but my browser won´t draw the image
Is there a way to put the character sprite infront of the background? I can't figure it out.
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!
Hello ! I have a problem, my character is going sometimes under the background probably because my character is loaded faster than my background, do you have an idea how can I fix that ?
Having same issue.
The favicon.ico file is missing in this drive folder (same thing with part 2)
I made it!!!! i love pizza :) can't wait to see where this goes!😁
hi
how do i cd into the project directory ?? thank you !
using python3.12
Thanks!! This was great!! I'm coding while my pinky is broken!!
Thanks for great lesson
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!?
Hey there,
I checked my code is exactly the same as the video but when I launch it in the browser, I get this error:
Uncaught SyntaxError: Unexpected token '.' (at init.js:4:13)
I am not sure how I could fix it. I appreciate your help!
i'm getting lots of "Failed to load resource: net::ERR_FILE_NOT_FOUND" errors when i lunch the html file. any ideas what could fix it? (everything's the same like in the video)
no issues found, just the console.log ''it's working!'' doesn't show...
very good job!
I downloaded the png file for the DemoLower and I copied the code and it doesnt upload the png file any tips?
i keep getting this error "SyntaxError: Unexpected identifier
at /init.js:5:5"
Im really confused about the running a web server thing. Cant we just open the file of our game into a test offline web browser already by just clicking it open?
You could but it wouldn't update live on saving a change, so it's not ideal. Also you're on localhost which means you're not technically online
My man... why I got a white screen when running the html and js code
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.
A legend ❤