tutorial Character's graphics modding basics

[Shirsh]

A small starter guide with starter tips and very basics. initially created on Steam:

http://steamcommunity.com/sharedfiles/filedetails/?id=582056968

Now copied here:

Intro

Spoiler

This guide has some very basic information about editing game graphics for an agent, guard, or npc in your Invisible Inc. mod. To learn more about modding Invisible Inc., you should read modding notes written by Jason Dreger from Klei, you'll find those notes in his API example mod, also available on Steam Workshop.

For starters, check out how Klei's 2D animation work: http://www.gdcvault.com/play/1020165/2D-Animation-at-Klei

Required software and stuff

Spoiler

1. Example API mod:

It contain Klei's kwad builder and several animation files, which essential as a base for your own character.

2. Strelock's latest KWAD Tool: https://github.com/Psimage/KWADTool/releases will come in handy.
3. Graphic editor of your choice. I use raster (Photoshop or Gimp), but you can use vector one if you prefer. This guide won't cover how to use these graphic editors, but there are many tutorials out there for graphic editors if you're interested in learning.
4. Total Commander or a similar file manager will save you an incredible amount of time. It can be easily used with the kwad tool, kwad builder, zipping/unzipping stuff, and copy/paste images from place to place (which you will do every three minutes). It's shareware :http://www.ghisler.com/download.htm
5. A small and fast text editor with lua syntax theme like AkelPad can be very useful. This is mostly used for the lua part of mod (you will need to activate built-in plugins, especially "coder" plugins). It's totally free and opensource: http://akelpad.sourceforge.net/en/download.php
6. Convenient graphic viewer is convenient. If you don't happen to have one, here's link to free XnView (scroll page down a bit for free download link): http://www.xnview.com/en/xnview/#downloads

1. See what's inside

Spoiler

In the game's folder you will find kwad files. KWAD files are compact light-weighted package files where's all the data stored. The' KWAD format is unique to Klei, which is why you will need the specialized tool to extract them.
As you probably guessed, gui.kwad contain gui related files, movie.kwad contain movies , etc. Our first goal is to explore how the data is stored and sorted in characters.kwad, anims.kwad andgui.kwad:

• characters.kwad - The primary file to see what we should do. This KWAD contains sprites and symbols for all moving in-field stuff: agents, guards, drones, guns, you'll see.
• anims.kwad - Mostly holds different "not character related" animations (for example for different static props like elements of decor) used in the game. Also stored in this folder are the animated portraits called "portraits."
• gui.kwad - Contain all gui stuff, but we need mostly a screen selection pics and agent's screen, and icons for items. Maybe small portraits of guards for debriefing screen if it will be guard mod.

For you to see the contents of these files, you need to extract them using the KWAD Tool. It works through command line and Total Commander (TC) provided a very good way to use the command line:

As you can see, I moved anims.kwad into the KWADTool folder (it stays unchanged so we don't need to copy it, just don't forget to move it back after extraction). On the right TC's panel is active (ie panel where KWADTool folder is opened). Then type "KWADTool -i anims.kwad -o outputDir -e all" into the command line: when I press "Enter" the extraction process will start. For more info about commands check KWADTool info page: https://github.com/Psimage/KWADTool

UPDATE: now with KWADTOOL v 1.1.0 alpha you'd better to use command like "KWADTool -i anims.kwad -o outputDir -e anims": it takes longer, but extracted png sprites will be 100% ready to modding!

Now if you extracted it, just make an o_o expression on your face and explore output folder for hour or two...

2. New character's .anim

Spoiler

Your mod files are stores in the Invisible Inc. game folder under /mods. Look for the the API example Mod folder (it should be named workshop-551989114) and you'll find the "example anim files" subfolder.

In case if you're not good in folder stuff: right click on Invisible inc in your library in Steam client and press "properties", in pop-up menu there will be tabs, open one called "Local files", there will be button "Browse local files". Click it and it should open game's folder for you, there should be a "mod" subfolder, open it and you should see folder or folders named "workshop-xxxxxxxx" (mod number instead of xxxxxxx, in that case workshop-551989114).

Here you'll have a list of anim files, to use as a source we have:

• Banks
• Decker
• Three types of drones (or more)
• Two guns (handgun and rifle) and grenade
• Portrait of common K&O guard

But wait, there are many files? Right:

• There's a "main" animation build ("agent_banks"). This is animation of the character on screen that runs around and does stuff.
• The grp animation build ("grp_agent_banks") is the animation of the character when they are shot and dragged by one of your agents.
• The overlay/wireframe build ("overlay_agent_banks") is a grayed out, silhouette-like image of the character that is used while in cover and is layered over other the game graphics (beside gui). I personally don't like and never use overlays (and use invisible empty_male_build instead, which I've uploaded to Klei forum, but we'll talk about that later) but it's your choice now.
   

