Unit 53 2D Animation Production

Week 1

Workshop: Introduction to Stop Frame Animation

Square Man

In this workshop the task was to create a stop frame animation using analog (not digital) means, which involved taking photos of about 50 small drawings.

The task in hand was very tedious because i had to draw lots of the same images by hand so it was extremely hard to keep those images consistant and similar. Also I didn’t have a camera I could use so I had to use the webcam on the computer to capture my work.

Photo on 15-09-2015 at 15.39 #3

If I was to repeat the task I would have scanned the images for better image quality and even lighting and scale on all of the frames. To make the task more enjoyable I would have probably completed it through digital means (using a graphics tablet) since I would be able to make use of handy features on Photoshop such as layers, scaling and duplicating. In addition Photoshop would make it easier to add colour to the frames without it taking up to much time and would remove the fear of messing up my work.

Attempt 2

Mouth-Man

This is my second attempt at making a gif using stop frame animation but this time I only used digital means (Photoshop) to create the animation. I feel this created a much smoother and polished outcome compared to the hand drawn gif because I was able to create a zooming effect far easier than I would be able to by hand. However I had slight problems with the quality of the image when scaling it up but it wasn’t too much of a problem. Overall I think I have improved a lot since my previous attempt and I will try to use this technique in the future.

Week 2

Workshop: Storyboarding and Animatics

magic-brush

Untitled-1

In this work shop we had to make a storyboard and then make that into an animatic from an old folk tale. In our case we decided to go for the folk tale “The Magic Paintbrush”. First of all we had to summarise the folk tale into key points and then we had to use those key points to make the storyboard, each point made one scene for the storyboard. Overall I think our storyboard went well although we were working in pairs so that resulted in our drawing styles being slightly different but we decided to go for a simple style (silhouettes for characters) so this wouldn’t be such a problem.

For our animatic, we put the scanned images into Photoshop and did some light editing to get them lined up correctly. This worked well and came out quite while. We also added an ending slide to show when the gif ends because the looping nature of a gif may have made it difficult to notice when the story ends and begins. If I was to make this again I would trace over the images in Photoshop to make the lines more defined and add colour to the gif.

magic-brush-updated

Here is the the updated version of the animatic. In this version I decided to sharpen up the visuals and make the lines cleaner. I managed this by drawing over the lines in Photoshop on my graphics tablet and I feel it looks far better than the original. This technique also compliments the silhouette style of the animatic. Overall I think this has improved the animatic significantly.

Week 3

Workshop: Walk Cycles

Basic-Walk

In this task we had to make a basic walk cycle using an example of walk cycles by Preston Blair. I decided to go for the basic walk however it was only a half loop of a walk cycle. I feel this turned out fairly well but I had a few problems with keeping the same size of the character which I feel would be fixed if i used digital means.

Cane-Walk

On this second cycle I decided to go fully digital and use Photoshop and my graphics tablet to create this animation. We had to do a different cycle to the first so I decided to make my character walk with a cane which was much harder than the first because there was more components to animate. I feel this one worked much better than the first because it was a full walk cycle that loops whereas the first one was just a half loop.

Diving Board

On the final task we had to use Flash to make an animation cycle. For this one I decided to do the animation of my character diving off a diving board. I was not so familiar with Flash to begin with so it took quite a bit of learning before I had the basics down. I feel this gif came out rather well and I feel I may use Flash in the future rather than Photoshop because it is much easier with the tween tool since in Photoshop you have to drawn each frame which is rather time consuming, however the Photoshop method produces a more hand drawn aesthetic.

Week 4

Workshop: Bouncing Ball

Motion Tween Ball Bounce

For this animation we had to create a ball bouncing across the screen using motion tween in Flash. This was a fairly simple task but it helped us understand the motion tween tool and how to create smooth animations using this technique. The result of this technique results in a more computer animated style of animation compared to stop frame animation however it is much easier to animate using motion tween compared to Photoshop.

Workshop: Facial Expressions

Facial-Expressions

For this workshop we had to take pictures of ourselves making different facial expressions and then animate them. I did this by using Photo Booth to capture my expressions and then I used Photoshop to draw over them and then animate them. For this first attempt I decided to just use each photo as each frame but for the next animation I will try to make the transitions between frames smoother and more fluid.

Facial-Expressions-Smooth

For this second attempt on facial animations I decided to make the frames smoothly move from one to another. To achieve this I drew multiple frames between the existing ones to morph the features to the next expression. I feel this came out quite well and I like that the features move around a lot due to the imperfections on my drawings.

