Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Superhero character creator
I have been playing around with making a character creator for a superhero game. I start a of games and finish very few (not just in Twine) so I thought I would showcase what I have so far. the basic gimmick is that you get to design your costume. If anyone is interested, I will post the code.
https://googledrive.com/host/0B1XEumn1hhFKVVVHMlphMjQ1cWM/superhero.html
https://googledrive.com/host/0B1XEumn1hhFKVVVHMlphMjQ1cWM/superhero.html
Comments
You going to make a combat system or anything? Like, for fighting crime? Or, maybe a simulator-type game like Tiny Weird Future Farm or Hero Contest?
You're like me in that you start a lot of these projects and never finish them. Gah.
Please do drop some code in here, having a look at code is always educational for some.
I also liked how you did the sentences with the player being able to click on a word or phrase to cycle through different words or phrases. What would be cool (although maybe not many would be interested in it?) is being able to play through a game and then save a transcript of it with all the chosen phrases in place and choices made in the game, so the transcript reads like one long story. If its a short game then players can share their play through via the transcript if it has enough diversity to warrant having a transcript.
It uses CSS to superimpose the images. Each image goes into its own <div>, which has an absolute position set. Sounds complicated, but the CSS code is just this:
div.abs-box {
position: absolute;
top: 200px;
right: 0px;
}
The basic Twine code looks like this - just a normal img tag inside a <div>, with the class set to correspond to the CSS already set. You can have as many of these on the page as you like; they will all get draw on top of each other.
<div class="abs-box">[img[m_red_cape]]</div>
However, what I did was set up a macro to handle it.
macros.pic = {
handler: function(place, macroName, params, parser) {
var s = '';
if (sex) {
if (cape != "") {
s+= '<div class="abs-box">[img[f_' + cape + '_cape]]</div>';
}
s+= '<div class="abs-box">[img[f_' + suit + '_suit]]</div>';
s+= '<div class="abs-box">[img[f_' + swimsuit + '_swimsuit]]</div>';
s+= '<div class="abs-box">[img[f_' + belt + '_belt]]</div>';
s+= '<div class="abs-box">[img[f_' + col + ']]</div>';
} else {
if (state.active.variables.cape != "") {
s+= '<div class="abs-box">[img[m_' + cape + '_cape]]</div>';
}
s+= '<div class="abs-box">[img[m_' + suit + '_suit]]</div>';
s+= '<div class="abs-box">[img[m_' + underwear + '_uw]]</div>';
s+= '<div class="abs-box">[img[m_' + belt + '_belt]]</div>';
s+= '<div class="abs-box">[img[m_' + col + ']]</div>';
}
new Wikifier(place, s);
},
};
It looks complicated, but all it is doing is building up a string, s, with a series of those img tags, then adding the string to the passage.
Then you need the images. I used PNG format, as it supports transparency, and edited it with GIMP. I started with two images, one for a guy, one for a girl. For each, I changed the cape colour using the colourise feature, saving each colour, then I erased the cape, and did the bodysuit, and so on.
This is fun! One of the cycling animals is just a comma, btw. Also when I entered my name I thought that would be my superhero name, so a white kid named Mister Literature ended up becoming Aardvarkman. Not that there's anything wrong with that. Just saying.
-Crissa