Tool HTML Dynamic Avatar Drawer

[OrangePeel]

Hi, I made a tool to programatically draw characters. It's only suitable for a JavaScript environment (HTML or node) and renders to canvas.
The repository is on

You must be registered to see the links

. It's completely open source and even though this community seems to like 3D renders, some of you might be interested.
Particularly if:

• Your characters have transformable physical attributes (building muscle, getting fat from overeating, ...)
• You're more of a programmer than an artist (or not rich enough to afford one?)
• You like the art style and existing assets

This tool is mostly meant for game developers, but you can always play around with the

You must be registered to see the links

DAD is licensed as LGPL which means you can use it even in commercial products, but you'll have to make any asset you create for it freely available (and have a link to the original library).

There are guides for incorporating the library into your game, extending its character system for your game (RPG?), and creating content for it

You must be registered to see the links

Some samples:
(new bondage content update)


(

You must be registered to see the links

trivia game showcasing smooth transformation animation)

 

[shinmix]

Pretty decent tool. Nice work.

 

[HoleInOne]

Patterns are missing and its making the whole thing freeze. also, you can't scroll down on the clothing manu so if you have a small screen there is no way to get to the underwear part.

 

[OrangePeel]

Patterns are missing and its making the whole thing freeze. also, you can't scroll down on the clothing manu so if you have a small screen there is no way to get to the underwear part.

Do you know which patterns you're not able to load? You should get a pop-up like below, but you might have to open up developer console (right click > inspect, or F12).
Unfortunately some of the predefined patterns use external links (like the one above). I'll have to upload them myself to imgur or something.

Thanks for pointing out the issue with the clothing menu scrolling. I fixed it along with scrolling for other menus. You should now get a scrollbar when it exceeds your page height.

 

[HoleInOne]

Damn you are fast
Can you explain the tattoo menu a bit better? Can't seem to figure out how to add tattoos other than on the arm. Can't find which layer goes with which body part.

 

[OrangePeel]

Damn you are fast
Can you explain the tattoo menu a bit better? Can't seem to figure out how to add tattoos other than on the arm. Can't find which layer goes with which body part.

This has an explanation for all the tattoo creation parameters near the bottom:

You must be registered to see the links

I'm considering doing the mapping from location -> layer myself since there's only 1 option for each body part... (most of them are FRONT btw)
The drawpoint option selects the relative location of the tattoo. You can see all the drawpoints on the body by clicking the Drawpoint button at the top of the menu, then clicking near each drawpoint to see their name. For example, try the combination of (more visible after stripping all clothing)

below shows how to find the drawpoint locations

 

[CopiousTwists]

I'm a big fan of this tool! I think DAD fills a pretty interesting niche for 2D HTML games. However, I'm having a bit of trouble getting started, and I was hoping someone could point me in the right direction.

1) How do I create variations on body parts? For example, if I want a different penis shape with PenisHuman and PenisHeadHuman as a starting point, which files do I need to modify? Is it just Dimensions.ts and Penis.ts?

2) Can I import my own raster assets as body parts? I very quickly mocked up an example of what I mean by this. (e.g. choosing not to render faces, and instead placing a .png in the corresponding area like a paper doll)

3) For dimensions with secondary properties, such as muscle lines in UpperMuscle and LowerMuscle, can I adjust these? I've looked over Dimensions.ts and Chest.ts, but I don't see where these are specified in code.

Also, bug report: The tester/playground seems to only allow you to remove one body part.

Thanks to OrangePeel for all the hard work developing this tool! I'm hoping to get started on a project using DAD very soon, so any guidance would be greatly appreciated!

 

[OrangePeel]

Hey, thanks for your interest; I'm happy to help.

1) I'd recommend you define it as a separate file like swole_penis.ts in the same folder, and import it in the index.ts file so it gets packaged. (optional) You would then modify dimensions.ts and/or mods.ts to add descriptions for any new dimensions you need for drawing the part. (optional) You can additionally have it replace the normal penis part by modifying default_parts.ts, but this could make merging your changes back to the main branch difficult. Without it, in your custom character creation method (which I assume you'll have), you just have to always call newPlayer.attachPart(new SwolePenis(...)).
You can check out

You must be registered to see the links

code for their implementation of a replacement breast part.

2) Importing rasters is currently supported via Items (an API created a long time ago, so may be due for an overhaul), instead of as a body part. I think there can be an argument made for allowing any renderable Part to have an optional raster override; do you need to have it as a body part? Below is a really old GIF guide for creating items.

3) Those are used in the Part drawing code, such as chest.ts. Depending on what you want to achieve, there are different ways of "changing" them. If you want all characters to have lower or higher values of these, you can modify the newPlayer.baseDim['upperMuscle'] value after creating the PC. If you want to modify them upon equipping something, you can change it via a Mods attribute when constructing the object (in the tester you can get it via Clothing > Wear Clothing > [select prototype] > Body Modifiers > [select modifying dimension/mod and the value to modify by, which has to be non-zero for it to show up in the code generator]

I'm not able to replicate the bug; which parts are you trying to remove? Some of the parts are currently unsupported for removal like head or torso haha. Try removing hands, arms, feet, and legs.

 

[The Sexy Chinaman]

I can't seem to get this to work with Twine. When I download the file and import it, I get this

You must be registered to see the links

error and the game looks like

You must be registered to see the links

.

I'm not sure exactly what I'm doing wrong - any help with this?

 

[OrangePeel]

I can't seem to get this to work with Twine. When I download the file and import it, I get this

You must be registered to see the links

error and the game looks like

You must be registered to see the links

.

I'm not sure exactly what I'm doing wrong - any help with this?

Seems like you have an incompatible version of SugarCube. Have you tried different browsers?
The version in the demo is 2.30.0. You can open up developer tools and query for SugarCube's version. I haven't tested with any newer versions.