Animation Iterations

We’re updating the homepage in an effort to get something accomplished this week. Just kidding – really we’re starting an email database and the homepage needs to streamline viewer subscription. While the hood was popped, I went ahead and upgraded a handful of other assets. After spending an inordinate amount of time on animating a header graphic, I thought it might be cool to share the iterations. Take a look..

Here’s my static header image.

static homepageThe goal is to make an animated gif in which the sun rays rotated. It’s a pretty big graphic so file size is definitely an issue. However, for the first pass, we just want to get a benchmark. Enter “header-1.gif”

header-1.gif

robot and city 1Okay not too bad. Length is one second and the timing is 24 FPS. Loop timing is off though — you can see a little “tick” when it restarts the loop. File size is 567 KB which is WAY too big. Let’s see what happens when we cut the frame rate down.

header-2.gif

robot and city 2Whoa. Feels like watching Wheel of Fortune. In this version, the frame rate is 24 FPS but there’s only 4 frames. Let’s see what happens when we match make the frame rate AND the frame count equal (both at 4).

header-3.gif

robot and city 3Love it now that I’m looking at it (several hours later). But in the moment, it looked way to choppy.

header-4.gif

robot and city 4Seems too fast to me when I look at it now. At the moment of creation, though, this looked great compared to my first few iterations. At that point I was happy with the sun rays and decided to add some motion to the robot.

header-5.gif

robot and city 5

Overboard. Added several changes at once: back and forth movement to the robot, blinking eyes and motion blur. Since we’re still just dealing with 4 frames of animation, a small motion blur effect was added to every other frame to add the shaking effect. I wanted it to seem like the ground was shaking as the robot walked. Fun to see this but it needs to be dialed back.

header-6.gif

robot and city 6

Took out one of the blurred frames. Now the ground only shakes for every other rock/footstep he takes. Also dabbled with the eye blink. Still too much.

header-7.gif

robot and city 7Reduced the frame rate a bit to slow down the animation. It’s better but still not where it needs to be. I ran it by Steve and he suggested the stomping might be too much for the homepage. We want people to feel relaxed, happy and engaged.

header-8.gif

robot and city 8

Went back to the smooth higher FPS look. Steve said we can make the file size work using technology of which I’m un-aware. Who knew. It’s nice to have a programmer as a partner. Eyes are kawaii.

header-9.gif

robot and city 9Here’s the final… for now. After writing this, I can see about 5 more things to change/add but it’ll have to wait. On to the next thing!

Raster VS. Vector Graphics

vector raster castle artWe’re in early alpha right now and the art style has yet to be finalized. I love the loose explorational aspect of this phase of visualization and decided to use my two favorite programs (Adobe Illustrator and Adobe Photoshop) to flesh out a little castle drawing from a previous post. Results (right) can be technically classified as Vector and Raster based renderings. Why do I qualify their descriptions with the term based? Well, here’s where it can get a little confusing. Let me explain.

What’s Raster, Precious?

A raster – or bitmap – image is made up of individual pixels built on a dot matrix (a.k.a. a grid).  For example, a 100 pixel by 100 pixel image has 10,000 individual squares (pixels). The file format stores a color value for each specific square. When zoomed in, it’s easy to distinguish the individual squares. We all refer to this “look” as pixelated. When zoomed out, the pixels all blend together to form the shapes, tones and values that make up a picture. Usually, our brain doesn’t notice any of these details and just says, “Hey! That’s my friend Bryan”. Additionally, when it comes to creating game art, raster-based programs traditionally lend themselves more to textures and detail.
Common Raster Formats: JPEG, GIF, PNG, BMP

What’s a Vector, Victor?

A vector image, on the other hand, is described in terms of a mathematical equation. In the case of our 100 by 100 graphic, the computer DOESN’T store individual pixel values. Instead, it renders the shape according to the equation. This is often visually displayed during creation as a path with nodes. The math talk is confusing, but beyond saying it’s a “mathematical equation” there is minimal math use involved for the artist. The main benefit is that, inside a vector-friendly program, the size of the image can be scaled infinitely without loss of quality (i.e. blurry pixelation). Also, file size is significantly smaller. One caveat, vector graphics programs (like Inkscape and Illustrator) are used mostly for the initial creation of images/graphics. For final implementation, in most 2D applications, they have to be exported to raster. For example, in my day job as a graphic designer, I often design logos in Illustrator as vectors. However, when I’m finished and need to provide something for the client to use in print and on the web, I give them JPEGs, PNGs, etc. They also get a vector (master) version but usually the only time it gets used is for professional print jobs.
Common Vector Formats: EPS, PDF, AI, SVG

2 blue circlesA Little Note of Caution

So what’s confusing? Vector and Raster are technical terms that describe a file’s format, BUT because of the nature of the vector process and popular trends, it’s easy to start using that term to describe a graphical style instead of the format. Look at these two blue circles. One is vector rendered and the other raster. Can you tell the difference? Doubt it. Our two terms can’t accurately be used to describe them stylistically even though their construction was based on their respective processes. This is not the case for the castle renderings. The smooth lines and flat color shapes of the castle on the right stylistically look digitally created.. in a word, well, vectorized. But technically, I could’ve made both of these castle images in either a bitmap or vector program. It’s a minor detail but important to understand before starting image creation. You don’t want to spend a ton of time creating art that can’t be re-scaled. For example, I whipped up the castle on the left in photoshop for fun. When I finished, I really liked it but because I didn’t plan ahead, I can’t scale this image without losing detail. A best practice in this case would be to always work on a large canvas.

That’s all for now. Much more could be said (and has been). There are so many articles on this topic. A quick google for “Raster VS. Vector” popped back this, this and this. There are hundreds more.

Good luck. By the way, which castle style above do you prefer?