What I learned from my first free experimental HTML5 game CRAVEN

After four years working on two major indie games, I decided to take a break by rapid-prototyping a few micro ideas. My first title CRAVEN already taught me a few good lessons!

What is CRAVEN?

Craven is a simple 2D action game controlling a flock of ravens, feeding on dead cadavers on the ground, and avoiding being eaten by wolves. You can play it right here on GameJolt! Please rate and leave a comment too – the feedback is very useful.

Craven Free Indie Game

My personal goal was to design a simple game around one or two basic mechanics, polish it up a bit, and see how it pans out. It was really more of a “design experiment” than a full-fledged title. I wanted to play around with my ideas, get some feedback from gamers, and research the HTML5 gaming scene.

Lastly, I must credit Matt Unruh for coming up with the original design idea. Thanks Matt!

Introduction to HTML5 Coding and Phaser

phaser game engineFor the purpose of easy and free distribution, I chose HTML5. I admit I am not a fan of JavaScript due to it’s weak typing, lacking class / namespacing support, and occasional syntax oddities (among others). I also picked the Phaser game engine to speed things up. It is a pretty good framework that provides a state-based game management, resource loading, as well as built-in handling of sprites, animations, physics, and audio.

Pros

  • You can get stuff up and running pretty fast
  • It works in your browser, making distribution really easy
  • Good documentation, plenty of tutorials/examples, and decent community support
  • Built-in support for basic game structures (state machines, sprites, etc.)
  • Built-in support for common input methods (arrows and mouse/pointer)
  • Various 3rd party plugins (i.e. Rotate’s Isometric projection or A*)

Cons

  • Searching the documentation/examples can be a bit cumbersome if you want to do something outside the box
  • Input handling requires extra steps for setting up non-standard keys
  • Some performance issues if your game gets big (though, probably more due to JS/browsers than Phaser)
  • Being browser-based, you need to be extra conscious of image/audio filesizes and loading times
  • Poor IDE support and debugging tools (I’ve been spoiled by Visual Studio)

Publishing on GameJolt

This was my first time publishing an HTML5 game online but the process was thankfully pretty painless. It took me more effort to find the proper screenshots and logos than to prepare the actual game files. GameJolt pretty much handles all that – I zipped up and uploaded my whole local work folder and didn’t need to make any adjustments (aside from combining all my JS files into one)!

CRAVEN Free HTML5 indie game

What went right

The biggest pleasant surprise was learning that gamers really like the morbid theme and art style. I was worried about over-doing the dark tone and putting people off, but turns out I had a good eye for it!

I also learned the controls and “game feel” worked really well. With just two buttons (flap left, flap right) in a 2D space, I managed to balance the right amount of control with believable bird movement. Each flap pushes the raven to the side and also slightly up, meaning you need to realistically keep moving forward if you want to fly higher, but doing so also builds a good momentum for fast travel. Each tap is equal to one flap, so you get very direct and immediate feedback/reaction to your input. Very satisfying.

I also added a few small movement tweaks such as increasing your overall max speed the lower you get (faster travel vs risking being spotted by wolves) and halving the flap distance when starting from being grounded (which allowed to “hop” on the ground and position yourself on a corpse better).

Lastly, I found the flock mechanic really rewarding. As you feed, more ravens join you until you eventually become a cloud of 30-40 semi-autonomous birds. With all of them looking the same, you can no longer tell which raven you are actually controlling. I was toying with the idea of coloring the player differently, but in the end, I liked this approach. You organically becomes the flock itself! It no longer matters which raven you actually are. It was a neat “game feeling” I discovered thanks to this game.

CRAVEN Free HTML5 indie game

What went wrong

Given the game’s small scope and high focus, there isn’t much I feel I did wrong. The only struggle was closure – I had the core gameplay and mechanics planned, but never quite figured a good way to end it. I added “night time” that kicks in after 2 minutes to put a stopgap on the playtime, and used the flock size as sort of score. Prototyping, I found it was actually fun to try to survive when all your ravens start rapidly flying away due to the night’s cold, so I also added the total survival time as an extra challenging score point.

With maximizing the score being the only tangible goal, the game could have really benefitted from a leaderboard. Something simple akin to old school arcades like Pacman. Good lesson to keep in mind.

Overall, I am torn about how much time I spent on the initial design. On one hand, I liked diving straight into development and confirming the idea and game feel was rewarding before sinking too much time into it. On the other, had I planned better, I could have allocated more time to figuring out the ending and implement a leaderboard.

Where to go from here?

arcade high scores tableThe project was a “Design Experiment” and I feel it succeeded in what it set out to do. As such, I don’t plan on expanding the game, but it could make a good starter for a bigger project. A few potential additions:

  • Leaderboards – de facto #1 thing the game lacked, in my opinion
  • More enemies – I talked with my friend about adding hunters who could shoot you down or vultures that could pick you off in the air. Plenty of room for experimenting.
  • More stages – different environments could have unique gameplay elements and variables. For example, a winter setting could introduce blizzards or require the ravens to warm up by a fire.
  • Rating, Challenges, Achievements – to spruce up the gameplay, I could add some ratings and per-level challenges such as completing the level fast enough, or an achievement surviving under a certain flock size.

Overall, with these additions, I think the game would lend itself well to a mobile title, particularly due to it’s simplistic controls and short play time.

Next Project

I’m now working on the second design experiment called GATHER, where you play as a wraith controlling a group of minions by issuing the proper combinations of words. While you cannot interact with the world directly, your minions can pick up various objects, deposit them to ritual pylons, throw rocks at animals, and so on. It’s a bit of an elaboration of CRAVEN’s rewarding sense of controlling a growing flock of ravens. The game’s theme is exploration and discovery – Of the world, of the mechanics, of what all the pylons and minions do, of different words you can learn and speak to them.

GATHER Free HTML5 indie game

I am getting closer to finishing the project, which took WAY longer than I planned. Being more complex than CRAVEN, I made a lot more mistakes and mis-plannings, but I will delve into that after it’s release!

In the meantime, why not play CRAVEN right now?