Workshop: Lip Sync

For this task we had to practise lip syncing. I decided to use a well known YouTubers intro and animate it myself. Apart from a few issues with Flash exporting which resulted in some artifacting on the mouth of the animation, I feel the result was quite good although the process was very time consuming. I feel this will be very useful for the final brief.

Games Inspired by Art Movements

Minimalism

levels111

Mini Metro

German Impressionism

limbo-08

Limbo

Surrealism

screenshot4

Monument Valley

Drawing People in Motion

DSC00048

For this task we had to draw people in motion while on the way home. I couldn’t do this so I just got stills from a music video and drew them instead.

Research

Techniques and Developments of 2D Character Animation

Date: 13/10/15

This is an example of hand drawn animation using a flip book to animate the frames. As you flip through the flip book the pages give the effect that the animation is actually moving when in fact it is just lots of hand drawn frames. This technique gives a very raw finish and is very time consuming to draw each individual frame on paper since you don’t have digital aids to assist you. I don’t think I will be using this technique because it is far too time consuming and would be very difficult to use when building a level with lots of different components all moving individually. Hand drawn animation is better if you’re only animating a few things at a time but its not very good for very complex animations unless you want to invest a lot of time in the animation. For these reason I probably wont be using this technique.

Date: 13/10/15

This technique is stop frame/stop motion animation where to create the animation you have to take lots of photos or make lots of frames to construct the animation. This technique is fairly difficult to create a smooth animation but some people like that the animation has it’s imperfections. Although in this animation they used plasticine/clay to animate, stop frame animation can also be done via digital means to get the same stop frame effect. I have used Photoshop before to create stop frame animation and it was pretty successful although it does take quite a long time to get an animation to look good. I may consider using stop frame animation for my final animation but I will have to compare it to other animation techniques before deciding.

Date: 13/10/15

This technique is cut-out animation which is a type of stop-motion animation using flat characters, props and backgrounds made from paper or card. Each frame of the animation is usually captured by camera and then the pieces of paper are slightly moved and then another picture is taken to create the next frame and then this process is repeated to create the animation. This process can be very time consuming but the end product has a handmade aesthetic. I don’t think this type of animation will work for my brief because it will get far too complicated to animate on paper.

Date: 13/10/15

This technique is tweening animation which is made through digital means usually using a software like Flash. Tweening is the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image. This is very effective for creating smooth animations. It is also far more efficient and quicker to create animations that other methods because you don’t have to manually draw all the frames you just have to get the starting point and the ending point and then the software fills in the rest. I feel I will use this for my final animation because it will create a smooth animation and will fit well with the Minimalist movement.

Soundtracks and Sound Effects

Date: 13/10/15

This soundtrack from Fez is ambient music which would be good for a Minimalist style game. The music is very repetitive much like the art movement. The only draw back to this soundtrack or a soundtrack like this is that this music is designed for an 8-bit/pixel art game whereas mine won’t be like that.

Date: 14/10/15

This soundtrack is from the 2D platformer VVVVVV. This sound track uses a lot of repetition because it’s a game where you have to repeat sections of it lots of times from dying often. A soundtrack like this would be good for my game however the music has an 8-bit feel and I am maker a vector game so it might not match up.

Date: 14/10/15

A song like this would be ideal for my game because its ambient but it is also progressive. It would be great for a minimalist game because the beat is very simple and flowing.

Date: 14/10/15

A song like this would be good for my game because it is very slow and methodical. My game would be a puzzle platformer so a song like this would help capture the mood and atmosphere of the game.

Art Movement: Minimalism

harran-ii-1967

Frank Stella “Harran II” 1967 Source Date: 28/09/15

I have decided to go with Minimalism because I am fairly familiar with the concept and I feel it will work well in a 2D platformer. The picture above is an example of Minimalism and as you can see the main features of this piece are bold colours and simple shapes. I feel for my game animation I could make the character very basic and only made up from a couple of colours and no textures. As you can see in Stella’s work he has added a white outline. I am not sure whether to include an outline or not, the outline adds more contrast and definition between shapes but I feel it make the shapes or characters start to look a bit more like Pop Art if the outline is black. I will experiment with this later on in the development stages.

Judd_Untitled_Bernstein_80_52_19800

Donald Judd Source Date: 13/10/15

