relative offset addressing in coolRunnings

Allow sprites to be created by giving a list of URLs and padding (spacing)
between component images and around all the images. 

For now, all sprites will be 1-d horizontal stacking. 
Soon, we'll add 1-d vertical stacking. 
Someday, we'll have 2-d stacking.

I'm still working on this; and thoughts on the output format, in
particular, would be very useful.

New input terms:

1. "eachPadding":{a,b,c,d}
2. "allPadding":{A,B,C,D}
3. per-image padding, specified like this: 
{images:[{"url":"http://foo", "padding":{a,b,c,d}}]}

Ex 0. For review, this is coolRunnings absolute-coordinate input.

service.php?format=image&absolute=
{"canvas":
    {"name":"ghosts-a-plenty",
     "height":75,
     "width": 222, 
     "background-color":"none",
     "comments":"comments"},
     "images":[
        {"url":"http://www.namcogames.com/iphone_games/images/blinky.png",
        "top":10,
        "left":10},
        {"url":"http://www.namcogames.com/iphone_games/images/pinky.png",
        "top":10,
        "left":63},
        {"url":"http://www.namcogames.com/iphone_games/images/inky.png",
        "top":10,
        "left":116},
        {"url":"http://www.namcogames.com/iphone_games/images/sue.png",
        "top":10,
        "left":169}]}

Ex 1. Basic usage.

The first image listed goes on the left, and they are stacked in order,
left to right. No spacing is provided between the component images or the
edges of the sprite, and the top of the sprite is at the top of the tallest
component image.

service.php?format=image&relative=
{"canvas":
    {"name":"ghosts-a-plenty",
     "background-color":"none",
     "direction":"horizontal", 
     "comments":"comments"},
"images":[
        {"url":"http://www.namcogames.com/iphone_games/images/blinky.png"},
        {"url":"http://www.namcogames.com/iphone_games/images/pinky.png"},
        {"url":"http://www.namcogames.com/iphone_games/images/inky.png"},
        {"url":"http://www.namcogames.com/iphone_games/images/sue.png"}]}

Example 2. Usage of "eachPadding".

Same sprite, but we put padding around *each* component image: 5px top, 6px
right, 7px bottom, 8px left (specified in the same order as CSS padding)

{"canvas":
    {"name":"ghosts-a-plenty",
     "background-color":"none",
     "direction":"horizontal",
     "eachPadding":{5,6,7,8}, 
     "comments":"comments"},
"images":[
        {"url":"http://www.namcogames.com/iphone_games/images/blinky.png"},
        {"url":"http://www.namcogames.com/iphone_games/images/pinky.png"},
        {"url":"http://www.namcogames.com/iphone_games/images/inky.png"},
        {"url":"http://www.namcogames.com/iphone_games/images/sue.png"}]}

Ex 3. Usage of "allPadding". 

No padding between images, but padding around *all* of them (i.e. distance
from tallest to top edge, baseline to bottom edge, leftmost to left edge,
rightmost to right edge) is 5px top, 6px right, 7px bottom, and 8px left.

{"canvas":
    {"name":"ghosts-a-plenty",
     "background-color":"none",
     "direction":"horizontal",
     "allPadding":{5,6,7,8}, 
     "comments":"comments"},
"images":[
        {"url":"http://www.namcogames.com/iphone_games/images/blinky.png"},
        {"url":"http://www.namcogames.com/iphone_games/images/pinky.png"},
        {"url":"http://www.namcogames.com/iphone_games/images/inky.png"},
        {"url":"http://www.namcogames.com/iphone_games/images/sue.png"}]}

Ex 4. Putting padding around just one component image.

To put padding around just one image, specify it inside the image object
literal. Here, we put 5px top, 6px right, 7px bottom, and 8px left around
the third component.

{"canvas":
    {"name":"ghosts-a-plenty",
     "background-color":"none",
     "direction":"horizontal",
     "comments":"comments"},
"images":[
        {"url":"http://www.namcogames.com/iphone_games/images/blinky.png"},
        {"url":"http://www.namcogames.com/iphone_games/images/pinky.png"},
        {"url":"http://www.namcogames.com/iphone_games/images/inky.png",
         "padding":{5,6,7,8}},
        {"url":"http://www.namcogames.com/iphone_games/images/sue.png"}]}

Ex 5. A more realistic example, putting it all together.

Use "allPadding" to put 10px padding around everything.
Use "eachPadding" to specify default of 5px right padding for each.
But override this default for the rightmost image, clearing its right padding.

{"canvas":
    {"name":"ghosts-a-plenty",
     "background-color":"none",
     "direction":"horizontal",
     "allPadding":{10,10,10,10}, 
     "eachPadding":{0,5,0,0},
     "comments":"comments"},
"images":[
        {"url":"http://www.namcogames.com/iphone_games/images/blinky.png"},
        {"url":"http://www.namcogames.com/iphone_games/images/pinky.png"},
        {"url":"http://www.namcogames.com/iphone_games/images/inky.png"},
        {"url":"http://www.namcogames.com/iphone_games/images/sue.png",
         "padding":{0,0,0,0}}]}

About the output:
  - measure image coordinates from bottom-left?
  - specify width/height + top-left, or all four coords?
  - not totally sure what would be easiest. Thoughts?

Ex 0. Current response from absolute-coordinate call

var coolRunnings = {
 "url":"http:\/\/path\/to\/image.png",
 "inputSize":1209,
 "outputSize":948,
 "spriteHeight":75,
 "spriteWidth":222}

Ex 1. One possibility: verbose response from relative-coordinate call. 

We give source URL, top, left, bottom, right coordinates for each image. 
Distances are measured from bottom-left of the sprite.

var coolRunnings = {
 "url":"http:\/\/path\/to\/image.png",
 "inputSize":1209,
 "outputSize":948,
 "spriteHeight":75,
 "spriteWidth":222,
 "images":
  [{"url":"http://www.namcogames.com/iphone_games/images/blinky.png",
    "top":50,
    "right":50,
    "bottom":10,
    "left":10},
   {"url":"http://www.namcogames.com/iphone_games/images/pinky.png",
    "top":40,
    "right":100,
    "bottom":10,
    "left":60}]
}

Ex 2. Another possibility: succinct response, giving offsets in top, right,
bottom, left order.

var coolRunnings = {
 "url":"http:\/\/path\/to\/image.png",
 "inputSize":1209,
 "outputSize":948,
 "spriteHeight":75,
 "spriteWidth":222,
 "images":
  [{"url":"http://www.namcogames.com/iphone_games/images/blinky.png",
    "offsets":{50,50,10,10},
   {"url":"http://www.namcogames.com/iphone_games/images/pinky.png",
    "offsets":{40,100,10,60}]
}
Original issue reported on code.google.com by jaredhir...@yahoo.com on 25 Oct 2009 at 12:02
Dyhzy / spriteme

relative offset addressing in coolRunnings #73
