Night of the Piñata Week 9

Week 9, one week left until final week. Time moves fast when having fun, or just drowning in work. This is the last mandatory blog post I need to make about this project. There are a possibility that this will indeed be the last, but I might write a post about the finished game just to show how our efforts paid off.

One of my final tasks on this project was to animate the parade that is going to be in the game. To make the children and the adults correlate to each other we decided that the one that drew the children also should draw the adults. Though, the children was animated frame by frame in photoshop, and we simply didn’t have time to make an animation that way. So, it was decided Matilda, who drew the children, drew the adults and I animated them in flash.

Matilda drew all the parts independently, as I explained in an earlier blog that all parts for a bone animation must be able to move around without leaving empty spaces behind them. I then imported the parts into flash and made a bone skeleton to each adult in the parade. Then I started animating.

I discovered the challenge with animating multiple walk cycles in one animation is to make them all loop together. All the cycles need to be of equal length, otherwise the one with a shorter walk cycle will stop until the longer cycles end. So I needed to work in an equal length for all of them, but still make them seem rather differently so they don’t all move their feet at the same time. It is a flock of folks having fun, not military trained cadets.

Anyhow, the process moved on rather quick after I got a hang of it, and I managed to animate six people within just a few hours. A process which would have taken lots of hours if animated frame-by frame. It doesn’t become as alive as the animation of the children, but there is a give or take in this situation.

As the final week of our project is next week we are pretty much finished. Most of the art that is needed to the game is done, it is just some coding left to be worked on. This project has been highly demanding, and it almost surprise me how well we have done. See you in the future perhaps!

Night of the Piñata Week 8

Greetings once again! Yes, the name of our project game has been changed from “Day of the Piñata” as the original concept called it to “Night of the Piñata”. The reason was that the only level we are going to be able to finish for the game will be at night. It is logic like that!

This week, aside from putting together sprite sheets and text documents, I have been working on a confetti effect for our game. We decided, that confetti will be used to indicate special events and effects in our game. For example, when the score meter reach the point when a power up will spawn confetti will pop around it. As well as when the piñata shrink or grow. Even when the piñata shoot candy there will be a small confetti burst by its head. It will simply be there to give feed-back to the player.

I worked on the most general confetti burst, using flash once again. As I did before I animate high-resolute photoshop images in flash. For this I used motion tween which make is ridiculously fast to animate. But that do not mean its easy. My first try looked like this:



I was not happy with the result at all. I wanted a burst of confetti. It turned out to be something more of a tornado of confetti. The pieces swish around as if they were thrown by several different wind directions. The reason for this was that I curved every line they followed, and didn’t have a solid plan for their movement what so ever. So I decided to start again. This is how it turned.

It will be moving slightly faster in the game. This time I focused on the confetti pieces, thinking about where they should end up if they all start somewhat at the same point and then was forced away from each other all at once. They ought to move in a straight line from the same point, creating a circle around the center. This made the confetti much less messy, but I am afraid it got too uneasy and too coordinated. I am thinking about redo this effect, one more time. But as it seem now with our schedule I will leave it as it is for now. It is not of the highest priority as this time. That is why I will leave it at this stage.

Beta here we come!

Day of the Piñata Week 7

Day of the Piñata Week 7

Greetings once again! Week 7 of our 10 week project is soon to an end and I have started to see the light in the end of the tunnel. We can see the end of this project. This week I am going to explain my unnecessarily problematic procedure in creating sprite sheets.

I’ll use the medium piñata’s walkcycle.

The issue is that every frame is 1952x1306 pixels which are far too huge. The reason why they were animated in such a big size was that when animating with non-vector images in flash, you lose quality when you rotate them. I have an example below.

 

In the second picture notice how jagged in the edges the image gets. It is because when importing images to flash they get converted to bitmaps. Flash is primarily made to animate in vector graphics which can resize and rotate in any manner without losing pixels, which bitmaps can’t. Why I did not use vector graphics in flash was because we could not achieve our game’s somewhat painted look with flash’s tools.

Anyhow, to solve the information loss issue I simply covered it up. I animated huge images. Exported each frame as a PNG without resizing them. Imported them into the same file in Photoshop and there resized them to the accurate size. Viewing every frame at once I cut off left over space as well. (I did this when viewing all the animations for the medium Piñata in the same file to avoid frames being centered incorrectly in comparison to other animations.) By doing that the information loss in the images gets so small they can’t be noticed. Then that problem is solved!

Next issue was that they needed color correction. In the beginning we hadn’t completely decided on the hue of the colors in the game, and I needed to start animating right away. So I did that, deciding I could correct them later, and so I did.

After I exported all the resized frames out of photoshop I used “Glue it” to create them into a sprite sheet. Then I opened it in photoshop and simply put a cut out from our game’s background underneath and from there I adjusted the hue of the piñata until it fitted together with the background and other assets. What I did was to add a blue photo filter, and after that I opened color balance and added more yellow to the high lights. I repeated the exact same procedure for all the sprite sheets to make their colors identical.

Here you can see before (left) and after (right).

Left is far more saturated in the colors compared to the background, and they are too little blue. Right is more calm in the colors, sticking out less making it more part of the world it is placed in. It seem more to be in the same light as the background.

And there we have it. A slightly complicated ride, though necessary. I would have liked to show an animation of the finished sprite but I don’t possess that at this moment. How to make a sprite sheet into a gif that is. See you next week!