These piece shares similar properties with the first in that it has bold colours and simple shapes. This piece also uses repetition and alignment in the composition. These are other key features of Minimalism that I will have to consider when making this game animation, for example I could make sure the platforms in the level align with each other or there could be repetition used in the background or the soundtrack. This piece also shows that white space is incorporated in Minimalism too so I should also make an effort to include this in my final animation. This could be in the form of a blank background or a lot of empty areas in the level.

hedges-and-crabs-palm-beach-008

Dan Flavin Source Date: 13/10/15

Dan Flavin has used light and shadow in this piece while still keep it very minimal and in line with the Minimalist movement. For my game animation I may consider adding shadows and light into it but that may make the game look too complex and start moving away from the Minimalism movement.

Proposal

 

Project Proposal

 

BTEC Interactive Design

BTEC Level 3 BTEC 90 Credit Diploma in Art and Design ( Interactive Media)

 

Learner Name: Owen

Specialist Area: Interactive Design

Date:     14/10/15

Section 1

 

Working title: Above and Below

What you will work towards producing: (Detailed description of your proposal)

I will be producing a 2D animation of a game inspired by Minimalism.

Section 2

Influences, starting points and contextual references:

Minimalism

Early ideas research and sources:   (What are your sources for contextual and personal research?)

I have looked at a lot of different Minimalist artists such as Frank Stella and Donald Judd.

Section 3

Intended techniques, non digitial and digital processes:

I plan to sketch up the ideas on paper and then redraw them using either Illustrator or Flash and then animate them on Flash.

Timescales: (Please insert weekly targets of what you intend to work on from the beginning to the end of the project)

Week 1: Complete research and ideas generation

Week 2: Complete ideas development and start animating

Week 3: Draw all the characters

Week 4: Animate the characters and environment

Week 5: Add soundtrack and effects, produce outcome and evaluate.

Section 4

     Proposed methods of evaluation: (How will you evaluate your project?)

I will show the animation to fellow classmates and ask for criticism. I will also ask people on the Internet to critique my work. I will also critique my own work.

Ideas GenerationDSC00056

Here is my idea generation for my main character for my game simulation. In the next stage of development I will choose a few of these ideas to develop.

DSC00057

This is my ideas generation for game environments. I took a lot of inspiration from the artist Frank Stella who I researched.

Walk Cycle Idea Generation

Here are two walk cycles, a walking one and a running one. They are very basic because I have not yet chosen a final character this is just a skeleton displaying the basic movement.

DSC00059

Here is a mind map explaining the basic mechanics and story behind the game.

DSC00062

Here is a storyboard demonstrating some basic mechanics of the game.

Ideas Development

Character Colours

Here is an image of my experimenting with different possible colours I could use for the theme. I have decided I am going to go for the second red colour because I feel it has a good level of contrast but its not too bright which is good.

Character Development

Here is my character development. I feel I am going to go for a human shaped character rather than a geometric character but the character will have a floating head.

Here is a test showing basic walking of characters and it is also and experiment with different sizes of characters. I feel the character in the middle is the right size because he doesn’t take up too much space yet you can clearly still see the animations.

Here is the second version of the basic walking animations. This time I included the inverted version of the twin on the surface. In the actual animation the twins wont be moving at the same time but this animation is just for demonstration purposes. To improve this I need to make the animation smoother.

Here is the smoother version of the static walking animation.

I decided to improve the resolution of the animation from 640×360 to 1280×720. This has made the animation look a lot sharper on YouTube however the characters are now a lot smaller than they were in the lower resolution so I think I will use the largest character size because the others are too small now. The animation is also going to be in 30 frames per second so the final animation will look smooth and fluid.

I’ve added a basic walk to jump to idle animation.

I’ve now added the other twin mirroring the walk to jump to idle animation.

Possible Soundtracks

I feel this song would make a good soundtrack for my animation because it is upbeat and repetitive and I feel it would complement the style of my game. This music was also sourced from a royalty free site so I am free to use it.

This song would be good because it is very mysterious and puzzling which reflects my game quite well.

I feel this song would work well because it’s upbeat and ambient however the song is only 54 seconds long so it may have to be looped to fit the full animation.

Environment

DSC00070Here is an example environment for my game. The shaded areas show the areas that will be coloured black. The bottom half background will be red and the top half will be white.

DSC00072

Here are some example levels. I will take features from these ones for the final levels I will use in the animation.

Here is a environment test showing how the end orb will pulse and move. This will loop throughout the level.

