The Danger Crew 2019 Edition
I'm kicking off 2019 by putting this out into the world: The Danger Crew is ready to play!
Two of seven chapters are available in the link above. The rest of the chapters are very close but still have a lot of QA and editing to go. Desktop only, for now, but don't worry - mobile is coming! As always, the game has been through a lot of rewrites, redesigns, recoding. It's been a big year. I'm exciting to be back to share what I've learned along the way.
(The Danger What?... I've written about my project, The Danger Crew, before on my CodePen Blog. Here are some of the posts: Revamping the Battles, Introducing the Project, and I got to be on the podcast!)
I worked on The Danger Crew almost every single day since my last post in September 2017. I went through some other big and exciting personal things in the meantime, too. I got a new job! My wife and I sold our house and moved to Denver. Then I started contracting full time. Uprooting yourself and making career moves takes a lot of mental energy, but I was able to pipe a lot of inspiration from the experience back in to the game. (Which itself tries to touch on a lot of stuff people go through in tech.)
Here are some behind the scenes insight into making The Danger Crew, motivation behind keeping it going for 3 years, and takeaways that I hope will help you finish and ship your own projects. These lessons apply to anyone trying to bring big ideas to life, whether at work, on the side, technical or non technical. Let's dive in!
The Pitch
The Danger Crew is an adventure RPG in the browser. It’s about being a developer in a world obsessed with programming. Techies roam the streets with their laptops out, ready to prove themselves the most powerful programmers in the scene. Hack Battles are the law of the land... confrontations where you and an opponent type Terminal commands at each other until somebody's laptop explodes in a smoking cloud of defeat. It's serious. Today is your first day of work at a new job... you're going to have one busy day.
Tech Stack
The Game
This is a CodePen post, so let's talk about the code. Danger Crew is written in React. I bootstrapped the project with Create React App... it's a pleasure to use and I haven't needed anything more custom. It uses a little bit of Redux, too, but in a mega simple and abstracted way. If I started over right now, I probably wouldn't need Redux.
The game .js file itself doesn't contain the story content, like what people say when you talk to them or details about the room you're in. That information is loaded into the app from a JSON endpoint. More on that in a bit.
The graphics are a mix of SVGs and <canvas> rendered PNGs with an important CSS rule: image-rendering: pixelated. This rule allows simple images, like pixel art, to scale larger than natural size on a canvas without losing quality. I learned how to do that from this MDN page.
I utilize inline SVGs for icons and certain stateful graphics: like changing the path colors of your laptop when you're getting attacked.
I make the game's artwork in Aesprite. The animation and drawing features in Aesprite are really easy to use. I export PNGs out of there and sometimes convert to SVG depending on the context of the asset. Huge thanks to Shaw for making this Pen which quickly converts simple pixel art into SVG code. I've used this tool hundreds of times over the past year!
Howler is a JavaScript library that plays our music and fires the SFX. Firebase stores user accounts and player progress so you can save/continue whenever you want!
The Editor
I had a big vision for the story of this game. I wanted to provide a full adventure with the same depth, details, and gameplay length of the games I used to play growing up. Lots of content had to be created: everything from character dialogue, battle details, cutscenes, and more. All of this content would be represented in a JSON format - that way I or anybody else could continue to create more content for the game without modifying the game's bundled js file. I had really specific needs of an editor in mind, so I decided to create a custom CMS, Danger Studio:
It's not the prettiest thing in the world, but it has all of the features I need to create and change content, at least way faster than manually editing JSON. It also manages story flag scenarios. If you talk to a person in the world, he might say line A or line B depending if you've completed task A.
Placements and configurations of Battles are handled in here too, so it's easy to iterate on the flow and pacing of how often the player encounters enemies.
Under the hood, Danger Studio is just another React app with a thin Node backend that simply reads and writes JSON files. There's a concept of Projects within it too... I can edit my own version of the game while Glenn, my game design partner, edits his own. This handy mechanism allows anybody to create additional content completely independent from the main seven chapters.
Lessons
Here are some rapid fire lessons that I've learned from making this game. Some are technical, some are not.
Get your work in front of early testers as soon as possible, even if the styles aren't ready or you have placeholder graphics. I arguably waited too long to get a playable version in front of friends to test which ended up biting me later because many of my assumptions were wrong.
Rewrites take time. If you are considering rewriting part of your project because of reasons X, Y or Z, make sure you double your estimate for how long it will take. Sometimes it's worth the time! In my case, I ended up going through a big rewrite in fall 2018 to fix some major performance problems that added a few months on to the project. (This is only nights and weekends for me, after all). I've also spent weeks chasing rabbit holes that ended up having little to no value, so be mindful how you spend your time.
Have a buddy. For me, it is Glenn, my game design partner. We talk every week and I share progress on what I've gotten done. He always has great feedback and helps me stay focused on the right thing at the right time. Having a person to provide feedback will keep you accountable and motivated to keep going.
Embrace the gap, the painful realization that your work is not yet at the level of quality you desire it to be. Your works gets better the more you pick away at it, so keep showing up. Don't be discouraged if your art doesn't look great or the code is gross. It will get better if you keep trying.
Share your progress, successes, and failures. Even if it's only with a few close friends.
The Danger Crew
It felt wrong to leave this post without an accompanying Pen, so here's a slideshow of some scenes in The Danger Crew. I will continue to update this post as more chapters are released.
Like I mentioned before, the rest of the The Danger Crew is actually pretty close to done... we're entering a period of story editing, QA, play testing the remaining chapters. We also have a nice little CI pipeline set up, so we can easily push enhancements and fixes. As for me, I'm excited to move on with learning Unity and figuring out what's next for me and my career.
Thanks for reading - I hope you enjoy the game!
Drew @drewconley13