cocolabs / odyssey

Minecraft Forge desert themed survival/adventure mod.
MIT License
0 stars 1 forks source link

Survival stats HUD #7

Closed matshou closed 4 years ago

matshou commented 4 years ago

HUD elements to implement:

2020-04-24_213547

matshou commented 4 years ago

I think the part of the gui that represent survival stats such as hunger and thirst do not fit with the vanilla gui design and thus visually detracts from experience in a negative way.

However I do like the thermometer and the day/night cycle bar, those look much more natural and should fit with the game nicely (positioning can be discussed though).

ghost commented 4 years ago

Below is a rough mock up of what the gui could look like.

The top image features larger elements, with a greater degree of transparency; while the bottom image has elements that are smaller, and is more opaque.

(Note: the artistic stylisation is subject to change/improvement depending upon feedback.)

Personally I prefer the top image; as the increased size makes the elements more noticeable, and the increased transparency makes them less obstructive to the players vision.

(Note: it may be best to include a number value display below the temperature gauge to provide a clearer indication of the temperature.)

(Note: we could have it where the pointer moves along the day/night cycle graphic, or that the graphic slides along; this we will need to discuss.)

(Note: you might have noticed that the xp bar is gone; this is because, given my current plans, it will be irrelevant to what is contained within the second mod (adventure). For now, it can be hidden; with the option to view it via a keybind, such as alt + tab.)

ghost commented 4 years ago

I originally conceived of designing the HUD similarly to how the Tough-as-Nails (TAN) mod did theirs.

However, after looking at the image below, and trying out the mod myself, it became apparent to me that such a design does not work well.

This layout has two main problems: it is cluttered; and it is distracting.

Firstly; having the stat bars so close together, and in such great a number, makes it much harder for the player to quickly identify and assess each one.

Secondly; each stat is crucial to the players survival experience, and is constantly in flux; having them centrally located makes them immensely visually and mentally distracting.

ghost commented 4 years ago

Below is an image that depicts a players three levels of perception.

The first and most prominent sphere is the area where the greatest amount of attention is drawn, I will be refer to it as the 'play space'. This area is where the central experience lies; distracting elements or obstructions should not be here. To do so, would be to reshape the reality of the game to where the intrusive element becomes an ever present part of the experience.

The second sphere is a space slightly out of focus, it is where the most important elements may be placed.

The TAN HUD stat design especially, and even the default Minecraft HUD stat elements, fail to stay out of the central sphere. I found that only the hotbar can fit; and so I needed to move everything else out.

The outer sphere, and that beyond it, is largely in the players peripheral vision; it is a space that elements can be known, but not distracting. This is the area where I have placed the status elements. The player does not need to be constantly looking at them all the time, just aware of them. When the focus point is moved to rest over either side, the centre of the screen is still in the second sphere; hence even though the players attention is momentarily draw away, they can still be largely aware of whats going on and what they are doing.

The new HUD might be unfamiliar, but it is a necessary step in order to avoid the problems introduced by adding in new stats/considerations.

ghost commented 4 years ago

I've found a few mods that could be helpful in understanding how to achieve this new design:

https://www.curseforge.com/minecraft/mc-mods/betterhud https://www.curseforge.com/minecraft/mc-mods/rpg-hud https://www.curseforge.com/minecraft/mc-mods/better-hud https://www.curseforge.com/minecraft/mc-mods/ignitehud

This mod shows an example of a scrolling element for the day/night cycle:

https://www.curseforge.com/minecraft/mc-mods/clock-hud

matshou commented 4 years ago

I've asked the folks from project vinum today to help us out by guiding me through the creation of a GUI as they have experience with it.

ghost commented 4 years ago

I'll hopefully be able to show you soon my idea for an slightly better representation of the day/night cycle using your graphic as a template.

*I somehow lost the graphic, so could you post it here (or DM on discord), as I need it to demonstrate.

matshou commented 4 years ago

Here is the work in progress banner you are referring to:

odyssey_time_cycle_banner

I will work today to make it wider so there is more empty spaces between sun objects.

ghost commented 4 years ago

Just a preview of the new day/night cycle representation concept.

I'll go into further detail later; but basically the sun/moon rotate around on a separate layer, the sky moves across the screen on another layer, and the dunes & border exist on the same layer.

Its hard to represent in word, but on the front layer a duplicate of the sky background moves along simultaneously to shade/highlight the dunes.

I'll explain it better later.

Only the pixels in the box should be displayed; the rest either hidden or deleted, not sure which.

(edit: added shader/corrected arrow)

matshou commented 4 years ago

Your desired concept is a bit too complicated for our initial release, we should stick to the original concept you drafted to keep it simple. The textures need to be scaled to the default Minecraft window size of 427x240 so that I can properly align and position them in the game. Use the following window template to scale and position your textures and then export them as individual texture files and provide either the template xcf or png file with the GUI elements positioned inside so I can see the exact coordinates I have to define in the code.

So just to be clear I require the following things:

ghost commented 4 years ago

Here is a link to the xcf file, image with elements included, and all the textures: https://mega.nz/folder/AC40XQrJ#Z7_t3Ho7uAUdx0de3bU8Bw

I noticed that the coordinate numbers in gimp are top down, so I didn't include them in case you need the opposite.

The coordinates can be found by selecting each element layer and hovering over the corners/ends.

Hope this works well :)