Let’s Design! A New Interface In Another World!

Update On Project Harahel Interactive

First things first, where is Project Harahel Interactive right now? Since March, I’ve been on a long journey, refactoring code to increase performance and lower spec requirements. I’ve implemented dynamic UI creation, image loading and audio loading, as well as new box scaling and levelling for fonts. Creating a dynamic build system for UI creation was probably the most arduous part of this trial, however the end result works swimmingly.

I am glad to say, while the refactoring war drones on, we are finally nearing completion. What remains to be refactored is button interactivity, and the “selected choices” display. I cannot give a hard date on when this will be done by. Truth be told, this last year has been ever so hectic. The best I can do is set an aspirational target and work towards it, and my next goal would be some time in June.

Throughout March and April I’ve been gunning to push ahead despite the increase of work and personal affairs in my day to day, and in the process, have been burning myself out. While I have picked up some new techniques which will be very beneficial in the development of Arkavite, ripping out the old and building in the new is a woefully mind-numbing process, hence, to stop myself falling deeper into despair, I thought It’d make for a good change of pace to step back from refactoring hell, and work on some design.

Let’s Design!

And so begins our dive into the wondrous world of UI! Putting the silly LN-esque title aside, let’s get right into it. For the longest time, Project Arkavite has been lacking in any real menu system. Based on the pervading themes in the story, I want to land on a design which evokes feelings of fantasy, and spell tomes with a hint of steampunk, while not diverging too far from the pixel aesthetic. I also want to keep the interface itself clean and not overly cluttered.

Here we have my first stab at the Main Menu. The scene itself is comprised of a number of layers with some post-processing effects applied separately to the background and UI. The background itself is an endlessly falling cube field with an endlessly scrolling texture layered in between it. Technically speaking, it’s lightweight. It is just a menu and all.

Paired with some chill ambiance, something like this could work well to set the mood. I may try playing with the colours and post-processing for a less weathered and muted look, and in the future, I do wonder whether some kind or background art, or thematically styled title would look and feel better. While things are subject to change, this is an acceptable starting point.

The Technicals

In order to ease in the creation of future interfaces I went out of my way to build a suite of scripts focused on transitions between scenes, screens, button triggers, text effects, and pop-up dialogues. I got a chance to dip my toes into Unity’s custom editor magic. There were some especially frustrating things, like working with Reorderable Lists, but thanks to my persistence throwing UI together will now be a breeze.

As you can see, we’re using a simple cross-fade for the transitions. Nothing fancy. I’ve left some room in the system to grow, so we can always look towards adding different kinds of transitions in the future.

CYOA Menu

Take in this glitchy text effect. Lovely isn’t it? I set it for easy plug and play with various character sets. Then I just give it a speed, feed it some text, and it’ll glitch away… That’s the long and short of it. To create this effect I use a pointer which has the possibility to shift forward or back (up to a limit) from the leading character, and then randomize all the characters up to said leading character. This gives a less consistent and more “glitchy” feel to the scrolling text, as opposed to what a simple “one character at a time” scroller would, and I believe it turned out quite nicely.

I built this little effect script as a fun way for buttons and titles to display when transitioning between screens. I will go on to extend this into a new dialogue script for Arkavite’s own dialogue system as I work to build up a text parser for the game. It may find some use in the Harahel Interactive. There are some ideas I’ve had for extending interactivity. Perhaps by introducing a means of dialogue throughout the CYOA as players pick different choices, or extend narration into the complete VN format as it is to be used in Arkavite. Allowing the player to interact with the narrator directly could be interesting. There are many possibilities to be had.

Here is the CYOA menu itself. Standard stuff. A Horizontal scroll rect with some lovely buttons. I hope to return to Aria once the grand refactor is complete. More buttons will be added as new expansions are developed, and if I ever find the time, I do want to have a go creating some non-Harahel type CYOA as well. Speaking of buttons, some refactoring work has gone into adjusting the CYOA prefabs to be workable for general UI. I’m not entirely sure whether I will be using these prefabs outside the CYOA system long-term, but detangling their current code to be befitting for general usage will be handy as I have started to look into controller support for UI.

