[Task 2] Modify Existing Object's Appearance

Discussion in 'Evaluation' started by RHY3756547, Mar 7, 2016.

  1. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator


    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!

    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.


    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:

    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:


    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 [​IMG]

    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.

    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.png upload_2016-3-7_20-38-47.png upload_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.
    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:
    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.

    [​IMG] [​IMG]

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

    Submitting Feedback:
    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: Mar 9, 2016
  2. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    Example Feedback:
    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!


    • 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.
  3. francot514

    francot514 Well-Known Member

    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

    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.
    RHY3756547 likes this.
  4. Simhrique0990

    Simhrique0990 Active Member

    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.


    -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


    Last edited: Mar 7, 2016
  5. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    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.
  6. Simhrique0990

    Simhrique0990 Active Member

    Fixed :p
    RHY3756547 likes this.
  7. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    Thank you, much better. :D
  8. TheMarshmallowBear

    TheMarshmallowBear Active Member

    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.


    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.


    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.


    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!


    [​IMG] [​IMG]
    RHY3756547 likes this.
  9. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    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
  10. LetsRaceBwoi

    LetsRaceBwoi Well-Known Member


    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.

    Things I liked:
    • cool i have my own object sprite
    • Took less time than I expected
    • 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...
    JWofles and RHY3756547 like this.
  11. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    Love it, great job. The BMP thing was just for backwards compatibility with Transmogrifier - I'll set up a few different modes in future.
  12. JWofles

    JWofles Active Member

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

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

    • 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: Mar 14, 2016
    RHY3756547 likes this.
  13. TheMarshmallowBear

    TheMarshmallowBear Active Member

    I think the reason why your sprite is off is due to the lighting. Put it in a well lit room and see if it looks "the same".
    JWofles likes this.
  14. JWofles

    JWofles Active Member

    I think that was it, thanks!
  15. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    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. ;)
    JWofles likes this.
  16. I changed the computer screen support and the jostick for cyan and red :p
    summary: I made a recolor

    Download: https://mega.nz/#!ClkVyAZI!y8-B6fPAjzHyoTOJMIS17y0sRAmyWOhfuAGJswI4Nb8


    • It is a bit difficult (for me) create new sprites
    Things I liked:
    • It is quite easy to import and export the sprites
    • the appearance of volcanic in this task,It is simple but is good for beginners
    .... (I'm out of ideas to continue the feedback) :confused: :p
  17. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    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!
  18. @RHY3756547
    so what I did was worth as a task done?
  19. TheMarshmallowBear

    TheMarshmallowBear Active Member

    Task 2 is mostly about "recoloring" an object. Task 5/4 is more about creating a brand new object with custom sprites if possible (or just doing a recolor like I did)
  20. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    Yep, but I was just wondering if the reason I guessed was why you felt it was hard to create a "new" sprite.

Share This Page