Replies: 131 (Who?), Viewed: 92119 times.
Page 1 of 6
Quick Reply
Search this Thread
dino_rex
Test Subject
Original Poster
#1 Old 22nd Apr 2015 at 9:41 AM Last edited by dino_rex : 12th Jul 2016 at 6:17 PM. Reason: new content
TS3 UI Recolor - Now with Gray UI for testing!
7/2016 Gray UI for testing! post #72
5/2015 - Tutorials, posts #11, #14, #15

I'm excited to share a first prototype of a TS3 UI recolor. It contains 509 modified layout files and 4216 modified images. I used batch photoshop actions and visual basic scripts.





This changes:
- everything you can see in the screenshots
- and cursors

This does not change:
- application load screens
- interactive load screens
- specialty windows (travel journal, scrapbook, social group UI's)
- some tutorial screens
- plumbob

Plans:


Testing:
Any feedback is appreciated! When you find a bug, please post a screenshot.


Known Issues:


Installation Instructions:
- Download is divided into 2 parts due to upload size limit. Get both.
- Don't put it in your regular packages folder. These should be your lowest priority files. This download will override other modded layout files (such as ones that expand CAS windows like skin tones or freckles). If you let the other mods override this one, you'll miss the text/icon colors for the modded window only.
If you're using the MTS resource.cfg, download and extract the packages into the "Test" folder (/The Sims 3/Mods/Test/ -- you may need to create it). If you're not using the MtS file, then open and add this to your resource.cfg:
Code: 
Priority 499
PackedFile Test/*.package


No mod is ever entirely safe. In theory, UI overhauls should be benign as they don't edit anything related to gameplay. But please try it with a new game or a backup before using it with your regular saves.
Screenshots
Attached files:
File Type: zip  greenUI_1of2.zip (33.60 MB, 1088 downloads) - View custom content
Description: Green UI v0.1 4/22/2015 (1/2)
File Type: zip  greenUI_2of2.zip (21.44 MB, 963 downloads) - View custom content
Description: Green UI v0.1 4/22/2015 (2/2)
exlibrisas
Lab Assistant
#2 Old 22nd Apr 2015 at 4:12 PM
EPIC! Black or gray would be awesome.
dino_rex
Test Subject
Original Poster
#3 Old 22nd Apr 2015 at 5:06 PM
Quote: Originally posted by exlibrisas
EPIC! Black or gray would be awesome.


Thanks! And I agree. Planning to do just a couple to start with, I'm thinking a variation on the green (above) if I finish it in time for the April theme, a clean light-gray and a haunted dark/black.
AGuyCalledPi
Mad Poster
#4 Old 22nd Apr 2015 at 11:37 PM
Looks good! I'll test it tomorrow when I have time. Especially looking forward to the black one; this one seems really bright!
insert signature here
( Join my dumb Discord server if you're into the whole procrastination thing. But like, maybe tomorrow. )
jje1000
Mad Poster
#5 Old 23rd Apr 2015 at 1:30 AM
Looking great!

I think the green is a bit overwhelming since it kind of blends in with the greens and browns in the world. I would totally be down for a white or light grey one a la the Sims 4.

In fact, could it potentially be possible to overhaul the UI and make it more minimalistic? I would also be interested in seeing if we can get an empty CAS background.
dino_rex
Test Subject
Original Poster
#6 Old 23rd Apr 2015 at 2:31 AM
Quote: Originally posted by jje1000
Looking great!

I think the green is a bit overwhelming since it kind of blends in with the greens and browns in the world. I would totally be down for a white or light grey one a la the Sims 4.

In fact, could it potentially be possible to overhaul the UI and make it more minimalistic? I would also be interested in seeing if we can get an empty CAS background.


Yeah, and this green in particular is a bit oversaturated. Monochrome appears to be in high demand, so I'll see about getting something gray out for testing.

As far as making the UI minimalistic, I believe it could be done by adjusting the sizes and locations of the buttons in the LAYO files. But I haven't tried, so don't know if that's all it requires. The LAYO files appear to coordinate a lot of the interactive and dynamic UI elements. I don't know what controls the background UI elements (like the 'puck' panel on which the buttons rest). Many of those IMAG instance #'s aren't found in the LAYO files. But the graphics can be edited, so maybe playing with adding/removing transparency and rearranging buttons would be sufficient for a layout overhaul?

There actually are some CAS recolors and a mod that removes the CAS background entirely. I've played around with the backdrop mesh, too (a couple pics here ). The issue with the CAS backdrop is that it's a single mesh for CAS/CAP/CAB, so both textures and modeling are tricky. But if you just want a blank one, it's at the link above.

Thanks for checking out this thread!
jje1000
Mad Poster
#7 Old 23rd Apr 2015 at 8:00 AM
Quote: Originally posted by dino_rex
As far as making the UI minimalistic, I believe it could be done by adjusting the sizes and locations of the buttons in the LAYO files. But I haven't tried, so don't know if that's all it requires. The LAYO files appear to coordinate a lot of the interactive and dynamic UI elements. I don't know what controls the background UI elements (like the 'puck' panel on which the buttons rest). Many of those IMAG instance #'s aren't found in the LAYO files. But the graphics can be edited, so maybe playing with adding/removing transparency and rearranging buttons would be sufficient for a layout overhaul?


I think it could also be done by replacing some of the UI elements with simpler ones, which should help alleviate the current clutteredness of the default UI.

Something like this would be great:



Quote: Originally posted by dino_rex
There actually are some CAS recolors and a mod that removes the CAS background entirely. I've played around with the backdrop mesh, too (a couple pics here ). The issue with the CAS backdrop is that it's a single mesh for CAS/CAP/CAB, so both textures and modeling are tricky. But if you just want a blank one, it's at the link above.

The thing though, is that the blank CAS Screen in the link above completely removes the backdrop- and that the color behind is actually the color of the world water and looks fairly flat. One of the few things I liked about the Sims 4 was the way CAS looked- if we could get a simple backdrop in, which people can then texture, it would be great. The CAS background is a single mesh- so would a default replacement be a solution?



Apologies if I'm talking about a lot of things you haven't done yet, but the whole UI thing gets me a bit excited. I could help if you want.
AGuyCalledPi
Mad Poster
#8 Old 23rd Apr 2015 at 8:32 PM
I really don't understand why the beta UI didn't make it to the final game, it seems like it would work really well. Granted, it takes up slightly more space, but that shouldn't really be an issue.
insert signature here
( Join my dumb Discord server if you're into the whole procrastination thing. But like, maybe tomorrow. )
christmas fear
Mad Poster
#9 Old 28th Apr 2015 at 3:27 AM Last edited by christmas fear : 28th Apr 2015 at 4:04 AM.
I'm testing it out right now, and from what I can see the bladder, hunger, etc texts look too light, and the tabs at the top should be a darker color as well as the info in the tabs (like the age icon and the traits text). and at the main screen it looks like the color of the families are more 'faded' for some reason. it's perfect other than that.

I think there's also a leftover element from the blue ui in the panel where it shows sims work days and days off.

dino_rex
Test Subject
Original Poster
#10 Old 9th May 2015 at 10:00 PM
Quote: Originally posted by christmas fear
I think there's also a leftover element from the blue ui in the panel where it shows sims work days and days off.


Thanks for the testing and the feedback! Appreciate the screenshot and found the incriminating file

One of my main goals is to develop with a simple system for others to create their own UI's. I'm getting close. I've found (I think) all the needed layout images so the batch Photoshop actions work. And I'm almost done with a small excel app that will automate the LAYO file re-coloring (screenshot). When that's done I'll make a tutorial thread.



Currently experimenting with a gray-themed UI. This has slightly increased transparency compared to vanilla. I'm not entirely satisfied, but I tried whiter colors (like TS4) but it doesn't look right next to the heavily beveled puck buttons. I don't plan on redesigning the buttons, but maybe (hopefully?) someone might want to do a more thorough overhaul once I post the tutorial.

Test Gray UI below. The layout colors (fonts, icons) are still vanilla, but you can get an idea.



Thank in advance for any feedback!
Screenshots
dino_rex
Test Subject
Original Poster
#11 Old 9th May 2015 at 10:40 PM Last edited by dino_rex : 9th May 2015 at 11:18 PM.
Default Map Tags
Also, I finally figured out how to edit map tags. I'll post here for anyone's future reference.

The LAYO files MapTag and MapTagColors have data for map tags images and colors, but they're not used! Instead the colors are determined in the XML MapTags in GameplayData and the circle IMAG files are: ATLAS_MapTag_00, ATLAS_MapTag_01, ATLAS_HUDMapviewSort_00 and ATLAS_MapTagColors_00.I think the IMAG files are in DeltaBuild0 but if not, look in the FullBuilds.

(I think the MapTags XML is also what you need to edit to get rid of the ever-present weather stone tag. There are mods that do this, but I haven't had a chance to look at them.)

Here's a demo of all-red map tags. I'm not a fan of the default purple, so I'll likely change that in the UI I'm working on.

(Note: The colors in the TS3 files are in an 8-digit hex format, like 0xFF000000. The first two digits are transparency, so FF=100% opaque, then the last six are a regular hex color. So this example is black at 100% opacity.)

Screenshots
AGuyCalledPi
Mad Poster
#12 Old 14th May 2015 at 1:06 PM
The grey one looks neat. The entire UI's aesthetic is just all wrong, so I do indeed hope someone will make something of it. I mean, I could, but I'd be kinda impaired since I use Photoshop nor Excel. I could, of course. OP, care to explain how to extract and replace a UI element from the game files? I know they're in the Build packages, but can I just use S3PE?
insert signature here
( Join my dumb Discord server if you're into the whole procrastination thing. But like, maybe tomorrow. )
christmas fear
Mad Poster
#13 Old 17th May 2015 at 12:40 AM Last edited by christmas fear : 17th May 2015 at 12:52 AM.
this is really interesting, i'd love to try it myself. also the red map tags remind me of the release version of the game, without any patches. the map tags look different. not red, but i think it was the color. i can try to find a pic.



found a video from a let's play done in 2009. the only reason i remembered the map tags look different was because i had played the unpatched version some time between now and the past year or so.
dino_rex
Test Subject
Original Poster
#14 Old 20th May 2015 at 8:48 PM Last edited by dino_rex : 20th May 2015 at 10:29 PM.
Default Editing IMAG Files
Sorry, been out of town the past few days.

Quote: Originally posted by Grijze Pilion
The grey one looks neat. The entire UI's aesthetic is just all wrong, so I do indeed hope someone will make something of it. I mean, I could, but I'd be kinda impaired since I use Photoshop nor Excel. I could, of course. OP, care to explain how to extract and replace a UI element from the game files? I know they're in the Build packages, but can I just use S3PE?


(This somehow turned into an almost-complete tutorial.)

Yes, you use S3PE. The layout files are all IMAG files. What I did was extract first from the Build packages, then the Delta build packages (overwriting duplicates), then the individual expansion pack Build packages (which contain mostly icons). This results in about 15K files. I've pared it down to about 4K by removing advertisements and then using a javascript script to sort out images that are predominantly blue (the main UI color). Then doing manual sorting.

This still results in what I suspect are many unused image files, but I don't think it's worth sorting through them any more. The final package file is only about 40MB and since the image files are loaded anyways from the original build packages, I don't believe that having extra replacements will slow anything down (except possibly app load time).

I attached my directory of image files in 3 parts (I hope this is ok with MTS policy -- the png files are unedited, but it would take another modder many hours to sort through the files and duplicate the directory. If it's not ok, I will take them down.) There may still be files missing -- and, again, likely many unused images. The first two zip files contain images that are safe to use with Photoshop batch actions. The third contains files that should be manually edited.

Re: Photoshop batch actions. I've found they work best if they are applied only to the blue UI colors. I attached my best attempt so far at a color range (AXT file). This is used with Select -> Color Range, and can be the first step in the action. Here are a couple action example. A simple action would be like the first one (Select Color Range, Change Hue/Saturation, Save, Close). The second one created the gray UI in the post above.



To apply an action to a folder, go to File -> Automate -> Batch. Selection your action and the image folder. It will take several minutes. To speed it up, change the history states to 1 (in Edit -> Preferences) and minimize the PS window.

When you're making individual edits, a pitfall is that many of the images look like they are used in-game (and may even be referenced by the LAYO files, like the map tags example above) but aren't. I think the developers originally used individual files to create many of the UI elements, then later combined them into larger files. (See the screenshot -- the combined images at the top are used, most of the individual element files are not). I don't know where the actual code is that determines the files used. I've looked in the DLL's and haven't found anything. So I suspect they may be in the UITX files, which have not yet been decoded.



Once you make your edits, you put them back into a package file using S3PE. It takes a couple minutes for S3PE to import all the files (so it might look like it's crashed), but it handles them fine.

Edited to add: To other modders, you are MORE than welcome to use these files to create and upload your own UI here or anywhere.

Edited again! I attached my PSD test file. It contains a variety of UI elements that you can use to create and test your PS batch actions.
Screenshots
Attached files:
File Type: zip  IMAG Part 1.zip (34.10 MB, 399 downloads) - View custom content
File Type: zip  IMAG Part 2.zip (16.24 MB, 351 downloads) - View custom content
File Type: zip  IMAG Part 3 _ Manual Edits.zip (4.39 MB, 353 downloads) - View custom content
File Type: zip  TS3 UI ColorRange.zip (175 Bytes, 288 downloads) - View custom content
File Type: zip  TS3 UI Test File.zip (3.16 MB, 293 downloads) - View custom content
dino_rex
Test Subject
Original Poster
#15 Old 20th May 2015 at 9:57 PM
Default Changing Text and Icon Colors (LAYO files)
(Since because I'm apparently on a mini-tutorial kick here...)

Background:
Layout (LAYO) files are XML files that control the colors of the text and icons. They are in the UI package. (They also reference images, but, as described above, they are often not the images actually used, so I would not depend on them).

The actual icon image files are white on a transparent background. They are not included in the uploaded images above, as they aren't recolored directly. But if there is interest in changing them (their shapes), I have a script that can automatically extract them from the other 15K images, and will be happy to do that and upload them.

There are are 656 layout files. Some of them are for the advertising load screens, and a few more don't contain any color data. The remaining 488 files contain the text and icon colors that need to be edited to revamp the layout.

The original files use over 200 different hex colors. Most of these are shades of blue or gray, many indiscernable from each other. I'm guessing there was no standard color palette among the programmers, so they each picked colors that looked good, and they ended up with very similar, but not the same hex values. This is fine, unless you're a modder trying to change them. Executing find-replace for over 200 different hex values? Not reasonable.

Through some trial and error, I condensed the 200+ color palette into 28 colors. It's not perfect, but if used in-game it looks almost the same. Since you're going to be changing the colors anyways, the slight differences shouldn't matter.

I wrote a vbscript script that processes the layout files and uses an algorithm to minimize the maximum difference between the original hex color and a hex color in the 28-color palette, and then assigns that color. You need to do Find-Replace 28 times.

Attached are files that can be used with a batch find-replace (recommend Notepad++ or Sublime for this) to change to your preferred layout colors.

Steps:
1. Decide on your new hex colors. (Use photoshop color picker or search google for an online hex color picker.)
2. Download the zip file. Batch find-replace in files.
3. Put files into a package using S3PE 4. Upload with instructions to make this package a lower priority than other UI changes (Otherwise, it may overwrite a mod to allow more moles or skin colors or whatever. It is totally compatible with Nraas mods in my testing.)

Below are the standardized colors. Find-Replace the color name (ex. CLR06) with the hex value of your choice. I do not recommend changing black and white (CLR00 and CLR01). You may only want to change the blue and gray colors (CLR03 to CLR11). But you need to do find-replace with all the colors, even if you're using the vanilla hex values. (Otherwise they will remain CLR01, CLR02, etc, which are not hex values, so bad things will happen.)

If you don't want to change the colors in a particular part of the layout (example, load screens). Just delete the files before doing find-replace and don't add them to the S3PE package.



This is a greatly simplified process. If you want to delve deeper, you can make changes to individual files or individual elements within the files. This is time-consuming but can be rewarding. So I'm working on an excel workbook to do this in a semi-WYSIWYG fashion. But, for now, here is a quick reference.

These are the color elements: TextColor, ShadeColor, FillColor, Color1, Color2, BackgroundColor, BorderColor, SelectionColor, HighlightColor, DisabledColor, AlternateRowColor, GridLineColor, RowGridColor, ColumnGridColor, OutlineColor, StateColors, Colors, Text Colors, CaptionColors. StateColors change icon color and button highlighting. I haven't figured out what CaptionColors change, but since they are assigned colors I included them.

I did not change the ShadeColors, FillColors, CaptionColors and StateColors that appeared to have a default white or black. Weird things can happen when these are changed. I also did not alter any transparency.

There are also GlowColors. Mainly white or light yellow from what I can tell. I didn't change them.

There are two more: MainColor and SecondaryColor. These control the fill bars (load screen bars, happiness bars). If you want to change these, just search for MainColor and SecondaryColor and make your changes.

Edited to add: See the Map Tags post above for info about the TS3 hex format.
Screenshots
Attached files:
File Type: zip  LayoutFiles_SimplifiedColors.zip (2.41 MB, 266 downloads) - View custom content
AGuyCalledPi
Mad Poster
#16 Old 22nd May 2015 at 9:27 PM
Ah, thanks!

I'm not really familiar with batch actions (I don't even think GIMP has anything like it) but even then I'm seeing how it'll be hard to make any significant modifications.

So right know we know it's possible...but changing more than just colour on these thousands of image files would take serious man-hours. As expected, of course, although you've now proven the amount of UI elements to be substantially larger than I expected.

I won't be doing anything with this for a while since my PC is having serious trouble connecting to the internet (damn Wi-Fi ) but I'm glad people are still figuring bits of TS3 out.
insert signature here
( Join my dumb Discord server if you're into the whole procrastination thing. But like, maybe tomorrow. )
dino_rex
Test Subject
Original Poster
#17 Old 23rd May 2015 at 3:30 AM
Quote: Originally posted by Grijze Pilion
Ah, thanks!

I'm not really familiar with batch actions (I don't even think GIMP has anything like it) but even then I'm seeing how it'll be hard to make any significant modifications.

So right know we know it's possible...but changing more than just colour on these thousands of image files would take serious man-hours. As expected, of course, although you've now proven the amount of UI elements to be substantially larger than I expected.

I won't be doing anything with this for a while since my PC is having serious trouble connecting to the internet (damn Wi-Fi ) but I'm glad people are still figuring bits of TS3 out.


I don't use Gimp, but I think batch actions can be done via scripts. I don't know what this entails.

You actually could make some significant changes with only a handful of files. The puck (the interface in the bottom left corner) is made up of a single png file for each screen (the main screen, CAS, build-buy, edit town, etc).
christmas fear
Mad Poster
#18 Old 23rd May 2015 at 4:07 AM
Are you planning on uploading your grey version?
dino_rex
Test Subject
Original Poster
#19 Old 23rd May 2015 at 11:29 PM
Quote: Originally posted by christmas fear
Are you planning on uploading your grey version?


I am! Just gotten a bit distracted...
jje1000
Mad Poster
#20 Old 23rd May 2015 at 11:56 PM
Interesting... thanks for providing the files!

I might take a look at simplifying some of the UI into something a bit more minimalistic.

No more shinny curves, hello simplicity!
AGuyCalledPi
Mad Poster
#21 Old 24th May 2015 at 5:09 PM
Quote: Originally posted by jje1000
Interesting... thanks for providing the files!

I might take a look at simplifying some of the UI into something a bit more minimalistic.

No more shinny curves, hello simplicity!


Yay! This gone be good.
insert signature here
( Join my dumb Discord server if you're into the whole procrastination thing. But like, maybe tomorrow. )
jje1000
Mad Poster
#22 Old 24th May 2015 at 5:58 PM
It'll probably not be for a while, since I'm busy for the next conceivable while.

But an UI update would definitely keep the game from looking too dated.

Also, would it be possible to replace the fonts used in-game?
AGuyCalledPi
Mad Poster
#23 Old 24th May 2015 at 9:01 PM
Quote: Originally posted by jje1000
It'll probably not be for a while, since I'm busy for the next conceivable while.

But an UI update would definitely keep the game from looking too dated.

Also, would it be possible to replace the fonts used in-game?


Well, the fonts used in-game are TrueType files, found in the Game/Bin directory. I'm pretty sure those can be replaced without a hassle. I do like how well this game is holding up after six years - it may still run like crap, but at least it looks the part now. I've got my ambient occlusion, hacked water reflections, dynamic shadows, updated UI...
insert signature here
( Join my dumb Discord server if you're into the whole procrastination thing. But like, maybe tomorrow. )
jje1000
Mad Poster
#24 Old 24th May 2015 at 9:36 PM
Quote: Originally posted by Grijze Pilion
Well, the fonts used in-game are TrueType files, found in the Game/Bin directory. I'm pretty sure those can be replaced without a hassle. I do like how well this game is holding up after six years - it may still run like crap, but at least it looks the part now. I've got my ambient occlusion, hacked water reflections, dynamic shadows, updated UI...


Ooh...You've got ambient occlusion? (Please tell how). I remember some option with Nvidia, but that broke a while ago.

It might be worth possibly releasing these to the public and making the game look even better. If gamers can pry apart GTA IV and Skyrim and make them look amazing, there must be ways of doing this for the Sims 3.
christmas fear
Mad Poster
#25 Old 25th May 2015 at 5:17 AM
Quote: Originally posted by dino_rex
I am! Just gotten a bit distracted...


yay, can't wait!
Page 1 of 6
Back to top