Is it (or would it be) possible to create sliding door style sprites

[pietschy]

Hi there,

I was just checking out your tutorials and was I'm just wondering if it would be possible to create sliding door style sprites?

BTW I also had a brief look around for polygon algorithms and found http://mlab.uiah.fi/~kkallio/antialiasing/, not sure if it's useful or not.

Thanks & cheers Andrew

[StanAngeloff]

Andrew,

Thank you for sending through the anti-aliasing tutorial. I've looked at it before, still trying to wrap my head around it.

You can create sliding doors sprites using magick-crop and magick-compose. Here is how that might work (comments in code):

@import 'compass';

// Pre-defined variables to control button styles
$button_width:  320px;
$button_height:  24px;
$button_padding: 20px;

// Create the basic button shape and store it in a variable for re-use
$button_image: magick-canvas($button_width, $button_height,
  magick-fill(maroon)
  magick-fill(magick-linear-gradient(
    red      0%,
    maroon 100%
  ))
  magick-corners(5)
  magick-border(maroon, 5, 1)
);

// Create the sliding doors sprite for the button
//                                      Need a canvas twice as wide as the original
$button_sprite: magick-sprite('button', magick-canvas($button_width * 2, $button_height,
  // Top-left: compose the button shape without the last 20px
  magick-compose(
    magick-canvas($button_image, magick-crop(0, 0, -20, 100%)),
    0%, 0
  )
  // Top-right: compose the rest of the button shape (last 20px)
  magick-compose(
    magick-canvas($button_image, magick-crop(-20, 0, 100%, 100%)),
    100%, 0
  )
  // Gap of $button_width in between the two layers
));

// The anchor itself, plain-old sliding doors technique
a {
  background: transparent $button_sprite no-repeat 100% 0;
  display: inline-block;
  padding-right: $button_padding;
  color: #fff;
}

a span {
  background: transparent $button_sprite no-repeat 0 0;
  display: inline-block;
  line-height: $button_height;
  padding-left: $button_padding;
}

I hope this helps. If any part of the code is unclear, let me know and I'd be happy to go through it further.

[pietschy]

Excellent, thanks for that.

Cheers Andrew