Here is the design for the first level. There will be interactive elements that will be triggered by the buttons.

Here is the first and second level. I have decided to feature two levels in the animation because I feel it will be too short with just one level.

Storyboard/Animatic

Instead of making a storyboard I decided to make an animatic to show a basic version of the final animation because I feel this portrays the animation better than just a storyboard.

Here is the animatic with the sound effects. I created all of the sound effects myself using my voice and sounds of objects and then edited the sound using Audacity.

Here is the animatic with sound effects and the soundtrack. I decided to go with the song “Kawai Kitsune” as my soundtrack because I feel it fits the animation best.

Produce Outcome

Here is the start of the animation I have added a twin red looping walk cycle and a walk to idle animation.

Here I have added a climb animation for both characters. This was a fairly difficult animation to create because it involved lots of different movements to create a smooth animation. I also implemented the jump animation from before and put it into action for the white twin. I also created a jump animation for the white twin to trigger the button.

In this edit I have increased the speed of walking because I felt it was a bit too slow and looked like the characters were walking in slow motion. I also made it so the button works with the spikes.

Here I have added a button jump animation to the red twin and I have also added function to the button that moves the large block out of the way so that the white twin can walk underneath it. I have also increased the height of the floating white block so that the red twin can walk underneath the block instead of crawl because I felt the crawl animation would make the animation too long. I also think I am going to cut the last level because the animation will be far too long if I include two levels.

Here is the final animation without sound. I have added an animation to the end where the two twins get pulled into the end blob and spin in the process.

In this step I have added sound to the composition which are sounds effects for the steps, jumps, landing, button clicks and the end sound as the two twins get pulled into the blob.

I have added a soundtrack to the composition.

Final Outcome

I decided to decrease the volume of the soundtrack because I felt it was too loud and made it hard to hear some of the sound effects. I also added a sliding sound for when the spikes rise and sink and when the large block moves. This sound was made by sliding two pieces of paper together and slowing the speed of the sound down in Audacity.

Overall I found this brief quite difficult to begin with because I was fairly new to Flash but after a few weeks I was starting getting the hang of the program, the process of animating began to get easier and I was able to animate more efficiently using graphics to contain my walk cycles and climbing animations for example and being able to add them to the animation multiple times without having to recreate each cycle. If I was to do this task again I would have added more sound effects such as sounds when climbing. I would also increase he the speed of the animation. I would also have made the ending animation more complex with the characters morphing into the ending blob using a shape tween. This would have involved recreating the characters without using the assets I had created and then I would have had to shape tween the bodies of the characters to make it look as if they were being sucked into the end portal/blob.

I think I stuck to my proposal fairly closely apart from the order I planned to execute each task. I made sure I stuck with the Minimalist movement throughout my project and I feel you can see that in my final animation. I also made sure that I took and used inspiration from the artists to use in my final animation and I feel that can be seen in my final piece.

Final Evaluation

For this part of the evaluation I decided to go to reddit.com/r/animation to post my game simulation animation to get some critique from their users.

Looks good but too slow

SloooooowScreen Shot 2015-11-18 at 15.27.00

Although this piece of advice is fairly concise the user does bring a fair point. I decided to make the game simulation fairly slow because it is a puzzle game and it wasn’t supposed to be a fast paced plat former like Super Meat Boy. However, I do agree that the animation could be increased in speed slightly. I also like that the user enjoyed the aesthetic of the game.

This section of the evaluation will include thoughts and critique from my class when I presented my final animation.

“The movement speed of the characters worked well with the puzzle platformer style of the game”

I agree with this comment because I believe for my a puzzle game of this nature should have a slower pacing to a precision platformer such as Super Meat Boy. Although for some parts of my animation I feel could be increased in speed because I feel the user may find parts of the game too slow or unresponsive. Near the end of development I found out the animations could be increased in speed but by the time I had realised it was too late to change and would have taken a huge amount of work to adjust.

“The climbing animation worked well instead of including an unrealistic jump on to the boxes”

I also liked the climbing animations in my simulation because they had a good level of complexity in the movement and it looked far more realistic that the character jumping unrealistically high to get on to the boxes. This animation was very time consuming to create but I feel it was worth the time to put the effort in.

“The landing of characters could have been smoother and more fluid”

I agree with this statement because I struggled to make the arch of jumping look consistent and smooth. The movement of the jump animations wasn’t as smooth as I wanted it to be but I had to make a compromise between making it look smooth and finishing in time.

 

 

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s