Monthly Archives: December 2016

Simple Script for Gamepad UI Navigation

For my upcoming game, Mouse Dreams, I need to support gamepad input as well as keyboard and touch. It turns out this is not quite as simple as I first thought. The big issue with supporting UI with different input methods is how it will appear to the user. With touch or mouse input, the user simply presses a button, but with controller or keyboard input, you need to indicate to the player which button is currently selected.

Unity’s UI can easily implement colour changes when a button is selected, but this can look weird with touch input, and is not always easy to see. Unity’s UI also doesn’t work with controller input if no UI object is currently selected (or a default set), which is a pain.

I wrote a simple script to help with these problems. It simply scales the currently selected UI button to be a bit larger than the others. The scaling amount can be adjusted in the Inspector, and you can set a default UI object to be selected when the scene starts, which in turn enables controller input.

The Code


using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class ButtonHighlighter : MonoBehaviour
{
    private Button previousButton;
    [SerializeField] private float scaleAmount = 1.4f;
    [SerializeField] private GameObject defaultButton;

void Start()
{
    if (defaultButton != null)
    {
        EventSystem.current.SetSelectedGameObject(defaultButton);
    }
}
void Update()
{
    var selectedObj = EventSystem.current.currentSelectedGameObject;

    if (selectedObj == null) return;
    var selectedAsButton = selectedObj.GetComponent<Button>();
    if(selectedAsButton != null && selectedAsButton != previousButton)
    {
        if(selectedAsButton.transform.name != "PauseButton")
        HighlightButton(selectedAsButton);
    }

    if (previousButton != null && previousButton != selectedAsButton)
    {
        UnHighlightButton(previousButton);
    }
    previousButton = selectedAsButton;
}
void OnDisable()
{
    if (previousButton != null) UnHighlightButton(previousButton);
}

void HighlightButton(Button butt)
{
    if (SettingsManager.Instance.UsingTouchControls) return;
    butt.transform.localScale = new Vector3(scaleAmount, scaleAmount, scaleAmount);
}

void UnHighlightButton(Button butt)
{
    if (SettingsManager.Instance.UsingTouchControls) return;
    butt.transform.localScale = new Vector3(1, 1, 1)
}
}

How to Use

Just add the script to a UI canvas with multiple buttons. I coded the script specifically for buttons, but you can easily adjust it to work with different UI objects if you need to.

For improved scaling, you can implement some tweening or lerping.

Set the scaling to an appropriate amount. The default is 1.4f, which may be a bit large for some uses. You need to find a balance between looking good and being noticeable to the player.

Set a default button in the Inspector. This will be selected automatically when the scene starts, which has the side effect of enabling controller input.

The Making of Mouse Dreams: Part 1 – Getting Game Ideas

The article details how I went from wanting to make a game – but with no idea – through to finding and developing an idea through the process of development and prototyping.

After finding myself with the time to make a new game (my third), I lacked one thing: an idea. I had prototyped a few games that didn’t work, and I had many ideas too big to tackle as a lone developer. So how could I get an idea, and one that was suitable to my skills and resources?

I had always wanted to make a classic side-scrolling platformer – like Super Mario Bros. or Commander Keen. I also had a few ideas for mechanics that would make the game more interesting, taking inspiration from puzzle platformers like Limbo and Unravel. With the barest germ of an idea, I started to prototype in Unity.

As I built my game, I started to see the flaws – some mechanics were not fun, and just served to force the player to do Step A before Step B. One mechanic involved changing the player’s size or color so they could fit in smaller gaps or enter coloured regions. These mechanics worked better on paper.

Here’s the first playable level I made:

I built around a dozen full levels of platforming, with moving shelves, puzzles, and enemies, but the game wasn’t much fun. It had nothing particularly original or unique. I wanted the game to be more puzzle based.

Should I abandon another prototype, or push on and squeeze an idea out? With no idea to fall back on, I decided to keep pushing forwards and see what happened…

Dawn of the Idea

I like to make simple opening levels to train the player. In Game of Clowns, the first level requires the player to tap a button and watch the physics engine get to work; in the second level the player is shown how to place an object to influence the physics simulation to complete the goal. I liked the short, small opening level of my platformer, and thought it might be a cool idea to have a game of single-screen levels with simple puzzle mechanics – no finding the red key so you can get past the red door, no sharp reflexes needed to navigate fast-moving platforms and avoid cunning enemies. Just simple puzzles.

