[Task 2] Modify Existing Object's Appearance

Rhys

FreeSO Developer
Staff member
Moderator
Summary:

NOTE: No 3D modelling experience is required for this task! Only demonstration that you can successfully replace object graphics.

To complete this task, you must modify the graphics of any object by changing SPR resources, DGRPs or both. For example, minimum participation would be changing the colour of a sofa object... but a more interesting modification would be changing the channels visible on the TV!

Process:
Firstly, you'll want to pick an object you want to modify. Something simple like a table, chair or the aquarium should do. Search for your object in the Object Browser, and open it up! Here I chose the aquarium because it's my favourite testing object. ;)

Switch to the Appearance tab in the window that popped up. You should see all of the "DGRP" or "Drawgroups" that the object uses. Drawgroups contain arrangements of sprites for each zoom and rotation, and generally multiple are used for animated objects. Generally, we just want to modify one of the sprites these use, but modifying draw groups themselves lets you create much more complex objects.

upload_2016-3-7_20-15-0.png

We can see that all of the Drawgroups use the same sprite "aquarium" for the tank itself, and simply have different sprites in front of it to animate the fish. Because of this, we can simply modify the "aquarium" sprite and all the animations will still work!

Switch to Trees & Resources and select "Sprites" from the combobox. You should be able to find the sprite you wish to modify:
upload_2016-3-7_20-16-26.png

Click "Export All" and select a folder to place the sprite files in. If you do this for other sprites, USE DIFFERENT FOLDERS! In the folder you exported to, you should see sprites like this:

upload_2016-3-7_20-18-57.png

The "Color" image contains the colour data for the sprite. The "Alpha" image contains the transparency from the image, where white is visible and black is invisible. The "Depth" image contains the "z offset" of the sprite into the world (used for 3d intersection), which you should not modify for a recolour.

NOTE: if we add things to the Color image, it MUST be added to the alpha image as a white silhouette or it will not show up!

For this example, I just want to turn the aquarium red, so all I have to modify is the "color" sprite. I just open it up in my favourite image editor, and Hue shift it to red:
upload_2016-3-7_20-23-14.png Perfect! Just as I always wanted, a blood red aquarium. If your sprite has multiple distinct rotations, you will likely have more sprites to edit!
Back in the game, select "Import All", then select the folder you exported to and changed the file in. And... you're done! How easy was that?
upload_2016-3-7_20-25-18.png
860d6cef4597bd04ff43feb21fe1afb0.gif


EXTRA - Editing Drawgroups
What if this isn't enough? You want to modify the animations? Add a huge oscillating arrow above the tank when the fish are dead? No worries - I got you covered! This section isn't necessary, but you probably won't regret trying it out, as it's fun!

First, we want to make a new sprite to add to the drawgroup. On the "Trees and Resources" tab, select "Sprites" again, then click "new". Enter an ID that is reasonable and non-zero. I chose #102, look at the IDs of the other sprites to get an idea of the structure.

a97c6ade4491b258652ed5c1a317e67f.gif

To start off, your sprite will be empty. Add as many rotations as you will need, then click "Export All" again. In the folder you chose, you will see a few blank sprites ready to be edited! Here's an example sprite I made, of a big arrow. (color, depth, alpha)
upload_2016-3-7_20-38-43.pngupload_2016-3-7_20-38-47.pngupload_2016-3-7_20-38-50.png
For this sprite, I've just set the depth to be as close to the screen as possible (black). We don't want the player to miss our message, do we? ;) Choose Import All again, select the folder and your sprite will be back ingame.
upload_2016-3-7_20-51-21.png
So, now that we have the sprite, we need to add it to some draw groups. Go to the "Appearance" tab and select the Drawgroup you wish to add the sprite to. (in our case, aquarium dead frame 1-3) Click the "+" button on sprites, and change the sprite to our newly created sprite:
7b34e69923f60a80f4565603e364445f.gif

You will need to do this for each rotation! Zooms are handled automatically, so you don't need to worry about that. If you wish, you can change the rotation used and set the sprite to flip. Another interesting property is "Physical Offset", which offsets the sprite by a specified vector in the world, which we will be using for the arrow oscillation.

