Building a JavaScript RPG game + Releasing on Steam (Danger Crew presentation)

[@DrewConley]

Hey friends, let us know here in the comments what kind of game you're working on with JavaScript!

[@luizfernandonoschang8298]

Awesome job!! Could you please make another video talking about Steam peculiarities? For example, did you use the Steam's achievments system? How does it work? Is it an API that you can work with using ajax requests or there is a specific port of the Steam library for JavaScript? That would be very interesting....

[@DrewConley]

Luiz Fernando Noschang that’s a really cool idea! We only scratched the surface of Steam features with this game, but I did learn a lot of random quirks about the platform. Will ponder and see if I have enough for a useful video!

[@kronokun]

I am working on a game called kings and pigs, in this game you play as a vi(king) who defends himself against pigs with bombs, planes and other weapons

[@pmmbb3344]

Danger Crew looks absolutely awesome. I am surprised by one detail though... it looks like you use DOM elements for displaying sprites, nonetheless it moves smoothly ( I decided to use canvas fearing some lag, or other issues with DOM elements animated by CSS and javascript) I have been developing Angel Squad, purely out of vanilla JS, HTML, CSS, pixelart, with its campaigns and dedicated game editors using the same technologies + PHP. Angel Squad is a mix of a brickbreaker, and a vertical shmup with powerups, combos and other features. Your character can be upgraded, and powerups can be purchased with gold coins. The game is divided into various missions that (can) contain several objectives. A demo will be soon available on itch.io

[@mrss_darkdragonov]

Me, I'm making games called Zpecial Child and Les Geass. I need some help to create a Free games for Android on Play Store. I hope they don't need to pay someone. Just i need some help for my project

[@TodorescuProgramming]

that sprite animation is pure genius... how easy you did it to just toggle the class that has the keyframes with steps... great job guys! going to buy this game on steam

[@perseuswong6864]

This is the CLEANEST code I've ever seen. In fact, I'll credit this video for convincing me to rewrite my game in React + Electron

[@MrMariy0]

awesome. thank you! I am trying to create a 2d topdown realtime multiplayer with node and react, now i've got some motivation

[@chocomunky128]

I'm still relatively early in my Web Dev journey. I've been programming for about a year now and have created two games: Blackjack, which is... Blackjack using DOM elements, and Space Cat, a clone of the old pc-80 game Space Mouse, made with Javascript and rendered using the canvas element. I actually first started messing around with Game Dev back in the golden days of Flash and ActionScript and later dabbled with Game Maker Studio. Both of those languages paved the road for me to learn Javascript. Space Cat was a huge milestone for me because I was able to build an entire game engine without using any frameworks or tutorials. I also had a lot of fun making it. Learning about Electron was a huge inspiration for me and I can't wait to work on my next game project. Awesome video!

[@DiegoDevPro]

Great talk and amazing project. Thanks for sharing your experience.

[@LucasDev]

DUDE! This game is amazing! Even more knowing that it was done only using web dev languages, I insist on buying and spending a few days playing, RPG is my favorite style, I work in web dev for more than 10 years, I always wanted to make games but I never managed because I am not good with graphics. I loved the way you used tiles to make the player move through squares. Congratulations! What an incredible game.

[@mr2ti41]

How did I not think about this before.. genius man.. genius.

[@scribs404]

Fantastic presentation! Very inspirational, I started working on a browser game today with some friends and members from my community and now I have newfound faith that it'll actually become something :D

[@danielmorris7651]

Awesome, thanks for the intro and info

[@ahntree]

The tutorial is awesome… I was looking for game dev tutorial as a frontend developer and this is it! Thank you Drew.

[@AirIsLungFood]

Great tutorial! I found this incredibly helpful, and as you hoped, motivational! After working as a web developer on a three year solo project and not taking any time off, I'm being 'forced' to use some of my vacation time. I'm maybe a bit of a workaholic, and need to be working on something. I spent the first few days gaming on steam but started dreading the thought of doing that for the next week and a half. No joke, your video has made me excited about my time off! :D Thanks for sharing!

