joaofarias / csl-traffic

A WIP mod for Cities: Skylines to improve traffic.
91 stars 30 forks source link

Icons... #8

Open originalfoo opened 9 years ago

originalfoo commented 9 years ago

This is the sort of thing we'll get by using in-game models/textures...

bus

Not too bad that one, but others are much more difficult to do - particularly cars.

However, I'm happy to pay for some royalty free icons which would give much crisper UI like this...

http://graphicriver.net/item/isometric-white-garbage-truck-in-front-view/6503976

http://graphicriver.net/item/isometric-hearse-in-front-view/6494458

http://graphicriver.net/item/isometric-fridge-truck-in-front-view/5306512

http://graphicriver.net/item/isometric-trucks-firefighters-police-ambulance/5209554

http://graphicriver.net/item/isometric-firefighter-tank-truck-in-front-view/5161048

http://graphicriver.net/item/isometric-firefighter-truck-in-front-view/5064408

http://graphicriver.net/item/isometric-pick-up-truck-with-tarpaulin/4941783

http://graphicriver.net/item/isometric-police-car-in-front-view/4592956

http://graphicriver.net/item/isometric-white-van/4040677

http://graphicriver.net/item/isometric-set-of-military-buses/3838306

I can do some limited editing (colour tweaks mostly) to make them more closely resemble the in-game vehicles if needs be, and I can certainly get them to uniform sized transparent PNGs. IMHO even though they differ a bit from the in-game ones, having nice clear clean and crisp icons will look much better overall, and they are all still instantly recognisable.

originalfoo commented 9 years ago

There are also some free icons for a few specific vehicles that could be used to reduce costs, for example, although I'd rather spend a few extra $'s and get a consistent set (all those URLs in previous post are from same author = same perspective, detail, etc).

car cargo police

originalfoo commented 9 years ago

Some other screenies form in-game, made ambulance bg transparent but not done others yet. The graphics quality doesn't seem to merit pursuing the in-game asset route further IMHO. ambulance region capture 14 region capture 15 region capture 16 region capture 18 region capture 27 region capture 34

joaofarias commented 9 years ago

I'm trying something. I'll get back to you with news.

originalfoo commented 9 years ago

Mod Tools scene explorer > export model/mesh?

joaofarias commented 9 years ago

Nope, that doesn't work. At least I've tried a few weeks ago and didn't work. I was trying to add a collider to the vehicle and then using raycasts, I could check if the pixel was the vehicle or not and store the correct pixel or a transparent one. This way, I'd get the screen already without background. Problem is, because the mesh is protected, Unity can't create the collider.

I'm going to try adding a pink square behind the vehicle and compare the pixel with that pink. I'm not sure I have the quality on maximum but if we can get this quality as icons, I'll be happy: screenshot 13

Actually, this is the approximate size of the icon: screenshot 13

Looks good, don't you think?

originalfoo commented 9 years ago

You obviously have a far, far better graphics card than me! yes, if you can get stuff at that quality, we are sorted!

BTW, ISTR that "city copter" mod found ways to deal with collision detection and things like that - I'm not sure if the source is avail, but the authors certainly put out loads of little code snippets on their subreddit... https://www.reddit.com/r/CityCopter

originalfoo commented 9 years ago

Specifically... https://www.reddit.com/r/CityCopter/comments/30gc4z/i_just_got_ground_and_building_collision/

originalfoo commented 9 years ago

bus big

joaofarias commented 9 years ago

Ah, it was an oversight on my part. I'm so accustomed at using Unity's raycast that I didn't even remember that CO implements its own raycast. :s

screenshot 18

It still needs some work but what do you think?

originalfoo commented 9 years ago

you sir, are a genius!!!

originalfoo commented 9 years ago

People are literally going to freak when they see this UI.

Are you planning to have a panel like that slide down from the top of the screen (could temporarily hide chirper to make room) - would look awesome!

joaofarias commented 9 years ago

Thank you! :)

No, I'm planning on having it exactly where it is to keep it consistent with the game's UI. When you're customizing roads the panel shows up and when you deselect all roads the panel hides and the roads panel will be there.

originalfoo commented 9 years ago

...you know, as a separate mod, if you could use that technique to generate icons for all assets with missing icons, you'd get about 1 million subscribers in approximately 3 nanoseconds.

joaofarias commented 9 years ago

ahah yeah, but it's not entirely automatized. I used modTools to manually set the bus in a certain positon and then the pink quad behind it. Plus, CO will fix that in the next update, right?

originalfoo commented 9 years ago

I'm amazed that CO didn't just do it from the outset - and cache the results as PNGs or something. It's crazy the way it works at the moment.

