[Draft] High resolution UI textures

[kvakvs]

Closes #523

• UI texture sources grouped together in a single SVG vector file, this should help us maintain same colour palette and same style throughout our textured buttons.
• Removed crown and v11 from the main button, only our branded Traffic Light by @FireController1847
• Removed discolored "normal" textures from main menu tools, and only using full colored.
• Exported texture resolutions bumped to 128px (looks great on 200% UI scale), main menu tools and main button now have these new textures.

Checklist

• [ ] Hook rebuild main menu on theme change
• [ ] Replace v11 with small yellow "update notification dot" - !TMPELifecycle.Instance.WhatsNew.Shown
• [ ] Priority Sign - take from current theme's Yield sign
• [ ] Parking - take from current theme's Parking-Allow
• [ ] Junction - take from current theme Crossing-Allow [note: Add Crossing sign to Fallback first]
• [ ] VR sign - take from current theme's PersonalCar-Restrict
• [ ] Lane Arrows - rethink theming or shrink vertically/redo?
• [ ] Clear Traffic - rethink https://thenounproject.com/icon/remove-873403/ https://thenounproject.com/icon/remove-873413/ https://thenounproject.com/icon/remove-car-621411/
• [ ] Toggle Despawn - rethink Prevent despawning: https://thenounproject.com/icon/traffic-135499/ Enable despawning: https://thenounproject.com/icon/car-135487/
• [ ] Write down origins of icons to https://github.com/CitiesSkylinesMods/TMPE/wiki/Credits

[originalfoo]

• Removed crown and v11 from the main button, only our branded Traffic Light by @FireController1847

Regarding the traffic light icon, details can be found in https://github.com/CitiesSkylinesMods/TMPE/issues/71

Maybe in place of the v11 we could display a small yellow "notification dot" icon when the mod has been updated? This can be determined via TMPELifecycle.Instance.WhatsNew.Shown property. Note: Such changes will need testing with UnifiedUI mod.

I think icon for priority signs could be simplified to just the Yield icon as it's most globally recognised (even US has Yield signs).

Could some of the tools take their icon from the currently selected signage theme?

• Prority signs: the Yield icon
• Parking: Parking allowed icon
• Junction restrictions: Pedestrian crossing icon
  • Would be great to have JR icons themeable - particularly the ped crossing sign which varies quite a bit
  • Alternatively, what about a junction road sign from IRL?
• Vehicle restrictions: Car ban icon - would be great to get country specific theme for this icon as most countries do have a sign for "no cars allowed"

The lane arrows icon always struck me as being too abstract. Could we maybe have a themeable icon for that (as it varies from country to country)? As the lane arrows IRL are stretched to make them work from driver perspective, we'd need to un-stretch them to fit icon better.

For clear traffic & toggle despawn, is it worth taking this opportunity to rethink how we present those to users (particularly new users)?

Possible icons for clear traffic (would need color inverting, and border adding):

• https://thenounproject.com/icon/remove-873403/
• https://thenounproject.com/icon/remove-873413/
• https://thenounproject.com/icon/remove-car-621411/

As for toggle despawn, from user perpsective it's more about control over size of traffic jams. An exclamation mark doesn't really convey anything about traffic jams. Maybe we could use something like:

• Prevent despawning: https://thenounproject.com/icon/traffic-135499/
• Enable despawning: https://thenounproject.com/icon/car-135487/

Additionally, any icons we use should be detailed on the credits page in wiki: https://github.com/CitiesSkylinesMods/TMPE/wiki/Credits

[kvakvs]

Let's split your huge comment into things which are in the scope, and things which require extra programming and big brain (note: i have no big brain most of the time)

Updating the pull request text with checklist...

[originalfoo]

For button hovered background, what about just a blue circle (will be visibly brighter than green default circle, and will create better distinction between hovered vs. active button).

[kvakvs]

Adding all other restrictions (ped crossing, enter blocked junction, uturn, left on red, right on red, lane change) to the Fallback theme in #1523 now they can be overridden and used by the main menu, when i write that piece of code.

[kvakvs]

Confused IKEA man if we draw our own similar man, with a driving wheel in his hands, could that be related to despawning?

[originalfoo]

Confused IKEA man if we draw our own similar man, with a driving wheel in his hands, could that be related to despawning?

Not sure. IMO it would be too much to fit in to an icon and still quite confusing. What about the 'allow despawn' icon being the three cars icon I posted earlier, but with two cars at back greyed out or just outlines?

BTW, I think this #1525 largely completes #523 so could possibly mark it as fixing #523 in OP?

[FireController1847]

I don't have much to add but I was mentioned and decided to take a glance, this is looking really good! Once this is merged might just convince me to come back to C:S for a bit haha. Looking forward to HQ icons. Finally can use them with my ultrawide 1440p with no blur! 😄

[kvakvs]

Idea for despawning button Despawning disabled: queue of 🚘🚘🚘 in a circle ⚪ Despawning enabled: an empty silhouette of one car 🚘 and disappearing effect

[kvakvs]

UI 150% scale No despawning (traffic queue):

Despawning (poof! magic) also with blue underlay, so maybe the car is too translucent:

[originalfoo]

Definitely much better than the old button! It still looks a bit brash though...

What about something like: https://thenounproject.com/icon/traffic-135499/

And then in allow despawn mode remove the back two cars, put smaller "pop" sparks in place of them and keep the foreground car non-transparent = depict that the 'stuck' traffic behind it has gone...?

[originalfoo]

For clear traffic button, what about something like this - depicting more than one type of vehicle: https://thenounproject.com/icon/traffic-jam-1361986/ (could probably remove car at the back on the right to make the icon a bit cleaner)

[kvakvs]

The previous variant looked noisy because of dashed outline and semitransparency + it was filmed at 150% scale which probably distorted the dashed outline to the point of it being bad.

In game

[originalfoo]

Nice! Fine tuning...

Disable despawn button:

• [x] Background: Do we need the blue bg now that state icons are very distinct?
• [x] Sparklines: Move inwards (or shrink like length instead?), just a bit, make a tiny bit dimmer than front vehicle

Clear traffic button:

• [x] Add transparent outline around the car to split it from the bus (similar to how cars in disable despawn button have outline around them)?
• [x] Maybe move the ❌ up a little?

Both buttons:

• [x] Shrink the content a bit so there's more of a gap between the vehicles and green button outline.
• [x] Maybe dim the vehicles just a tiny bit?

[kvakvs]

White in icons is down to 85%

[originalfoo]

Those look amazing! BTW, would it be worth tying the button background with just tht thin green outline (no fill on normal state) - it looks super clean.

[kvakvs]

Those look amazing! BTW, would it be worth tying the button background with just tht thin green outline (no fill on normal state) - it looks super clean.

I'd like buttons to be distinct from the panel. We're not doing minimalist flat "material design" which is criticised by many people for how hard is to find buttons and other interactable elements in it.