[@iRaionSama]

You're an inspiration to all of us! Thank you very much for this encouraging video in these hard times :D

[@luckymouse1988]

Dropping a like for reintroducing me to Electron!

[@DisasterMan10]

15:23 this is pure css genius, nice one!

[@eboatwright_]

I found this game a few years ago, and today and yesterday I played the demo. I have to say, this is probably one of my favorite games! :D

[@Lucas-gt8en]

Dude the spritesheet animation 🤯

[@excers2581]

Ik nothing about Javascript, now I feel like I can make a game lol. Ur a good presenter!

[@ctXx12345X]

I find your channel very helpful and informative. You should have more subscribers.

[@mitejmadan8672]

eureka moment!!! This video have really opened my mind in web development. I love the UI of the game. I have been a huge pokemon fan.

[@brotherhoodwithnobanner1309]

Thank you sir this is exactly the tutorial I want. Just learned react at university and can’t wait to have a try

[@ajinkyax]

the line made me subscribe "I help ppl get into game development"

[@Asty__]

This is so inspiring. Your presentation was really nice and clear, both visually and in your explanation. What you said truly opens up doors and potential I didn't expect. It's amazing to see some of the behind-the-scene work and thinking process. I also love the concept of the game that is centered around developers stuff. I wish there were more games around that. Thank you, and wishing you the best.

[@traversal6881]

Love seeing someone else make a game in JS! I need to get into canvas though- still trying to do too much in raw JS and it ends up quite hefty performance wise.

[@vallyexe]

Thank you! Ill be honest coding is one of the most stressful and difficult things for me. I want to create an RPG game, but of course I know I need to learn some coding, but Its extremely difficult for me to understand coding concepts. I'm going to try my best to dissect your code and hopefully not give up anytime soon...wish me luck

[@rafie9562]

Good luck

[@Arceus5555]

Idk if you're still trying to make a game, but definitely try RPG Maker MV or MZ! It's definitely very basic from its start, but you can do practically anything you'd want in there, especially as far as RPGs. Even Godot could be a great free option! I feel like making an RPG like this is most ideal if you're already familiar with front-end development oriented coding languages over more generalized or even game-oriented code languages.

[@sempribo]

Thank you Drew for this awesome presentation! The game looks really cool.

[@droidlycodes]

I don't know a lot of javascript but still cool, I came here from you Firebase Multiplayer guide this RPG looks cool!

[@diegoiovane7383]

Great work! I've been working with RPGMV but now turning into JavaScript after this series of videos you are releasing. It is a great guide for me since I am only have a couple of months with JavaScript. I am developing a japanese language educational game

[@DrewConley]

Thank you! That's really cool to hear. Keep me posted on your progress!

[@advanced1000]

Hey that this awesome!! Look very cool! i am working on a RPG too , a Horror-one i am a new game dev. as a game dev Game engines ARE NOT important !! you dont have to spend too much money for making a awesome game.. you can make great games too with free engines. like me i using JavaScript and C++ to make games and too i bought the Danger Crew game yesterday.

[@agent-33]

Pure JS or with frameworks?

[@LofiCoder]

Amazing presentation! Please make a series tutorial about Pixel art game dev for Web, really want to learn it.

[@ProSimples]

I tried to like but I have liked already the last time I went here. Great material.

[@helenaisaac3449]

Love the idea and presentation of gamecoding in javascript!! Thank you!!!!💖💖💖

[@Kessik8]

I suddenly have an even bigger love for the Webprogramming course I chose to take in university this semester. Thanks!

[@DrewConley]

Good luck with the course! You can achieve anything with web programming 😀

[@MultiConatus]

Great! You gave the blueprint. Now, let's make a game in JS and release it on Steam!

[@Frankslaboratory]

Great video Drew, thanks for sharing your knowledge with us

[@beunmin6]

