![]() ![]() First, the animation is very irregular, in fact it doesn’t animate at all unless you move the mouse or something. You’ll notice two problems at this stage. So with each second that passes, the sprite will be extracted from the image at x=0, then x=32, then x=64, then x=96, back to x=0, and so on. Instead of using an x value of zero, as we did before, we’re passing in the sprite value (between 0 and 3, based on the current time) multiplied by 32 (the width of a single sprite). Using the modulus operator ensures that the sprite number wraps around, so it is never greater than 3 (remember that counting is always zero-based, so our sprites are numbered 0 to 3).įinally, we replace our srcrect declaration by the following: We then divide the seconds by the number of sprites in our spritesheet, in this case 4. We can then simply divide by 1000 to convert milliseconds to seconds: Thanks to this, we can use the current time when calculating which sprite to use. SDL_GetTicks() gives us the number of milliseconds that passed since the program started. At the beginning of the while loop, add the following: Now, let’s work on actually animating this. Okay, so like this we are just rendering the first sprite to a part of the window. Let’s run the program again and see what it looks like: Note that the syntax we’re using to initialise our SDL_Rects is just shorthand to set all of the x, y, w (width) and h (height) members all at once. SDL_RenderCopy(renderer, texture, &srcrect, &dstrect) …and then update our SDL_RenderCopy() call as follows: So let’s add the following at the beginning of the while loop: ![]() Both of these are pretty easy to solve if you remember SDL_RenderCopy()‘s last two parameters: a source rectangle (to draw only a portion of the image) and a destination rectangle (to draw the image only to a portion of the screen). Secondly, we only want to draw one sprite at a time. First, we don’t want our image to take up the whole window, as it’s doing above. So at this point, there are two issues we want to address. Press Ctrl+Shift+B to build the project, and then copy SDL2.dll, all the SDL_image DLLs, and the spritesheet into the Debug folder where the executable is generated. Now we get an early peek at what the output is going to look like. Just add the following two lines before the while loop: If we now try to draw the above on the default black background, we’re not going to see anything, are we? Fortunately, it’s easy to change the background colour, and we’ve done it before in “ Handling Keyboard and Mouse Events in SDL2“. Here’s the same image, without borders and with transparency: Now, those ugly borders in the image above are just for demonstration purposes. If we can rapidly render each image in quick succession, just like a cartoon, then we have an animation! □ ![]() It consists of 4 sub-images (called sprites or frames), each 32 pixels wide. This image is 128 pixels wide and 64 pixels high. SDL_RenderCopy(renderer, texture, NULL, NULL) SDL_Texture * texture = SDL_CreateTextureFromSurface(renderer, image) SDL_Surface * image = IMG_Load("spritesheet.png") SDL_Renderer * renderer = SDL_CreateRenderer(window, -1, 0) SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, 640, 480, 0) SDL_Window * window = SDL_CreateWindow("SDL2 Sprite Sheets", Our project setup for this article is just the same as in “ Loading Images in SDL2 with SDL_image“, and in fact our starting code is adapted from that article: In this article, we’re going to take this to the next level, using a very simple technique to animate our images and make them feel more alive. Many of the previous SDL2 tutorials have involved working with images. The source code is available at the Gigi Labs BitBucket repository. This is an updated version of “ SDL2: Animations with Sprite Sheets“, originally posted on 30th March 2014 at Programmer’s Ranch. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |