Dynamic character pictures

Posted by KaVir on Wed 02 Jun 2010 12:42 PM — 6 posts, 30,885 views.

KaVir Germany Wed 02 Jun 2010 12:42 PM #0

I know a few people display static character portraits in their plugins, but has anyone ever had a go at generating them on the fly?

I was originally thinking of creating a single static image for each form, as an aid for shapechangers. But then I thought I should probably differentiate between male and female characters, and that got me wondering whether different coloured dragons should also have different images, and after that my mind just kept wandering.

There are quite a few games and website applications that let you create your own avatar by selecting different facial features, hair and eye type/colour, worn clothing, etc. If the image fragments were downloaded in advance, the server would only need to indicate which ones needed to be drawn, and you'd be able to produce an image of your character - or even other characters if you wished.

The downside is that it could potentially require a lot of images, and I can imagine it being a pain to align them up properly. If the images were small, perhaps they could all be drawn directly over the top of each other to reduce the workload - although that would also increase the image sizes.

Can MUSHclient change the colours of a bmp file on the fly? Or would there literally need to be a different image for each colour of dragon, shirt, etc?

I'm sure I can't be the first person to consider doing this, but I couldn't find anything with a search. Is anyone else interested in this sort of thing?

David Haley USA Wed 02 Jun 2010 02:57 PM #1

Quote:
Can MUSHclient change the colours of a bmp file on the fly?

Why not? Can't you load the image data and instead of rendering the pixels, mess around with them before rendering them?

See, e.g., http://www.gammon.com.au/mushclient/mw_images.htm

There doesn't seem to be a way to get at an in-memory representation of the pixels, however you can draw to a window, and then (IIRC) get the pixel information from that window, and use that to draw to a new window, which you transform into an image.

(This could be made more convenient with MUSHclient-native support, but it should be doable now already.)

Nick Gammon Australia Forum Administrator Wed 02 Jun 2010 10:37 PM #2

Well this can be achieved fairly well. You need to muck around creating alpha masks, but that is no big deal. I have put together a demo illustrating the idea (screenshots in the next post).

You can reproduce this by simply right-clicking on the images on this page, saving them to disk, and then trying out the alias I made.

Basically I drew a 200 x 200 pixel avatar (this is probably much too big) in Photoshop, using three layers. Then each layer was saved separately to disk as the image itself, and a mask. The mask is white where you want to keep it, and black where you don't. The blur on the mask helps make a nice transition.

EDIT: Redrawn images by Isobel Gammon.

The images are (see below for what they look like):

face.png
coat.png
hair.png
face alpha.png
coat alpha.png
hair alpha.png

The first alias illustrates simply loading in the images in the right order, and copying them to the "test" miniwindow giving the results below (unmodified_avatar.png).

The function WindowMergeImageAlpha uses the mask image to control what parts of the image are copied.


<aliases>
  <alias
   match="mw"
   enabled="y"
   send_to="12"
   sequence="100"
  >
  <send>

dir = GetInfo (56) .. "Avatar\\\\"  -- where I put the images
win = "test"

WindowCreate (win, 
  0, -- left
  0, -- top
  200, -- width
  200, -- height
  6, -- mode
  0, -- flags
  ColourNameToRGB ("navajowhite"))

-- load images and masks

check (WindowLoadImage (win, "face", dir .. "face.png"))
check (WindowLoadImage (win, "face alpha", dir .. "face alpha.png"))

check (WindowLoadImage (win, "coat", dir .. "coat.png"))
check (WindowLoadImage (win, "coat alpha", dir .. "coat alpha.png"))

check (WindowLoadImage (win, "hair", dir .. "hair.png"))
check (WindowLoadImage (win, "hair alpha", dir .. "hair alpha.png"))

-- combine images to get avatar

WindowMergeImageAlpha (win, "coat", "coat alpha", 0, 0, 0, 0, 0, 1)
WindowMergeImageAlpha (win, "face", "face alpha", 0, 0, 0, 0, 0, 1)
WindowMergeImageAlpha (win, "hair", "hair alpha", 0, 0, 0, 0, 0, 1)

WindowShow (win, true)

</send>
  </alias>
</aliases>

The alias below modifies the colours of the hair and coat using a "scratch" window (which is never seen) to blend in a fixed colour with the avatar part. This part is where you would let the player choose their colour (eg. hair colour, coat colour). With a bit of experimenting with blend modes (of which there are many) you should be able to keep the original texture of your starting image, but modify the colour.

The results are below in modified_avatar.png.


<aliases>
  <alias
   match="mw2"
   enabled="y"
   send_to="12"
   sequence="100"
  >
  <send>

dir = GetInfo (56) .. "Avatar\\\\"   -- where I put the images
win = "test"
scratch = "scratch"

WindowCreate (win, 
  0, -- left
  0, -- top
  200, -- width
  200, -- height
  6, -- mode
  0, -- flags
  ColourNameToRGB ("navajowhite"))

-- create scratch window to make colour changes
WindowCreate ("scratch", 0, 0, 200, 200, 6, 0, 0)

-- load images and masks

check (WindowLoadImage (win, "face", dir .. "face.png"))
check (WindowLoadImage (win, "face alpha", dir .. "face alpha.png"))

check (WindowLoadImage (scratch, "coat", dir .. "coat.png"))
check (WindowLoadImage (win, "coat alpha", dir .. "coat alpha.png"))

check (WindowLoadImage (scratch, "hair", dir .. "hair.png"))
check (WindowLoadImage (win, "hair alpha", dir .. "hair alpha.png"))


-- fill with desired colour
WindowRectOp ("scratch", 2, 0, 0, 0, 0, ColourNameToRGB ("red"))

-- blend into image
WindowBlendImage(scratch, "hair", 0, 0, 0, 0, 63, 1)  -- colour mode
WindowImageFromWindow (win, "hair fixed", scratch)  -- turn into image

-- fill with desired colour
WindowRectOp (scratch, 2, 0, 0, 0, 0, ColourNameToRGB ("darkblue"))

-- blend into image
WindowBlendImage(scratch, "coat", 0, 0, 0, 0, 63, 1) -- colour mode
WindowImageFromWindow (win, "coat fixed", scratch)  -- turn into image

-- combine images to get avatar

WindowMergeImageAlpha (win, "coat fixed", "coat alpha", 0, 0, 0, 0, 0, 1)
WindowMergeImageAlpha (win, "face", "face alpha", 0, 0, 0, 0, 0, 1)
WindowMergeImageAlpha (win, "hair fixed", "hair alpha", 0, 0, 0, 0, 0, 1)

WindowShow (win, true)
</send>
  </alias>
</aliases>

EDIT: 3rd June - changed images to ones drawn by my young daughter, and modified code to fix bugs in the merging of the images with the colours.

Amended on Fri 04 Jun 2010 12:22 AM by Nick Gammon

Nick Gammon Australia Forum Administrator Wed 02 Jun 2010 10:39 PM #3

coat.png (22.2 Kb)

coat alpha.png (7.1 Kb)

face.png (25.5 Kb)

face alpha.png (10.4 Kb)

hair.png (8.6 Kb)

hair alpha.png (8.3 Kb)

unmodified_avatar.png (42.9 Kb)

modified_avatar.png (37.5 Kb)

Amended on Thu 03 Jun 2010 11:13 PM by Nick Gammon

Nick Gammon Australia Forum Administrator Fri 04 Jun 2010 12:08 AM #4

You can sharpen up the image by taking the results from earlier and shrinking then (in this case to 100 x 100) by using WindowImageFromWindow to turn the image from the previous step into another image, then drawing that into a smaller window. Results are like this:

KaVir Germany Fri 04 Jun 2010 09:19 AM #5

Thanks Nick, that's exactly the sort of thing I had in mind.

My drawing/painting skills are very poor, but I've been playing around with photographs and I think I could get a fairly passable 50x100 image (50 bits wide means it could overlay the bar I draw on the left side of the screen, otherwise it'll be hard finding a place to put it). I'm not sure how good the photograph would look if I started swapping around clothing, but I think it would at least work quite well with weapons. If I get something basic in place, it may inspire some of my more artistic players to take it a step further.

The image will need to be bigger than 50x100 if I want to include detail, particularly facial detail, but if I reach that point I think I'll turn the smaller image into a hotspot, and have it bring up a larger image in a new window. Perhaps combine it with a score sheet and inventory list as well, so that you can get a full run-down of your character with a single mouse click.