Blog

3D animation: Maya obstacle course log

 

Maya log 1 steps
Animating my character across the first step

Log 1: The first thing I had to animate my character across was a small step up to a slide-like structured polygon. Using the channel editor to create key-frames from the ‘translate’ and ‘rotate’ channels so I could quickly key-frame each movement by simply pressing the short-cut ‘S’.

Using both the 3D and 2D perspectives, I began animating the character jumping lightly onto the step as if it were a stop-motion figure, moving each piece of the ‘skeleton’ rig a frame at a time using the ‘ move tool’ and ‘rotate tool’.

 

Log 2: For this part of the animation, where the character is sliding down a ramp and then climbing over a barrier, I tried a different method of animation, where I moved the frame-marker on the timeline straight to 25 frames and moving each aspect of the skeleton an appropriate amount for the time-frame.

Rotating the arms proved to be a challenge, as it was difficult keeping them anatomically correct and looking consistent.

 

 

 

 

Advertisements

Film-making: Pre-production

Storyboards:

StoryboardScene1Storyboardscene2Storyboardscene3Storyboardsscene4

 Script: First draft

Scene 1

Pan-down from the top of the Café to the front, where we see Sherlock and Watson sitting at a screen reading a newspaper and drinking coffee.

 

Kieran/Watson rushes up to Josh/Sherlock, waving a newspaper in front of him. “ We never seem to catch a break!”

Over the shoulder shot of both of them observing the newspaper

They want to investigate before the police arrive, so they eagerly get up, knocking over both their coffees in the process.

Pan left-to-right following both of them

They then run towards the crime scene, impatient to investigate.

Scene 2

(Pan left-to-right, following Sherlock and Watson as they approach the bridge, then linger on bridge to establish the location)

They both rush towards the crime-scene, almost slipping in mud in their enthusiasm.

(rotation pan right past car, after which body appears, which is the first sign that this is taking place in the ‘Sherlock’s’ imagination)

(Wide-shot, opposite side of body)

After-effects effect of Sherlock imagining the victim getting shot and falling in the real bodies position

(Close-up of Sherlock’s face, surveying the scene)

( Worm’s-eye shot as Sherlock picks up interesting dirt)

(Close-up of Sherlock’s hand, as he looks at the dirt)

Scene 3

There is an After-effect display of Sherlock’s thought process reaching a conclusion for the case, ‘connecting the dots’ the clues have given him.

(Close-up of Sherlock’s face)

Sherlock: “I’ve got it! Come on, Watson!”

(Wide-shot from beside the bridge)

They both hurriedly rush from under the bridge towards the next scene.

(Camera pans left-to-right)

Sherlock and Watson continue to speed towards where-ever Sherlock is leading them.

 

 

 

 

Art and Design: Mise en Scene:

Scene 1: Morning outside in front of a Café, Sherlock and Watson are sitting at a table drinking coffee and reading a newspaper.

Scene 2: Daytime underneath the bridge over the River Thames, with an imaginary dead body (Tony Mulligan) along with an array of parked cars and a lamp-post.

Scene 3: After-effect graphic of Sherlock’s thought process as he reaches a conclusion for the case. Back under the bridge with cars and a lamp-post, as Sherlock and Watson rush off elsewhere.

 

Costume planning:

  • Sherlock Holmes (Josh Locke): The game takes place in modern day, so Sherlock would most likely wear a smart-casual Suit-jacket and black chino trousers along with perhaps a scarf. I will provide my own costume using similar clothing I already have
  • John Watson (Kieran Gimigani): Similar to Sherlock, Watson should smart-casual clothing, for example, smart trousers and a suit-jacket with perhaps a hat to give him some distinction from Sherlock.
  • Suspects (Martin Reynolds, Jamal Gayle): The suspects are desperate escaped convicts, so they would most likely wear casual/rough street clothing such as old jeans or shirts with a type of jumper or coat.
  • Murder victim (Tony Mulligan): Being a random citizen, he would only wear casual or work clothing.

Prop planning:

Prop list:

  • Pretend weapon
  • 2 pairs of hygiene gloves
  • Newspaper
  • Notebook

actor_agreement

Call sheet

Film-making-extra_release

Recce report

 

 

Web design: Web browsers and how they function

How do web browsers function?browsericons-539x205

