Changing your sprites

1-3-2018
Welcome to my first post of the New Year.

This is not a lesson in art. I’m a terrible artist and you should not take any art advise from me. That being said, having all the logic in the world is not going to make a good game. You need to have a character that your players will enjoy playing and enemies you are going to want to avoid.

We already know that our game is going to be about a bubble and we also know that our enemies are going to want to pop our little bubble.

So, our first order of business is trying to make a bubble.

So, let’s browse to our /gfx folder and find our file sprites.png. Back a backup copy of it first, so that you have something to fall back on.

There are many graphics / image processing programs out there, for this I am going to use GIMP. If you don’t already have GIMP, then download it.

Install GIMP, and load your sprites.png file

First, let me point out a few things.

The light and dark gray, is a transparent background, also know as the Alpha layer.

Sprites are in Black and White, with a transparent background.

Sprites are 16×16 pixels.

There are 8 sprites available for your character.

There are 6 sprites available for your enemy.

I’m going to modify our player sprites to look like the following.

If you notice, all of the player sprites are really the exact same, just rotated a little bit. The first 2 are duplicates, the next 2 are rotated 180 degrees. The next 2 are rotated 90 degrees from the first and the last two are 180 degrees from the 3rd pair. For now, that is what we are going to stick with. We can tweak them a little later on.

For now, let’s save the file in GIMP.

File – Save As – sprites.xcf (which is the native GIMP file format.

Now, lets save in a format that can be used by your compiler.

File – Export As – Select File type as extension – Scroll down and find PNG file format – Name as Sprites.PNG
You will be shown an options windows for your PNG.

Set your compression level to 0, and uncheck all of the other options.

And Export the image.

Compile and test.

Ok, now we have our basics. Let’s do some tweaking on our graphics.

If you look at our sprite sheet again, you will see that on the player graphics, each pair are duplicated, that is an animation pair. Each animation pair will be slightly different from one another. This helps the animation from not being so jerky.

The only difference is the part in the middle of the bubble, it’s been rotated 180 degrees.

Now repeat for the rest of the player sprites.

And here’s what I came up with….

Could they be better, yes of course, especially the enemy sprites, but it’s what we will go with for now. It might be for the best if we can get someone more artistic involved, but it’s certainly good enough for in place graphics.

That’s it for now. Now we have some different sprites for our game, and we have set up for animation, now all we have to do is program the Animation, that will have to wait for another day.

Advertisements

Author: andydansby

I'm a hobbyist coder working with the ZX Spectrum. Living in New York state near the Syracuse area. I grew up in Virgina. The first computer my parents bought for me was a Timex Sinclair 2068.

One thought on “Changing your sprites”

  1. Hi Andrew
    There are also 8 sprites for enemies, not 6. The last 2 ones are unused but the image has size enough for 2 more. Really you have 16 sprites in total, you can decide which of them use for enemies and for character.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s