Consolidation?

Allow me to address the elephant in the room. You might be wondering why the CYOA menu is in Arkavite. For quite some time, I have toyed with the idea, of building the CYOA system right into the game. This would allow me to consolidate Harahel and Arkavite. The CYOA system is rather close to how I will be handling character creation and being my second focus, building dedicated menus and systems for Harahel, would at least for the time being, be too time-consuming. Not to mention, maintaining duplicate bits of code across multiple projects is a recipe for grief and disaster.

On another note, thanks to my one-track-mind, I feel as though I’ve been neglecting Arkavite too much this past year. The closer they can sit to one another, the more love they’ll both get.

As for how things will look in the future, whether I am to keep the projects consolidated or split them up, I think it would be fun to have the CYOA work as Easter eggs or collectables scattered throughout the game world. Perhaps some choices could even house rewards or in game secrets. It’s a wacky idea. Regardless of which avenue I take, I would like the CYOA to remain accessible for those only interested in that side of things.

One notable thing which would need to change in the case of a complete merger is the art used in the CYOA. While the art currently used in Harahel is lovely, Project Arkavite is all my own work. Having a bunch of random online images wouldn’t be appropriate, and the potential-clash in style could also be an issue. Luckily, I have to work on art for Arkavite anyway, so it would make for some good practice in my spare time and a way to relax.

A Touch On Audio

It’s hard to convey in images alone, but something I’ve barely touched on, is my work on sound. There have been some lurking issues with the playlist system ceasing to function. After some refactoring of the audio manager, it’s become far more robust. I switched over to using a queue system for BGM. I won’t get into how things were working before, but it can be best described as controlled chaos. Something analogous to balancing and swapping out spinning plates.

In terms of SFX, I did make a sound component for buttons which would pair well with our new and fancy persistent audio manager. Something which would let us swap out clips and apply audio effects to individual or multiple buttons on the fly for the various states they can be in. And for text scrolling, we do have a slot in for scrolling audio and setting audio effects. Nothing to fancy. Just sensible levels of future-proofing.

Some Final Stills

Let’s wrap things up with some stills. Here’s the new loading screen design. I’m using the same backdrop as the one used in the settings menu, and you may pick up on that familiar aristocratic pattern. I’ve kept the double progress bars. They now lie above the top and bottom black border. Switching over to image two, you can see the progress bars at max.

On Image three, we have a clearer view of the settings UI. There’s not much there yet, but you can see where it’s going. Specific settings cordoned off into their own sections. The menu itself uses the same background as the load screen. These backgrounds can be swapped out easily, and in all likelihood, later will be. The fourth and final images depict the main menu, and the working pop-up window system. I made it so pop-ups themselves can have any number of buttons, and said buttons can trigger transitions or trigger individual events of their own. Very handy for the development of future interfaces.

Conclusion

To conclude, we have a decent prototype Menu UI and most of the tools we’ll need for developing later interfaces. This week’s development has largely focused on the technicals, and that’s fine. Navigability and flow is important to get right from the outset. With the code behind us, I will consider what changes can be made to improve the aesthetics of our existing UI, and build up a stylistic and functional design which I can work into the thematics of the game. There is definite room for improvement. I will play with some designs all around which add more intricacy but retain a clean feel.

When we next return to UI, we’ll take a look around the player’s core interfaces. HUD, Inventory, Quest Log and Map. Aside from the Map, I’ve done a lot of technical development on these already, so It will be nice to do a little show and tell while playing with some new design concepts. UI aside, I’ll be making another post when there are some new developments, so stay tuned~

I will return to the great front on refactoring Project Harahel Interactive, as I wire up the settings menu. And with the new menuing, I’m also going to see if I can throw together a character sheet page (which will allow for a quick, full build overview), and the requested “chapter select” feature (which will allow for jumping to specific sections). With all that said, till next time. Peacu Peacu~