Because of this I'm now gonna be a Game Dev.

[@EmiliaKaida]

Great presentation! An in-depth tutorial with all the details would be even greater.

[@YellowPanamka]

O god save me, now i'm in js game developing LUST, after this video...

[@deanwilcoxson9754]

This is very cool!!! I'm still in school for full stack. But it's good to know I'm not locked into front end and back end. Good inspiration, I look forward to playing Danger Crew!

[@mirang2803]

Excellent demonstration! Game looks really cool :) Good job!

[@kamote8192]

I'm an aspiring game developer and also a React front end dev. I'm glad I found your channel! Please don't stop making videos

[@arthur1387]

This is really great! I wish you would make a tutorial about how you made this . . this is so interesting. Great Job!!

[@kungfukenini]

Thanks for this! Big fan of your work since I tried the demo of Danger Crew. Currently building a game for my final project in my web dev bootcamp and it's not as intimidating! :)

[@DrewConley]

That's awesome! Good luck with the game project!

[@damienvanced5790]

So inspiring. Really well explained. Just love it ! Great job !

[@sabinedeviche6502]

Love your videos! Thank you SO MUCH for creating them and sharing your knowledge :)

[@tomnewton3191]

Really well put together video Drew, thanks for the insights! Not working on a game as such but currently building a web app which I intend to "gamify". It's interesting to see that even game dev videos about javascript are much more popular than web dev videos! People love a bit of game development! :D Tom

[@Jasua]

thanks a lot draw for your inspiration and this motivational video

[@brentryczak]

This is amazing and highly encouraging. Thanks! Great game also!

[@imxaander3302]

im currently working on a game like monster hunter but 2d and the battle system is turn based , looking forward to your next videos. pixel art is never been easy on first time

[@WorstDeveloper]

I love how the game turned out, and that you were able to create it with normal web dev skills. How much did you end up earning from this project?

[@jgarale]

super cool!! thanks for sharing!

[@luisb9862]

I was just thinking about builiding a little card game with js for a project I need (Im just a beginner), and thought it was too difficult. And then this gets in my recommended. Now I have full confidence to do it :D, very well explained and insightful video

[@nathanielcooke1902]

wanna pair program it right now... I'm good with Javascript, HTML, and CSS?

[@luisb9862]

@@nathanielcooke1902 thank you good sir, but its a project for an online course and I cannot receive external help 😇

[@joshgordon7299]

Awesome dude, looks like a fun game

[@xyhard8603]

Dude , Thank you! You solved my unsolved questions with one video. Subscribed!

[@emanueltejadacoste2250]

Wtf this video just got to my screen and im a self taught web dev and also want to become game dev in a coming future ... amazing 👌

[@wchorski]

I've been getting the decision paralysis when it comes to game dev tools. I've made quite a bit of demos in Unity3D but pivoted to Web dev for a few years now (React, Node) I was looking into Godot as I'm big on FOSS, but noticed all the great tools for building web games (which is my target) BabylonJS and Phaser seemed to be the 2 big winners. I really liked where in Unity I could build out a 2D and easily transition to 3D so BabylonJS makes the most sense to pick

[@joshuaperezleduc871]

This is GREAT!

[@retrofuzzuk3672]

This is really great , thank you. I've been working on a Web game recently

[@2infamouz475]

Mother/Earthbound vibes , I fw it lol. Im working on a game myself in vanilla js /css/html , just a simple 2d rendering system in place right now. The workflow has been a dream compared to every other env I've tried. Idk why I slept on web tech for game dev but highly recommend it for a quick entry point / productive workflow with well established & documented languages

[@2infamouz475]

The collaborative potential too omg..u don't need to set up crazy tooling on different platforms to work together when targeting the browser. Any system with a text editor can make contributions w/ ease 🙏

[@christianjohansen1493]

Amazing and encouraging. Thank you.

[@robotpanda6322]

this is wat i needed thanks... as i inserting this directly into my brain

