Siralim Ultimate – Dev Blog: User Interface and Graphics

This week’s dev blog is unique in that I (Zack) didn’t write it this time! This post is written by Nieve, one of the primary artists who has been working on Siralim Ultimate for almost a year now.


Hi there! This is Nieve, one of the artists working on Siralim Ultimate. You may also know me as Gay Monster Aunt on Discord, or Fluffy the Wise in Siralim 3’s tavern. I’ve been helping to bring Siralim Ultimate to life with my art for a whole year now, and being a part of the team has been a fantastic experience!

So for this blog post, I’d like to talk a little about what I’ve been up to, talk a bit about the artistic/interactive direction of Siralim Ultimate and the reasoning behind a few of our decisions, and of course I would be remiss to let a blog post go by without showing a few new things off! A lot of folks on Discord have already heard me speak of some of the things here, but Zack thought it would be cool if we let the wider audience know what’s going on, since Discord is only one part of our lovely community.

User Interface

One thing that quite a few users have brought up as criticism of the previous games in the series is the user interface – how the game can be rather text-heavy, and how there are lots of menus to navigate through. This has been something of a learning process as the series has taken steps up in quality in many ways with each installment since the first Siralim game back in early 2015, and the user interface is absolutely part of this.

There are still going to be quite a few menus and such to navigate, but we’ve taken steps to make them much easier to navigate this time around, both in function and form. Let’s have a look at an average menu this time around:

In addition to the more compact font, you’ll notice that every menu entry has a graphical icon now, which is “grayed out” out while not selected. There’s a few design principles at work here: firstly, the icons just make the menu a lot nicer to look at in general. Secondly, the currently-hovered option being in color while the rest are gray helps to draw the user’s attention so they don’t lose track of what they had highlighted in the menu. Thirdly and arguably most importantly, we know that many Siralim players do not understand English as their first language (and some might not know it at all), while others may struggle with text-heavy layouts in general regardless of which languages they know. A graphical representation of what each option does in the form of an icon will help players to be able to learn and memorize each menu function more quickly so it doesn’t get in the way of their enjoyment of the game. Inclusion and access are quite important to us since we don’t want any of our players to feel left out!

To continue on that note, let’s take a look at the redrawn status effect icons:

 

Here we have the icons for Mend, Arcane, Barrier, Rebirth, Resistant, Weak, Vulnerable, Poison, Freeze, Fear, Conquest, War, Famine, Death, and Doppelganger. Compared to the old status icons, you’ll immediately notice the addition of a colored border that denotes whether the status is good or bad for the bearer – green for buffs, red for debuffs, yellow for minions. Pretty traditional colors for the most part. However, I realized while designing them that this would cause trouble for those among us with red/green color blindness, so I added another element to the border – if it fades from the top, it’s good. If it fades from the bottom, it’s bad. I also used bolder, brighter colors for good statuses and more gloomy, unpleasant ones for bad statuses, and I subtly shifted the green slightly towards blue and the red slightly towards purple just in case it was helpful. I myself am not color blind, but I really don’t want to leave behind anyone who is!

Now let’s quickly go back over one thing we’ve seen before in prior blog posts before we move on. The Knowledge Bestiary, introduced in Siralim 3, has benefited tremendously from our icon-driven approach:

The creature’s Class, Race, and Knowledge Rank are now all displayed as icons as well as the indicator for whether or not you currently possess at least one of that creature, drastically cutting down on the amount of text on each entry. Creatures with longer names such as Diabolic Commander or Wandering Abomination will no longer find their entry running over the edge of the frame! As in Siralim 3, when you obtain the creature’s card, that will also be displayed as an icon. Since I only drew them a day prior to writing this post out, let’s have a peek at what cards look like now:

Fancy, huh?

The user interface has been a very large bulk of my workload – at present my UI work folder stands at a whopping 1,135 files, all made from scratch! So naturally, we’re really hoping the big effort in polishing it up and making it more accessible pays off!

Artistic Direction

A privilege of working on so many of Siralim Ultimate’s graphical assets is that I’ve been permitted to apply my own artistic principles to the game in general. As you may have noticed in the new card icons, I’ve applied a much more consistent color theme to the five classes. Let’s take a look at the new class icons:

