Adventures of an Entrepreneur
  • Creating a Mobile Apps/Games Company

What are Imagesheet and Sprites?

4/24/2014

1 Comment

 
If you are starting in game development, you may find yourself lost in some terms that you never heard before. In this post I will talk about 2 of them: Imagesheet and Sprites.

Imagesheet

Imagesheet is simply an image file that has several independent images inside. Here is an example:
Picture
Source: Corona Blog (Dinamically Optimized Sprite Sheets post - 10/09/12) - Link #2
As you can see, inside of 1 image file there are several independent image files. In this case, all independent images are of a boy, but it could be any other image (like bird, lamp, boy, ... everything together in 1 file).

Why would I use an Imagesheet?

There are mainly 3 reasons.

The first reason is performance. Loading an image is an operation that access a file, so it degrades performance. One way of dealing with the performance issue is pre-loading all images when your app/game starts. You could do that by loading each image file, but imagine doing that for 50+ image files? It is much easier if all these images are inside of just 1 image file, so you do only 1 image loading. 

The second reason is optimizing file size. Having several images inside of just 1 image file allows a better use of image compression, resulting in smaller file size.

The third reason is to create animation. If you noticed, the images inside of the imagesheet above are frames of the boy walking. If you go thru these images within a certain speed, you will see the boy waking. That kind of animation using an imagesheet is what we call sprites (we talk about sprites just below).


How do I access an image inside the imagesheet?

That depends on the coding language that you are using. But the main principle is always the same: you pass the imagesheet file and some extra information about the position of the image that you want.

Sprites

As mentioned above, we usually refer to sprites as set of images that together create an animation. Each image that is part of the total animation is called frame and when we pass thru the frames at a certain speed you see an animation.

Below is the animation of the boy walking. It was done using the imagesheet above using the first two images of the 3rd row, at the speed of 2 frames per second. 
Picture

Create Imagesheets/sprites

You can create a imagesheet manually by putting all your images together in the same file, but doing that way is time-consuming and you will not benefit from compression improvements.

So, there are a lot of tools that you can use to create a imagesheet, These tools makes you life easier and you just need to pass the image files and it creates the imagesheet for you. One software that I like and use is the TexturePacker. It is very simple to use and it also allows you to create imagesheets directly from swf files.

Imagesheets/Sprites on Corona SDK

If you are using Corona SDK to create your app/game and want to learn more about the code specifics, just read the links below:

[1] http://coronalabs.com/blog/2013/05/14/sprites-and-image-sheets-for-beginners/
[2] http://coronalabs.com/blog/2012/10/09/dynamically-optimized-sprite-sheets/


That is it for today. 
1 Comment
Esther Hampton link
4/5/2021 08:08:53 am

Hi thanks for sharing this

Reply



Leave a Reply.

    Author

    This blog it not updated anymore.  

    Archives

    February 2015
    June 2014
    May 2014
    April 2014
    March 2014
    January 2014
    December 2013
    November 2013
    October 2013
    September 2013
    August 2013
    July 2013
    May 2013
    April 2013
    March 2013
    February 2013
    January 2013
    December 2012
    November 2012
    October 2012
    September 2012
    August 2012
    July 2012

    Categories

    All
    Data
    Event
    Fun
    Games
    Key Success Factors
    Management
    Marketing
    Mobile
    Monetization
    Movies
    Startup
    Statistics
    Technical
    Tutorial
    Videos

Powered by Create your own unique website with customizable templates.