[@Matt.27]

Awesome work

[@nephisto2]

Good reminder that game programming is just programming. Hahahahaha Great talk!

[@AGI_471]

Dear Mr.Drew, can you make a video about mapping, and make a border if the map isn't square and there is a way/route. and also the tree, so the character doesn't go through the things, and the map. Thankyou

[@eliranassaraf7075]

This is exactly what I was looking for! I use elctron in my day to day and I wanted to know if it was possible to make a game using it. For some reason no one else speaks about it Thanks!

[@sy-hungdoan4859]

Very helpful and informative :D

[@djwilkins7]

I would love to do something similar - just with action rpm vs turn based. Very cool project. Thanks for sharing!

[@YourDarkAffected]

Hey Drew! Really helpful video! I'm looking to build a top down 2d game with similar battle rooms, but with real-time multiplayer support via websockets (or firebase like in your multiplayer video) if feasible. I have no idea if a browser-based Javascript game with the scope of Danger Crew could handle real time multiplayer without pretty noticeable performance issues though so I was curious if that might have been the reason you guys opted to go with single player. That could have also just been a game design decision, but I'm interested to hear your thoughts on that and whether it would have noticeably impacted the performance of Danger Crew

[@BKBees]

Drew, I'm planning a farming type rpg. I'm currently a javascript guy, freelance web developer. I want my game to be pixelated top down quite like a few you've made, but I also want persistance, like saved games and all of that. I plan on using Firebase/Firestore for the backend functions and database, so, what engine/framework do you recommend I use? I've been gathering info on Kaboom and Excalibur and Phaser, but I'd like to hear your opinion. Thanks for your time, I love the videos.

[@DrewConley]

Firebase for the backend is a great choice. Have you tried the front end Kaboom/Phaser/Excalibur options? It’s hard to go wrong, but would be worth the time to prototype your idea in all three to get a feel of your productivity with each library. I’m personally an Excalibur fan.

[@PapaStromberg]

really awesome!

[@HannazRolynn]

i didnt even know electron existed thx!

[@AliciaGuitar]

I have been developing a game since 2006, rewrote it several times in different languages/frameworks... i am now leaning toward vanilla js and MAYBE phaser since the frameworks change so often with breaking changes. I love working with frameworks, but not having to refactor and rewrite every 3 years 🙄

[@mathiassamek]

Hello you are very good youtuber and thank´s for your content

[@mirusbhergh]

A dream come true!

[@T12321]

Love this!

[@r1pfake521]

I would like to see / hear more about the enemy AI logic implementation (picking different abilities based on personality)

[@gabrielroque6664]

Question: what if I had multiple npcs that walk around or other players in the scene? How would the viewport handle this? How would the animation sprite would be handled with an unknown number of players? What approaches are known?

[@boot-strapper]

I dont suppose you have open sourced this? I would love to take a closer look or fork it for my own project!

[@JordanICM]

If you think about it, what do you even need electron for? For the sake of the game being located on Steam? As a web developer you could just publish the game as its own website.

[@nursegilbey]

Is it better to just code in JavaScript if you're still learning it, or what about using Construct? Does that make you dependent on that system? Your Pizza game tutorial is awesome!

[@mishuhishu94]

awesome video thank you! :D

[@AustinInSeoul]

Amazing content!

[@CodingFibre]

Hi, great video there and great ideas ! I started creating my own front-end video game a year ago ans ended UP quitting, didnt know how to manage the z-index property, I'm definitly curious to know how you did to avoid Map items overlapping !

[@imxaander3302]

thanks...this is awesome!

[@bucketlist5722]

nice explanation, really liked the video. I am looking forward to make portfolio website using some game to make it interactive. How did I start?

[@Flipty18]

Inspirational

[@jadebig0]

How do you create these maps and render them? I'm new to creating games on the web so I'm not sure how to go about creating a map.

[@kamote8192]

