Guide to re-animating clothes with json

A group for modders!

  1. Nettle Boy

    Nettle Boy Cooked Bacon

    6
    80%
    BCash: ß 400
    Welcome to the guide brought to you by the novice who made it (Just humoring).
    I use starcheat like everyone else does and i tinker alot, so i thought i'd share what i've learned with everyone.
    A while back i had a crazy idea that i could use the colors from clothes to re-animate the clothes entirely.
    It did work, but it cuased a lot of lag, so i made a few changes to make it more fps friendly. The best part of it is it can be worn by anyone with or without mods. 8D

    In this guide i'll show you how to edit Alpaca Pants so that it's animation is entirely different (it'll be a bunny), how to setup and recolor the Spectrumchart images and how to protect and retrieve the colors from the frame panels.

    However i should warn you, the number of animation frames that can be edited this way are very limited.
    If you wish to animate your character properly, then you should look for a character animator mod with lua.
    If you just want the bunny costume from this guide, here's the json file:
    http://ilovebacons.com/attachments/...9/?temp_hash=e179db282457768ecf806a313369ec45

    To follow this guide you'll need a item editor like Starcheat, know a great deal about editing clothes with directives, know how to use a simple or advance painting tool and know how to use a notepad.

    I had to store the example directives into a notepad. So if the steps don't make enough sense on their own you might want to download this note: http://ilovebacons.com/attachments/...9/?temp_hash=e179db282457768ecf806a313369ec45

    Step 1: Spawn "alpacavillagerlegs" in your inventory, then add a new parameter titled, "directives" and be sure to replace "null" with two commas +"" (This is where we'll do the next few steps).

    Step 2: Collect the colors (including the transparent ones) for the Alpaca Pants, then replace all of them with black (000000), give all the black ones two extra digits for their own unique tags (The tags will help you to edit one frame panel at a time).
    As shown: (Example directives are found in the notes)

    Step 3: Now you need to do a 1 pixel size crop where the most colors cross over a certain point of the clothing, which would be ";17;18;18;19". Next use "?scalenearest;43" to bring it back to normal size, but for this guide we'll use "?scalenearest;32;43" instead (this will give you a blank canvas).
    As shown: (Example directives are found in the notes)

    Step 4: Replace one of the tagged black colors with white (ffffff) without it's tag, add "?setcolor=000000", then replace both 000000 and 000000fe with 00000000, then again replace another black tag with white. Repeat this step until all the tags are used and make sure the end stops at "?replace;000000=00000000;000000fe=00000000" (These will be the openings and closings for editing each frame panel while protecting the rest).
    As shown: (Example directives are found in the notes)

    Step 5: Make up as many black tags as you want and replace them all with different colors that you wish to draw with (these tags will be useful later for bringing life to your animation) and join them to the last "?replace" on the end shown in step 4.
    As shown: (Example directives are found in the notes)

    Intermission: If you've followed the first five steps so far then you've just setup a engine (shown above) that converts the alpacas pants' (or legwear) movements into editable animation. The next few steps will be tricky and time consuming, but it'll prevent your animation from lagging.

    Step 6: Add "?blendmult=/interface/easel/spectrumchart.png;1;2" between the first opening of "ffffff" and "?setcolor" you can find.
    Between these parts:
    "?replace;000000a1=ffffff?blendmult=/interface/easel/spectrumchart.png;1;2?setcolor=000000"

    Add "?replace;" next to the spectrumchart image and give it with a placeholder for now.
    Like this:
    "?blendmult=/interface/easel/spectrumchart.png;1;2?replace;ff0000=ff0000"

    Add "?setcolor=000000?replace;000000=ffffff;000000fe=fffffffe" on the end (this will allow the next spectrum image to come onto a white background for editing later).
    Like this:
    "?blendmult=/interface/easel/spectrumchart.png;1;2?replace;ff0000=ff0000?setcolor=000000?replace;000000=ffffff;000000fe=fffffffe"

    Add another "?blendmult=/interface/easel/spectrumchart.png" but with ";2;2" on the end of it, then give it the same "?replace;" with a placeholder as well.
    Like this:
    "?blendmult=/interface/easel/spectrumchart.png;1;2?replace;ff0000=ff0000?setcolor=000000?replace;000000=ffffff;000000fe=fffffffe?blendmult=/interface/easel/spectrumchart.png;2;2?replace;ff0000=ff0000"

    The first set (seen above) will be used for breaking up the twin colors contained in the spectrumchart image itself so that the second set can be our frame panel to draw on pixel-by-pixel.
    As shown: (Example directives are found in the notes)

    Step 7: Now go back to your computer (assuming it's windows), find "spectrumchart.png" in starbound assets (assuming the assets are unpacked already) and open it with a painting tool (Paint program will do).

    Next i'm going to show you how to select the right colors you'll need from it to layout the color and placement of each pixel in the directives to draw stuff.
    So from the bottom left corner of the spectrumchart image, go two pixels up and two across, then crop a 32 x 43 px area, after that extend a new blank space around it, then copy the cropped spectrumchart and paste it anywhere on the blank space.
    Example:
    View attachment 5082
    (Sorry about all the photos, i just can't fix them) :(

    Step 8: Dig through the starbound assets for "\monsters\pets\bunny\parts\white.png" and open it the same way. Select and copy one of the white bunnies and paste it on the blank space in the edited image your working on. Example:
    View attachment 5083

    Step 9: Give the bunny a solid background and take the bunny out, leaving a hole in it, then move the background over one of the cropped spectrumcharts to cover the most bottom of it. That should create a silhouette of varied colors you'll need to collect (Used for positional drawing on the frame panels back in the directives).
    Example:
    View attachment 5084

    Step 10: Like collecting colors from starcheat's image browser. Pick the screen color and collect the HTMLs (or colors) from the silhouette bunny on the background. Write down each of the HTLM's hex name on a notepad.
    You'll notice that there are two pixels on the silhouette that are exactly the same, just make a copy of that HTML's hex name to put on your notepad and add "fe" on the right of it, also add "fe" to the one that comes after it (unless it's on the next row).
    Here's my note:
    Row 01
    1f0b00
    1e0c00
    1f0c01
    1e0d01
    1f0f00
    1f0f00fe
    Row 02
    270e00
    270f00
    280f00
    281000
    281100
    281300
    Row 03
    321000
    321100
    321200
    311200
    311300
    301400
    311700
    311700fe
    Row 04
    3a1100
    3a1300
    3a1500
    3a1600
    3b1700
    3a1800
    3a1900
    3a1a00
    391c00
    391c00fe
    Row 05
    421300
    431400
    431600
    421700
    411900
    421900
    431c00
    431d01
    421e01
    422000
    432200
    Row 06
    4b1400
    4b1600
    4b1a00
    4b1c00
    4b1d00
    4c1f00
    4c2000
    4b2200
    4b2500
    4b2600
    Row 07
    541f00
    552200
    542300
    542400
    532700
    552900
    552b00
    542d00
    Row 08
    5d2400
    5d2700
    5d2900
    5c2b00
    5c2d00
    5d2f00
    5d3100
    Row 09
    652700
    662901
    642d00
    652f01
    653100
    653400
    643500
    Row 10
    6e2a00
    6f2d01
    6f3000
    6f3201
    6f3500
    6f3900
    Row 11
    772d00
    783200
    773400
    763600
    773900
    Row 12
    803100
    7f3400
    7f3800
    7f3b00
    803e00
    Row 13
    883500
    893800
    883f00

    Step 11: Check the colors you made up during step 5 and pick a tag for the rightside of each HTMLs in your notepad (This will layout the colors for each pixel on the spectrumchart image back in directives).
    Like this:
    Row 01
    1f0b00=00000001
    1e0c00=00000001
    1f0c01=00000001
    1e0d01=00000001
    1f0f00=00000001
    1f0f00fe=00000001
    Row 02
    270e00=00000001
    270f00=00000003
    280f00=00000003
    281000=00000001
    281100=00000002
    281300=00000001
    Row 03
    321000=00000001
    321100=00000003
    321200=00000003
    311200=00000001
    311300=00000002
    301400=00000001
    311700=00000001
    311700fe=00000001
    Row 04
    3a1100=00000001
    3a1300=00000001
    3a1500=00000003
    3a1600=00000003
    3b1700=00000003
    3a1800=00000001
    3a1900=00000003
    3a1a00=00000001
    391c00=00000002
    391c00fe=00000001
    Row 05
    421300=00000001
    431400=00000003
    431600=00000001
    421700=00000003
    411900=00000003
    421900=00000003
    431c00=00000001
    431d01=00000003
    421e01=00000001
    422000=00000002
    432200=00000001
    Row 06
    4b1400=00000002
    4b1600=00000002
    4b1a00=00000002
    4b1c00=00000003
    4b1d00=00000003
    4c1f00=00000002
    4c2000=00000003
    4b2200=00000002
    4b2500=00000002
    4b2600=00000001
    Row 07
    541f00=00000002
    552200=00000003
    542300=00000003
    542400=00000003
    532700=00000003
    552900=00000003
    552b00=00000003
    542d00=00000001
    Row 08
    5d2400=00000002
    5d2700=00000003
    5d2900=00000003
    5c2b00=00000004
    5c2d00=00000003
    5d2f00=00000003
    5d3100=00000001
    Row 09
    652700=00000002
    662901=00000003
    642d00=00000003
    652f01=00000004
    653100=00000003
    653400=00000003
    643500=00000001
    Row 10
    6e2a00=00000001
    6f2d01=00000003
    6f3000=00000003
    6f3201=00000003
    6f3500=00000003
    6f3900=00000002
    Row 11
    772d00=00000001
    783200=00000003
    773400=00000002
    763600=00000003
    773900=00000002
    Row 12
    803100=00000001
    7f3400=00000003
    7f3800=00000002
    7f3b00=00000003
    803e00=00000002
    Row 13
    883500=00000001
    893800=00000002
    883f00=00000002

    Step 12: Copy the HTMLs that are marked "fe" from your notepad (leave the tags out) and paste them over the placeholder in the first set inside the Directives, remove "fe" from all these HTMLs, then add "=000000fe" to all of them (This will stop the colors on the second spectrumchart from smudging it's frame panel).
    As shown: (Example directives are found in the notes)

    Step 13: Copy all the HTMLs with their tags from your notepad and paste them over the placeholder in the second set inside the Directives (You'll start seeing what you've drawn blinking in-game when you either move, crouch or sit. If not, don't worry. The other frame panels still need to be done).
    As shown: (Example directives are found in the notes)

    (Optional) Step 14: Re-adjust the values (x) for both sets of "?blendmult=?blendmult=/interface/easel/spectrumchart.png;x;x" until you have the frame panel positioned where it should be (make sure the horizontal value for the first set is one point lesser than the second).
    As shown: (Example directives are found in the notes)

    Step 15: Repeat step 6 to 14 until all the openings have been filled with their own frame panels.
    After that your animated bunny (or whatever it's mean't to be) costume is ready for wearing.
    If you want to give the "inventoryIcon" of this item some visual, just replace "icons.png:
    pants" with "pants.png:idle.1"
    As shown: (Example directives are found in the notes)

    There you have it. The end of the guide at last!
    I hope this knowledge will be useful to both the modders and vanilla players in multiplayer.

    If you still can't see anything on your custom animated alpaca pants that looks like your drawing while your wearing it. Add "?replace;00000000=00ff00" on the very end of the Directives and try wearing it again.
    If you can't see a green square/rectangle, it means there's a mis-typo in the Directives, or if you can see it, it means there's something missing in the Directives.
    If you can't find the problem just go back to the start of this guide, get the json file and re-edit the frame panels in the Directives of the bunny costume. If you can't fix it, just wear the bunny costume instead.
     

    Attached Files:

    Silverfeelin likes this.
  2. Silverfeelin

    Silverfeelin Bacon Manager Modder

    19
     
    There's still a bunch of stuff I don't understand. I ought to look at this again when I'm more focused. To get it straight, you're limited in frames to the amount of unique colors on the source image.. or..?
     
  3. Reno_fezzed_one

    Reno_fezzed_one Cooked Bacon

    5
     
    BCash: ß 500
    Cool. You seem to know a lot of very obscure things about directives that I never figured out, such as that ?scalenearest, and presumably ?scale and ?scalecubic, accept two numerical values, allowing rectangular scaling. Glad to know that somebody's finally figured out how to make custom armour animations.
     
    Nettle Boy likes this.
  4. Reno_fezzed_one

    Reno_fezzed_one Cooked Bacon

    5
     
    BCash: ß 500
    Silverfeelin, if we ever figure out what this guy is doing here, perhaps you (or I) can make a drawable generator that utilises this new discovery.

    EDIT: From a cursory examination of this guy's post, it seems you're limited to the number of frames available to vanilla armour (and chest armours are gonna be a pain in the ass).

    EDIT 2: So you're limited to the number of frames that vanilla armour has, or the number of colours in your chosen legs armour image, whichever is less.

    EDIT 3: Wait. I understand what he's doing here. What you have to do for full armour animation is to create a drawable template the size of a vanilla armour spritesheet scaled down by 43 and crop down to the template (the ?crop dimensions will be the dimensions of the standard spritesheet divided by 4:relievedface:. The spectrum chart is a perfect template, since it's larger than a scaled-down armour spritesheet in both dimensions, meaning we don't need to ?blendmult several times to create the template image. Each scaled-down "frame" is one pixel by one pixel and must have its own individual colour tag to indicate the frame. (E.g., 00000001, 00000002, et cetera.) Then, frame by frame, you set the frame's colour to ffffffff, ?blendmult a sign drawable (or multiple sign drawables) into that frame, then move on to the next frame, doing the same thing, until all the frames are completed. And there you have it -- custom animated armour, no Lua required. (Due to the limitations of legs armours, the arms will have to be in the same spritesheet and you can't animate arms holding items.) Given the nature of this little "exploit", the Frogg Legs are the perfect item to base animated armours on (this item makes your base player sprite invisible).

    Anyways, basically, the way this works is that directives are applied before the armour image is cropped into frames and displayed by Starbound, so you can make the original image invisible, and overlay a new framesheet, and scale it by 43. Then, for each colour tag in the framesheet, you replace the frame colour with full white and overlay it with the base sign drawable image and replace all the colours in the image (including those outside the frame, as they need to be invisible to avoid interfering with the next frame). You then move on to the next frame and the next and so on. There are several frames that are never displayed, so you can just replace the frame tag colours for those with 00000000 with no untoward effects. By performing these steps, you've, in effect, replaced the entire armour spritesheet with custom drawables.

    That should be all you and I need to make custom animated armour (and a generator for it), thanks to Dokie's discovery that armour directives are applied before the spritesheet is cropped.

    EDIT 4: One problem though. Animated armour drawables will be about 21 times larger in your player file, and on the server, than animated hats. There's probably a risk of lag, but I've made drawables about 1.5 times larger than an armour spritesheet (without the useless frames) before, and those haven't caused too much lag.

    EDIT 5: Okay, so the game crops the image before applying directives. Thanks, Silver.
     
    Last edited: Dec 29, 2016
    Nettle Boy likes this.
  5. Silverfeelin

    Silverfeelin Bacon Manager Modder

    19
     
    I checked each directive individually, and based on what I think is going on here I don't believe this is a viable method of custom armor, like Nettle Boy said in his original post.

    The only way this could be viable is if there's an armor piece that has a different color in every frame applied to the same position, which I find hard to believe exists.

    Here's the line by line comparison: http://i.imgur.com/jv5Y7lI.png
    The cut off lines are just more of the same; there's no hidden directives off screen.

    There's a few things that still confuse me.
    - In the first (and some other frames), there's an additional three lines. I marked these "Don't know what this is used for." in the image. What are these for?
    - The spectrum chart has a different blendmult position for each frame.. why? This seems to just offset the colors, which makes it harder to apply the right colors to the right pixels. Is there any other purpose for these adjustments in positions?
     
  6. Nettle Boy

    Nettle Boy Cooked Bacon

    6
    80%
    BCash: ß 400
    Yes that sounds right Silverfeelin. You are limited to a certain number of frames due to the amount of unique colors on the source image.

    I'm still figuring out my new theory for resolving these ridiculous frame limits. I've been ?replacing the source image's transparent background colors with ffffffff then using ?scale to merge the colors of the source image into new various colors (so i can pick the screen color in-game). But the problem is, not all the varied colors are different. So at the moment i'm playing around with ?replace between a couple of ?scale to see if i can make the varied colors all different.
     
  7. Nettle Boy

    Nettle Boy Cooked Bacon

    6
    80%
    BCash: ß 400
    I didn't know there was ?scalecubic. Is it just like ?scalenearest ?

    I know that the first value alone on ?scalenearest controls both the horizontal and vertical scales of a source image (?scalenearest=2), but with a second value you can control the horizontal and vertical scale seperately (?scalenearest=2;1)
     
  8. Nettle Boy

    Nettle Boy Cooked Bacon

    6
    80%
    BCash: ß 400
    I'd be glad to see that new generator take place someday. Even if it's just for making hats using Spectrumchart in directives. Because i'm really tired of having to code my drawables manually.

    Yeah chest armors are a pain. have you tried the mutant high-vis jacket? I think the arm colors are different to it's chest piece
     
  9. Nettle Boy

    Nettle Boy Cooked Bacon

    6
    80%
    BCash: ß 400
    Yes Reno_fezzed_one. It's limited to both the number of frames on what the vanilla armour has and the number of colours in your chosen legs armour image. The number of colours on the leg armour's source image will be the limited number of frames you can use.
    But i'm working on a solution that i mentioned in another reply, to raise the number of frames you can use for drawables, up to the same amount of frames that the vanilla armour has (except the 8 climbing frames). I could use some help with applying my theory in the directives of the leg armour.

    I did't quite understand all of what you've just written in these paragraphs, but i can tell you got the right idea.
    * The invisibility doesn't have to be part of the leg armour (unless you want it that way). It can be part of the head armour that has invisibility, like Frogg Head for example, so any leg armour that can make the perfect base for animated armours will do, let the head armour hide the player sprite.
    * I agree that the leg armours are limited. So if you want arms that can hold items and rotate, you'll need to make the animated armour into two parts for the hole set, by using chest armour for the arm's animation (There isn't a lot of varied frames for the backarms images in the starbound assets, so you'll have to make most of the backarms part of the same spritesheet as the frontarms).
    * Is the base sign drawable anything like signplaceholder?
    * Thanks, i couldn't have discovered this if you (or whoever did) hadn't discovered a way to make cool custom hats, that you gave me ages ago :)

    I did a quick test on the bunny costume for lag (caused from moving while wearing the animated armour), before this guide was made. If you copy and paste the large amount of colors from ?replace, 19 times inside each custom frame in the directives, then copy and paste those five custom frames 8 times and test it in-game. The changes to the bunny costume will produce lag for 2 seconds if you run around in a tier 1 spaceship. It's better than the older prototypes i had before.
    Also i think you can have the framesheet (?scalenearest) as big as you want, without it effecting how much lag it produces (Unless you add more ?blendmult for each frame).
     
  10. Nettle Boy

    Nettle Boy Cooked Bacon

    6
    80%
    BCash: ß 400
    To answer your second question. The 2 positive values added to these blendmult positions aren't necessary, i offset the spectrum charts because i was worried that it might cause problems, as for the one frame with -5 for the vertical value, i was just being too lazy to re-draw the hole frame to get the animation seated in a chair properly. So you can set those blendmult position values to 0.

    And your first question. I added the first ?blendmult before the other one with it's two lines to fix a small problem. Like the signplaceholder.png, the spectrum chart has tons of different color values in its own source image, but unlike the base sign, not all of it's color values are different from each other. I'll just show you what i mean by sending you a json file with the legwear highlighting a color value on the spectrum chart.
    http://ilovebacons.com/attachments/...3/?temp_hash=22bc8b818ea28be2183194ff62257980
    Tell me how many color values have been changed in it's directives.
     

    Attached Files:

  11. Nettle Boy

    Nettle Boy Cooked Bacon

    6
    80%
    BCash: ß 400
    Oh! I've just forgotten to say something about the last bit on your second question: "Is there any other purpose for these adjustments in positions"
    Well there is one purpose for it, but it's hard to explain. I'll just make you two more Jsons file like the first one i gave you, and you can compare the differences of their directives.
     

    Attached Files:

  12. Nettle Boy

    Nettle Boy Cooked Bacon

    6
    80%
    BCash: ß 400
    I've done some tests on my theory about ?scales. It didn't completely work.
    But then again the changes are limited to the crop dimensions and the varied colors i replaced weren't anywhere near it.
    So i needed to find a way to make the varied colors reach out to this crop dimension. This is what i came up with:

    "?scale=0.4?replace;XXXXXX=ff0000?scale=1.25?replace;XXXXXX=ff0000?scale=0.8?replace;XXXXXX=ff0000?scale=1.25?replace;XXXXXX=ff0000?scale=0.8?replace;XXXXXX=ff0000?scale=1.25?replace;XXXXXX=ff0000?scale=0.8?replace;XXXXXX=ff0000?scale=0.5"

    It hasn't been tested yet. The increasing and decreasing ?scales in the pattern, helps the new varied colors spread outwards, so that it reaches the crop dimension. I could use some help testing out this altered theory. But i'll test it myself eventually.
     
  13. Nettle Boy

    Nettle Boy Cooked Bacon

    6
    80%
    BCash: ß 400
    The ?scale and ?replace in my theory didn't work as i thought it would.

    I did a test in the directives with two white backgrounds, one plain and the other with grey chessboard markings.
    I added a blue dot (pixel) to each background, then added ?scale=1.25 that smudged the dot onto it's background, creating 4 pale blue dots that differ from one another in levels of saturation. I replaced all the pale blue with (0000ff) making them blue like their previous dot, then added ?scale=0.8 that once again smudges the blue dots and replaced the pale blue the same way.

    The idea of this was to make a spreading effect that goes from point A to point B on a image source. So that a particular color value (point A) when present in the image source, effects the color values in the ?crop zone (point B).

    So i'm spreading the dot's *blue-ness* outwards across the two backgrounds, until strangely i couldn't spread the blue anymore.
    It got to a point where the blue dots stopped smudging the background's colors adjusted to them, when ?scale=1.25 is added. So it was a endless loop of down scaling, replacing color values, up scaling, and replacing color values over and over with no further spreading.

    I think the ?scale is the problem. Even if i could get the spreading effect to work correctly, it would be a gradual effort getting the spread to go from point A to point B or anywhere else for that matter. So i concluded that i'll need to find another way to spread colors.
    Doe's anyone know if there's a directive for blurring source images??? I'd like to complete my research on getting more frame panels for what i'm doing.
     
  14. Silverfeelin

    Silverfeelin Bacon Manager Modder

    19
     
    ?scalenearest, ?scalebicubic and ?scalbilinear are all different scaling methods, which will lead to different results.
     
  15. Nettle Boy

    Nettle Boy Cooked Bacon

    6
    80%
    BCash: ß 400
    ok i'll give them a go thx silverfeeling.
     

Share This Page

Loading...