Experimenting with landscape environment set-ups with Blender

bullet time final

sneak peek at the results

So, Tea & Toast is now ready enough to be shown and I will link a High res version to my Blog here a bit later. It has been fun to produce and was a good starting point for my Character animation development in Blender, this is the 3D animation software I use to produce my models and animations it is totally free and available on all major Operating systems you can get it from www.blender.org. I had an idea to produce a very short film about a bored man making some tea and toast. I started by setting up a good file system so I could store and easily find all the items I wanted. Then I started adapting a base 3d model to create my main character. altering hight, head and body details and the textures that would be applied  to him. Then I started creating the Kitchen set that the action would take place in. Because I didn’t have time to model absolutely everything, I used Blend swap search for some items like the sofa, teapot and pot plant to help speed up the creation. The hard bit was setting up for animation. The Character I was using was already rigged with animation controls, but I still had to all the work. Picking out the key points of the action I set poses for my character in these positions. I didn’t worry about timing at this stage, just the key poses. after these where in place I posed the in between stages, this is known as blocking and at this stage I looked at the spacing and timing of the key frames I was setting. As you can see from the screen captures you can rapidly get a LOT of keyframes, and this can be daunting and scary! But after a lot of patience and perseverance the blocking of the animation was done. allowing me to concentrate on the look of the film. I moved into the compositor of Blender using it’s powerful tools to adjust the way the frames of the animation would look. In the compositor you can look at the colour, lighting and special visual effects of the animation output. again this looks complicated but it is just a case of setting your starting point and end point of your image and adding all the adjustments on the way. if your familiar with Photoshop layers this is a similar process, you just attach extra compositing nodes (the linked boxes you see in the screen shot) and these act like layer effects to your final image. Then after some test renders, well a lot of them in fact lol, I moved back to the animation and refined the motion. then I worked on collecting sound clips that could match the action and music to set the mood. After rendering out all the action shots they were edited with the sound. All that remained after that was to design and opening and ending credit scene. These where added to the video sound edit and all elements where critiqued and amended to the best possible within the time. Whew! 

Tea & Toast, A near final edit :) When I have put some final tweaks to the video I will post a final on Vimeo and link here.

OK, I have managed to get near final edit of my “Tea & Toast” animated short done. This has been a huge learning curve…. and I still have a way to go yet before I feel comfortable animating characters. I still see loads of flaws in the Characters movements but as you can see in the screen shots there is a HUGE amount of individually posed keyframes just this this short clip and there is only one character and a couple of moving props. This has been an enjoyable piece to work on and I will be looking forward to getting more inspiration to start my next short. :)

simurai: Sprite sheet animation with steps(). If you don’t wanna use gifs on your site and rather PNGs for better colors, but still be able to animate them, here an option: CSS keyframe animations have a property called animation-timing-function and one of the options is to use the steps() feature like in this example: div { animation: play 1s steps(10) infinite; } @keyframes play { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } } The difference to the other easing options is that instead of continuously moving from 0px to -500px, it jumps in steps with pauses in between. This is perfect for animations using a sprite sheet. In the above example it’s steps of 50px with a pause of 100ms (10 steps in total). Here a little demo. As you saw, you can change the speed how fast the animation should play, which is pretty cool, the only problem is that it always starts from the beginning and makes it look jumpy. I also tried to animate the animation-duration by using inherit from a parent element, but unfortunately that is not supported. So I guess if you wanna have a more dynamic speed (animating the animation), you still need to use JS for that. ps. Here an example found in the wild: The logo of Impending.
View Separately

simurai:

Sprite sheet animation with steps().

If you don’t wanna use gifs on your site and rather PNGs for better colors, but still be able to animate them, here an option:

CSS keyframe animations have a property called animation-timing-function and one of the options is to use the steps() feature like in this example:

div {
    animation: play 1s steps(10) infinite;
}
@keyframes play { 
      0% { background-position:    0px 0; } 
    100% { background-position: -500px 0; }
}

The difference to the other easing options is that instead of continuously moving from 0px to -500px, it jumps in steps with pauses in between. This is perfect for animations using a sprite sheet. In the above example it’s steps of 50px with a pause of 100ms (10 steps in total).

Here a little demo.

As you saw, you can change the speed how fast the animation should play, which is pretty cool, the only problem is that it always starts from the beginning and makes it look jumpy. I also tried to animate the animation-duration by using inherit from a parent element, but unfortunately that is not supported. So I guess if you wanna have a more dynamic speed (animating the animation), you still need to use JS for that.

ps. Here an example found in the wild: The logo of Impending.