Web browsers are client softwares that display home pages on computers and other devices such as Firefox, Internet Explorer and Google Chrome. They ‘ask’ contact servers for pages built with Hypertext Markup Language (HTML) in order to successfully display the website’s pages. They also display pages that use scripting languages such as Javascript and AJAX.

Over the years, Internet Explorer has upgraded to the point where it has it’s own Anti-phishing software, and the Firefox browser has it’s own e-mail software called Thunderbird.

Client-side technologies

 

  • Client: The web-browser respectively used by a user’s machine e.g. Laptop or PC (Personal Computer)
  • HTML: Stands for Hypertext Markup Language. Used for achieving font, colour, graphics and hyperlinks by tagging text files.
  • CSS: Stands for Cascading Style Sheet and is used to space the layout of web pages by allowing the text, styles and other aspects of the web page by defining the space between these elements that went through HTML.
  • Bootstrap: The client that loads and executes computer commands for websites and the respective machine itself. For example, when you ‘boot up’ a machine, it starts the bootstrap process, allowing the sequence of commands to start and load the operating system.
  • Javascript: Is a client-side programme used in creating interactive websites, by making the different interactive elements in the website, such as elements that follow the mouse as it moves.
  • JQuery: JQuery is a cross-platform library in JavaScript made to simplify the way HTML operates in Java-script
  • AJAX: Is a web development used in the client-side to create web applications using different web technologies.
  • Angular: Is a technology that allows users to create interactive and dynamic web applications by allowing users to use HTML as their template language.
  • FTP: Used to access both the client and the server.
  • CMS: Uses the client to add elements to the database via the web-server.

Website elements and how they work

  • Header/banner: Appears at the top of the web-page and is often used to display the
    Image result for website header/banner
    Different website Headers

    title of the website and also houses the button used to display the menu and social media links

  • Logo: The symbol that communicates what a user’s website is created for and to identify the website, product or the company that the website’s made for.
  • Slider: A series of image used, mostly underneath the header, in the form of a slideshow, presenting different aspects of the content of the website.
  • Navigation: Different icons in an area below the header, or to the left or right of a website, used to navigate the different pages of the website. Sometimes to keep a sense of space, the website creator has the navigation menu in a separate tab (the Hamburger button) alongside the header, for the user to hide or display the menu.
  • Sticky menu: Instead of the menu being static, sometimes the creator will use Java-script to have the menu be displayed as a separate feature of the page, floating over the website’s content.
  • Hamburger button: A button displayed as a symbol depicting three parallel lines, that the user can click on to display a website’s menu.

    Image result for hamburger button
    Hamburger button
  • Links: Buttons on the user interface that the user can click to access different web-pages or social media, sometimes known as a hyper-link
  • Gallery: A collection of images, displayed below the header and menu, displayed in a grid pattern, to showcase different projects the creator may have worked on.
  • Thumbnails: An image in a web-site displayed as a small representation of a larger image, in order to make it easier for users to look through the different images in a gallery or other display.
  • Light-box: When certain images or graphical elements are displayed over the web-page, while dimming the light of the rest of the page.
  • Footer: The bottom of the website, where lines of text are shown, such as the name of the company or creator of the website, or relevant copyright information, along with link to other pages of the website such as ‘contact’ or ‘ social media’.
  • Loader: A moving or animated graphic showing the webpage’s progress as it loads it’s content.
  • Social media icons: Clickable images used as hyperlinks to the website creator’s various Social media pages, such as Instagram, Facebook or Twitter.
  • Responsive web-design: A form of web-design where the web-pages adapt to whatever platform users are viewing it on. For example, on a tablet, the website would perform at a resolution and layout that would be readable and navigable on that platform.
  • Cookies: Contain simple text files for almost all web-sites, which are readable on a notepad app on any PC. These contain two pieces of text relating to the website the user just visited, the name of the website and it’s unique user ID.
  • Protocol: Is HTTP which stands for Hyper-Text Transfer Protocol. This is the standard protocol through which web designers can securely communicate with distributed systems.

 

Maya tutorial 2: animation: basic

In this lesson, we were shown how to animate basic 3D shapes in  Maya.

First of all, I created a basic cube and a sphere and, after selecting animation in the workspace settings, I selected translate X as a keyframe in the channel editor by right-clicking and selecting ‘ key selected’.

Screen Shot 2017-10-04 at 09.45.58
setting up a keyframe

