I can’t really draw that well, and I’ve been working on a Twine choose-your-own-adventure game about Fluffies. I decided that I wanted to be able to show the Fluffies my game was generating, and drew them using some simple shapes with HTML and CSS (basically making shapes with web objects, arranging them, etc).
This was my first attempt:
Below, I was trying to make a mane by rounding some of the corners.
And found out about making shapes more spiky:
But once I got it going, the cool part is that I can dynamically replace the colors of the Fluffy based on the stats rolls I’m making in games. The idea is that I’m going to be generating a bunch of Fluffies at once (depending on what the player does, they’ll get more possibilities for different Fluffies). I set up a “Roll Test” on the first page of the game, and this is what it looks like (with all stats).
I’ll be adding wings and horn soon, so that different race rolls trigger changes to the sprite. I’m also just realizing as I type this that I could have a “Happiness” stat that dynamically changes its mouth from happy to frowny, if I wanted (since it’s just a div that’s a half-circle).
If you’d like the CSS and HTML to mess around yourself, you can check this out; change the colors in the “CSS” pane from “red” and “black” to change the color. “Peru” is the default color I’m using for the snout/belly; you can find a list of CSS color names here or use hex codes.
