Designing Itsy-bitsy Games for Mobile Browsers

  • 11 favourites



2,082 visits, 3,376 views


This tutorial hasn't been translated.



This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Construct 2 is a great tool for developing games of all sizes, but I find it particularly well suited for creating small, simple, pick-up-and-play games, where the play experience typically lasts less than a minute. Most of my professional life as game designer has been spent making these sort small games for various platforms, and for the past couple of years in my day job I’ve been using C2 exclusively to produce exactly this type of product. It’s a skill that I’m still learning and researching, but I thought I’d collate the fruits of that experience so far for the benefit of those who are newly embarking upon their own game development adventure and interested in creating this sort of thing.

1. Set yourself constraints

Making small games requires a level of discipline to ensure that the game is kept lean and clean. It helps to impose constraints upon yourself from the outset to focus your design and prevent feature creep from bloating out your little gems.

I design within the following constraints:

Browser-based: I want players to be able to access the game quickly and easily, no going to app stores, and also be able to share it with minimal hassle.

Target low-end devices: if it can work on my old iPhone 4 or Galaxy S3 then it’s going to fly on pretty much anything else - these devices are usually cheap to pick up second hand for test purposes. This means working at a low resolution to keep the art overhead down (important for devices with a low memory) and file size small. I work within a 320*384 window size.

Portrait orientation only: most users will open the game in portrait mode so I don’t want them wasting time flipping around their phone. Aside from that, it can be a real pain designing for landscape, configuring for all the different browser and status bars.

Limit the number of layers: Some older devices will get grumpy if you have too many objects being drawn over each other, slowing down your frame rate considerably. I try to keep it to three layers: HUD; Gameplay; Background.

Single input: I want the games to be easily playable with one hand, meaning users are more likely to engage with the game when in situations where they might need to keep a hand free, like a crowded commute. This means limiting the input to one digit taps, drags or swipes.

A single core mechanic: this helps keep the rules easy to convey and the gameplay focused. Note that this doesn't prevent you from creating deep gameplay - you can increase the longevity and complexity of the game by introducing a number of secondary mechanics.

2. Build a template

You will save yourself a lot of time and headaches by creating a framework that can be reused for a range of games. My template consists of the following scenes:

Loading: a separate layout shown at the start of the game.

Splash/Home: contains the game’s title and a brief description of play

Round Intro: a lead-in to the game action, giving allowing the user a short period of time to read the scene and familiarise themselves with the game layout before they start playing. - I usually add a “3,2,1...GO!” animation.

Game Round: this is where the fun goes!

Round Outro: provides time at the end of the round to make it clear why the round ended, before transitioning to the Results e.g. “You Died!” “Complete!” “Out of Time!”

Results: Final scores etc.

If the game is small enough it can be beneficial to keep all the scenes (apart from the loading layout) on the same layout - this can help avoid jank caused by new layouts loading in.

3. Keep your loop tight

For games with short rounds and high replay you want to minimise the time between the player completing a round and restarting. This means keeping the number of HUD button presses and scenes between replays to a minimum. I tend to loop straight back from the Results scene to the Round Intro.

4. Describe the game briefly but clearly

Use the Home scene to explain the rules - if you need more than one screen to do this then your game is probably too complicated for this style of game - players will often skip or scan the rules without properly taking in the rules anyhow, so keep this as brief and clear as possible.

Ensure that the rules describe: i) the core objective ii) the user input iii) the objects that you interact with (avatar, pickups, hazards).

Use images/animations to explain the rules where possible, they are much easier for the player to comprehend and prime them more effectively on what to expect once the game round starts.

Use the Round Intro to highlight the key interactive objects and provide further instruction. e.g. flash the avatar at the start to draw attention to it.

5. Alert the user that the round is about to end

Provide feedback if the user is about to run out of time, lives, turns etc, or has almost completed/won the game. e.g. flash the timer/background, display an on-screen message, play a short sound effect.

6. Explain results and scoring

Offer a clear breakdown of the results so it is obvious to the user how their score was calculated, and so provide direction on how they can improve on any replay attempts.

If it is relevant to your game, offer a grade or percentage so it is clear how close to completion/max score the user was - this also helps to simplify the scoring for the user.

7. Use visual contrast to aid readability

Ensure that text and icons stand out against the background or frame that they are sitting on. Use contrast to draw the user’s eye to important content.

Keep backgrounds uncluttered and use simple, clean, designs for frames - this will make it easier to read objects and text placed above them.

8. Keep fonts simple and legible

Avoid using flowery or ornate fonts and use a large font size, especially for the most important data. Try a quick test - can you easily read the data without staring directly it? If not, then you probably need to change the font.

If using system fonts ensure that the font is supported on as many devices as possible. Better to use sprite fonts to avoid any issues.

9. Position critical information where it is most useful

Consider where the player's attention will be focussed when you display important information, and place spawned data within their field of view.

Animate spawned data to provide associations; for example, if collecting an object awards 100 points, spawn “+100” near the collected object and then move the “+100” text towards the score object, clearly associating the collection of that original object with the awarding of 100 points

10. Transition objects between scenes

Use object animations (fade in/out, scale up/down) and position translations in and out of scenes as a cheap but effective way to add a quality presentation to a game and to draw the user’s attention to the important screen objects; it is also less jarring and disruptive to use transition sequences than having objects just pop into existence.


  • Order by
Want to leave a comment? Login or Register an account!