Spinda's Spots

-determined by "personality" (aka PID, MAP) value.
-coordinates are 4 bits (a nibble) for each axis.

P =Personality value
C =Coordinates
S =Which Spot

           <------------
P: 0 x N N  N N  N N  N N
       | |  | |  | |  | |
C:     y x  y x  y x  y x
        \/   \/   \/   \/
S:      BL   BR   TL   TR


Example is given in little-endian 32bits.
Spots were identified from Spinda's perspective.
So to an observer, Spinda's left would be their right.

There are four spots (not including the spot on the back of Spinda's head). Each spot has its own origin relative to the Spinda sprite. There is a variation here on the positioning, because of the differences between the GBA and the NDS sprites. In the NDS (Generation IV), Spinda's sprite was redesigned.

GBA Spinda
GBA
NDS Spinda
DS

Personally, I think the new sprite lacks enough shading, making it appear flat and plain. I believe the designers were trying to make Spinda's body more proportional to its head. The most significant change is that the ears are smaller.

The shape of the spots from the NDS versions are different from the GBA versions. Because of the smaller ears, the spots for the ears are significantly smaller.

Shape

Here is a comparison of Spinda's spot shapes from the GBA and from the NDS, magnified 500%. Notice the smaller ear spots and the larger fourth spot.

GBA Spinda Spots
GBA Spot 1
Spot 1
GBA Spot 2
Spot 2
GBA Spot 3
Spot 3
GBA Spot 4
Spot 4
DS Spinda Spots
NDS Spot 1
Spot 1
NDS Spot 2
Spot 2
NDS Spot 3
Spot 3
NDS Spot 4
Spot 4

Spot 1 is Spinda's top-right spot. Spot 2 is top-left. Spot 3 is bottom-right. Spot 4 is bottom-left. If looking at Spinda's sprite, reverse these directions for your left and right.

Placement

Each spot has a different starting offset from the Spinda sprite. From this point, the spot can travel up to 15 pixels right and down, depending on the coordinates obtained from the personality value (first nibble is X, second nibble is Y, etc). The offsets from the GBA versions and the NDS versions are as follows:

 GBA 

Right Ear: (0,0)
Left Ear: (24,1)
Right Face: (6,18)
Left Face: (18,19)

-Sprite's origin: 8px left and 8px up from right ear.

 NDS 

Right Ear: (0,0)
Left Ear: (24,2)
Right Face: (3,18)
Left Face: (15,18)

-Sprite's origin: 7px left and 7px up from right ear.

Why are these the offsets? Well, there is actually a pattern to those. If the personality value is 0x00000000, nothing is really apparent. However, if the personality value is equal to 0x88888888, it all makes sense.

GBA Spinda Neutral
GBA 0x88888888
NDS Spinda Neutral
DS 0x88888888

In the GBA versions, the spots will line up perfectly with the ears and the eyes. The shapes of the ear spots match the top edges of the ears, while the face spots cover the swirly eye pattern.

The NDS versions exhibit the same behavior, just not as perfectly. The ear spots fit within the ear outline (rather than around it), with one pixel on each of them extending into the outline. The right eye spot does cover the right eye neatly, but the left eye spot extends past the edges of the left eye.

The image below shows the spots of the NDS Spinda in their starting (0x00), middle (0x88), and ending (0xFF) positions. The colored outlines depict the boundaries of each spot. Even though the two lower spots can travel down to Y:41 [decimal] and Y:42, the spots are cut off at Y:40 (showing X:19-X:24).

NDS Spinda Spots Outline

0x00000000
0x88888888
0xFFFFFFFF

Method

Spots don't cover up the sprite outlines or color outside them when they are applied. So, how do the spots stay within the lines? For the GBA versions, apparently the spots are applied to Spinda's face by looking at color values of pixels in the head part of the sprite ((0,0)-(51,41)). Three colors on the palette are used. This explains the following behavior I noticed.

GBA Spinda Anomaly

There's a pixel in the bottom-right corner of Spinda's face that does not get replaced by a spot (because the pixel is shaded darker). However, there is a pixel in Spinda's neck that does get replaced by a spot. That pixel is of one of the three colors.

So, a pixel of one of these three colors gets replaced with the corresponding spot shade when a spot is above it. Anyways, this logic made sense at the time.

In the NDS versions, Spinda has two colors instead of three that are used. It appears to me that these versions mask by shape, rather.

For my web application, the method I employed to have shaded spots involved making two images of Spinda's face: one completely void of spots, and another one shaded in the color of the spots.

GBA Spinda Clean
GBA Spinda All-Spot

To create the spots, I did the following. First, I placed the spot-free image beneath the all-spot image. Then, I masked off the all-spot image to leave the spot shapes, or rather, just let parts of the all-spot image "shine" through while making the rest transparent.

Layered Spinda

This could be accomplished by dynamically creating a two-tone alpha channel to use on the all-spot image. However, to obtain the usage I intended for the web app, this would not do. Instead, I pinned the all-spot image as a background (origin (0,0)) to four complex-shaped containers. Where the containers were over the sprite, the all-spot image shone through. The rest of the parts where the containers were not over, the all-spot image was not visible, and the spot-free image beneath it is seen. This method essentially allowed me to "fake" an alpha channel.

However, for browser agents that did not properly support fixing a background image, I had to do one more thing so that they would not be left out. First off, I set a default background color for the spot containers rather than no color. Then I created an additional image to place over that. The image consisted of the white background and the solid lines, while having the spot applicable portion transparent. Thus the image, when applied, would cover up the overflowing spot colors. At least this way, those browser agents would at least show flat unshaded spots rather than none at all.

42428223
GatorShark