[WIP] Ann Achronist - a time-travelling narrative adventure game

[MaybeLater_x]

Although I have solid experience with designing mechanics and creating things that are ‘fun’, my eye for design from an art perspective is sorely lacking. The UI in its current state is informative, but hardly beautiful. I figured it was time to level up my UI/UX skills, and I’d been poking around the Humble Bundle site when something caught my eye: their bundle on that exact topic.

I haven’t read them all yet, but I started with David Kadavy’s Design for Hackers and I have to say it was really insightful. I will admit to skipping over some of the history sections, such as the origins of typefaces and the printing press, but it helped me to see things I didn’t know I wasn’t seeing before. Stuff like subtle alignments and relative proportion and white space to emphasise how important or related certain aspects of the design are.

Top: The original design, with dialogue at the top and an empty inventory open. Bottom: The new dialogue design and menu icons layout. (Excuse the placeholder image; I made my sister make some expressions for me on the condition that I not put them online. :P)
Although it sounds simple, the most crucial piece of advice was ‘question everything’. Why is the background brown? Why is the text white? Is a yellow highlight effective? Why is the name tag below the image, not above? Why is the clock to the left and the bag to the right? How far apart should the inventory slots be from one another?

Once I’d asked myself all these questions, I started playing with the relationship between components, from a functional and positional perspective. Although subtle, the ‘Matt’ and the top of the panel behind the photograph share the same upper alignment, connecting the two pieces of information. Obviously, the name of whoever is shown in the picture is being displayed, so they’re functionally related. I was hesitant to move the tag and the image so far from one another for this reason, but the colour and positioning helps connect them even when they’re so far apart. From a player’s perspective, the game can now be read top-down. I want to know WHO is talking before I know WHAT is being said. The image leaps off the page which its size, so even if the player isn’t paying attention to it, they can’t miss it.

I also tightened up the inventory some. In the final version I moved the menu elements to the left, as I wanted the responses to be displayed on the bottom right of the screen. This makes the whole dialogue structure mimic the text conversation format on most phones, where your responses are on the right and everything else is on the left. I’m yet to design the responses, as their height and length vary wildly and I have to be careful to cover as many scenarios as possible.

Main menu with the ring encircling the preview image
In other news, I’ve been experimenting with implementing a ring (which is used to travel through time) into the main menu. It’s a little clunky at the moment and looks more like a stone ring than a metal ring, but I will tweak the material and the lighting to fix that. Sadly, I’m yet to learn how particles work in Unity, but I’d love to have a miragey ‘wobble’ effect over the top of the image, as though the ring itself is a portal to another world (or another time, more accurately). I’m planning on creating a transition where the camera zooms straight into the ring with a flash upon selection. Currently there’s a simple fade to black transition, which does the job for now.

Finally, the game loop has finally been completed. In line with my plan to make the MVP as soon as possible, the game can be loaded up, timeline can be selected, the game starts, and all game over possibilities are coded in (bad interaction/time up/manually quit to menu). The player is also able to quit the application completely from the main menu. Baby steps, but we’re getting there!

I’m not gonna say I’m a UI master all of a sudden, but I definitely feel a lot more empowered when it comes to designing UI elements and questioning every single design decision.

[MaybeLater_x]

This week I had an important realisation. I’ve been working so hard on making the menu and ending look amazing, commissioning art for the purpose and tweaking tweens to within an inch of their life to get them perfect, that I didn’t even account for the fact that players are going to be spending 90% of their time spent on this game on the actual game scene, not the menus. If the menu and endings are going to be so gorgeous, the least I can do is give the main game the same treatment.

I will be the first to admit that my eye for visuals has a very high tolerance, which isn’t great when it comes to making an application that looks not just easy on the eye, but breathtakingly beautiful. The minutae that go into the adjustments that make a button go from flat to tangibly tactile can make a huge difference. So I’ve been spending some time thinking of ways I can augment the simple pixel graphics I have in the game to take it to the next level.

Although I was very happy with my dialogue UI design, my brother — who is somewhat of a UI expert — gave me some pointers on how to make it better. Moving the picture to the left gave it more immediacy, and the name tag still stays in a prominent position before the text.

I finally got around to properly re-designing the response UI. I had originally planned for the responses to be right-aligned to match a text conversation layout, but in practice the elements were so far apart there was such a disconnect that sometimes it wasn’t even clear that any options had popped up — especially if it was just one response at the bottom of the screen. The new design is in keeping with the rest of the dialogue. I’m slightly concerned that one or two interactions will have too many responses (such as when browsing the market stall), but I’ll cross that bridge when I get to it.

