So the trick to do this is to incorporate transparency into our color space.
Here's an example.
So this is a little sprite.
This is kind of a picture of an asteroid.
And you can see it lies inside this rectangular image.
And the question that kind of is interesting to ask is what's the color
of this portion here of the image that's outside of the body of the asteroid?
Well, you might think it's white, I mean, it certainly looks white here.
Let's just do something really quick.
Let's grab this image.
See if I can grab it and move it over here.
And what do I see now?
Well, I still see the body of the asteroid here.
But notice inside this portion of the image outside the asteroid,
I see the text behind the image.
The image is on top.
I mean, the asteroid is clearly obscuring the text underneath.
But this portion of text right here, which is inside the rectangular image,
we don't see it.
We actually see the text.
So why do we see the text, it's because this portion of the image is transparent.
So we can augment this RGB model for
color by adding a fourth number, it's called alpha channel.
And this fourth number says, basically how transparent an object is.
So in this particular image, it's made of a collection of pixels, so
each pixel has an RGB color.
And additionally, it has an alpha value, and
that alpha value says how transparent a particular pixel is.
So inside the asteroid, alpha is 1, it says it's totally opaque.
Outside the asteroid, the alpha value 0,
it says that pixel value is totally transparent.
And you can actually do this inside CodeSkulptor.
There's an option for how to extend HTML color strings to transparency, its RGBA,
red intensity, green intensity, blue intensity, and
this is the alpha value here.
So this is red with half transparency.
So the artists that build the images for Spaceship and
RiceRocks actually built these inside Photoshop.
They drew the shapes, and then they went through and
set the background to be fully transparent.
You can use something like Photoshop, or
there is a free open source editor called GIMP, that is very similar to Photoshop.
There's a simpler one called Paint.NET.
You can use these and go through, for example, and edit the images we built, and
make your own images that again, have kind of a transparent background.
Kind of a popular choice of image format is PNG.
I recommend that, if you're going to go through and make your own images.
Okay, that's enough about transparency.
You don't really need to understand much except to notice we're going to use
transparency a lot in the images we're going to actually incorporate inside
Spaceship and RiceRocks.
Let's go on and work with this asteroid now,
see if we can kind of build a sprite based on this asteroid.