Saturday 29 March 2014

Composite images: Superhero


This is a "proof of concent"; there is no game, just the character creation steps for creating your own superhero. In one step you get to choose your outfit, and then see an image of it.

Try it out

It has a limited number of images that it puts on top of each other to give the final effect (so six images of capes for guys, six for girls, etc.).

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 trivial:

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.


1 comment:

  1. When's you next post coming? So far they've been a great help to me. I'm looking at using the SugarCube version which seems to be very good. I just need to find the time!

    ReplyDelete