In prior Siralim games, some of the classes tended to be a little indecisive about which color they wanted to be. Chaos and Nature have always been solidly red and green respectively, but the other classes sort of waffled a bit. Life didn’t know if it wanted to be white, gold or sky blue, Sorcery tended to wander between purple and blue, and Death was kind of all over the place with black, grey, green and sometimes blue and purple also being used to represent it. As several players noticed, this has also (unintentionally) made us look rather similar to Magic: The Gathering’s color coding system. So going forward, I have codified Life as a sunny gold to lean into its celestial nature, Death as a sinister and subdued dark blue, and Sorcery as a regal, mysterious purple. In addition, solid white and black looked a bit strange sitting among other, more saturated colors, so hopefully this new approach looks a bit more balanced!

Just for fun, this was the first draft of the class icons I made before deciding on the color themes:

Life and Sorcery remained the same, but Zack decided he wanted something more abstract for the Chaos class, since not everything in that class is demonic or infernal in nature; for instance Bats and Cockatrices, which are normal, unchanged wild animals in Rodia, but particularly dangerous and vicious all the same. We also decided Nature was better off as a leaf, and the old Death icon was actually re-purposed as a “this creature is dead” indicator for use in battle, and was replaced in the class icon with a more monstrous blue skull instead.

I have also varied the various specialization perk icons in this regard. While they stay true to their class colors, each one uses a slightly different palette to differentiate them from the other specializations. Since those who know me from the discord server know I’m very much a dyed-in-the-wool Life Mage, here’s an assortment of perk icons taken from the three Life-oriented specializations:

You’ll notice they retain gold as the central color, with blue and red being used as secondaries, but each specialization has a different shade of gold; one being a very vivid and shiny gold, another being a more burnished brass color, and Inquisitor (which was revealed in an earlier blog post) has a more warm orange. This is a visual shorthand to the viewer that while they’re from the same class, they’re still quite different.

Taking a step sideways from classes, let’s have a look at race icons! These are new to Siralim Ultimate, and are a shorthand used to represent each race. Here’s a big handful of them:

Oh my, did I sneak a few icons for races you haven’t met yet in there? Why yes, yes I did. Have fun figuring out which icon belongs to which race! Here’s a hint: five of these icons are races yet to be revealed. The rest are all races you know and love. Good luck!

Race icons aren’t just for the Bestiary though – besides being a useful shorthand to reduce the amount of text, they’ll show up in a few other places too. As mentioned in a prior blog post, Reaper traits like to finish off monsters that are on low health. When targeting a low health monster with a Reaper, their icon will show up in the targeting reticle so you’ll know for sure that you have an opportunity to use the Reaper’s special attack. No more flubbed guesswork getting you punched in the face by an angry and still very much alive Troll!

Castle Decorations

Besides iconography and interface work, the other main bulk of my workload is spriting up all the various decorations you can use to decorate your castle. This is a huge undertaking, and I do mean HUGE. At the time of writing, I have sprited over 450 decorations, and that’s significantly less than half of everything that needs to be done before launch!

Most furniture comes as part of a set – each class, god, and major event gets a set. That’s thirty sets, not counting other sets that aren’t tied to anything in particular, and generic decor that doesn’t belong to any particular set! Standard pieces that every set gets at least one of include: Seats, Thrones, Tables, Lamps, Columns, Altars, Large and Small Paintings, Tall Wide and Small Plants, Statues, Rugs, and Banners. That’s a minimum of fifteen pieces in every set, so multiply that by thirty sets, and that’s 450 pieces! That’s just a funny coincidence with the number earlier – a lot of the pieces I’ve sprited don’t belong in a set, or are extra pieces in each set. I’ve still got fifteen more “standard” sets to complete, and that’s all before I start adding extra pieces to each! …has the word “set” lost all meaning for you yet? Just me? Okay.

Needless to say, there will be an absolutely tremendous variety of decor for you to put in your castle, and you can mix and match different sets and pieces to your heart’s content. Let’s take a look at some of the pieces I enjoy doing the most, plants and paintings:

You might notice some of the frames on the paintings are fancier than usual. These are Rare Paintings that are a little more challenging to get your hands on!

Decor pieces can be obtained from all kinds of places – in regular loot dropped by monsters or found in treasure chests, from god shops, from various accomplishments and achievements, and more!