So from the ashes of a failed prototype, I had the start of an idea, and then I had a jolt of inspiration. One particular mechanic I had been using had some potential, and was – at least as far as I knew – original. This mechanic involved moving objects in and out of the path of light to trigger some kind of action, such as opening a doorway. I decided I could make a lot of puzzles with this mechanic. I immediately sketched up the first 8 or 9 levels, combining the light/shadow mechanic with some platformer/puzzle staples like crates and moving platforms.

Here’s the first page of scribbled level designs – I design all my levels this way, and tweak them as I build them in Unity:

early-levels-sketch

The first dozen levels came quickly, which was a good sign that the core mechanic was flexible enough to carry a full game. I decided that this was my game, and I would run with it.

I quickly implemented my first set of levels. Here is a short playthrough of the first three levels as they were initially:

The first three levels–early prototype

To compare, here are the first three levels of the near-complete game:

Beta version first three levels

 

Fleshing Out the Idea

I think brainstorming is the best way to develop an idea. Since my game was based largely around light, I started to note down anything I could think of that related to light and might be interesting in my game. Some of the ideas I have in my notebook are:

  • Mirror mechanics to channel light
  • Items that generate light (e.g. a model lighthouse, lamps)
  • Lasers
  • Moths the player can manipulate with light
  • Torches
  • Windows letting sunlight into the scene.

When brainstorming it’s important to never discount anything. A good idea can evolve from a bad one. Good ideas can emerge from combinations of otherwise poor ones. It’s better to have written down an idea you didn’t use than to have missed out on a great idea because you dismissed it too early.

I spent a lot of time implementing the moth mechanic into the game – it moved towards the nearest light, and would flip switches if it got close enough. But the mechanic felt rough and fiddly rather than fun. But from the moth I developed a mechanic that did make the final game.

Brainstorming

The easiest way to brainstorm is to write down a key word in the centre of a page and just add anything that is related to it to the page. Don’t filter anything, just write, draw, whatever. Put everything on the page. You never know which idea is the next great one or triggers the next great one.

Brainstorming in groups works even better, as each person plays off the ideas of the next. Your half-formed idea might prompt someone else to come up with pure brilliance (or vice versa).

The Mechanics of Design

Game design isn’t all about inspiration and creativity. You need to balance that with practicality and hard work. I added some standard platformer mechanics to my game in order to guide the player and add complexity and variety. I spent hours and hours testing and tweaking levels, and this process often led to new ideas and new ways to use the mechanics.

Don’t be afraid of clichéd mechanics. They are clichés for a reason (i.e. they work and are familiar to players). You may find that you can add a unique spin to these old mechanics when you combine them with your own. It doesn’t hurt to try.

On the other hand, the game was feeling less focused than I had hoped – it was a mish-mash of mechanics that weren’t all a natural fit. I decided to push forward with the game even though it was not perfect. On one hand I just wanted to finish a game, and on the other hand I was confident that as time progressed the game would feel become more cohesive.

Coming up with a Theme

For most of the early development, my game was just coloured blocks. I liked the simple aesthetic, but it was not going to be interesting to any audience, and was too similar to Thomas was Alone with the simple shapes and shadows. Since I have no art skills, and no budget for paying an artist, I had to choose my theme carefully.

As a placeholder I made the player’s square pink and added a moustache and hat:

old_man

The idea was that the player would be an old man (maybe a crazy Victorian inventor type) in his house, and I would use nice old-fashioned wallpaper in the different rooms for a cheap, simple aesthetic.

The final theme came relatively late. As the game was coming along nicely, I started to think of what would look good, and what I could find in terms of graphics and audio. I have a tendency towards cute, cartoony graphics, so that was a big factor. Since the game was already structured into ‘rooms’, I felt it should be set in a house (or houses, or a large apartment block). I scoured the Unity Asset Store and public domain art for ideas.

Around this time I started to realise that the game was quite easy, even in its later levels. I had inadvertently created a kids’ game, so I ran with that and made the protagonist a mouse; the abstract collectable objects became cheese. I found some affordable cartoon graphics to get a nice look. I had intended to replace the mouse with proper, commissioned art, but in the end I decided to avoid the cost, working on the assumption that I would be lucky to sell more than a few dozen copies of the game.

I chose the name Mouse Dreams for the simple reason that the game doesn’t make much sense. Why is a mouse jumping on moving shelves? Why do these houses have so many weirdly placed lights and light-sensitive switches? Why is there licorice hidden throughout the levels (and why does a mouse like licorice)? Embracing the fact the game doesn’t make sense, the title hints that maybe this mouse is just dreaming of its adventures in strange, dreamlike houses.

