Designing an Alchemy System: UI/UX

UI

I already have a set of UI components for the inventory, so I'll use the same assets I've made to build a second UI for the alchemy system. The basic layout and requirements of the alchemy UI will be the same regardless of player level, but more options may become available at higher levels. 

The player must be able to see all their alchemy ingredients in a small panel, like a mini-inventory, while they mix potions in the main window. Since the ingredients window must be small, it'll probably require a scrollbar (ew). The player can then drag and drop ingredients into the alchemy slots to make potions. 

I'll probably do an animation of some green glowy stuff flowing through those circles for decoration since there's a lot of space to be filled. There's also more room for potion slots as the player gets more advanced! The extra circle to the left of the potion is for environmental effects, like if the potion was created during the day, the full moon, or a rainstorm. 

Sprites 

The player might make potions or ingredients I'm unable to think of. For this reason, there will be default sprites for ingredients and potions to be used if a sprite for that specific potion or ingredient does not exist. They will be an opaque, unmarked vial for the default ingredient and a green, glowing potion bottle for the default potion. 

Ingredient appearances will be very diverse in their original form, but they may also be mashed, powdered, or ground (and other things too, probably), so those sprites will be one "mashed [ingredient]" sprite in different colors. Potion sprites will have two components: bottle shape and potion color. It might also be possible to animate potions if they are powerful or high-level. For example, a fire resistance potion created by a max-level alchemy player might resemble a lava lamp. 

Tooltips 

When the player rolls over a potion with their mouse in the inventory, a tooltip should display the potions effects, its base price, and the ingredients it is made of. 

When they do the same with an ingredient, the known effects of that ingredient should be shown, in order. 

The Alchemy Part 

Combining Ingredients 

I've decided to go the Skyrim route for the alchemy algorithm. This means each ingredient will have a set of characteristics. These characteristics have an order of priority: the ones higher in the list will be chosen above those lower as the main effect of a potion. When two (or more) items are combined, their lists of effects are compared, and any they have in common will become potion effects. If they have two or more in common, the highest one will become the main effect with a chance for one of the others to become a side effect. 

The Algorithm - Spoiler Alert? 

Two ingredients with these effects can be combined: [healing, speed boost, speech boost, cure disease] and [healing, smithing boost, cure disease, cold resistance]. Since the top effect for both is healing, this will be a potion of healing. Since cure disease is also an effect of both ingredients, there is a chance (based on alchemy skill level) that this potion will also cure diseases. 

Suppose the two ingredients share multiple effects in different positions: [healing, cold resistance, heat resistance, cure disease] and [heat resistance, smithing boost, speed boost, healing]. In that case, the algorithm will pick the higher one. This is determined using array indexes, like this: [0, 1, 2, 3]. Since healing is at position 0 and position 3, its overall position is 3 (0 + 3). Heat resistance's position is 2 (0 + 2). Since heat resistance's total is lower than healing's, heat resistance "wins." This is a potion of heat resistance, with a chance to also provide healing. 

If multiple ingredients are tied, the main effect will be chosen randomly. Side effects are less potent than main effects by about half. This algorithm can also apply to as many ingredients and effects as needed (probably). More ingredients or effects per potion may be unlocked as the player reaches a higher alchemy level. 

Discovering Ingredients 

The player starts without knowing what the ingredients do, and they must find out through experimentation or word of mouth. If they walk by some NPCs, for example, they might say things like "I've heard red mushrooms and powdered garlic make a great healing potion, but it tastes terrible," prompting both ingredients to display "healing" as an effect in their tooltips. Similarly, if the player mixes two ingredients that share a previously undiscovered effect, that effect will become visible in the tooltips, but only if the potion actually has the effect.