May I know if you still have the powerpoint style or the documentations of your tricks on how you make your game using React? If there is a price, I'm fine with that. I'm trying to create my own RPG, this will help me alot. I hope you respond! Thank you.

[@ashleyhoward14]

I loved this! Do you have any recommendations on how to make background music? I'm coming from the pokemon games, so anything like that would be awesome!

[@mj2068]

so cool!

[@raficelkouche8531]

That was a great video and your project looks amazing. I am trying to develop a game using react and I would like to have some suggestions regarding tools that I could use to design the maps. I need something beginner-friendly. Thanks !

[@nunofontes3895]

Hi Drew, great video! I'm trying to do a game in React. Just one question, where or how do you draw the background image?

[@DrewConley]

I usually reach for css background-image as an inline style on the container. You can swap out the image (for a different level, etc) using state in your container’s render method. Hope this helps!

[@nunofontes3895]

@@DrewConley thanks for the response Drew. Sorry, I didn't explain myself the correct way, I meant how do you build/draw the image pixel by pixel? =) thanks for the patience

[@RayanLaRoze]

Thanks for your sharing :)

[@alexandrasmandrik1441]

Awesome!

[@writeatunethatreallysucks8696]

super cool, game!

[@CASMANWHAT]

Can you make a tutorial how you set up/organized your react app with phaser and how you organized your files etc. thanks a lot!

[@DrewConley]

Hey, this project did not use Phaser.... it's only Create React App. My project setup is honestly very boring but I will consider this!

[@skiznit]

Nice game! I've also been working on a react game. What, if anything, are you using canvas to render? It seems most people use canvas to render everything to have more control over the animations.

[@DrewConley]

The character spritesheets here are rendered as individual canvas tags. Graphically intense bits will definitely benefit from canvas. It all depends on the needs of the project. In this game, we were able to get away with mostly just raw DOM elements.

[@desmondharvard6055]

Wow this video was awesome. TBH, game development did seem like a steep hill to climb, but one thing I'm learning is coding projects takes time. We live in a world where you can do almost anything instantly, so patience is always a conscious thing to be aware about. This video is helping me calm my nerves and anxieties. I have some questions. I just started learning python. I've been picking up some books from local libraries and I'm about 5-6 chapters in. My cousin recommended python to me because it's the simplest language. My *first question* to you is what language would you recommend for solo-game developing. Or do you recommend python at all? I downloaded a free version of unity but I'm unsure of if it is worth it to learn python first only to have to learn to code in unity. I'm just at a point where I don't know which language I should start in. I did have some thoughts about HTML5 because web games are usually simpler. My *second question* is would you say that conceptual learning is more important than technical learning or are they equal? For example, is it more important to remember the exact syntax of each language and their respective "coding packages" (like python + pygame) or would you say it's more important to remember that this function does that and so forth. I'm having a hard time trying to figure out what information is most important to retain. Also are there any books or video tutorials you personally recommend to help out a person learning code/programming at the novice level?

[@DrewConley]

Hey! I don't know if there is such thing as a simplest language, haha! Python is a great choice for getting started. I've never used PyGame, but I've heard it's really great. For the most part, I don't think the programming language matters. Build out your ideas with whatever you can, you'll learn the tradeoffs as you go. For the second question, I don't really stress about the memorization part. I am constantly googling super basic things and asking for help... the memorization comes from muscle memory of coding many things over and over again. There is no substitute for practice. If you're having fun building apps and games, you're in a good place! For webdev specifically, my go-to influences are Chris Coyier, Sarah Drasner, Scott Tolinski (Level Up Tuts) and Wes Bos!

[@desmondharvard6055]

@@DrewConley good to know! Then it's settled, I'll stick to what I know and keep it simple! Your game looks great by the way. I plan on getting my hands on it next week 🔥

[@haider_javaid]

I have one question sir. Do you think it’s possible and recommended to build this on react-native?

[@angrywolfjr7164]

this is so inspiring, tho man collision is a bit scary