Then, after moving the timeline indicator to 25 frames ahead, I moved my cube along it’s X-axis, and checked that it actually animated by clicking play before moving on the sphere. I then repeated this process to achieve a small animation of a moving cube.

 

Web design: Portfolio website examples

 

  1. Pawel Nolbert:Screen Shot 2018-01-09 at 10.20.58 Rather than having paragraphs of text tell users about his portfolio, Nolbert lets the images take centre stage and speak for themselves. The layout is also very clear and lends to interactivity, while keeping a consistency with the content creator’s style in a way that makes the website and it’s content memorable to users.
  2. Refresh Studio:Image result for refresh studio The website is visually appealing and highly interactive, containing ‘mini-games’ based on the work that the company has done. The main page uses Java-script to make the lighting effect and the skull’s eye-line on the main page to follow the direction of the mouse and to create a scroll effect on the main menu, keeping the interaction throughout the navigation of the website.
  3. Sean Halpin: This website has a good focus on friendliness and simplicity, such as on the menu on the headband or the information page below the fold, which keeps the layout to a simple white background and cartoon-ish images on a pale coloured base. The content creator gives each piece of content it’s own display on the website’s ‘work’ page on which you have to scroll down the page to view them all, giving the same kind of simplicity to the navigation.

Film-making: Live-action video-game trailer

Narrative ideas

  1. The Wolf among us: Synopsis: The Wolf among us is a detective/murder-mystery game set in a world-within-a-world where different ‘fables’ and character’s from fairy-tale literature have integrated themselves within the mundane world, calling their world Fabletown. The protagonist is the ‘Big-bad Wolf’ in human form and Private Detective, Bigby Wolf, along with Snow (Snow-white). After they discover a murdered Fable on their door-step, they begin trying to discover who the murderer is, which takes them all over fabletown, questioning suspects and getting into fist-fights.

2. Sherlock Holmes: Crimes and Punishment: Synopsis: Crimes and punishment follows Sherlock Holmes and John Watson as they journey throughout old London solving various cases, some of these are simply thefts while others take a more fantastical approach. The duo also receive help from characters such as Sherlock’s brother Mycroft Holmes, while using all the skills they have such as Sherlock’s exemplary analytical abilities and Watson’s marksmanship, while questioning suspects to track down and arrest the culprits of these various crimes.

 

 

Web design: Good websites and bad websites

Well designed websites

  1.  Kendra HasteScreen Shot 2018-01-04 at 09.53.11

Text colour: The colour of the text is kept to different shades of black and grey, keeping the text readable, while not drawing attention completely away from the images presented.

Text placement: The text is placed in a professional and easy-to-read manner for example, in the News and About pages. However, in the menu, underneath Contacts, the text is not in line with the presented hyperlink, making that side of the menu somewhat confusing to read.

Menus: Menus are presented in a way that makes the website clear and navigable and her products and sketches are shown in a clear way that makes the user want to investigate further.

2. Evoulve

Screen Shot 2018-01-04 at 10.28.20

Presentation: The website is presented as if it was created for a futuristic setting, keeping the design simplistic, while also giving the information you need to know what the website is about. It’s homepage contains simply the title in front of a depiction of the planet created with a blue pallet that users are able to revolve using the mouse.

The rest of the website follows the futuristic aesthetic, giving information about the different categories of technology that the website informs users about.

Text colour: The text is kept to a standard and clean font, making the text easier to read, and it is kept colourless to contrast with the navy blue background.

Text placement: Information on the website is, like the title, presented in front of the interactive earth, making the text clear and easy to read.

Menu: The menu is kept as a streamlined drop-down selection on the right side of the screen, and only appears if users click on the menu button on the left of the screen displayed on the cover page. This streamlines the UJ (User Journey) and makes the menu easy to navigate and read.

3. 4 Rivers Smokehouse

Screen Shot 2018-01-04 at 10.32.22.png

Presentation: The first display that users see is a series of GIFs showing people smoking different types of meat alongside the title over information options about the website displayed over images related to the page, such as 2 people enjoying a beer, or a chef cooking a meal. This makes each option seem interesting and gives users the urge to investigate the website further.

Colour: The website uses a very homely, cosy light brown and black colour scheme, giving it the feeling of a steak-house or restaurant. Black and white negative space is used to differentiate each website element and make it easier to navigate.

Text:

4. World of Swiss

