Continuing with my project on Bravura London's registration page, I wanted to talk a little about sprite sheets, and what I think I now know about them. Code-wise, this is something I struggled to wrap my head around. Coming from a gaming background, I think I have a pretty clear grasp of a sprite sheet's functionality and how they can be used.
A sprite sheet is essentially a composite of several different images, all combined into one single image. Within your code, you can specify which co-ordinates from the whole image are rendered. You may only wish to render a portion of the image. It's case dependant, but for performance, it can be quicker to only load in a single image and selectively display each of these sprites, as opposed to loading lots of smaller images.
The sprite sheets displayed on Bravura are the social media icons and the tiling background. As you can see from the social media icons, this image is a list of 11 different images all combined into one atlas. You wouldn't want to draw this whole image as it is because you may not have a social media page for all of these outlets, so you define which pixels are shown, making them individual entities. The trick here, to make it simpler for you to code, is to have all the images evenly spaced within the same height:width ratio. We're talking 22px by 22px for the icons in this instance, meaning if I want to call the third image in, I will need to step along 44px and render from that point onward.
Firstly, if we look at the HTML, I've made an unordered list containing 5 list items, one for each of the social media outlets we wish to link to. Notice how, even though I want to render images, there is no <img> tag here, that is strictly handled by the CSS in this instance. So, I've created 5 list items, each containing an <a> tag to link us to another website.
The CSS of the spritesheet will draw the image of the social media icons and we have to define which specific pixels the CSS should draw for each icon. There are 3 simple inputs for defining a spite:
left: 0px;
width: 22px;
background: url('http://') 0 0;
As we're rendering a 2D image, we draw along two axis; x-axis (left-right) and the y-axis (up-down). Meaning our first CSS input (left: 0px) depends on where we wish the sprite to start drawing from. If we're drawing the first image, we'll start from 0px, then jump along in increments for every subsequent sprite.
The next input (width: 22px;) defines how wide the image is, and where we wish to stop drawing from. In this instance, all sprites are 22px wide, so this value will remain the same. This is recommended, as it makes the mathematics a lot easier to work out.
Finally, we have (background: url('http://') 0 0;), this defines the image you wish to render, and its position for left and top.
This CSS needs to be set for each sprite you wish to render, in my case, I will have 5 blocks of code each synced to a different HTML class.
To read more about using sprite-sheets, use the W3Schools CSS Image Sprites. To view the full HTML and CSS from this project, see my previous post: Project 03, Part I: Fonts: Bravura London Registration Page.
left: 0px;
width: 22px;
background: url('http://') 0 0;
As we're rendering a 2D image, we draw along two axis; x-axis (left-right) and the y-axis (up-down). Meaning our first CSS input (left: 0px) depends on where we wish the sprite to start drawing from. If we're drawing the first image, we'll start from 0px, then jump along in increments for every subsequent sprite.
The next input (width: 22px;) defines how wide the image is, and where we wish to stop drawing from. In this instance, all sprites are 22px wide, so this value will remain the same. This is recommended, as it makes the mathematics a lot easier to work out.
Finally, we have (background: url('http://') 0 0;), this defines the image you wish to render, and its position for left and top.
This CSS needs to be set for each sprite you wish to render, in my case, I will have 5 blocks of code each synced to a different HTML class.
To read more about using sprite-sheets, use the W3Schools CSS Image Sprites. To view the full HTML and CSS from this project, see my previous post: Project 03, Part I: Fonts: Bravura London Registration Page.