Here I have changed all 12 relevant DGRP images (3 DGRPS, 4 rotations, phew!) to include the arrow sprite and offset it for each animation frame. Note the "Physical Offset" z field, which moves our sprite up and down over its normal position.

e7dc918ce578ed920b149a9678f30123.gif
fecce6f62d35f8ed755bc6f772a8c42f.gif


And that's it! What a journey. I'd love to see what you guys can come up with messing with this. :)

Submitting Feedback:
upload_2016-2-26_15-18-21-png.1327

After translating your object, go open up the main window, go to the Resources tab, and click "Save All".
If your object is an original game object, this will save your changes to "Content/User/objectname.spr.piff" and "Content/User/objectname.piff" relative to the FreeSO folder, where objectname is name of the object file you modified.
If your object is completely custom, it will be saved back to the .iff file in the "Content/Objects" folder. It will be permanently modified, so watch out!

Upload all files like these to the internet somehow, and create a post like below showing screenshots of it in action and linking to the files. You should also include some feedback on how it went - this is the most important part!!!
 
Last edited:
Example Feedback:
Summary:
fecce6f62d35f8ed755bc6f772a8c42f.gif

I modified the Aquarium to be blood red and to show an animated "RIP FISH" message when the fish are dead. This involved replacing the "aquarium" sprite, making a new sprite for the message, and modifying a few Drawgroups to make the message appear!

https://dl.dropboxusercontent.com/u/12239448/aquarium1.spf.piff

Problems
  • I kept expecting that clicking the "+" button to add sprites to a DGRP would automatically prompt to ask which sprite to use. (despite you know, making the tool)
  • Adding the sprite over every rotation was a bit tedious. Even if they may change afterwards, it could be useful to add sprites to all rotations when you click add in one.
  • The palette is not perfect, and no dithering is applied. (i know this is a problem, you don't really see it im my sprite though I guess)
  • I had to manually make an alpha channel sprite. It is 2016, we have the PNG format...
Things I liked:
  • It was incredibly easy to import sprites. Exporting empty SPR2 frames was rather helpful too, to get a base to draw into.
  • I like how when I selected the sprite, it immediately had the correct pixel offset to center it over the tile.
  • Seeing the feedback immediately on the DGRP and SPR2 editors was a godsend. Transmogrifier doesn't have nothin' on this!
  • Though I didn't like customising each rotation, I'm a big fan of the "zoom" auto generation. Reduces the workload by 3x!
  • SO. MUCH. POWER.
 
Recoloring is not that easy, there are enought layers in sprites, so you need to do it manually and carefully, for example i did not made big job here:

Was able to add Pentium 4 logo, and change some white layer to black.

computers_spr100_r0_near_color.png fsospr.png

-Problems:
Change sprite image color for each sprite will affect quality of the image based on rotation, a better idea will be have editor to allow change image rgp color property.
Import from bmp only, why not to consider format conversions.

-Thinks i liked:
Was easy to export and import sprites,
DGRP: Todo.
 
I recolor, one of the chairs (I not have a very extensive knowledge in images editions).I Also added an image "Happy" above the chair. I did the editing for sprites with "paint.net",My biggest difficulty was to create entirely new sprites "Happy Example" because we did not understand very well ..

Sem título.png

-Things I liked:

-It was easy import / export the images. The option to import All Sprites/Export All Sprites, slightly reduces the time,
-Positioning the Sprites, through the Drawgroups Editor. The Option "Pixel Offset" left everything much simpler.

-Problems:

-Sprites can give problem leaving the palettes invalid. I redo the process .. 3 times, because of this bug. However, seems to have solved.

-What could be Improved:

-In Option "Sprites" could be detected when the imported image has a problem as "Size,Palette".
- Option For editing other sprites such as the icons of catalog

Download:
https://mega.nz/#!SNZGWAyI!huPrpF-twymo69H7m1d-XCxUWFIUqtg1lR53HGKdaYg

-
 
Last edited:
Good work! Can you edit your post with some more specific feedback though? You must have some more to say on the process and what you think could be improved.
 
I decided to recolour the black armchair, it reminded me of a custom content object back in TS1, it was meant to be "pink" but I realized it wouldn't be easy, so instead it became purple.

PROBLEMS

There were no problems. Every single thing I did went smoothly. If I have to nitpick, is that the icons for my armchair didn't update in the buy mode at all, it remained black, but once I pulled it outo f the catalog I saw the inverted greenish color knowing the change was successful.

WHAT I LIKED

I was quite worried I would've had to use Transofrmigirehgiehr program for this, but the fact that I could easily export the sprites was a very welcome surprise. The looking for the object was once again easy, especially if you know how the team at Maxis named each object. The user interface did not disappoint at the recolor went smoothly.

EXACT STEP LIST

STEP 1. I looked up the black fancy expensive (Living Room Expensive 2) chair to edit.

STEP 2. I exported the sprites for the object.

STEP 3. I edited the objects in GIMP adjusting the colors to Hue of 270, Saturation of 100, and Lightness to 26. Beautiful Purple Color.

STEP 4. I imported the sprites and saved the object

STEP 5. My bear was more than happy to see his purple chair!

https://dl.dropboxusercontent.com/u/29154700/FreeSO/chairslr1tile.spf.piff

task2-purplechair.jpg
task2-purplechair2.jpg
 
Super cool! You're really going for it. ❤_❤
Catalog Images are one thing that may have to wait til the dissertation is done, but yeah that's definitely a problem. I forgot about them a wee bit :I
 
Summary:
upload_2016-3-13_10-34-54.png

I modified the laptop to become an Alienware. This involved resizing a 500x500 sprite down to 100x100, then getting alpha and depth, and afterwards saving to bitmap format. All in all it took me an hour, which isn't really bad. It's kinda floating in the air but you get the picture :)
I rendered the laptop using Blender (orthographic camera) and then saved each sprite using Photoshop. It was a quick sprite so there are some things missing, and the sprites are flipped in most cases.
Link:
https://mega.nz/#!kMgmHJCZ!UYTmBadTJzHTWg3ZtvaQ1lYxoEbY2OqGl9ar0eine2w