Presentation: The content in this website is presented in a grid pattern below the page selection menu, with images keeping each link differentiated from each-other. Negative space is used well, keeping the pages from looking cluttered messy, allowing for easier navigation.

However, content below the fold is presented in a way that has the user scrolling through individual pages with information in front of a relevant image, giving variety to the main page and giving users an insight into what the rest of the website is like.

Colour: Primarily, the colours that are used are red and white, allowing for use of negative space and giving significance to aspects that the web designers primarily want users to pay attention.

Text: The text is kept to a professional, sans-serif font with regular red coloured text put in to give significance to certain aspects and for variety.

5.Hideout lodge

hideoutlodge

Presentation: The website’s content is displayed in an interactive fashion where, as you scroll down below the fold, the website reveals itself to the user as they’re scrolling down.

The menu is displayed by clicking on a tab allowing the main menu to appear at the top of the screen, which can be clicked to hide the menu again if the user wanted it that way. This prevents the page from being too cluttered and allows for greater audience interactivity.

Text: In order to keep with the theme of being solitary in a mountain lodge, the colours mostly used are dark-grey and white, with a light-brown used for displaying significant information.

Colour: Keeping with the theme of a mountain lodge, the colours mostly used are blacks and dark browns, with white every now and again for visual variety. This makes the website feel cosy and welcoming just like the lodge it is advertising.

Poorly designed websites

Rogerart.com

Presentation: The main page and the content on it is presented in a very unclear and messy fashion, with confusing colour choices and messy text placement, along with bright green negative space. This makes the website very difficult to read and to navigate as it is hard to know where users are able to click.

There is also little to no structure in the main menu as it is presented in a confusing numerical system making it illegible and complicated to navigate.

Text: The text is present in stark contrast to the plain green background with many unneeded colours in the text, along with the writing itself being confusing to read. This makes the website practically illegible and very hard to follow and use.

Petersbuss.se

Presentation: The way the website is presented is immediately questionable as the images are integrated very poorly and there is no synergy with the font and text.

Text: The colour for the text is very poorly used and is constantly changing and it also does not match with the negative space and the background used, both of which are also very inconsistent. This, much like Rogerart.com, makes the text barely readable and needlessly complicated to navigate.

Colour: The colour of the text and background do not compliment each-other, only adding to the inconsistency and making the text hard to read. The negative space is taken up with a paper texture, which makes the website confusing to look at and navigate.

 

 

 

3D animation: Pixar short film analysis

1. Paper-man

papermanjpeg.jpeg

In 2012, Disney/Pixar released a short-animation alongside their latest feature back then, Wreck-it Ralph called Paper-man which garnered a-lot of attention and came away with the Annie award for best short-film, and in 2013, won the oscar in that category.

It’s significance was also because it successfully blended 2D and 3D animation together to create something rarely seen in animation.

Research from: The making of Paperman and the future of Disney animation

 

Animation process

  1. Disney CG animators animated the characters and objects the same way they would animate any other CG animated feature, by using 3D models and polygons in programmes such as Maya and using techniques such as kinematics and inverse kinematics.
  2. Computers then render the CG animation in a very cel-shaded fashion, without any line-drawings or line-art, just the fills for each character and moving object
  3. For each character and drawing, the line-art is drawn over each CG animated frame, inside the custom software that Disney created for these types of animation. The line-artists would do this for each character’s key frame, in effect ‘sticking’ the line-drawings onto the CG animated models.
  4. The artists then have to go through the frames and tweak and adjust any in-organic looking in-between key frames that they come across, as the line-art is not as smooth and natural as the CG kinematics,  which is the most time-consuming task in this process.
  5. During the compositing process, the paper-like texture of the animation is added to each frame sequence using a motion vector render technique, so the texture fits in with the sequences.
  6. The shading process for the characters begins by breaking the model down into topological cylinders and then computing each tangent from the polygons into cross-sections based on the perspective of the camera. Then each silhouette is extended along the normals, and this process is repeated for each topological cylinder. Motion vectors are then added for each vertex, and then rendered for 3D space and for each pixel.

2. Piper

Pixar released Piper in 2016 alongside its latest feature film, Finding Dory and it gained significant acclaim because it successfully utilised the latest animation technology that Pixar had created.