Note that exact same scheme is applied to guns. For example, the grp gun animation is seen on a couple of frames when you grab/drop body, so don't miss one if you wanna make a new gun. Also note that images.kwad contain images for items when they are dropped on the floor (despite its name it does not contain many other images so you can skip it most of the time), and while making your custom image.kwad you can add new look for dropped gun too.

As you've probably learned from GDC page, the animations for the game are made in Flash. Those anim files are the result of exporting a flash animation to a state that the kwad builder can easily interpret, break/convert into several types of files understandable by game's engine (.adef, .abld and sprites/spritesheet which stored as... idk, it doesn't matter now anyway) and packed into a kwad.

But what is useful for us is that anim file is basically a .zip archive that contains a log of export (just skip it), two xml files (animation.xml and build.xml, didn't mess with them for characters, (sorry; more info on portraits later) and a whole bunch of png images. Just open/unpack it with Total Commander and get ready for many long hours of painful fun.

Now before you have the pleasure of manual repainting of 31 sprites of Decker's shoe or 107(!!!) sprites of Banks' cloak, there a link to Klei forum where I uploaded "empty files":
http://forums.kleientertainment.com/topic/59480-some-empty-png-files-for-animation-here/?p=689083

It's a file full of 1x1 transparent pixel png files that you can use to overwrite Decker's hat or Bank's cloak. Full complect for males (because it was a part of agent_male_empty), just really needed pieces for females. And there also is agent_male_empty.anim that I put everywhere in my mods instead of overlays (used for guns, too).

Note that grp animations have more sprites and it can give you some headache in the long run. You will need to use the "Multi-rename tool" from Total Commander's "File" menu and add "grp_" in front of all your sprites names, but after you try it in-game you may see unneeded collars, hat parts, cloak parts, that you will need to replace with empty files by yourself

Strelock has now updated the KWADTool: v1.1.0 Alpha extract png sprites/symbols with their invisible alpha spaces around. But you must use the command like "KWADTool -i your.kwad -e Anims -o yourDir"
See details on: https://github.com/Psimage/KWADTool/releases/tag/v1.1.0-alpha
So now if you want to combine or edit some character's appearance you don't have to manually put hundreds of sprites over Decker's or Banks sprites but simply combine extracted pngs!
Still, don't forget to give your eyes a break sometimes.

Also there's a some tips:

• Photoshop's "multiply" and "color" layer's types are VERY useful to get "proper" colors (ie that will fit to other game's assets). For example, for my Mist mod I was using archive Shalem's chest sprite over the jacket, and the Siren's hips with the multiply (or color) effect on the shorts (90%, so it wouldn't be pure greyscale) etc. To make skin to be similar to Siren's skin, I changed saturation to -43 from the default colors of Banks or Internationale's skin. Use default game colors as a base.
• It's better to stick to constant numbers when you change colors. Your eyes can get tired and can fail you (but you will see it later in game, with shaders of different corporations). Remember numbers; save them as presets or write it down. Save hue/saturation and brightness/contrast presets. All of them can be handy for your next mod and portrait of this character. Instead of non-transparent colors, use 90% and 50% (or 20% or whatever appropriate) layers over base sprites.
• You should check every change "in action." Added a new hat? Copy files into anim, build kwad, and run the game. Making a guy? Send him on mission with Shalem and compare. Making a gal? Put her on mission with Internationale and compare. Making a rifle...
• What important is that they should look as much as possible equally cool to the characters already in the game: gal looks lame near Int? Add some nice details. Internationale overshadowed? Think again, maybe you added to your new gal too much of something and need to simplify her design. Also, check different corporations because each of the corporation's shaders change a lot.
• Previous state led to requirement of effective virtual working space layout. I personally use two Total Commander windows: In the first window I have a folder full of new sprites and opened target anim that is staying in proper builder's folder "anims/characters/agents/". I edit sprites, press ctrl+A in new sprites folder and then press F5 to overwrite anim. In the second window I have builder/exe on one side and the mod folder on other. I build the kwad and press F6 to move it from "out" folder to mod's (more about builder's folders later).
• To have less unnecessary work, try to edit sprites with same "last number" first: for example cst_clr_00-1, fac_clr_00-1, abs_clr_00-1 etc. This way, in game you'll have a full set of character's animation from one angle/viewpoint. When there will be almost what you're looking for, edit sprites for other views (with possible comebacks to change details).
• Start with character "on the field". At some point, switch to his animated portrait. Then go back and make corrections in the in-game character animation again. Go back and forth between the portrait and in-game character until you get what you want. Even though their artstyle is quite different, the portrait and character should have a synergy. If the portrait doesn't works with that haircut but works with the in-game character it's better to just change a character's haircut.

So it's art-time comes, take your inspiration and...

*hours, days and weeks pass*

3. About kwad builder

Spoiler

I think you can read all that you need about it in that comes along with builder. I'll just add a couple of tips:

• In my experience, the builder can refuse to work from Program Files and other adjacent places, but works great when I put it to "C:\builder"
• You may skip the part with sprite atlases in the builder when you do "inner builds," and only add it for the release build. It takes longer to generate but nicely reduces the kwad size (very cool when you have many anims).
• Don't forget to make backups of source files sometimes. You won't like recreating 107 cloak sprites again, I'm sure.
• You'd better use a default game paths (it isn't always essential, but it's not fun to search which file is causing trouble when there's so many of them and everything isn't working).
• You can store portraits in the same kwad as the character's animations (even the game doesn't store them like this). The path is anims/portraits. It will look like "PackageFolder( package, "./anims", true)" in build.lua

4. Animated portrait build

Spoiler

For making animated portraits we have a guard build:
Standard guard's proportions can be changed by editing the xml file. It's important to note that eyeballs are paired (that's can be a big problem, but more on that later).
This time you will need to not just edit the sprites but also edit build.xml file (to edit it quickly, use AkelPad or something) to change sprite's coordinates. In build.xml you'll see a strings like this one:

• <Symbol name="nose" >
• <Frame framenum="0" duration="1" image="nose-0" w="67" h="132" x="0.02549999999999919" y="-0.7994999999999983" />
• </Symbol>

You need a w="67" h="132" to change coordinates of nose, here's how it works:

As you can see on that pic I'm a bit tired of writing this guide already, just look, it's a direction for increasing or decreasing the numbers:
Want to move your image up? - add numbers to h.
Want to move you image left? - add to w.
Want to move your image right? - make w lower.
Zero is not right enough? Make it w ="-67". Experiment and find what you like.

Note that it doesn't work in the coordinate system of the game player, but in the coordinate system of the sprite (so on portrait you will move elements at some angles).

Be careful, eyeballs a bit tricky!
Eyeball-0 and eye_white-0 sprites not separated for different eyes, the distance between two eyeballs defined by "w" number! When you make "w" a lower number, the eyeballs moves closer to each other and when you make "w" bigger they move to the opposite edges of the face.

As before with character, check every change in game and take a screenshot every time! Comparing these screenshots with each other and some draft is very useful as you move pieces around.
To add your new portrait to your mod you simply need to use the following code in guarddefs (for guards) or in agentdefs (for agents) these two strings:

• profile_anim = "portraits/portrait_animation_template",
• profile_build = "portraits/xxxx",

Where xxxx is name of your new portrait build.
You can find this info and more about how agentdefs and guarddefs works in the API example mod.

And if you decide that you can have a static image instead of animation, use a

• profile_icon = "gui/LOCATION OF ICON"

While profile_image = "gui/profile_icons/xxxx.png" is used for small guards portraits used on debrief.

Here's my animated gif:

5. What else?

Spoiler

• You can change the size of any sprite as you need. But remember it will always use the upper left corner as the coordinate point called in build xml. That means if you make sprite bigger to the right or to the bottom you don't need to mess with the xml. Want a beard? Make hair sprite longer to bottom and put beard there. Want some fancy semi transparent helmet-monitor on animated portrait? Simply stretch ear or hairs canvas to the right and attach everything to it).
• You should be able to edit static images and icons by yourself, I'm sure. But when/if you will make a 1024x1024px agent picture for upgrade screen take archived Prism or archived Sharp image as a base. All other agents have a 1024x1024px picture. Both archived Prism and archived Sharp have a larger 3172x3172 px size. After editing, save your new file at 1024x1024 size (bicubic sharpening rules) and it will be much crisper than if you'll try to work with 1024 from the start. Plus you'll probably will have better understanding how talented Cheoljoo Lee created them.

Outro

Spoiler

Feel free to ask questions if you have any, there's a chance that I can help answer. If there's anything missing, feel free to tell me, as well. My English is a quite broken, but Colonel_S edit this guide a bit when he has time for it. He misinterpret some of my phrases sometimes though and I rewrite them (infinite cycle).

Have a nice day. Bye.

Last Edited by Colonel_S January 6, 2016
After that edited by Shirsh (some broken links fixed and couple of new words) January 15, 2016

[Shirsh]

I updated it here while playing with new tags. All posts with attachments required to be updated btw.

[Shirsh]

I'm too lazy to update part about portatrait,
but it's possible to base your new portrait on portrait/animation of any agent or enemy or drone:

use a

• profile_anim = "portraits/"xxxxxxxx",
• profile_build = "portraits/yyyyyy",

where xxxxxx is any portrait whose animation you need and yyyyyy is a new portrait based on xxxxxx with new build.xml inside (extracted with KWADTool etc etc etc)

[malistaticy]

Yo, quick question while I find my way around this: could I theoretically repaint Banks's cloak as a head band for my character? I want the tails of his head band to follow behind him.

[Shirsh]

10 hours ago, malistaticy said:

 

Let's go to your Snake thread