Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI update #95

Merged
merged 48 commits into from
Sep 2, 2024
Merged

UI update #95

merged 48 commits into from
Sep 2, 2024

Conversation

DarkStoorM
Copy link
Contributor

@DarkStoorM DarkStoorM commented Aug 19, 2024

This PR adds a TileSet for drawing boxes for UI elements, like labels, etc. This was faster to implement than designing windows for different elements.

The boxes were only added to the Lobby Overlay and End Screen Overlay. It's covering the names in the result screen though, no idea what to do about that 👀

I didn't change the GameOverlay though. I wanted to move this to the bottom with more info on 1st/2nd/3rd places, but it's fine as it is now. Not important enough to make a new component out of it.


Other changes:

  • Updated font settings, it's more smooth now and doesn't blur out when scaled (result screen for example)
  • Extracted Resources out (they were mixed with scene files)
  • Added a subtle shadow to the labels (lobby/end screen only)
  • Unrelated, but I added the game banner to README (cut from the splash screen) - I also added all characters to the choice section, replacing the huge table
  • LobbyOverlay now has extra info - more instructions, extra images

This method had no references, I don't know what was the origin of this, probably some early Jumper color overlay(?)
This adds a TileSet for drawing UI boxes as backgrounds for various
labels. This was easier than designing a whole new UI with fixed size
windows. This way the boxes can just be redrawn to match new content.
This makes the scaled names and UI text more pretty, but still has to be
tested on stream
@DarkStoorM DarkStoorM mentioned this pull request Aug 20, 2024
DarkStoorM and others added 11 commits August 21, 2024 19:21
Not really necessary, but more visuals is always better
`90` on right side had its color changed from the other image editor
:eyes:
- Changes the position in the arena
- Adds character selection tips
- Changes the info in the labels
- Fixes number offset in the examples
- Adds Twitch Subscriber cosmetics info
- Lowers the font size in lobby overlay to add more text
This change mostly extracts magic numbers and caches the components.

This change also introduces new colors for timer overlay, which only
differ in Alpha channel being slightly reduced. The reasoning for this
is that when players stay behind the timer, they are completely covered
and you can't see if anyone is standing behind it when they are at the
top.
I know this is a micro-optimization, but there is no need to constantly
perform the lookup. It's more about the unnecessary pollution.
The characters will most likely never change anyway, plus, the image is
easy to change later.
* Don't revive before certain amount of time

This will simply abort the execution when the game timer reaches certain
value, but won't automatically refund the channel points - this has to
be done through Twitch Client, but this will require some
work+broadcaster token, so this part will be omitted for now.

* Remove unnecessary field
@AdamLearns
Copy link
Owner

Hey, in general, I like the direction of this, but I think it needs some work first. There are two major points:

Using NinePatchRect

You can use a NinePatchRect to create nice-looking UI backgrounds from within Godot. This should be done instead of using a TileMap. To do so:

  • Make a PanelContainer
  • Override its Panel style to be a StyleBoxFlat
  • Drag UI.png onto the Panel to set the texture
  • Set the Sub-Region to (16, 0, 48, 48) because that's where the nine-patch rectangle lives.
  • Set texture margins all to 16 (this is because each of the 9 tiles is 16x16)

The important parts are shown in this image:

image

Reducing instruction verbosity

The lobby screen currently looks like this:

image

This is a lot to read! Also, we have text at the upper right that should be hidden until the game actually starts.

I think we should only show the following:

  • Type "join" to play!
  • Show ~3 characters jumping and label them with the j command it would take to get them to jump that way. E.g.:
    image
  • Type "!jr" for more instructions
  • Game starts in: 38s
  • Players: 0

The way to show those characters is to make 3 bots:

  • Have them jump
  • Pause for a second
  • Reset to their original positions
  • Repeat

- Removed extra instructions on screen
- Removed extra images (not used anymore)
- Added a new resource for UI backgrounds (StyleBoxTexture override)
- Added preset backgrounds to the overlays
- Repositioned `LobbyOverlay` - always centered
- Repositioned `EndScreenOverlay` - always top-left with offset
Arena automatically offsets the position.
I didn't feel like properly extracting this, because I don't think we
actually pay much attention to the code quality in this project. This
change spawns 3 fake players that automatically jump after 2 seconds,
and after another 2 seconds they are reset to the initial position set
in each *bot*.

Since we make them jump with a command, the game will fade their names
out, so we have to flash them. Even if the name fades out a little, I
don't think it's a problem anyway, the names are perfectly readable so
we can keep flashing. It's probably a better solution than changing the
jumper just to add a flag that tells if the name has to be flashed,
which will only be used by the bots.
DarkStoorM and others added 19 commits August 28, 2024 12:44
This adds a TileSet for drawing UI boxes as backgrounds for various
labels. This was easier than designing a whole new UI with fixed size
windows. This way the boxes can just be redrawn to match new content.
This makes the scaled names and UI text more pretty, but still has to be
tested on stream
Not really necessary, but more visuals is always better
`90` on right side had its color changed from the other image editor
:eyes:
- Changes the position in the arena
- Adds character selection tips
- Changes the info in the labels
- Fixes number offset in the examples
- Adds Twitch Subscriber cosmetics info
- Lowers the font size in lobby overlay to add more text
I know this is a micro-optimization, but there is no need to constantly
perform the lookup. It's more about the unnecessary pollution.
The characters will most likely never change anyway, plus, the image is
easy to change later.
- Removed extra instructions on screen
- Removed extra images (not used anymore)
- Added a new resource for UI backgrounds (StyleBoxTexture override)
- Added preset backgrounds to the overlays
- Repositioned `LobbyOverlay` - always centered
- Repositioned `EndScreenOverlay` - always top-left with offset
Arena automatically offsets the position.
I didn't feel like properly extracting this, because I don't think we
actually pay much attention to the code quality in this project. This
change spawns 3 fake players that automatically jump after 2 seconds,
and after another 2 seconds they are reset to the initial position set
in each *bot*.

Since we make them jump with a command, the game will fade their names
out, so we have to flash them. Even if the name fades out a little, I
don't think it's a problem anyway, the names are perfectly readable so
we can keep flashing. It's probably a better solution than changing the
jumper just to add a flag that tells if the name has to be flashed,
which will only be used by the bots.
I believe this was set to visible at some point in the scene file and
left in by mistake, because we already have the code in the arena that
makes the `GameOverlay` visible after the lobby counter 🤔
@DarkStoorM
Copy link
Contributor Author

DarkStoorM commented Aug 28, 2024

Applied the suggestion from the comment, below is the result. I'm not really sure about the wording, so change it to your liking 😄

I spawned three bots with the commands in their names. One thing I didn't really bother doing was putting the bots somewhere outside of the arena class, because I'm not sure how much we should care about the code quality here, so you might see some questionable changes 😁

I know the u / u u might be a little confusing, but players would see this and immediately run into the duplicate message issue on Twitch, not sure how to communicate this better in here.

image

I cut down on the verbosity and added colors.
@AdamLearns AdamLearns merged commit ae3ac6e into AdamLearns:main Sep 2, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants