How do I make a character silhouette window?

There’s an abandoned game in the archives called Tainted Elysium, and it has a 2D character window that shows a sideview of your character at all times, and it dynamically adjusts as the character gains or loses weight. It’s the only game I’ve seen with such a thing, and I would love to know how it could be replicated (preferably without flash since it’s falling by the wayside).

I primarily use C#, so a method in that language would be great, but I’d be interested to hear about any tools and packages other languages might have to do it.

I know what a silhouette is

I’d love to know how @Atticus.Arc did that too as I wanted to make something similar. I don’t know if @kilif has access to the source or some way of contacting Atticus to see if he would share that part.

The basic principal, I suspect, is just drawing onto a graphical view, carefully scaling and adjusting the splines/vectors to fit the character size and shape - but there’s obviously a lot of work to design the art and code it so it works well. It may be that in Tainted Elysium the character is drawn as polygons, and then a transformation is used to create the outline from that - but pure speculation on my part.

I’ve seen dynamic character rendering done in a couple of other places: Free Cities does it to a degree (some things change stepwise, others are smoothly scaled, and the original assets are drawn in InkScape and the XML is then processed into JavaScript), as does Queen of the Seas which uses Dynamic Avatar Drawer a Javascript library that you can find on TfGameSite. Those may be good places to start, but no C# code that I have come across.

Sorry I don’t know a C based solution, however you should look at Processing. It’s a Java based language but it is designed to create programs that illustrate. You could make a silhouette out of bezier curves with the endpoints and curves controlled with variables. Then you just change the variable to make the curves bigger.

Here’s a link to the bezier curve reference page for processing https://processing.org/reference/bezier_.html
You can see code snipets and what it draws right next to the snipet.

1 Like

I’m pretty sure atticus used something like this

Interesting… looks like I may have to learn Java, haha