A tiny but impactful change: I added drop shadows to the dialogue UI elements. Subtle, but smooth — the best I could hope for, really! I do need to experiment with better hover options, but this is fine as is for now.

An obvious candidate for a makeover was the water in Alderdale. This was my first experience creating my own particle systems but I was blown away with how quickly you could get results. At first I experimented with a shimmery sprite I have, but in practice it looked muddy and unnatural. I instead settled for a much smaller thin line that shrinks and grows. I would like to add a particle to the cliff edge too, but I will need to do more research before I tackle that one.

You might have also notice that Ann and her companions have shadows, too. The shadows shift as the sun rises and sets, until nightfall where the shadow completely disappears as the scene grows darker. I’ve also been playing with fireflies, fog, and solar flares, but I haven’t made much progress on those fronts yet.

My plan is to spend the rest of this week working on beautifying the game, then pulling my sleeves up and re-tiling the entirety of the Alderdale overworld. I have a few problems with its current layout, as it’s too big and looks incredibly contrived, and what’s more I’ve used a mix of tilesets whose palettes completely clash. I’ll pare the map back a little and see which tiles best suit my needs, then stick in there and start ripping apart terrain.

[MaybeLater_x]

So the long-awaited rearrangement of Alderdale is finally here! It’s important to get this step perfect before I start coding character movement, as my current NPC movement system works on a timed system. The timing of every element of Ann Achronist has to be perfectly synchronized — any characters bumping into each other in the street need to both be at their place on time, and I thought it much easier to plan these movements based off time rather than a list of movements calculated by movement speed. So it cannot be avoided — remapping must be done now.

But why do I want to re-do Alderdale? There are a few reasons. First of all, the town just doesn’t look nice. The tilesets are iffy, they’re mismatched, some are missing parts (it’s like an 80-piece jigsaw with 76 pieces), and a lot of them are just not the right quality for the game. I started mapping Alderdale before I’d perused 100s of tilesets, and now I’ve find a few really nice ones I have a much bigger palette to choose from — from the get go.

Alderdale? More like Olderdale!
I also wanted Alderdale to feel more believable. In its current state, it is full of extremely harsh straight lines that border houses, rivers, cliff edges. The real world is not a series of geometric squares and rectangles. I want to break up the lines to add some character to the world and prevent it looking contrived and artificial.

Alderdale is just so, so spread out! It wouldn’t be wildly out-of-the-box to imagine a rural town having a lot of space between buildings, but my personal mission statement as a designer is to always put the player first. I don’t wanna spend half my playthrough tirelessly running up and down town! Holding the right key is not gameplay, folks, and by trimming the fat I can amp up the action in the game. I might have to speed the clock up now, since players don’t spend much time moving and mostly chatting (when time is paused), and I’m not sure how players will feel about a clock that ticks at double speed, but I’ll cross that bridge when I get to it (i.e. when the testers get their hands on it). I am slightly concerned about the visible lack of buildings in the town — a bakery, a cathedral, a castle, a farm and an inn — and could potentially add some random houses, but I wanted every location in the game to mean something. If it’s a house, it should be someone’s house, and there currently aren’t any NPCs without homes. If this changes, I’ll consider it.

Furthermore, the way I tiled in the past wasn’t very efficient. I was just getting used to the basics of tilemaps in Unity and didn’t want to overcomplicate the process. I’ve since installed the 2d-extras pack that Unity provides to add ‘rules’ to tilemaps — terrain brushes, for example, automatically draw in corner tiles or edge tiles based on their neighbouring tiles. Now that I can actually use these tools, prototyping is tons faster — and it means I can paint nice jagged borders with ease instead of painstakingly plucking jigsaw pieces from my palette and putting each corner in individually.

The new Alderdale, with revamped castle, a moat, and a much tighter central plaza.
An added benefit to these extras is that I can switch palettes in the space of 60 seconds. By overwriting my terrain brush file, I can switch out all the grass tiles to a different tile, just like that. The grass tile must cover 500 tiles, so being able to switch them out in the time it takes the kettle to boil is fantastic for the non-committal visual designer I am!

Below the river, the witch’s house and Lover’s Lane. As you can see, I experimented with switching to a darker grass here by simply replacing a few tiles in my terrain brush.
It’s no Picasso, but I think it’s a step up from before. I’m not focusing on perfection in terms of visuals here — but I definitely want to tie down the pathing as tightly and precisely as possible to avoid any re-coding of timed NPC movements.

[MaybeLater_x]

January round-up ready!

[MaybeLater_x]

Spring round-up ready!