Easy way to test a tiled and animated background sprite
Saturday, August 30, 2014I'm working in my game, it's going be awesome. Ok, so while working in it, I need a fast way to test my animated background sprites. I use Aseprite for drawing - it's great, and if you use Ubuntu, you can sudo apt-get install aseprite. Go to the website for more info on other OS: http://www.aseprite.org/
Let's try an example:
Aseprite can export your sprite sheet to gif easily:
file->import sprite sheet
Choose your file, and set width and height to the sprite size (mine is 32 x 32 pixels)
Now in frame->play animation you can see your animation is working!
Now in file->save as... select .gif and we have a beautiful animated gif.
Ok, problem is it's difficult to have an idea if the water will turn out ok because we haven't seem it animated AND tiled. So how can we do this? I was thinking about it and decided to code an easy solution to the viewing problem! Let's make and html!
Ok, so this is a very simple html for testing sprite. Let's break it down:
background-image is where the filename of your image goes.
background-size is the size. I'm using it to double the scale of my gif, because my game will use double pixel scale.
image-rendering lines and -ms-interpolation are forcing use nearest-neighbor for aliasing option - like no anti-aliasing.
I couldn't find a way to embedded the example above in this blog post, if you know how to do the Xzibit way and put a html page inside a html page, please tell me.
And change the width height to one of your choice, and then reopen Aseprite. It's not the best solution, but it's easy and works! There are other solutions in the web, Google is your friend.
Let's try an example:
save this water sprite! I made it myself! :D (that's why it's ugly..)
Aseprite can export your sprite sheet to gif easily:
file->import sprite sheet
Choose your file, and set width and height to the sprite size (mine is 32 x 32 pixels)
Now in frame->play animation you can see your animation is working!
Now in file->save as... select .gif and we have a beautiful animated gif.
This is the gif!
Ok, problem is it's difficult to have an idea if the water will turn out ok because we haven't seem it animated AND tiled. So how can we do this? I was thinking about it and decided to code an easy solution to the viewing problem! Let's make and html!
<html>
<head>
<title>Animated Background Tile Tester</title>
<style TYPE="text/css">
<!-- body {
background-image: url("animateWater1.gif");
background-size: 64px 64px;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
} -->
</style>
</head>
<body></body>
</html>
Ok, so this is a very simple html for testing sprite. Let's break it down:
background-image is where the filename of your image goes.
background-size is the size. I'm using it to double the scale of my gif, because my game will use double pixel scale.
image-rendering lines and -ms-interpolation are forcing use nearest-neighbor for aliasing option - like no anti-aliasing.
I couldn't find a way to embedded the example above in this blog post, if you know how to do the Xzibit way and put a html page inside a html page, please tell me.
Nearest-neighbor doesn't work
Ok, I've only tested in Firefox 31.0. I know this example doesn't work in Chrome. I'm using because I had to disable caching - I use SSD and there is a lot of people on the web saying that caching is bad for it. Don't know if it's true, but with no cache it's better for web development.I can't resize Aseprite on Ubuntu!!!
Yeah, unfortunately this is true for the Aseprite in the repository. But there is one way out. Close it. In your home folder, find the .asepriterc file and open it. Find the lines that look like this: ...
[GfxMode]
Maximized = no
Width = 1800
Height = 960
...
And change the width height to one of your choice, and then reopen Aseprite. It's not the best solution, but it's easy and works! There are other solutions in the web, Google is your friend.