originalfoo commented 9 years ago

How are you going to deal with the 3 vehicles for emergency services? Have them overlayed on top of each other, with one vehicle facing foward the other two slightly sideways? And what plans for the 'only in emergency' icon?

originalfoo commented 9 years ago

hrm... if you could add a new tab to the roads menu, then you wouldn't even need the RC button any more - people could just select the tab. By default you could show an image that's like a mini user guide, with mouse hovering over lane, with mouse hovering over intersection. If user then selects lane, the vehicles appear, if they select intersection a mini user guide appears showing how to do the routing...?

joaofarias commented 9 years ago

I'll have to play with it because of the limited size of the button but either that or something like this: http://www.gamestreamer.com/system/assets/images/1/000/596/998/cim2-playerschoice-veh1_H-L-943x521.jpg

Then I was thinking about adding a little icon on the bottom right side of the icon to show the current state. A green check sign for enabled, a red cross for disabled and a blue siren for emergency only.

I will need to add tabs to my panel later for more customizations, for example, the main tab would be the vehicle restrictions, and then another tab for speed restrictions, etc... So adding tabs to the roads panel would get out of control pretty quickly.

Guides would be a good thing, but probably not anytime soon.

originalfoo commented 9 years ago

For the three vehicles, I was thinking of an arrangement more like this (the yellow car and adjacent cars): http://www.hsv.com.au/Gen-F/images/see/certified-used-vehicles/hsv-e3-range-lg.jpg

What if the image was greyscale when inactive and coloured when active - which would work for all basic categories. The emergency services would have a third state which would add a siren on top of the image? Would be clearer than looking at the colour of a small check icon in the corner of the main icon... With a bit of image editing the third state could make it look like the lights are lit on the vehicles in the third state instead of having a separate siren overlay?

I guess guides would be better implemented using the game's native help tip windows if you can work out how to integrate with them?

Regarding speeds, will the multi-select of lanes need to limit to roads of same type? Because road defines max speed, so applicable speeds would be that or less. From vague memory, road speeds are:

15 - paths, gravel roads, pedestrian road 30 - two way roads 40 - four lane avenues 60 - six lanes 100 - highway + ramp

(It might be 40 and 50 instead of 30 and 40, can't remember).

So if there's room for 7 icons, available speeds (some of which won't be available depending on road type) could be:

15, 20, 30, 40, 50, 60, 100

If allow scrolling for more icons then obviously more speed choices can be provided?

joaofarias commented 9 years ago

That disposition of vehicles would be nice but I'm not sure it fits on the 109px wide button. That's why I was also considering the other possibility. But only trying will we know if it fits or not.

Greyscale might look good if the difference is obvious. This one will probably need to be painted for greyscale to be noticeable: passengercar-thumb

I was thinking of the "small" icons taking about 1/4 of the image, so they wouldn't be that small. But greyscale probably looks better. Having the sirens lit on emergency vehicles is also a very good idea - but, again, it has to really stand out.

I'm sure it's possible to use the game's help tips but let's leave guides for a later discussion. It's really painful to do UI by code, so I don't even want to think about doing more :P

Regarding speeds, I can put any speed on any type of road. No problem there. And when I say "any speed", I really mean it. I'm not limited by the limits that the original roads have. There's room for 7 icons to be visible at once - so no need for scrolling - but I can put more. I don't want to put more in the vehicle restrictions to be easier to see at a glance what you're doing but in speeds you can only select one speed, so no problem in scrolling there.

I was thinking about having these as a start: 15, 30, 50, 70, 90, 100, 120 and later on add more to have 15 and then from 20 to 150 in increments of 10. I'll need to get icons and road markings for all of them, that's why I probably won't have all these speeds from the start.

originalfoo commented 9 years ago

Hrm... I have issue with allowing faster speed than road natively allows tbh. I know it's just a game, but I feel cars doing 120 down small road just seems too... extreme. Is there any way that a config option could be provided to allow us to limit max lane speed to the native road speed?

One other thing that might be interesting to experiment with is "regional speed packs" - so I'm in UK and here we generally have 30, 40, 60, 70mph, and some of our speed signs are weird (60mph is often indicated by white filled circle with a black diagonal bar across it lol). Would be cool if I could show British speeds with their associated signs in the menu. Maybe this sort of thing could be implemented via a folder in to which we place xml file and png's, the xml lists each speed and it's associated signage. As for what goes on to the roads themselves, that would always just be number with a white circle around it I assume? I still can't for the life of me work out how you get "BUS LANE" on the busways, I assume it's done programatically rather than a texture image?

originalfoo commented 9 years ago
Have you thought of allowing double-click or Shift+click on a road lane to auto-(de)select that lane on all segments of the road in both directions until it reaches intersection or different road type or road end? So if I want to customise speed of one lane along a long stretch of highway, instead of dozens of clicks I'd just do one Shift+Click and it would select all the relevant segments for me automagically...
originalfoo commented 9 years ago

If lane speed > road speed, increase upkeep cost of segment?

joaofarias commented 9 years ago

The goal is to provide flexibility of customization - the options are there but you don't have to use them. The actual numbers still need to be reviewed but I was talking in Km/h, so 120 Km/h = 75 mph (I forgot UK uses miles).

I was thinking of using these ukmaximumspeedlimitsigns as both icons and road markings (but without the "km/h" thingy below). I could add an option to use different textures. Show them to me, please.

The "BUS LANE" is a texture I've done that is added to the lane as a prop. Then, the game handles it. It's really easy. :)

Not sure what you mean with the lane selection. That's how it's done already, is it not?

Regarding the costs, that's a nice idea to stop people from setting everything at max speed but the cost is set by type of road, not segment. I'll have to see how to work around that. Maybe in a future update.

originalfoo commented 9 years ago

With the speed icons, maybe add road icons on to them - so 40 would have a 2 lane road icon, 50 would have avenue icon, 60 would have 6-lane icon and 100 would have highway icon. this way you get to see what the normal road speeds are for the different roads.

I'd also include a 15 speed for the pedestrian/gravel road default speeds - otherwise if you set it faster there's no way to return it to normal speed other than rebuilding the road.

IMHO keep the km/h - the icons are high enough res in the game to handle it, if it looks too crufty maybe use a thinner font face (eg. Lato Light). It removes any ambiguity from the speed setting, especially for those of us still using medieval units lol.

I assume plan is to be able to add variants of those icons on to the road surface (transparent background, white circle and number, no km/h)? That would look awesome.

The UK signs are pretty much identical to those you have above, only in mph instead of kmp/h. The only different one is our crazy "national speed limit" (60mph) as mentioned earlier. This site has loads of examples of UK traffic signs, etc: http://www.passmytheory.co.uk/learningcentre/signs04.aspx

The customisable textures and metric/imperial options could come in later release. Would prolly need some feedback from users in other countries to find out about the more varied types of signs used around the world.

BUS LANE - ah, I couldn't find the texture file in the github repo.

Lane selection - I can left click multiple lanes, but on long stretch of highway it gets tiring clicking the lane in each road segment in turn, so it would be nice if I could Shift+Click a lane and have all adjacent segments in both directions get that lane selected automagically, until it reaches a junction/etc. For example, if I want to select the entire outside lane of a long, long stretch of highway (comprised of many road segments) I Shift+Click the outside lane on one segment and the outside lane on all the other segments is selected until it reaches junction, end of road, etc. Otherwise it's like click, click, ...click, map scroll, click ... click, map scroll, .......

joaofarias commented 9 years ago

Small road icons = good idea

I just did a quick search to get those icons to demonstrate what I'm thinking of. It doens't mean those are the ones I'll use. Your "national speed limit" is my "default rules apply" sign. Not only does it signal the national speed limit but it also removes any other sign altering the default rules that was set before it (for example, a "no overtaking" sign).

Lane selection - I'm confused. I did this on the last update. Show me a picture of what you mean please. Edit: I think I know what you mean. You wanted it to ignore junctions where there's only highway ramps so it selected the entire highway, right? Send me the picture anyways.

originalfoo commented 9 years ago

Ah, I think it might be me not realising the Shift+Click was already implemented because it's not mentioned in release notes. Will test to see if it's working.

joaofarias commented 9 years ago

There's no shift+click. It's like we discussed. Hovering over a road shows the lanes going from one intersection to the other. Left-clicking selects/deselects it and right-clicking clears selection.

joaofarias commented 9 years ago

What do you think?

1: emergency2-thumb

OR

2: emergency-thumb

My opinion, I think 2 looks better. There's not much sense of 3D in the first picture and that makes it lose a lot of that impact of the center car standing out. Another advantage of number 2 is that all the other vehicles will be in the same position, so when they're side-by-side, it's going to be consistent.

originalfoo commented 9 years ago

They both look good, but would need to see them on the menu bar to get proper idea of which is best.

