Game screen layout

To get started I want to show an overview of how I’m planing to build the screens for this game. This is important as I can’t just start with the game play of a level, there’s a few screens I need to make first.

Here’s my initial vision for the screen flow. The only catch is that you’ll be able to get to the setting screen overlay from anywhere… not just the start screen (this was just a limitation of the type of tool I was using to make this diagram (SimpleMind+ for the curious)

The “Overlay” screens I’ve listed I expect to cover ~80% of the screen but are more like a popup not covering the entire screen.

I may add a screen or two later (e.g. something specific for adding/restoring in app purchases or contacting support).

In the next post I’m going to show the skeleton setup I’m starting with to achieve this screen workflow.


Game development framework

I’ve been a bit vague with how this game will be built but I’d like to explain the choices I’ve made so far.

I’m bullish on HTML5 as it will provide most of my cross platform abilities out of the box. However as much as I could write my own framework from scratch (with enough time and interest)… I want to build on a platform that has already solved most of the tricky parts for me and can get me up and running much faster.

I’ve played with a few frameworks and each has its pros and cons. Construct 3 for example makes most games as simple as drag-n-drop with very little programming knowledge required. However I’ve settled on Phaser as the platform. It contains all the things I need from sprite management and asset loading to WebGL optimization, event management, particle effects and animation.

However this only solves the “building” part of the game. I could run my game in Safari or Chrome on phones but it wouldn’t get me into the app stores or give me a way to add in app purchase options out of the box.

To “publish” this game I plan to wrap in a hybrid wrapper that produces a native app that lives in the store but runs my game inside a full screen WebView. This also gets me an extra level of security hiding my full source code from prying eyes. I could use Cordova (formerly Phone Gap) but since it isn’t just focused on games I’ve decided to use as my wrapper. It has a dedicated focus on games, specifically around canvas and WebGL performance. It also has many built in options and extensions for handling stuff at the native layer that JavaScript can’t do.

Don’t you want to make money?!

In my last post I indicated that this was going to be a free game… thus no direct revenue from sales of the game.

I’m not looking to make a fortune – as many will tell you there are many “starving artists” in the game development world… I don’t expect to be any different… but I am planning to have the most potential possible for my game.

  1. I’m planning to release on all platforms that appear to have a revenue potential. That means iOS and Android for sure, Windows 10 & Chrome OS are quite likely… and we’ll see about Steam,, Jump, Air Console, Kongregate etc.
  2. My game will be free to download and play but there will be potential revenue options for me with (a) IAP – (In-app Purchases), and (b) ad revenue * (the kind users are OK with, not the super annoying kind… more on that later)
  3. I’m not entirely sure about this one yet, but this is a numbers game… I’d like to make some options available for social network integration to help spread the word about the game organically among friends.

I should make it clear with #2 that I personally hate ads. I don’t want to make this be a torturous part of the game… but more of an opt in thing. If you’ve almost beat a level but need 5-10 more moves… maybe at this point you’d feel OK with watching a short ad to get 25 extra moves? If not you can always play the level over for free with no ads. And hey… if you become an expert you won’t need those extra moves at all!

So am I hoping to make thousands? millions? Ha! not even close. I’m really hoping to make enough to cover the yearly developer fees to be on a platform like Apple’s iOS ($99 USD/yr), luckily other platforms are a one time fee Google’s Android & Chrome OS ($25 USD) and Microsoft Windows 10 ($19 USD). Everything after that is money to spend on some pizza and cokes.

What will I do if a miracle happens and I do make hundreds or thousands? Well a new computer and some additional software tools would be nice. OK time to stop dreaming and focus on building the game.

So what kind of game is it?

I’ll admit that I’m going to be a bit shy here in revealing the full game concept. Am I afraid that someone might copy/steal my idea?… well yes and I’m OK with/expecting them doing so once I’ve published the game (if I’m even remotely successful) but I want my game to be my game when I release it.

I will reveal bits as I go along but I might leave some intentional gaps until I get closer to the finish line.

Alright, what can you tell us?

It is a puzzle game and my primary target is mobile phones (iOS & Android) – almost everyone seems to have a smartphone these days and this provides a huge potential market.

I find the most successful games on mobile tend to be games with a simple game play mechanic that you can jump in and out of whenever you have 5 minutes waiting in line, riding mass transit, having a coffee in a cafe, you name it.

Thus I want the simplest interaction for a user with one hand… a single tap or swipe.

I’ve spent a lot of time “researching” games (aka playing) and I’ve found a lot of things I like and a bunch I hate. I’m going to reference several games where I’ve been inspired to follow their lead.

I like puzzle games with near unlimited levels… think Candy Crush, Gummy Drop or Cut the Rope. Endless runner games like Temple Run, Subway Surfer and Risky Road are great but as a player I always feel defeated that I just can’t get much farther than a certain point.

Finally I quite like Flow Free, a simple yet satisfying game where “completing” a level is very gratifying.

I’m also just a single developer working on this in my spare time so I’m not planning on building some super complex 3D game (maybe for one of the next games).

Finally I’m hoping to make something that is very straightforward to play… oh and completely free, requiring very little in terms of instructions.

There’s specific reasons for this. Unless you’ve got a killer game that everybody already knows… free is the no-barriers to entry option I want… and if I don’t have to write much text… there’s next to nothing needed to translate to other languages to support the Spanish, French, German, etc. markets.

“But hey! Don’t you want to make money?” – absolutely who wouldn’t? I’ll dive into that in the next post.

Building an HTML5 game from scratch

I’ve decided that I want to document the process of making a game from beginning to end… and thus this blog. There’s several reasons why and I’ll jump into each after explaining the game concept.

Game concept: A simple puzzle game designed for mobile phones/tablets.

Why HTML5?: Well it is simple technology that I can code and test in a browser, I’m very comfortable in JavaScript… and if I build it well it should be portable to iOS, Android, Windows 10, Chrome OS, and pretty much anything that will run a browser or a WebView of some kind.

Why the blog?

Several reasons actually.

1.) It serves as a self motivational tool. I’ve actually had a few false starts at this game and I want to do this publicly to keep me focused on reaching the finish line.

2.) I’m using this as a sounding board for some ideas I have, and as a way to visually draw out some of the technical bits to solicit advice on how to overcome challenges.

3.) I’ve hit some roadblocks trying to build this game. Hopefully in sharing this journey I can help out a fellow indie game developer (even if just to help motivate them)

4.) Blatant self promotion. There is a chance that something in this blog will inspire readers to want to check out the final game… either for simple curiosity to see what it became or they actually found the game concept to be inviting.

So if you’re into HTML5, simple but addictive puzzle games, indie development, or curious about the process of building a game from start to finish including publishing to app stores, I’d love for you to follow along on my journey.