Things I liked:
  • cool i have my own object sprite
  • Took less time than I expected
Problems
  • Resolution was kinda hard to figure out.
  • Would've been nice if alpha could have been calculated using png transparency instead of having to save three bitmap images with specific names...
 
Love it, great job. The BMP thing was just for backwards compatibility with Transmogrifier - I'll set up a few different modes in future.
 
64mD0IR.png

DL- https://mega.nz/#!qklkxZrS!4IXsGsZ3dd_IE39HJbJYwQvrX0wczIZvS1Ck0rR6kBE

Just a quick recolour/weird thing I did where it says ily and jk.

Problems
  • My eco sprite doesn't look the same in the IDE as it does ingame, looks better in the IDE, can I fix this?
  • When importing the resource on the appearance tab, sprites, it would be nice to be able to double click the resource you want instead of clicking the button.
  • There should be a button to reset offsets and positions in case you screw up, and if there is one I dunno where it is.
Things I liked:
  • Really easy, anybody could do this.
  • The generation for the zoom is so handy.
  • I like how you can flip the sprite horizontally.
  • Creating a new sprite is really easy too, surprisingly, though doing alpha+depth can be a pain.
  • Import all is amazing.
Not much to say for this one, great job, I enjoyed using it :D

I was trying to recolour bath water but I eventually gave up. There were like 3 frames for 3 states, and other stuff which meant 48 colour bmps or something ridiculous. Also, I sloppily recoloured them and this broke their positioning. Also when importing sometimes it imported the wrong thing so I just left, would've been cool if I'd completed it :c

p.s the drawgroups section is greyed out for me, can I make it selectable/usable? Am I on an old dist?
 
Last edited:
Yep, when it is sunrise/sunset everything gets a kind of extreme orange tint. I'm probably going to tone it down a little, or decrease the time in which you see that. Drawgroups being unselectable is an old problem, please update.

I like the environmental message you've embedded in your object. ;)
 
Problems
  • It is a bit difficult (for me) create new sprites
Would you say that it's difficult to make sprites from scratch, specifically because there are no tutorials and few accessible tools to make them in 3d and export them? Seems like what you're going for, just asking for clarification because I wish to write about it!
 
Back
Top