As for lane select... Well, I found 3 bugs...

  1. I am a muppet. I'd been experimenting with trying to make a pedestrian crossing on a highway (because crossing a road whilst dodging 100kmph trucks is fun!) and that borked the road, rebuilt the road and it started working.
  2. Get a map with a max-height mountain, build a road all the way up the mountain... Now try selecting lanes at the bottom of the mountain and then follow the road up towards the top... After a while the selection outlines disappear, and further up the tool stops working altogether. This is the issue I was having with gravel roads - not that they were gravel, but that they were on top of a really high mountain.
  3. Train tracks are selectable... region capture 1
originalfoo commented 9 years ago

Looking again after sleeping, #2 icon is best.

joaofarias commented 9 years ago

I'll show you the panel with the icons in place on monday (I'm not home this weekend). Greyscale is a nice idea but in practice the effect is not very noticeable on most icons and completely unnoticeable on garbage trucks and hearses. Any idea for an alternative?

Thank you for the bugs. I'll have a look when I have some time.

originalfoo commented 9 years ago

Maybe a sort of charcoal tint to the greyscale, or inset/embossed? If you can upload some of the finished icons I'll have a play around and see if I can find something that looks OK.

originalfoo commented 9 years ago

Random thought: Once speeds are implemented, you could probably improve the MightWatch sat nav to include traffic reports... Have a low priority thread that checks traffic density of each segment, and then make small adjustments to the road speed; the more traffic on a segment, the slower it gets, the less traffic the faster it gets. The path finder would then start routing new traffic to quieter roads. Existing routes would not change, it would only affect vehicles starting a new route. As such you'd get gently drifting traffic patterns as new vehicles take the new routes, and as the old routes start to get quieter, etc.

tl;dr: make traffic density buff road speed of the segment, pathfinder will route new traffic to quieter roads.

originalfoo commented 9 years ago

Aaannnd... more random thoughts...

Once you've got the whole icon thing working, I imagine it's possible to create sub-menus, right? For example, on the Speeds tab there could be a cog icon at the end. Click it and the current set of icons clears away and is replaced with some settings icons. Like, icons to choose what sets of speeds are displayed - German, UK, USA.... And a "back" icon to go back to to the previous level (normal speeds tab content).

As T++ gets more and more features over time, rather than spawning gazillions of UI buttons, you could eventually just end up with a T++ tab on the roads menu, which would have a few icons for key things like:

Settings could allow in-game toggle of (some, not all) things that are currently only avail via the options button in content manager > mods.

originalfoo commented 9 years ago

Idea relating to speeds... As well as the predefined speeds, why not have slower/faster (+ -) buttons? I could click outside lane of highway then Slower, then click inside lane and click Faster. I just takes the current speed and --10 for slower, ++10 for faster. That way I can make relative change to what it currently is.

joaofarias commented 9 years ago

MightWatch satnav - if CO doesn't fix that in the next update, I'll look into it.

In-game options - I think it's possible to make sub-menus (but seeing how messed up the UI is, I can't know for sure until I try) but I don't know how viable it is to change textures mid-game. I'll look into it when I have a more "matured" UI class - right now i'ts pretty much a mess due to the trial and error approach.

I had lots of conflicts with the roads panel so I moved the icon tool to the main toolbar, so it's now a tool on its own. This is actually good because it's more future-proof. I will use the same kind of buttons used in road modes (straight, curve, etc..) to select the mode of the tool - intersection routing, lane customizing, traffic light management^, presets^ - and then tabs to present options related with those modes - vehicle and speed when customizing lanes, etc...

^These are just examples to demonstrate my idea.

Regarding the icons, here's a screen with all selected: screenshot 1

And here's another with some deselected - can you tell which ones? screenshot 2

Here's the icons and the latest version of Traffic++ (the UI is still a bit buggy and the emergency vehicles icon only allows them when in emergency). There's an instructions file on how to install it - ignore the "test and send back the log" part - and for the icons, you have to put them in the "VehicleThumbnails.psd" and then overwrite the one in "Textures/UI". The numbers are the coordinates of the bottom left corner of the image so it's easy to put them in the correct place. http://1drv.ms/1JByFJO

Let me know if you need any help.

originalfoo commented 9 years ago

Ok, I think I have a solution for the disabled state :) I just need to work out how to apply the exact same filters to each of the icons.

But before I do... What's the solid black state about? And also, is there a hovered state?

As for the toolbar button icon, what about having a road (like the roads button icon) but instead of a straight central lane have something similar to the USB logo? https://thenounproject.com/term/usb/140/

joaofarias commented 9 years ago

The solid black state is for when no road is selected, so there's nothing to customize.

There's no hovered nor pressed state. I'm thinking of changing its size on those states (much like what happens with lanes). This is due to the workaround I have to make to enable multiple buttons being selected at the same time.