As a treat, let’s take a look at some of the sets I’ve finished so far. Again, to note, these aren’t reflective of the castle’s layout at all, but were mock-ups I put together to make sure the tileset and furniture pieces worked well together.


Aeolian’s tile and furniture set. Many of you may know Siralim has its inspirational roots in Dragon Warrior Monsters for the Gameboy Color, a monster catching RPG that took place in the realm of GreatTree, which was a kingdom based out of a gigantic tree. In homage to that, now you can have a GreatTree all of your very own.

 


Arr, matey! What would Friden’s tileset be if not a nautical/pirate themed set, complete with piles of plundered booty here and there? Having a kingdom based out of a ship is a concept I’ve not often seen, but I hope your timbers are sufficiently shivered all the same.

 


Erebyss’s set is sure to add some gloom to your rooms. I was going for a sort of quiet, dark old cathedral vibe with this one. Erebyss may be the Goddess of Darkness, but as we all know she is far from evil, so the set leans more towards being fancy and subdued while still having some energy to it. This is one of the first sets I completed quite a few months ago now!

Closing Words

Working as part of the team on Siralim Ultimate has been a fantastic experience for me – I’ve worked in quite a few development atmospheres during my life, and this one has by far been the smoothest, most welcoming and nicest I’ve ever been in – which is another extension of just what a nice community we’ve managed to build over the years. This has allowed me to not just give it my all and feel genuinely proud my work and excited for the joy it will bring to our players, but also be a part of the development process even though Zack is the only one handling the game’s actual code. There’s enough trust and comfort that we frequently bounce thoughts and ideas off each other, which has several times led to us all coming up with even better versions of what we were working on.

I hope what I’ve written and shown off here has brought you excitement, joy and maybe even a little inspiration – as an artist, giving folks such things is what I live for. And remember – everything we’ve shown so far is just a taste of what we’ve got for you all – there’ll be plenty to discover for yourselves when the game is eventually done!

Nieve, signing out. Good fortune to you all!

 


Please note that nothing mentioned in this blog post is finalized. I reserve the right to change or remove anything mentioned in this post at any time. If you’re reading this post after the game has already launched, your best bet is to forget everything you just read because very few of the things I write about will remain untouched in the final product.

7 thoughts to “Siralim Ultimate – Dev Blog: User Interface and Graphics”

  1. I love Games where you can do such things like choosing a class, form a team, decorate the base etc. And what I´ve seen here made me very happy. I can´t wait for the final release 😀

  2. Hello there!

    I left a reply on the old main blogpost, but since you’re handling a lot of the U.I., I figure I’d ask the question here (as well) 😉

    In regards to the status effects – Will there be a more user-interface friendly way to actually see their effects?
    In Siralim 3, I have to use the Inspect tool to bring up the character’s full interface and then scroll a few pages to find a collection of all the Status’ effects.
    Preferably I’d like to be able to press a button to have such info shown to the right of the combat screen or something 🙂 (less tedious and more immersive)

    1. You can already see which buffs/debuffs a creature has without using the inspection interface by looking at the icons below its health bar. The idea is that you’ll eventually memorize which status effects match up with each icon (and the icons are MUCH easier to read in this game compared to Siralim 3), so the only time you should really use the Inspect command for that would be toward the beginning of the game.

      1. I was indeed refering to the description of the status effect as opposed to just the icons (My bad). I don’t really connect the icons with the descriptions too well myself even after having played both Siralim 2 and 3, perhaps given how many the game can throw at you in total and how modular everything is (I can’t remember Monster A as a monster that I consistently associate with one applying Poison etc, unless its part of their innate ability).

        I took a break for a while, started playing over again with the Life creature that acquires random buffs on attacking and being-attacked,
        Kind of gave up trying to figure out/remember what stuff it was actually accumulating in combat, given the sheer number of them. With each buff I had to use the menu to read up on the buffs individually as oppossed to pretting a Quick Button to view them all in an organised fashion.

        It’s fine if there’s no tool-tip like improvement on the matter, but its just a small personal gripe of mine that I was hoping to see improved on somewhat. 🙂

        1. I’m picturing in some games how hovering over an icon would display a brief description of it, I feel like that’s what you mean? I also think that would be pretty helpful, especially starting out and/or returning after a break, but might be kind of tough, especially when lots of them get stacked onto each monster.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.