Friday, April 25, 2014

Goblin Horde: Sprite Sheet

So another game I am working on is called Goblin Horde. This project is just to build a prototype. I wanted to see if I could build a simple game from scratch, unfortunately, due to some stuff with another programmer who is no longer on the team(for other reasons), and to keep things simplified, we ended up using the sample game here as a base for the logic. However we've redone the assets, slowly (still working on that) and I've been rewriting the programming every now and then to suit our needs. This brings up it's own issues, because if I had written the program I would know how it works, and I would know (more or less) how making a change to one part of the programming, would effect other parts of the programming. Anyways, what I want to talk about is making this sprite sheet:
Goblin Spritesheet

 This sprite sheet is for the main character of goblin horde. Btw, let me explain real quick what goblin horde is all about. Goblin horde is 2D platformer where you play as a group of goblins, and every level you raid a different fantasy race's town. In the first level, it is simply humans. The trick is that you play as a single goblin, and since you are a horde of goblins you have 50 lives. Every time you die, a new goblin pops on screen. At first this is just useful for when you die against an enemy, but later on it becomes tricky, as you come up to traps and puzzles, that require loosing goblin lives in order to proceed onward. You also get a lot of use out of trial and error attempts, the idea being that: 1, you have plenty of lives, and 2, death is fun in this game. That's the crux of the game, now back to this sprite sheet.

Here's an animation that I had to add:

A goblin swinging his sword

This is a simple animation of the attack action. Done by my artist friend, not me. Adding this animation into the sprite sheet isn't an easy task for a few reasons. Mainly, the communication between me and my artist was not very clear and so I had thought that we agreed to the dimensions of the character. However, when my artist sent me this it was on a 500 x 400px image. What we agreed on, I don't remember, but I do remember that it was a multiple of 30 for both dimensions(for programming reasons), and that it was around (30-60) x (30-90)px. But when my artist sent me this I endeavored to make it work.

So, to get this image to fit, I have to take every frame from the different images that my artist later resent me so that it had a clear background, and I added them to the same image in GIMP (Which is open-source photoshop) in different layers. I then looked at all the layers and determined the farthest left, right, top, and bottom points across all the frames. Those points then became the borders of the image. Then I found out the length and height that those borders would make the image, and I rounded those lengths and heights up to a multiple of 30 (I needed to for the way this game model works as far as I could tell.) After that I cropped the image to be those dimensions, popped up the sprite sheet, changed the grid to match the dimensions of this animation, and set up an offset for the grid so that the animation frames would land in the right spot, and slapped them on the image. (I had to redo it when I found out that the attack animation, with the way the original programmer set it up, were double the size of other images. I ended up making some new variables anyways, so that I could mod the dimensions of any animation in the spritesheet in case a weird situation happens again and I need to change the size of an animation.) So that was a pain, it also took me about an hour to and hour and a half to also make sure his feet lined up with the other animations on the sprite sheet + testing) Now take a look at this next animation, it is the jumping animation.
This Image created a few problems. See if you can figure out a few of them.

Here are the issues with this animation and how I tackled them:
1 - Since the goblin is jumping and literally moving up and down in this animation it increases the height of the dimensions needed to play this image by a lot, something I didn't want to deal with.
Solution - I ended up moving the goblin down so that his feet were on the same level on every frame. This works, because the game itself moves the image up and down when the player jumps, so the animation itself does not need to have the goblin actually lifting up into the air.

2 - This animation shows the goblin both "jumping" and "landing". This means that the goblin needs to jump and land at a precise timing.
Solution - one thing you have to realize is that the timing is not going to be precise, because the time it takes for the goblin to jump up and down on level ground is not the same time it takes for the goblin to jump up and off a cliff and then land on the ground below. So, to fix this, I had to do two things: The first thing I had to do was divide the animation up into two different animations. One animation is for "jumping" (which ends when the goblin reaches the peak of his jump) the other animation is for "falling" (which is the rest of the animation). After setting up these images, I got that added bonus that if the goblin simply walks off of a cliff, it will still play the falling animation without doing the jumping animation, which would look weird. The second thing I had to do, was I had to add a new functionality to the animation class. This is because, with the way the class was setup, there was no way to have an animation play once and then stop on the last frame. As it was setup, animations for attacking would simply be swapped out for another animation as soon as the animation was finished. Here's the code with my alterations.


SetFrames(BufferedImage[] frames) is the old function and setFrames(BufferedImage[] frames, boolean playonce) is the function I added. All I really did here was take the code for the first function and put it in the latter function. Then I added the line "this.playOnce = playonce;" which is read later on in the animation function to tell whether the image is supposed to play more than once or not. Lastly, I went back to the former function and I had it simply pass "frames" to the latter function as well as giving "false" for the boolean playonce. This was an important step, because the program, as it stood, made several calls to the function setFrames(BufferedImage[] frames) and I did not want to have to find all those call just to add in a boolean. By doing it this way I was able to make the boolean playonce have a default value of false if the code did not specify and that's how it worked normally.

3 - The image shows the goblin preparing to jump, but the program will have the goblin lift up into the air immediately. This might look weird as the goblin crouches down to prepare for a jump but simultaneously, he lifts off the ground and into the air
Solution - this was probably the easiest problem to fix as I simply sped up the animation so that by the time he lifts off the ground, the crouching part of the animation is finished and so it looks "organic enough" to get away with.

4 - The very last part of the animation has the goblin hit the ground and crouch to "settle" as his body absorbs the force of his weight. Then he moves back into a standing position. This is pretty hard to see from the animation above, as that animation is playing too fast. The problem is that this part of the animation got grouped into the "falling" animation and so the goblin now crouches and stands up in as he is falling in the air.
Solution - okay this is actually something I still need to fix. This essentially requires me to make a new animation "action" called "landing". This action occurs when the goblin hits the ground and all that happens, is the goblin plays this animation. I have yet to do this because I know that it requires me to create a new "action" and I hadn't added new actions or deleted any of the actions that were already present. ("falling" was an action already present).

Phew. Overall it has taken me about 4~5 hours, to implement all the animations currently available (coding and testing included), and I still need to add another attack animation, and I need to get a walking animation from my artist at some point. Suffice to say it has been a learning experience to work on this sprite sheet. :3

P.S. I also am about to sign onto a new project for the summer. This project is supposedly going to pay. yes! And I think it might even be money they are paying! No more of those stupid peanuts! Don't want to talk too much about it, but I'll say it's a kids game about saving endangered animals, and the scope is relatively small so I think it will be pretty reachable. I'll talk more about it as it develops. Btw, I'll be working with another reddit user, and if you didn't know this, I only eat free-ranged meat and I love cute things, so this game seems to be right up my ally, plus.... money!?
- Thanks for reading, leave some comments below.

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home