Visual Ideas

I use a ‘lightbox’ to keep all my visual style ideas and influences. I create a folder somewhere – usually OneDrive, and look all over the place for images to put in there that might inform the look of my game. Image searches, Pinterest, clipart sites, asset stores, etc. all have tons of material. It’s like visual brainstorming. Throw in any image that might have some influence on how your game looks. If you’re like me you already have a vague idea of how your game should look, and finding images will help solidify that idea. For my previous game, Game of Clowns, I was able to send these lightbox images to an artists to draw some custom art, and it seemed to work well because her art was exactly what I had in my head!

Takeaways

In my previous games, the whole game was more-or-less in my head before I started, and the final results didn’t differ much from those original plans. Because I started game #3 without any ideas, I learned a lot on the way about finding, nurturing, and letting go of ideas.

Finding Ideas

There is no recipe for ideas. There is no way to generate them. You just have to keep an eye out for them. Keep your mind open to ideas whenever you play games, watch movies, read. Ideas will come if you’re open to them. If you don’t have any ideas, you can still work on prototypes and other ways to force ideas out.

You might find that your ideas are triggered by the act of coding or building prototype scenes. As my game neared completion I ended up reworking a huge amount of the code, and it led to a few surprising bugs, one of which is a nice idea for a mechanic, either for a new game or perhaps to add to Mouse Dreams if I ever make additional levels.

As I mentioned earlier, I draw my levels in a notebook. When I’m stuck for an idea I sometimes just start drawing and find that an idea flows from that stimulation. The mere act of drawing a rectangle and placing the player somewhere in it can open the floodgates. How does the player get from where they start to the exit? What if I add an enemy blocking the cheese? Before long you can force out a level idea. It doesn’t always work, but when it does it’s great.

The main lesson I’ve learned from building Mouse Dreams is to just do it. Ideally, you’ll have a great idea, well planned out, before you start. But that can’t always be the case. If you go through the motions of coding, building levels, prototyping, brainstorming, and so on, you have nothing to lose. You might trigger something that gives you the idea you want. Just as fortune favours the bold, ideas favour those who are receptive to them and probing for them.

Throw Away Failed Ideas, but NEVER Throw Away ANY Idea

Yes, that heading is deliberately contradictory. Don’t be afraid to discard ideas that you love. If an idea isn’t working, throw it out like I did with most of my original core mechanics. If it’s not fun, doesn’t fit the game, or just doesn’t work well, kill it.

Kill those failed ideas from your project, but keep them somewhere for future use. When I threw out my moth mechanic, I eventually reworked it back into the game in a different way – as ghosts to chase the player. I doubt the idea for a ghost would have occurred to me without first thinking of – and discarding – the moth idea. You never know when an old, abandoned idea might be useful in another project or in another form. The core light mechanic in Mouse Dreams was originally an idea for a different type of game, but I couldn’t think of a way for that game to work.

ALWAYS RECORD ALL IDEAS
If you have an idea – even if it seems totally dumb – write it down immediately. Get a note taking app on your phone, carry around a small notebook and pencil, use a voice recording app, whatever it takes. You will be amazed at how easy it is to forget an idea, even a great one. And if the idea you get isn’t great – I hope by now you understand that it is still valuable.

Bonus Video

If you’ve got this far, thanks for reading. Here is a bonus video of my first attempt at a platformer prototype. I made this to try out the new UWP (Universal Windows Platform) option in Unity and Xbox One. The reason the video is poor is that I was filming with my phone with one hand and trying to play the game with my other hand:

Early prototype on Xbox One

 

My Games

Mouse Dreams will be my 3rd game. Information about my previous games can be found at the following links:

Puzzle Detective (Windows Phone 7+, Windows 8+)

Game of Clowns (Windows Phone 8+, Android, iOS, Windows Store 8+, Windows desktop)

 

Play a slightly buggy early beta version of Mouse Dreams here:

http://grogansoft.com/md/index.html

Play my new game!

I’ve been making a game – Mouse Dreams – and it’s almost finished. I’ve put a beta version of the full game up to get some feedback and to give the world something to play!

Play the Mouse Dreams Beta at the following link:

Mouse Dreams Beta (Unity WebGL player)

Mouse Dreams is a puzzle game with platform elements aimed at a young audience.

ss1

Ghosts are scared of light!

ss2

If you look hard enough you can find hidden licorice. For some reason this mouse loves licorice!

ss3