Research from: Indiewire: How innovative Pixar short ‘Piper’ got sculpted

 

  1. Wildlife study: Before beginning the animation process, the crew went out and studied and drew Sand-pipers, Plovers and Sanderlings, visiting places such as the Californian coast and an aviary at the Monterey Bay aquarium in order to get a better sense of how these birds and, more specifically, their feathers move and achieve more believable movement in the animation.
  2. Camera type: The director, Alan Barillaro, chose to set the lenses for the animation to a ‘faux lens’ to give the short the aesthetic of a nature documentary, while adding zooms and moments of full focus apart from the shallow depth of field focus a majority of the short to give the short an added feeling of realism. This CG macro-photography was used to achieve a unique-looking bird’s eye view.
  3. Animation technique: Alan Barillaro wanted him and the rest of the animators to control every aspect of movement, from the waves and sand to ,especially, the sandpipers’ feathers, rather than letting a computer programme simulate the movement. However, the current technology at Pixar couldn’t achieve this, so Barillaro wanted to create the animation to test his new technology that allowed this sort of control.  This latest animation technology gave the animators a greater degree of control over the aspects of the animation by treating the sea-waves and sand like characters in their own right, controlling the timing, shaping, the edge of the wave and the bubbles, which were a mix of character animation an effects. The bird had up to 7 million individual feathers, therefore regional controls and visual direction had to be used. This allowed the character to be expressive without using more humanoid traits such as hand-gestures or speech.

Animation: The Lion King

  • Storyboards: The directors ( Roger Allers and Rob Minkoff) began by planning their film out using storyboards describing each scene or significant frame of animation using rough sketches of the scene and the dialogue used in the scene written beneath the picture. They then displayed the storyboards to a meeting of artists and animators acting out each storyboarded scene to convey the sequence.
    Voice-acting: Different actors were then brought into the Disney studio to record the dialogue for their respective characters. Each actor had to fit the voice the directors wanted for each character, and after being shown the storyboards for the film, they would record their voices for their character using a microphone and a script in front of them. Often, the artist for a particular character would use the actor’s facial expressions as inspiration for the character’s design. For example, actor Jeremy Iron’s face was the implemented in the design of the face of his character, Scar.
    Art and design: In order to get inspiration for their drawings and paintings and to ensure that the background and natural elements were as faithful to the setting as possible, each artist working on the film travelled to the African Savannah and observed the wildlife and scenery, drawing elements like a sunset, different trees and the rocky terrain. They would then take these paintings and drawings and show them to the directors so they could get an idea of what was perfect for what the film needed and what aspects needed to be re-drawn.
    Sound and music: Composer Hans Zimmer created the music for the film by combining western instruments, such as trumpets and violins, with instruments found in Africa, such as Marimbas and African drums, in order to make the music fit well with the film and it’s setting.
    Animation: For each character, a separate animator observed the way the animal that their respective character was based on moved and emulated it in their drawings and computer animation. For example, for the lion characters a real-life lion was brought into the art studio so the animator for Mufasa, for instance, could gain an understanding of how his character moved and what a lion’s mannerisms are like.

Unreal engine: process

To begin creating an example of my game in Unreal engine, I created a new level folder and named it level-01. I then changed the perspective settings to ‘front’ and the view mode to ‘lit’ to give the look of a 2D plane.

new level
new level selection

I then created a new folder called ‘sprites’ and in that folder, created 4 sub-folders called ‘Ildesprites’, ‘runningsprites’, ‘attacksprites’ and jumpingsprites’. I then began importing all of the necessary frames of animation into the appropriate sprite folders. Then, clicking on ‘create sprites’ after selecting those frames in each folder, I began creating the sprites that would be imported into the level.

jump flipbook
Jump flip-book

Creating a new character blue-print called ‘Aaron-sprite’ by dragging and copying into a new folder called ‘character’, I dragged this new character into the level platform I had created. Then, double-clicking on the character blue-print, I used the ‘event graph’ to select the running sprites and the idle sprites for the first half of the character’s animations. However for the jumping animation, I had to create a different event on the event graph, called ‘itsjumping’ and connect that event to existing animation events under ‘true’ and set the new flipbook to ‘Jump’ to achieve the character’s jump animation.

For importing the game tiles I had drawn in Photoshop I created a new folder called ‘Gametiles’ and right-clicked and imported the files into that folder. I then right clicked and selected ‘create sprites’ and then ‘create tiles’. After putting them into the game’s platform and edited the tiles in each of their editors so they looked how I wanted them to look in the play-view, and changed the tile’s levels in the game-view window.