Play The Game -> HERE
See The Source -> HERE
Steem Monsters: SNAP! is my addition into the Steem Monsters recent game jam. Burdened with a few computer issues at the start of the jam, I was only able to participate with roughly 24 hours left to go.
"Pshhh, 24 hours to make a game? No problem!", I said, "This will be a piece of cake!"
[ note to reader: this was not a piece of cake, the cake was most definitely a lie... ]
So, my original plan was to create a game where you walk around a large map, holding only a single Steem Monsters card. Occasionally, you'll run into wild monsters who are trying to battle you. You had to use your singular Steem Monster to combat them in a silly, yet tense, battle! I had a bit of lore built up in my head about this, but I'll save you the story. Point is, I quickly got to work on making the movement system for the game.
I decided to make a 3D game, just because I thought it would be neat to see flat, 2D Steem Monsters running around in a 3D world. Old school games like Wolfenstein, Doom, and Duke Nukem always held a spot in my heart for their aesthetics. Semi-fake 3D / billboard sprites, for whatever reason, always intrigue me.
After making the turn-based movement, and a very simple tile-map parser [ which is responsible for looking over a 2D tilemap, and placing 3D objects that represent walls that the player will then collide with ], I got to work on the first person view. More importantly, the almighty HAND OF GOD! [ a.k.a. my hand that I took a picture of at 2 am ]
In order to get the "player's" hand into the game, I first had to remove the background [ all of the following, I did in GIMP ]:
I created a semi-rough mask around the card, hand, and arm, reversed the selection, and poof! One press of the delete key later, and you've got yourself a hand floating in some transparent void!
[ pro-tip: when working with masks, set the feather radius to roughly 20px. this allows for some messy masks that still turn out looking decent, saving you time ]
You'll notice, I decided to take a picture of me holding up an actual card [ a magic: the gathering card, nonetheless ]. This is so, in the game, when I add in a fake Steem Monsters card, the position and grip of the hand will look realistic... realistic... yeah, we'll get back to that in a bit.
But, the card is only for reference, right? So now we do some more mask-&-delete magic and remove the card from the picture:
Looking good. EXCEPT! I wanted to give this game a low-rez aesthetic [ like the old school games I mentioned above ].
No problems there, just apply a simple GIMP filter [ I messed around a little bit with the lighting and also used a pixel-blur ], and presto-pixel, you've got a genuine, bootleg, old-school, retro looking hand:
So, so far so good? Everything's going to be smooth-sailing from here on out... right? Hahahaha, you, my friend, have never participated in a quick & dirty game jam before!
Right before I went to sleep, I managed to get monster spawning and a basic ui for the yet introduced combat mechanics.
Then, I went to sleep. Then, I woke up. Then, I modestly calculated how long it would take me to implement a battle system. Then, I checked how much longer I had left in the game jam. Then... I panicked.
Yeah, so, I had to get real with myself here. There was simply no feasible way for me to add in turn based combat with attacking, defending, stats, leveling up, and god knows I wouldn't be able to balance any of it.
Bummer. But, I still had something... right?
Well, yeah, kind of. I had movement. I had maps. I had several monsters waiting to popup and say hi. And, most importantly... I had an arm!
So, I quickly re-worked my initial concept and decided to turn the game from a pokemon-battle type of game, into a pokemon-snap type of game.
Pokemon Snap, for those who don't know, is in odd but charming game where you take pictures of Pokemon. Genius in its simplicity, I decided to have a bit of fun and see if I would be able to emulate some kind of version of that in the ~10 hours I had left.
I got to work scrapping most of the code I had already written, keeping only the movement, tilemap, and arm-waggling scripts.
For the camera, I was able to find a great looking retro one on unsplash, isolated it, and did a similar low-rez filter like I did to my hand. I also duplicated it, and modified it a bit, creating a 'front' & 'back' of the camera.
I made it so that every step you took [ forwards or backwards ], there would be a 25% chance that a monster would spawn in front of you, whizzing by your camera. If you were quick enough, and snapped a picture at just the right time, you could capture it! [ not, like, physically, like in a ball or something. that would be crazy... ]
I quickly polished off whatever I could, and submitted it to the game jam. The next day, I saw that the jam's deadline was extended 24 hours to help people finish up with building and packaging their games, so I took the opportunity to not only add one last final piece of gameplay, but also test out DLive, where I streamed me developing the new mechanic [ thanks to those who stopped by and watched :) ].
I decided to add a 'film-roll' type of screen, where you can actually see all of the monsters that you've taken pictures of, as well as how many monsters are left to discover of each element I had added into the game [ due to the time restrictions, I only got around to adding Earth, Water, and Death type monsters, 11 of each ].
Finally, it, at the very least, felt like a solid little proof of concept for what could end up being a pretty enjoyable game.
What Went Right
- The movement system came together much faster than I expected. I'm still very newbie when it comes to making 3D games, so dealing with euler angles, quaternions, and odd x-y-z math can sometimes bottleneck my programming. But this time, things worked out relatively smoothly.
- I also was able to get the tilemap-parser up and running very fast. I have written several of these before, but it always feels good to have a 2D map transform into a 3D one.
- I enjoy the look of the game. Might not be everyone's cup of tea, but I'm on a real kick of low-rez, semi-bad but still appealing, odd and funky atmospheres lately so, to me, I think it looks fun :)
What Went Horribly, Horribly, Horribly Wrong
[ Was that header too dramatic? ]
To be honest, once I removed the concept of battling, and narrowed in on a simpler overall concept, the game started to come together a lot smoother. However, remember up above I foreshadowed about the 'realistic' card holding grip of my hand? Yeah, so, that obviously came back to bite me a little bit.
When the game had you actually holding onto a card, that hand looked fine. It looked like you really were grabbing onto a Steem Monsters card. Cool.
But, when I switched over to the player holding a camera, the card-holding grip just looks plan weird. Like, really, who holds a camera with just their index finger and thumb? Right on the very corner as if they've never seen a camera before and are afraid of it lol.
Well, I simply didn't have time to take another picture of my hand in a better pose. So, aside from that, and aside from scrapping most of the original game I set out to make, and aside from the monsters being a bit finicky in their spawning behavior, and aside from the game not having too much gameplay in it, and aside from not sleeping a whole lot... This game came out perfect. ;)
Technology Stack
This might be my favorite section of this entire post, because it means I get to shill out my favorite piece of software that I use nearly daily.
The game engine I used to make this game [ and, indeed, all of my games within the last year or so ], was the superb: Superpowers HTML5 game engine made by the wonderful Sparklin Labs.
This game engine currently isn't being developed anymore, due to lack of funding [ *cough cough* maybe someday we can develop it on utopian and the devs will be able to earn proper support *cough cough*].
But, for what it currently offers, it's a really solid piece of tech.
It utilizes Three.js, runs with WebGL, has Socket.io integration, is deployed as an Electron app... oh my. Look, you can't really get more JS / HTML5 -friendly than this game engine :)
You can find out more about it on their website: www.superpowers-html5.com
Additionally, I used GIMP as mentioned for all the art assets and Audacity for recording / manipulating sounds.
Ok, wow, woah, hey there, thanks for making it to the end of this surprisingly long article. Sorry about that :^)
Anyways, this was a really fun game jam. I'm super excited to participate in any and all future events!
At some point, I do want to come back to this game and give it a bit more love. More monsters, more elements, bigger maps, a bit more gameplay, and a total rework of how the monsters appear are all on the slate for the next update [ release: tbd ].
Got any suggestions / feedback? I'd love to hear it!
You can reach me:
Here's the link to play the game again, or you can play it on the steem-centric SteemGG! Thanks for reading & playing, I hope you had some fun!
Thanks to Steem Monsters for hosting the event, thanks to all the contributors for throwing in some prizes, thanks to the discord community for helping answer some questions of mine and also just generally being a cool group of devs, and thanks to everyone on Steemit for making the internet special again :)
Take care!
- Spencer