BluePrints: Mouse input overlay

Piczle Cross Adventure was initially mainly designed specifically for the Nintendo Switch. I baked in a few extras to make porting to other consoles potentially a lot easier, and because of the size of the largest puzzles I also made a decision to not use touch input. A big headache in Piczle Colors was developing for touch and controller input at the same time. This was one headache I was happy to lose this time round.

A decision like this can really simplify things. Though UE4 has a robust button element in its widget slate system, that automatically handles hovers, presses, sounds and bindings, I ignored all that and used simple images instead for any UI buttons. The main menu, for example, is a simple case of controlling which menu selection you are currently on by way of a integer. With the controller you either increase or decrease that integer by 1. Then depending on the value of this integer I switch on or swap “button” graphics for your current selection. This also makes it a lot easier for me to control when the player can actually send their input through the menus and when that is all switched off. On top of that it’s also easy to set default selected menu items, or “last selected” menu items as the player navigates menus.

Imagine my horror then when plans surface for a PC/Steam version, for which mouse input is pretty much a requirement. Luckily I have a few tricks up my sleeve to handle that using the controller input system I previously created.

At its most basic level what I did was enable mouse input in the engine and have a graphical overlay on top of everything with a custom mouse cursor. Then I went back into the menus and added invisible buttons to all my menu items. A hover state would send a call for a hover state mouse graphic switch to the overlay, and an unhover would turn it back into a regular cursor. Then within the menus I just linked up the hover overs to the same scripts that changed the “active state” of buttons in the controller input, and the click-downs were linked directly to the actions firing from pressing the A button.

For example, if I hover over the 2nd (invisible) button in a menu I just set the menu selection integer to 2 and let the previously scripted menu system do its thing as if it was controlled by the controller. Then on any click-down event I simply send a “A button pressed” event to the menu like I did with the controller.

And hey presto, all menus are now mouse controllable.

Puzzles are still being worked on but will function in the same way as walking around does. The mouse cursor looks at its own position relative to Score-chan’s position in screen coordinates and decides if it’s up-left, left, down-left, down, down-right, right, up-right or above from Score-chan, and then on any mouse down event Score-chan will walk in that direction. While holding the mouse button down you can move your cursor to make Score-chan walk smoothly in any direction.

It isn’t the ideal method of walking, which is why I’ve kept in WASD and cursor arrows walking. I imagine most PC players will be most comfortable with one hand on the keyboard and one on the mouse.

In-world interactions on the console show a little speech-bubble above Score-chan showing a button prompt. In the PC version these are merely made clickable, to send the same action through as you would had the player pressed A on their controller.

The nice thing about a robust system is that it is easily adaptable. Sure, had I figured for mouse control from the very start I’d very likely have done a few things differently, but retro-fitting it in at this stage has been surprisingly easy in large part thanks to taking the time to script a decent system for the controller input.

This is a benefit from refusing to hard-code any action in directly. Always drive your games and systems with data as much you can. That way manipulating the data through other means won’t break your systems.

NOTE: Screenshots above are subject to change. I may likely change some of the graphics for the walk cursors and button prompts if time allows.

Add Piczle Cross Adventure to your Steam wishlist! The more people wishlist it the more it helps with visibility in the long run!

One thought on “BluePrints: Mouse input overlay

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s