I haven't thought about the tool icon yet. If you have some time to make that as well, I'd appreciate it.

originalfoo commented 9 years ago

In game, trucks are usually white - any chance you could get me a white truck png? (instead of the blue one)

joaofarias commented 9 years ago

Later today... I made it blue to prevent greyscale issues.

originalfoo commented 9 years ago

Mockup showing hearse restriction...

942e8bf6-f7d2-11e4-9fa1-8c20029df298

I thought the menu background looked a bit like a road, and decided to try and make it look like user had plucked a vehicle from it's slot on the road. When state is toggled, it looks like the vehicle is plugged back in to its socket.

EDIT: It's completely pointless and stupid, but can you play sound effects when the state toggles? Like a pop sound when the vehicle is removed, and a squishy plop sound when it's replaced? I think it would make the road customiser the most addictive element in the game :) goes to search for sound effects

originalfoo commented 9 years ago

Remove vehicle sound: http://www.flashkit.com/soundfx/Interfaces/Pops/BubblePo-Benjamin-8920/index.php

Add vehicle sound: http://www.flashkit.com/soundfx/Interfaces/Clunks/thunk-Public_D-363/index.php

originalfoo commented 9 years ago

So, as a former web designer, my pixel pusher gene has kicked in. There's a very slight pink border around the vehicles that's really bugging me. Would it be possible to re-generate the vehicle images on a black background (instead of pink) and see if that works? I imagine that even colours on the vehicles that look black aren't 100% black, so it should still work in theory - and even if it results in some unwanted transparent areas within the vehicle, it will be trivial to paint under them to repair the damage.

originalfoo commented 9 years ago

Preview of proposed change to 'no lane selected' disabled UI state:

942e8bf6-f7d2-11e4-9fa1-8c20029df298

joaofarias commented 9 years ago

That looks really nice! You're obviously much better than me at this. :D I was thinking about the hovering state and I think I can apply a background independently of the icon. Would that help with what you were thinking?

I'm not so sure about those sounds, though. I guess putting them in context will help me form a better opinion on it but they seem like the type of sounds I would get tired of after a while.

Yeah, I noticed the pink border but was thinking about fixing that in another update, since it's barely noticeable. I'll try to find some time to fix that.

I would rather keep the disabled icons as they are (full black) to keep it consistent with the rest of the UI.

originalfoo commented 9 years ago

Agree about disabled icons (full black) - consistency is good.

Restricted glyphs done.. What's plan for emergency mode on emergency vehicles? I was thinking of a siren slot (like icons below) over the top of the existing emergency service vehicle icon, and it gets filled with a siren in on the 3rd state.

942e8bf6-f7d2-11e4-9fa1-8c20029df298

As for hover state, it would be better if the icon could change rather than just bg, as there are effectively two hover states: one when the vehicle is allowed, and one when it's been restricted. It's likely same icon would be used for both these hover states, maybe sort of a cross-fade between enabled and disabled state, or maybe just "blue-ified" icon to keep consistency with rest of UI.

EDIT: I imagine if all vehicles restricted, the lane is effectively closed. Maybe until there's a way to depict that have it so that there must be at least one vehicle selected for time being?

originalfoo commented 9 years ago

Ponder for "emergency response only" mode...

942e8bf6-f7d2-11e4-9fa1-8c20029df298

Tried all sorts of other things but they just looked crufty, this is about as clean-looking as I can achieve at the moment.

joaofarias commented 9 years ago

The restricted glyphs look amazing. Nice work!

After thinking about the hover state a bit more, I'm not sure if even the background would be possible. Here's what I know:

So, while the other buttons can have the hover state, the one that is selected (focused) cannot - unless I work on yet another workaround for that :/

"or maybe just "blue-ified" icon to keep consistency with rest of UI" - actually, on hover and pressed they are "whitened" and are only set blue when selected.

I won't stop people from closing lanes by disabling all vehicles. I'll add a warning message of some kind later but that's about it.

I'm not a big fan of that emergency only icon. Sorry... But I liked the idea of a slot for a siren. I did a quick search but haven't found a good siren, though.

originalfoo commented 9 years ago

Yeah, I searched for a while looking for sirens and couldn't find anything that seemed suitable... hence resorting to a symbol font lol. I tried with some sirens that I did find (even though they were ugly) and just trying to work out where to merge them in with the existing image was a struggle because there's lots of content in that particular icon and not a lot of room left for anything else. I tried other things as well, such as having the lights lit up, but that turned out to look rather ugly (without them flashing you don't really notice the difference that much). I also tried different lens flares, gradients, and all sorts of other stuff but it all looked crufty.