More options for compass or icon that's easier to read

[NeunEinser]

The compass icon has a bunch of problems, namely:

• Depending on GUI size, the compass needle can become invisible for certain rotations
• The compass is not an item in commonly used in modern times, so players can be confused about how to read it correctly

To fix that, there should either be an OPtion to directly display N/E/S/W, or even better the icon could change.
If this is doable with the available pixels, the icon could be rotating letters N/E/S/W so that you can see for example see in the icon you are midway between N and E.

[Kri5t0fK]

For the record - bingo compass' purpose is to always point towards North (not spawnpoint)?

[NeunEinser]

Yes.

[Kri5t0fK]

About the icon with rotating letters, here is a proof of concept.

Issues:

• colors of letters to be determined (best to be 4 different for N/E/S/W)
• color blindness Accessibility for Colourblind Individuals #109 - pixellated letters may be hard to read,
  that's why there should also be direct display of N/E/S/W next to icon

[NeunEinser]

Hmm, with the idea of using rotating letters I was mostly thinking of completely replacing the compass (not trying to encoperate the compass in the icon at all) and only have the letters in white font, nothing else.

[Kri5t0fK]

I was going to ask about that - make custom bingo compass texture

Yeah, it'll be more easily doable than putting it in compass texture, cause of more available pixels.

Also... we can make 2 bingo compasses - 1st as it is; 2nd with rotating letters - so people can choose which suits them better.

[NeunEinser]

Hmm, I think I see objectively very little advantage of the MC icon if we can make rotating letters work.
If people complain or we find during design that there is an advantage in the old icon, we can always make an option later.

[Kri5t0fK]

Here is my idea - compass-360 (sliding letters, like compass HUD on top in many games):

Example from other game:

Letters should probably be upscaled to bigger scale, so shadow is more consistent with width. But overall it's functional.

For quick test of feel - take image below and replace compass.png with it.

GIMP project file: compass_letters.zip

[NeunEinser]

I like that general idea.
I messed a bit with it as well, I feel like the indicator is not visible enough. Here I tried adding a solid line through it

I feel like the red is still not optimal though, especially considering color deficiencies.
Black is not very visible if it's in between the letters though.

I also tried "inverting" the original color (white in general and black when there is something on the other layer), but that seems like the worst one so far

Since this should be the most easy to edit, this is that last iteration: compass_letters.zip
Not sure exactly, it's kinda hard to make the indicator good with a pixelated style and a small icon like this.

[Kri5t0fK]

I think red is the best choice for now - it's neither white nor black,
so no matter the color deficiency type, it should be visible as a 3rd color.

[UnlucksMcGee]

I wrote a small python script that can take in images to generate the compass.png font file. It's a bit messy but is functional. The script allowed me to experiment with a couple of different designs pretty quickly.

Requirements:

• static.png should be the same height as scroll.png
• scroll.png should be at least 32 pixels wide if scrolling by 1 pixel each time.

import numpy as np
from PIL import Image


def nice_blend(img_above, overlay):
    # From: https://stackoverflow.com/a/64929862
    # Note: img_above is placed above the overlay
    srcRGB = img_above[..., :3]
    dstRGB = overlay[..., :3]
    # Extract the alpha channels and normalise to range 0..1
    srcA = img_above[..., 3] / 255.0
    dstA = overlay[..., 3] / 255.0
    # Work out resultant alpha channel
    outA = srcA + dstA * (1 - srcA)

    outA[outA == 0] = 0.00001
    # Work out resultant RGB
    outRGB = (
        srcRGB * srcA[..., np.newaxis]
        + dstRGB * dstA[..., np.newaxis] * (1 - srcA[..., np.newaxis])
    ) / outA[..., np.newaxis]
    # Merge RGB and alpha (scaled back up to 0..255) back into single image
    outRGBA = np.dstack((outRGB, outA * 255)).astype(np.uint8)
    return outRGBA


