[Araidnee]

It took a lot of digging to find that old guide we have on the forums for facestates and .dmi files, and I wasn't entirely satisfied with it, so I decided to go ahead and make one myself.

The New Facestates Guide

Images and How to Edit Them

[As an aside, I'll be using GIMP for any image editing happening here. Most people suggest Paint.net, and it can do everything shown here.]

First thing you'll need are the actual faces you'll be using. If you're using an established character from something here, then you're in luck, and can probably find art all over the place of your character with different facial expressions, or you can pull a spritesheet from something like The Spriter's Resource for full sets of portraits directly from existing games. These may require some assembly, but personally, I think they look pretty good in Sigrogana's UI.

A Quick Miniguide On Sprite Assembly
[spoiler]
For this example, I'll be using the portraits spritesheet from Summon Knight Swordcraft Story.
Obviously, this contains an entire game worth of portraits, so we're gonna need to Crop this down to what we need.
Now, we're simply left with just the parts we need. go ahead and save that as is, and make a backup in case you need to go back.


Lucky for us, we've already got one of our expressions built on here, and her mouths and eyes are separated, which gives us lots of options. Next up, we're going to want to get all that junk on the bottom onto a New Layer to make things easier to work with. An easy way to do do this in Gimp is to use your Select Tools to grab these separated parts, and use CTRL+X to cut these. Make a new layer in your Layers Sidebar as well. Then, use CTRL+V to paste it back in, and Right Click on the Floating Layer this created and select Anchor Layer to merge this with your new, empty layer. You should have two layers that look something like this now:


From here, you can use the Select and Move tools to grab and move around parts, line them up, separate them on to their own layers and move the whole layers around, or whatever else you want. I went ahead and made two more faces for now.  

If you're grabbing images from elsewhere, for now all you really need to do is to try and make sure they're a 1:1 Aspect Ratio ( a square, 150x150, 500x500, 1000x1000, whatever) and, if you can at this point, try and make them uniform in size. Images that aren't 1:1 tend to get stretched by Sigrogana to fit the space they're in, and making them the same size makes them easier to work with when we make the .dmi file.

Crop Shop

Looking at our images here, they're certainly uniform in size with each other, but at that aspect ratio, they're gonna get squashed in game. and become 
 
It doesn't look great, so let's go ahead and fix that.

Conveniently, GIMP and most other image editors have a function to lock the aspect ratio of a cropped selection. 
We can just go ahead and set that to 1:1, drag to our selection, and now we have a perfectly even portrait.

Rise and Resize

You found an image that would just fit perfectly with your character, but it doesn't fit the same size as everything else! The solution to this one is really quick and easy.

Paint 3D is shockingly good at this, but any image editor should have the ability to resize the canvas with the image. Lock your Aspect Ratio, and go ahead and type in the size your other images are to scale it. Be aware that up-scaling causes a loss in image quality. In this case, I went ahead and reduced this image from 74x74 down to 62x62 to match the other portraits I'd edited.

Transparencies

Oh no! Our portrait has an unsightly background! Let's learn how to remove that. In most programs, you'll need to first Add an Alpha Channel. This allows an image to have invisibility rather than filling in all blank space. Bear in mind that MSPaint and a lot of very basic image editors are not capable of this, and I highly suggest you save things as .png for this. The .png format can handle transparencies well, and doesn't bloat the file size when you use them.

In GIMP, you'll need to Right Click your Layer, and select Add Alpha Channel. Now that we can make things invisible, we need to make sure we're only erasing the backgrounds. You can either zoom in and just be really careful, or you could spare your sanity and use the Fuzzy Select Tool (the little magic wand). Select the background areas around your character, and it will display an outline of the areas it's protecting from other tools, more or less. Now, go in with the Eraser tool and go ham. You may still need to go in by hand and clean things up closer to the outlines.

At this point, you should have a handful of portraits at the same size, an aspect ratio of 1:1, and perhaps with transparencies! Looks like you're ready to make a .dmi!

What in the world is a .dmi?

A .dmi is a Dream Maker Image file; the Byond client uses it to parse images and sets of images, and transfer them quickly and easily using very little bandwidth. For our purposes, however, it's the thing we jam our faces into to make video game man talk funny.

To make and edit these files, you'll need to use Dreammaker.exe. This is included in the desktop installation of Byond already, so you most likely already have it.

How to Make Your .dmi

Upon starting Dreammaker, you're gonna want to open or make a New Enviroment from File > New Enviroment. The environment is more or less a visual workspace for Byond, and we're going to be using very little of it for our purposes. You don't need to make a new environment every time you need to make or edit anything, you can just reopen and keep working in the existing one.

Next, select File > New... > Type: Icon File (.dmi) and give it a name. Assuming you have all your images at the same size, you're going to want to tick that Use size from file box in the top right corner. At this point, your screen should look like this.


Next, select Graphic Import... from the top bar, and select the portraits you want. Whichever one is first in the list becomes your default portrait, and the rest can be swapped to in-game. Rename your portraits to whatever you want them called in game menus by right clicking it and selecting Edit State. The easiest way to rearrange these states is to simply cut and paste, I've found. Once you've arranged everything to your liking, save the .dmi, and you're good to go!


Once logged in to Sigrogana, click the circular portrait at the top left of your stats screen, select your new .dmi, and roleplay your heart out. Or just make a silly face. I don't care.

Help! My Files are Too Powerful!

Sigrogana Legend 2 has an upload limit of just under 256 KB, so you're going to need to make sure your file fits in under that. There's a lot of ways to do that, each with some drawbacks of their own.

Jpgification:
Arguably the easiest way to reduce the file size is just to convert any other file type into the almighty .jpg format. This format does not support transparencies, and generally doesn't look as pretty as the other image formats, but it gets the job done.
If you simply rename an image from .png to .jpg on most modern computers, the metadata will often still read as a .png, will keep transparencies, and won't reduce file size. Instead, open up your portrait in an image editor, Save As or Export As into a .jpg. GIMP allows you to control the exact quality you export at, allowing you to reduce the quality further for an even smaller file. I don't recommend going below 85 or 90 on quality.

COMPRESSION:
By scaling images down to a smaller canvas, you can reduce file size at the cost of detail and visual clarity.
Scaling an image down, then scaling it back to the original size can reduce the file size, but it impacts the image quality severely.

The Scale Tool or Resize Tool will be all you need here. Simply reduce the canvas size, or reduce and then enlarge. This has one of the highest reductions in size for most images, but it can destroy the quality, especially when enlarging.

Color Quantization (Palette Reduction):
The more colors that are involved in a image, the larger the file size gets to support the proper palette that has all of the colors needed. using this, we can reduce file size at the cost of vibrancy.

(In order: Unedited, Dither, Posterize, Desaturate)
Dither, Posterize, and De-saturate are all capable of this. In Gimp, these are all located under the Colors header towards the bottom of the list. Posterize directly reduces the number of colors used my merging similar colors together. Dithering attempts to reduce colors by scattering like colors within gradients to make something appear to have a more gradual color transition than it does. Meanwhile De-saturation removes colors entirely and replaces it with gradually more faded colors until reaching black and white.

Animated Face States

It's possible to create a portrait that is animated, so it can blink, dance, or side-eye your fellow party members. Bear in mind these portraits will not function in chat bubbles. They will display on your status menus and in the party status at the top of your screen.

First off, let's take a look at the pictures we'll be using. I'm not an artist by any means, so I threw together some quick faces with the sprite sheet from earlier. I have three frames here: One for the standing state, one of the eyes closing, and another of the eyes closed for a blink.


Next, we're going back to the.dmi file where we want to add in our new animated sprite. For ease of processing each frame, I'm going to be throwing each frame into the .dmi via Graphics -> Import.

From here, we're going to want to Right Click the first frame and select Edit Pixels/Movie. You should end up on this screen.

This is Byond's built in editor for sprites and and animation. I highly recommend you don't use this editor to make changes to your images, but it's an option. We're mostly going to be working with the animation timeline on the bottom. There's a few things we want to do here, but first, let's get our other frames in here. Clicking ahead of our frame on the timeline will duplicate it to the next frame, or you can click the up and down arrows to the left of the timeline to increase or decrease the number of frames. We can also back out of the editor with the "<- Back" on the right. By backing out of this editor, we can copy and paste our frames from the earlier menu into added frames in here. You can rearrange any frames here by dragging while holding shift.

If we were to leave this animation as is, this character would be blinking like they're walking through a sandstorm. It's way too fast, and we've got some other adjustments to make while we're here. By ticking the Rewind tickbox under the framecount on the left, the game will interpret these frames as 1-2-3-2-1 instead of 1-2-3-1. In other words, it plays back the frames backwards from the end, instead of going directly back to the first frame. While you can manually arrange your frames as 1-2-3-2-1, it can make the animation a bit larger, and space is at a premium with that 256 KB limit looming overhead.

Next, let's fix the speed on that. We have two things we can do about this. First, there's the Frame Delay. If you double click the Frame Delay button near your animation frames to bring up a menu to adjust the amount of time between each frame. For example, the above example has a .1 second delay, and the below is the same with a .4 delay.

We probably don't want the character to be constantly blinking, so next we're going to add some spare frames between. If Byond has a way to add a different delay for each frame of an animation here, I don't know of it so we're gonna be using a bit of jank to get this done. By duplicating the initial standing frame, we can have the character "rest" on this frame for however long we need them to. Each frame you add applies one extra tick of that Frame Delay between each blink, and will add two of those ticks if you have Rewind ticked.

This with a frame delay of 2 (.2 seconds) results in the following:

For whatever reason, the game will sometimes not respect the frame delay and animations will be much faster because of this. In these cases, continue with the makeshift solution of doubling or tripling your frames of each unique frame of animation to achieve the same result, just a little less efficiently.
Once you're done, back out of the editor, and save your .dmi, upload it into the game, and you're done!

[adamkad1]

Can someone for divines sake add all the possible 'special' face icon names? Y'know like 'pet' which makes it allways apply to pet talk and stuff?