if __name__ == "__main__":
    # Number of pixels to scroll each time
    N_PIXEL_SCROLL = 1
    # How many pixels to offset to center 'S'. Play with the value until it works
    HORIZONTAL_OFFSET = 4

    scroll_image = np.array(Image.open("scroll3.png"), np.uint8)
    static_image = np.array(Image.open("static3.png"), np.uint8)

    WINDOW_WIDTH = static_image.shape[1]
    WINDOW_HEIGHT = static_image.shape[0]
    OUTPUT_IMAGE_WIDTH = WINDOW_WIDTH * 16
    OUTPUT_IMAGE_HEIGHT = WINDOW_HEIGHT * 10
    SECOND_ROW_Y_START = WINDOW_HEIGHT * 5

    output_image = np.zeros((OUTPUT_IMAGE_HEIGHT, OUTPUT_IMAGE_WIDTH, 4), np.uint8)

    # Do an initial scroll of the image so that it lines up over 'S' South
    scrolled_image = np.roll(scroll_image, HORIZONTAL_OFFSET, axis=1)

    for row in range(2):
        for column in range(16):
            # Scroll the image along by N pixel(s)
            scrolled_image = np.roll(scrolled_image, N_PIXEL_SCROLL, axis=1)

            # Crop the first section of the scrolled image
            current_image = scrolled_image[:, :WINDOW_WIDTH]
            # Add the static image on top of it, blending them correctly
            current_image = nice_blend(static_image, current_image)

            # Add to the output image
            output_image[
                row * SECOND_ROW_Y_START : row * SECOND_ROW_Y_START + WINDOW_HEIGHT,
                column * WINDOW_WIDTH : column * WINDOW_WIDTH + WINDOW_WIDTH,
            ] = current_image

    # Save image
    img = Image.fromarray(output_image.astype(np.uint8))
    img.save("compass.png")

After some experimenting, I settled on two main options.

Design 1

Given scroll.png image: and static.png image:

The script produced:

The width of the static.png image determines the width of the "view window" for the compass. After some experimenting, I preferred a width of 15 pixels.
For the scroll.png image, I wanted to reduce the height of it as much as possible, to ensure the letters are clear and large. Thus I only kept a single indicator at the bottom. I also found that having the letters aligned to the top (with the indicator below) looked the best visually, as it looks more aligned with the other HUD text beside it, otherwise, it is sunken down a bit.

For the static indicator, I decided to omit the evenly-spaced dots marking the major angles around, as it cluttered the image a bit and I don't think a player is too concerned over those as they can always align themselves using the blocks surrounding them. For the red indicator itself, I made it a bit fatter/wider so that it is more visible.

Design 2

Another alternative I tried that is more in line with the last iteration you made is the vertical red line (with some opacity).
I reduced the height of the letters further and added a text-shadow similar to the rest of the HUD. This results in the text looking visually the same as the rest of the HUD (which I quite like). I was debating keeping a background shadow since now the text has its own shadow. But I decided on keeping the whole background dark so that this HUD element is visually distinct from the text beside it, otherwise, it can clash a bit and cause confusion as to where the compass element ends and where the coordinates element begins.

Given scroll.png image: and static.png image:

The script produced:

These are of course just suggestions, that might need some tweaking to be perfect. But the script is quite helpful to quickly iterate designs. With the "view window" being a different size to the original compass icon, it messes up the spacing of the text to the right, as well as the bingo card on the left. I assume this is something that can be fixed somewhere in the HUD code?

If you want to try the script yourself, you can download the example scroll.png and static.png images from the designs above (they're quite tiny and inline with the text)

[UnlucksMcGee]

I also tried a more ambitious one, with a pixel scroll of 3. Although it is bordering on being just a static compass displaying the current direction, instead of a neat scrolling compass.

Given scroll.png image: and static.png image:
The script produced:

Here is a video showing how it looks. I think the 3 pixel scroll (necessary to have enough spacing for the minor cardinal directions) makes it too jumpy.

Compass.mp4

[NeunEinser]

I think I like both designs from your first comment. Not really sure which one I prefer, perhaps a video showcasing them would be good too.

I also think the 3rd one is too jumpy and I don't really like it.

... And I think in a later version I wanna look into displaying a wider compass at the top center using a bossbar, which then could use something similar to your third suggestion. But that's long term, for now just change the compass icon, and provide an option to switch between them.

[Kri5t0fK]

I also like both designs from @UnlucksMcGee's first comment (Design 1 and Design 2)

Oh, interesting idea with big compass at the bossbar ;)

(...) compass at the top center using a bossbar (...) ~NeunEinser

[UnlucksMcGee]

I decided on design 2, as the text is then the same size as the rest of the HUD and it doesn't get shrunk to fit in place.

I thought that a triangle pointing up would be the best visual indicator as it doesn't fully obscure the letters (unlike the vertical bar):

I experimented with how the red indicator overlays the NSWE letters since with this design there is no extra space below.

Design 3 - Opaque

Here the red indicator just sits on top of the letters.

compass.png:

Enlarged screenshot within GIMP for easier viewing here:

Video:

opaque_compass.mp4

Design 4 - Opacity

Here the red indicator sits on top of everything, except the white pixels of the letters. Instead, it is a slightly transparent red, so that the letters aren't fully obscured by the indicator.

compass.png:

Enlarged screenshot within GIMP for easier viewing here:

Video:

opacity_compass.mp4