the gamedesigninitiative at cornell university Lecture 12 2D Animation

Size: px
Start display at page:

Download "the gamedesigninitiative at cornell university Lecture 12 2D Animation"

Transcription

1 Lecture 12 2D Animation

2 Animation Basics: The FilmStrip Animation is a sequence of hand-drawn frames Smoothly displays action when change quickly Also called flipbook animation Arrange animation in a sprite sheet (one texture) Software chooses which frame to use at any time So programmer is actually one doing animation 2

3 Anatomy of FilmStrip Class /** * Sets active frame as given index. * frame index to make active frame */ void FilmStrip::setFrame(int frame) { this->frame = frame; int x = (frame % cols)*rect.size.width; int y = (frame / cols)*rect.size.height; rect.origin.set(x,y); settexturerect(rect); } 3

4 Anatomy of FilmStrip Class /** * Sets active frame as given index. * frame index to make active frame */ void FilmStrip::setFrame(int frame) { this->frame = frame; int x = (frame % cols)*rect.size.width; int y = (frame / cols)*rect.size.height; } rect.origin.set(x,y); settexturerect(rect); Method in Sprite to set part of texture drawn. 4

5 Anatomy of FilmStrip Class /** * Sets active frame as given index. * frame index to make active frame */ void FilmStrip::setFrame(int Rectangles frame) are { this->frame = frame; defined by origin } int x = (frame % cols)*rect.size.width; and size fields. int y = (frame / cols)*rect.size.height; rect.origin.set(x,y); settexturerect(rect); Method in Sprite to set part of texture drawn. 5

6 Adjusting your Speed Do not want to go too fast 1 animation frame = 16 ms Walk cycle = 8/12 frames Completed in ms General solution: cooldowns Add an int timer to your object Go to next frame when it is 0 Reset it to > 0 at new frame Simple but tedious Have to do for each object Assumes animation is in a loop 6

7 Combining Animations Landing Animation Characters to a lot of things Run, jump, duck, slide Fire weapons, cast spells Fidget while player AFK Want animations for all Is loop appropriate for each? How do we transition? Idea: shared boundaries End of loop = start of anor Idling Animation Treat like advancing a frame 7

8 Combining Animations Landing Animation Characters to a lot of things Run, jump, duck, slide Fire weapons, cast spells Fidget while player AFK Not a Loop Want animations for all Is loop appropriate for each? How do we transition? Idea: shared boundaries End of loop = start of anor Idling Animation Treat like advancing a frame 8

9 Combining Animations Landing Animation Characters to a lot of things Run, jump, duck, slide Fire weapons, cast spells Transition Fidget while player AFK Want animations for all Is loop appropriate for each? How do we transition? Idea: shared boundaries End of loop = start of anor Idling Animation Treat like advancing a frame 9

10 Animation and State Machines Idea: Each sequence a state Do sequence while in state Transition when at end Only loop if loop in graph idle A graph edge means Boundaries match up Transition is allowable shoot Similar to data driven AI Created by designer Implemented by programmer Modern engines have tools walk 10

11 Animation and State Machines Idea: Each sequence a state Do sequence while in state Transition when at end Only loop if loop in graph A graph edge means Boundaries match up Transition is allowable Similar to data driven AI Created by designer Implemented by programmer Modern engines have tools idle One time action walk Continuing Action shoot 11

12 Complex Example: Jumping stand stand2crouch crouch hop takeoff float 12 land

13 Complex Example: Jumping stand Jump Press stand2crouch Jump Release crouch hop Jump Release takeoff float Near Ground 13 land

14 Complex Example: Jumping Transition state needed to align sequences stand stand2crouch crouch hop takeoff float 14 land

15 Aside: Sync Kills 15

16 The Responsiveness Issue Tightness of gameplay stand stand2crouch Additional delay preventing jump crouch hop takeoff float 16 land

17 Fast Transitions: Crossfade Blending A B t = 0.0 Linear interpolation on colors r c = tr a +(1 t)r b g c = tg a +(1 t)g b b c = tb a +(1 t)b b Note weights sum to

18 Fast Transitions: Crossfade Blending A B t = 0.3 Linear interpolation on colors r c = tr a +(1 t)r b g c = tg a +(1 t)g b b c = tb a +(1 t)b b Note weights sum to

19 Fast Transitions: Crossfade Blending A B t = 0.6 Linear interpolation on colors r c = tr a +(1 t)r b g c = tg a +(1 t)g b b c = tb a +(1 t)b b Note weights sum to

20 Fast Transitions: Crossfade Blending A B t = 0.8 Linear interpolation on colors r c = tr a +(1 t)r b g c = tg a +(1 t)g b b c = tb a +(1 t)b b Note weights sum to

21 Fast Transitions: Crossfade Blending A B t = 1.0 Linear interpolation on colors r c = tr a +(1 t)r b g c = tg a +(1 t)g b b c = tb a +(1 t)b b Note weights sum to

22 Combining With Animation A B Cycle filmstrip normally Cycle filmstrip normally Combine with alpha blending 22

23 Related Concept: Tweening A B Act of linear interpolating between animation frames Because we cycle filmstrip slower than framerate Implements a form of motion blur If animation designed right, makes it smoor 23

24 Tweening Works for Transforms Too A B Any transform is represented by a matrix Can linearly interpolate matrix components Gives a reasonable transform in-between Aside: This is a motivation for quaternions Gives smoor interpolation for rotation 24

25 Cocos2D Engine Support Recall: decoupled renderer Update pass modifies scene Render pass to SpriteBatch Draw pass sends to GPU Update Render pass can animate Switches frames if needed Tweens in-between frames Scene Graph Purpose of action API Give action with duration Can be new frame Also could be a transform Render 25

26 Action* action;" action = RotateBy::create(2.0f, 90.0f);" action->retain(); // Need it for later" sprite->runaction(action); Executing Actions: Transforms if (action->isdone()) {" action->release();" action = nullptr;" // Do or clean-up" } 26

27 Executing Actions: Transforms Action* action;" action = RotateBy::create(2.0f, 90.0f);" action->retain(); // Need it for later" sprite->runaction(action); if (action->isdone()) {" action->release();" action = nullptr;" // Do or clean-up" } How long to spend Tweens rotation 27

28 Action* action; Executing Actions: FilmStrips Vector<SpriteFrame*> Frames" auto f1 = SpriteFrame::create(im, rec1)" Frames->push_back(f1);" " auto f8 = SpriteFrame::create(im, rec8)" Frames->push_back(f8); Animation* seq = Animation::" createwithspriteframes(frames,0.1f);" action = Animate::create(seq);" action->retain(); sprite->runaction(action) // Clean up same as before 28

29 Action* action; Executing Actions: FilmStrips Vector<SpriteFrame*> Frames" auto f1 = SpriteFrame::create(im, rec1)" Frames->push_back(f1);" " auto f8 = SpriteFrame::create(im, rec8)" Frames->push_back(f8); Animation* seq = Animation::" createwithspriteframes(frames,0.1f);" action = Animate::create(seq);" action->retain(); sprite->runaction(action) // Clean up same as before Seconds per frame Does not tween 29

30 Action* action; Executing Actions: FilmStrips Vector<SpriteFrame*> Frames" auto f1 = SpriteFrame::create(im, rec1)" Frames->push_back(f1);" " auto f8 = SpriteFrame::create(im, rec8)" Frames->push_back(f8); Animation* seq = Animation::" createwithspriteframes(frames,0.1f);" action = Animate::create(seq);" action->retain(); sprite->runaction(action) // Clean up same as before This is why I made FilmStrip 30

31 Easing Function Basic approach to tweening Specify duration to animate Set t = 0 at beginning Normalize t = 1 at end Interpolate value with t How does t change? Usually done linearly Could be some or way t 1 0 start Duration end Easing: how to change t Used for bouncing effects Best used for transforms 31

32 Easing Function Basic approach to tweening Specify duration to animate Set t = 0 at beginning Normalize t = 1 at end Interpolate value with t How does t change? Usually done linearly Could be some or way Easing: how to change t Used for bouncing effects Best used for transforms 32 t t 1 0 start 1 0 start Duration Duration end end

33 Easing Functions in Cocos2D 33

34 Problem With Decoupled Animation Action* action;" action = RotateBy::create(2.0f, 90.0f);" action->retain(); // Need it for later" sprite->runaction(action); What if we change our mind before 2 seconds? 34

35 Problem With Decoupled Animation Action* action;" action = RotateBy::create(2.0f, 90.0f);" action->retain(); // Need it for later" sprite->runaction(action); Compatible: Combine Incompatible: Replace 35

36 Problem With Decoupled Animation Action* action;" action = RotateBy::create(2.0f, 90.0f);" action->retain(); // Need it for later" sprite->runaction(action); Compatible: Combine Incompatible: Replace But multiple actions can make clean-up a mess 36

37 Final Word on Cocos2D Tweening Transform Tweening Physical Animation Complete Disaster 37

38 Recall: Modular Animation Break asset into parts Natural for joints/bodies Animate each separately Cuts down on filmstrips Most steps are transforms Very natural for tweening Also better for physics Several tools to help you Example: Spriter Great for visualizing design 38

39 Recall: Modular Animation Break asset into parts Natural for joints/bodies Animate each separately Cuts down on filmstrips Most steps are transforms Very natural for tweening Also better for physics Several tools to help you Example: Spriter Great for visualizing design 39

40 Recall: Modular Animation Break asset into parts Natural for joints/bodies Animate each separately Cuts down on filmstrips Most steps are transforms Very natural for tweening Also better for physics Several tools to help you Example: Spriter Great for visualizing design 40

41 Recall: Modular Animation Break asset into parts Natural for joints/bodies Loose hit boxes Animate each separately Cuts down on filmstrips Most steps are transforms Very natural for tweening Also better for physics Several tools to help you Example: Spriter Great for visualizing design Inside hit box can safely Transform with duration Tween animations Manage multiple actions 41

42 Aside: Skinning 42

43 Aside: Skinning Way to get extra usage of hand-drawn frames 43

44 Spriter Demo 44

45 Basic Idea: Bones 45

46 Basic Idea: Bones 46

47 Basic Idea: Bones Orientation (y-axis) Sprite attached Pivot (origin) Creates implicit coordinate space 47

48 Bones are Heirarchical Child Parent 48

49 Bones are Heirarchical Transforms apply to children 49

50 Bones are Heirarchical Transforms do not affect parent 50

51 Recall: Scene Graph Hierarchy Bounded box inside Layer Device/ Screen Coordinates Node Node Node Node Node Node Node Node Node 51 Coords relative to parent box

52 Bones are a Scene Graph Visualization 52

53 Manage With Multiple State Machines legs idle arms idle legs walk arms shoot 53

54 Manage With Multiple State Machines legs idle arms idle Can be independent or coordinated legs walk arms shoot 54

55 Summary Standard 2D animation is flipbook style Create a sequence of frames in sprite sheet Switch between sequences with state machines Tweening supports interpolated transitions Helpful for motion blur, state transitions Transforms can be combined with easing functions Professional 2D animation uses modular sprites Scene graphs are a simplified form of model rigging State machine coordination can be very advanced 55

the gamedesigninitiative at cornell university Lecture 14 2D Sprite Graphics

the gamedesigninitiative at cornell university Lecture 14 2D Sprite Graphics Lecture 14 Drawing Images Graphics Lectures SpriteBatch interface Coordinates and Transforms Drawing Perspective Camera Projections Drawing Primitives Color and Textures Polygons 2 Drawing Images Graphics

More information

Blending & State Machines. CSE169: Computer Animation Instructor: Steve Rotenberg UCSD, Winter 2017

Blending & State Machines. CSE169: Computer Animation Instructor: Steve Rotenberg UCSD, Winter 2017 Blending & State Machines CSE169: Computer Animation Instructor: Steve Rotenberg UCSD, Winter 2017 Blending & Sequencing Now that we understand how a character rig works and how to manipulate animation

More information

the gamedesigninitiative at cornell university Lecture 17 Color and Textures

the gamedesigninitiative at cornell university Lecture 17 Color and Textures Lecture 7 Color and Textures Take Away For Today Image color and composition What is RGB model for images? What does alpha represent? How does alpha composition work? Graphics primitives How do primitives

More information

the gamedesigninitiative at cornell university Lecture 17 Color and Textures

the gamedesigninitiative at cornell university Lecture 17 Color and Textures Lecture 7 Color and Textures Take Away For Today Image color and composition What is RGB model for images? What does alpha represent? How does alpha composition work? Graphics primitives How do primitives

More information

the gamedesigninitiative at cornell university Lecture 16 Color and Textures

the gamedesigninitiative at cornell university Lecture 16 Color and Textures Lecture 6 Color and Textures Take Away For Today Image color and composition What is RGB model for images? What does alpha represent? How does alpha composition work? Graphics primitives How do primitives

More information

the gamedesigninitiative at cornell university Lecture 12 Scene Graphs

the gamedesigninitiative at cornell university Lecture 12 Scene Graphs Lecture 12 Aside: When Do We Load Assets? Main Application Application Start-up Level Load GameMode GameMode Models Scene Choice affects design Models Scene & ownership of asset manager 2 Drawing in CUGL

More information

Adobe Flash Course Syllabus

Adobe Flash Course Syllabus Adobe Flash Course Syllabus A Quick Flash Demo Introducing the Flash Interface Adding Elements to the Stage Duplicating Library Items Introducing Keyframes, the Transform Tool & Tweening Creating Animations

More information

Character Animation 1

Character Animation 1 Character Animation 1 Overview Animation is a big topic We will concentrate on character animation as is used in many games today humans, animals, monsters, robots, etc. Character Representation A character

More information

Game Programming with. presented by Nathan Baur

Game Programming with. presented by Nathan Baur Game Programming with presented by Nathan Baur What is libgdx? Free, open source cross-platform game library Supports Desktop, Android, HTML5, and experimental ios support available with MonoTouch license

More information

Toon Boom Harmony Advanced V15.0

Toon Boom Harmony Advanced V15.0 Advanced Toon Boom Harmony Advanced V15.0 Gaming Guide TOON BOOM ANIMATION INC. 4200 Saint-Laurent, Suite 1020 Montreal, Quebec, Canada H2W 2R2 +1 514 278 8666 contact@toonboom.com toonboom.com Harmony

More information

MOTION CAPTURE DATA PROCESSING - MOTION EDITING / RETARGETING - MOTION CONTROL / GRAPH - INVERSE KINEMATIC. Alexandre Meyer Master Informatique

MOTION CAPTURE DATA PROCESSING - MOTION EDITING / RETARGETING - MOTION CONTROL / GRAPH - INVERSE KINEMATIC. Alexandre Meyer Master Informatique 1 MOTION CAPTURE DATA PROCESSING - MOTION EDITING / RETARGETING - MOTION CONTROL / GRAPH - INVERSE KINEMATIC Alexandre Meyer Master Informatique Overview: Motion data processing In this course Motion editing

More information

Computer Animation Fundamentals. Animation Methods Keyframing Interpolation Kinematics Inverse Kinematics

Computer Animation Fundamentals. Animation Methods Keyframing Interpolation Kinematics Inverse Kinematics Computer Animation Fundamentals Animation Methods Keyframing Interpolation Kinematics Inverse Kinematics Lecture 21 6.837 Fall 2001 Conventional Animation Draw each frame of the animation great control

More information

Character Animation. Presented by: Pam Chow

Character Animation. Presented by: Pam Chow Character Animation Presented by: Pam Chow Overview Animation is a big topic We will concentrate on character animation as is used in many games today humans, animals, monsters, robots, etc. PLAZMO AND

More information

Learning Autodesk Maya The Modeling & Animation Handbook. Free Models From Turbo Squid Value US $ Official Autodesk Training Guide

Learning Autodesk Maya The Modeling & Animation Handbook. Free Models From Turbo Squid Value US $ Official Autodesk Training Guide Free Models From Turbo Squid Value US $239.00 Official Autodesk Training Guide Learning Autodesk Maya 2008 The Modeling & Animation Handbook A hands-on introduction to key tools and techniques in Autodesk

More information

Animation. Motion over time

Animation. Motion over time Animation Animation Motion over time Animation Motion over time Usually focus on character animation but environment is often also animated trees, water, fire, explosions, Animation Motion over time Usually

More information

Chapter 5.2 Character Animation

Chapter 5.2 Character Animation Chapter 5.2 Character Animation Overview Fundamental Concepts Animation Storage Playing Animations Blending Animations Motion Extraction Mesh Deformation Inverse Kinematics Attachments & Collision Detection

More information

the gamedesigninitiative at cornell university Lecture 6 Scene Graphs

the gamedesigninitiative at cornell university Lecture 6 Scene Graphs Lecture 6 Structure of a CUGL Application Main Application Scene Scene Models Root Models Root 2 Structure of a CUGL Application Main App Configuration Application Memory policy (future lecture) Scene

More information

Animation Essentially a question of flipping between many still images, fast enough

Animation Essentially a question of flipping between many still images, fast enough 33(70) Information Coding / Computer Graphics, ISY, LiTH Animation Essentially a question of flipping between many still images, fast enough 33(70) Animation as a topic Page flipping, double-buffering

More information

Linear and Affine Transformations Coordinate Systems

Linear and Affine Transformations Coordinate Systems Linear and Affine Transformations Coordinate Systems Recall A transformation T is linear if Recall A transformation T is linear if Every linear transformation can be represented as matrix Linear Transformation

More information

BONE CONTROLLER ASSET VERSION 0.1 REV 1

BONE CONTROLLER ASSET VERSION 0.1 REV 1 Foreword Thank you for purchasing the Bone Controller! I m an independent developer and your feedback and support really means a lot to me. Please don t ever hesitate to contact me if you have a question,

More information

Chapter 9 Animation System

Chapter 9 Animation System Chapter 9 Animation System 9.1 Types of Character Animation Cel Animation Cel animation is a specific type of traditional animation. A cel is a transparent sheet of plastic on which images can be painted

More information

Integrating Physics into a Modern Game Engine. Object Collision. Various types of collision for an object:

Integrating Physics into a Modern Game Engine. Object Collision. Various types of collision for an object: Integrating Physics into a Modern Game Engine Object Collision Various types of collision for an object: Sphere Bounding box Convex hull based on rendered model List of convex hull(s) based on special

More information

Creating Loopable Animations By Ryan Bird

Creating Loopable Animations By Ryan Bird Creating Loopable Animations By Ryan Bird A loopable animation is any-length animation that starts the same way it ends. If done correctly, when the animation is set on a loop cycle (repeating itself continually),

More information

CMSC 425: Lecture 10 Skeletal Animation and Skinning

CMSC 425: Lecture 10 Skeletal Animation and Skinning CMSC 425: Lecture 10 Skeletal Animation and Skinning Reading: Chapt 11 of Gregory, Game Engine Architecture. Recap: Last time we introduced the principal elements of skeletal models and discussed forward

More information

VISIT FOR THE LATEST UPDATES, FORUMS & MORE ASSETS.

VISIT  FOR THE LATEST UPDATES, FORUMS & MORE ASSETS. Gargoyle VISIT WWW.SFBAYSTUDIOS.COM FOR THE LATEST UPDATES, FORUMS & MORE ASSETS. 1. INTRODUCTION 2. QUICK SET UP 3. PROCEDURAL VALUES 4. SCRIPTING 5. ANIMATIONS 6. LEVEL OF DETAIL 7. CHANGE LOG 1. Introduction

More information

Breathing life into your applications: Animation with Qt 3D. Dr Sean Harmer Managing Director, KDAB (UK)

Breathing life into your applications: Animation with Qt 3D. Dr Sean Harmer Managing Director, KDAB (UK) Breathing life into your applications: Animation with Qt 3D Dr Sean Harmer Managing Director, KDAB (UK) sean.harmer@kdab.com Contents Overview of Animations in Qt 3D Simple Animations Skeletal Animations

More information

Learning Flash CS4. Module 1 Contents. Chapter 1: Getting Started With Flash. Chapter 2: Drawing Tools

Learning Flash CS4. Module 1 Contents. Chapter 1: Getting Started With Flash. Chapter 2: Drawing Tools Learning Flash CS4 Module 1 Contents Chapter 1: Getting Started With Flash The Flash Start Page...1-1 The Flash Screen...1-2 The Flash Workspace...1-2 The Properties Panel...1-4 Other Panels...1-5 The

More information

System Requirements:-

System Requirements:- Anime Studio Pro 9 Complete Animation for Professionals & Digital Artists! Anime Studio Pro 9 is for professionals looking for a more efficient alternative to tedious frame-by-frame animation. With an

More information

Lecture 18 of 41. Scene Graphs: Rendering Lab 3b: Shader

Lecture 18 of 41. Scene Graphs: Rendering Lab 3b: Shader Scene Graphs: Rendering Lab 3b: Shader William H. Hsu Department of Computing and Information Sciences, KSU KSOL course pages: http://bit.ly/hgvxlh / http://bit.ly/evizre Public mirror web site: http://www.kddresearch.org/courses/cis636

More information

Lecture 16. Introduction to Game Development IAP 2007 MIT

Lecture 16. Introduction to Game Development IAP 2007 MIT 6.189 IAP 2007 Lecture 16 Introduction to Game Development Mike Acton, Insomiac Games. 6.189 IAP 2007 MIT Introduction to Game Development (on the Playstation 3 / Cell ) Mike Acton Engine Director, Insomniac

More information

Sidescrolling 2.5D Shooter

Sidescrolling 2.5D Shooter Sidescrolling 2.5D Shooter Viking Crew Development 1 Introduction... 2 1.1 Support... 2 1.2 2D or 3D physics?... 2 1.3 Multiple (additive) scenes... 2 2 Characters... 3 2.1 Creating different looking characters...

More information

NETWORK ANIMATION SOLUTION. What s New?

NETWORK ANIMATION SOLUTION. What s New? NETWORK ANIMATION SOLUTION What s New? What s New in Harmony 9? New Pencil Line Technology In Harmony 9, Toon Boom has re-engineered its vector technology to deliver a redesigned Pencil Line Technology

More information

Walk Cycle with Symbols

Walk Cycle with Symbols Walk Cycle with Symbols STEP 1 Assuming you have your character all rigged and ready to go, double click on the character to get into the master symbol to see all the layers that make up all of the character

More information

Game Design Unity Workshop

Game Design Unity Workshop Game Design Unity Workshop Activity 2 Goals: - Creation of small world - Creation of character - Scripting of player movement and camera following Load up unity Build Object: Mini World and basic Chase

More information

CS354 Computer Graphics Character Animation and Skinning

CS354 Computer Graphics Character Animation and Skinning Slide Credit: Don Fussell CS354 Computer Graphics Character Animation and Skinning Qixing Huang April 9th 2018 Instance Transformation Start with a prototype object (a symbol) Each appearance of the object

More information

3D Modelling: Animation Fundamentals & Unit Quaternions

3D Modelling: Animation Fundamentals & Unit Quaternions 3D Modelling: Animation Fundamentals & Unit Quaternions CITS3003 Graphics & Animation Thanks to both Richard McKenna and Marco Gillies for permission to use their slides as a base. Static objects are boring

More information

Vehicle Project. Ethan Steele CGD

Vehicle Project. Ethan Steele CGD Vehicle Project Ethan Steele CGD Vehicle Sketches Side view Front view Top view Back view Clay Renders Front view Back view Side view Top view General View Wireframe Renders Front view Back view General

More information

Overview. Animation is a big topic We will concentrate on character animation as is used in many games today. humans, animals, monsters, robots, etc.

Overview. Animation is a big topic We will concentrate on character animation as is used in many games today. humans, animals, monsters, robots, etc. ANIMATION Overview Animation is a big topic We will concentrate on character animation as is used in many games today humans, animals, monsters, robots, etc. Character Representation A character is represented

More information

About this document. Introduction. Where does Life Forms fit? Prev Menu Next Back p. 2

About this document. Introduction. Where does Life Forms fit? Prev Menu Next Back p. 2 Prev Menu Next Back p. 2 About this document This document explains how to use Life Forms Studio with LightWave 5.5-6.5. It also contains short examples of how to use LightWave and Life Forms together.

More information

Game Programming. Bing-Yu Chen National Taiwan University

Game Programming. Bing-Yu Chen National Taiwan University Game Programming Bing-Yu Chen National Taiwan University Character Motion Hierarchical Modeling Character Animation Motion Editing 1 Hierarchical Modeling Connected primitives 2 3D Example: A robot arm

More information

Java2D/Java3D Graphics

Java2D/Java3D Graphics Java2D/Java3D Graphics Sandro Spina Computer Graphics and Simulation Group Computer Science Department University of Malta 1 Abstraction in Software Engineering We shall be looking at how abstraction is

More information

UI Elements. If you are not working in 2D mode, you need to change the texture type to Sprite (2D and UI)

UI Elements. If you are not working in 2D mode, you need to change the texture type to Sprite (2D and UI) UI Elements 1 2D Sprites If you are not working in 2D mode, you need to change the texture type to Sprite (2D and UI) Change Sprite Mode based on how many images are contained in your texture If you are

More information

CS 352: Computer Graphics. Hierarchical Graphics, Modeling, And Animation

CS 352: Computer Graphics. Hierarchical Graphics, Modeling, And Animation CS 352: Computer Graphics Hierarchical Graphics, Modeling, And Animation Chapter 9-2 Overview Modeling Animation Data structures for interactive graphics CSG-tree BSP-tree Quadtrees and Octrees Visibility

More information

Burning Laser. In this tutorial we are going to use particle flow to create a laser beam that shoots off sparks and leaves a burn mark on a surface!

Burning Laser. In this tutorial we are going to use particle flow to create a laser beam that shoots off sparks and leaves a burn mark on a surface! Burning Laser In this tutorial we are going to use particle flow to create a laser beam that shoots off sparks and leaves a burn mark on a surface! In order to save time on things you should already know

More information

Adobe Flash CS4 Part 4: Interactivity

Adobe Flash CS4 Part 4: Interactivity CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Adobe Flash CS4 Part 4: Interactivity Fall 2010, Version 1.0 Table of Contents Introduction... 2 Downloading the Data Files... 2

More information

Game Architecture Revisited

Game Architecture Revisited Lecture 8 Game Architecture Revisited Recall: The Game Loop 60 times/s = 16.7 ms Update Draw Receive player input Process player actions Process NPC actions Interactions (e.g. physics) Cull non-visible

More information

CS 354R: Computer Game Technology

CS 354R: Computer Game Technology CS 354R: Computer Game Technology Texture and Environment Maps Fall 2018 Texture Mapping Problem: colors, normals, etc. are only specified at vertices How do we add detail between vertices without incurring

More information

MOTION CAPTURE DATA PROCESSING - MOTION EDITING / RETARGETING - MOTION CONTROL / GRAPH - INVERSE KINEMATIC. Alexandre Meyer Master Informatique

MOTION CAPTURE DATA PROCESSING - MOTION EDITING / RETARGETING - MOTION CONTROL / GRAPH - INVERSE KINEMATIC. Alexandre Meyer Master Informatique 1 MOTION CAPTURE DATA PROCESSING - MOTION EDITING / RETARGETING - MOTION CONTROL / GRAPH - INVERSE KINEMATIC Alexandre Meyer Master Informatique Motion capture data processing From Data Capture to motion

More information

Modify Group. Joint Move. (default keyboard shortcut Ctrl J)

Modify Group. Joint Move. (default keyboard shortcut Ctrl J) Modify Group Joint Move (default keyboard shortcut Ctrl J) Joint Mover draws lines along each bone and puts a cross hair at the base of the child bone(s), which is usually coincident with the tip of the

More information

Creative Web Designer Course

Creative Web Designer Course Creative Web Designer Course Photoshop 1. Getting to Know the Work Area Starting to work in Adobe Photoshop Using the tools Setting tool properties Undoing actions in Photoshop More about panels and panel

More information

Lesson 01 Polygon Basics 17. Lesson 02 Modeling a Body 27. Lesson 03 Modeling a Head 63. Lesson 04 Polygon Texturing 87. Lesson 05 NURBS Basics 117

Lesson 01 Polygon Basics 17. Lesson 02 Modeling a Body 27. Lesson 03 Modeling a Head 63. Lesson 04 Polygon Texturing 87. Lesson 05 NURBS Basics 117 Table of Contents Project 01 Lesson 01 Polygon Basics 17 Lesson 02 Modeling a Body 27 Lesson 03 Modeling a Head 63 Lesson 04 Polygon Texturing 87 Project 02 Lesson 05 NURBS Basics 117 Lesson 06 Modeling

More information

Mechanic Animations. Mecanim is Unity's animation state machine system.

Mechanic Animations. Mecanim is Unity's animation state machine system. Mechanic Animations Mecanim is Unity's animation state machine system. It essentially allows you to create 'states' that play animations and define transition logic. Create new project Animation demo.

More information

Character animation Christian Miller CS Fall 2011

Character animation Christian Miller CS Fall 2011 Character animation Christian Miller CS 354 - Fall 2011 Exam 2 grades Avg = 74.4, std. dev. = 14.4, min = 42, max = 99 Characters Everything is important in an animation But people are especially sensitive

More information

Sign up for crits! Announcments

Sign up for crits! Announcments Sign up for crits! Announcments Reading for Next Week FvD 16.1-16.3 local lighting models GL 5 lighting GL 9 (skim) texture mapping Modern Game Techniques CS248 Lecture Nov 13 Andrew Adams Overview The

More information

CSE 167: Introduction to Computer Graphics Lecture #5: Rasterization. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2015

CSE 167: Introduction to Computer Graphics Lecture #5: Rasterization. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2015 CSE 167: Introduction to Computer Graphics Lecture #5: Rasterization Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2015 Announcements Project 2 due tomorrow at 2pm Grading window

More information

Spline Control. How to Create the Spline

Spline Control. How to Create the Spline Spline Control How to Create the Spline Getting Started with Spline Control Going Further Modeler Spline for Spline Control How to View the Spline How to Tweak the Spline How to Activate/Deactivate Spline

More information

2D rendering takes a photo of the 2D scene with a virtual camera that selects an axis aligned rectangle from the scene. The photograph is placed into

2D rendering takes a photo of the 2D scene with a virtual camera that selects an axis aligned rectangle from the scene. The photograph is placed into 2D rendering takes a photo of the 2D scene with a virtual camera that selects an axis aligned rectangle from the scene. The photograph is placed into the viewport of the current application window. A pixel

More information

Danmaku Mono Documentation

Danmaku Mono Documentation Danmaku Mono Documentation Release 0.01b UltimaOmega February 21, 2017 Miscellaneous Functions 1 Miscellaneous Functions 3 1.1 GetKeyState(keytocheck)........................................ 3 1.2 SetKeyState(key,

More information

Images from 3D Creative Magazine. 3D Modelling Systems

Images from 3D Creative Magazine. 3D Modelling Systems Images from 3D Creative Magazine 3D Modelling Systems Contents Reference & Accuracy 3D Primitives Transforms Move (Translate) Rotate Scale Mirror Align 3D Booleans Deforms Bend Taper Skew Twist Squash

More information

Dynamic Bounding Volume Hierarchies. Erin Catto, Blizzard Entertainment

Dynamic Bounding Volume Hierarchies. Erin Catto, Blizzard Entertainment Dynamic Bounding Volume Hierarchies Erin Catto, Blizzard Entertainment 1 This is one of my favorite Overwatch maps: BlizzardWorld. This is the spawn area inside the Hearthstone Tavern. 2 All the objects

More information

Flowmap Generator Reference

Flowmap Generator Reference Flowmap Generator Reference Table of Contents Flowmap Overview... 3 What is a flowmap?... 3 Using a flowmap in a shader... 4 Performance... 4 Creating flowmaps by hand... 4 Creating flowmaps using Flowmap

More information

Animating Dialogue using the "Mouth Comp" method

Animating Dialogue using the Mouth Comp method Animating Dialogue using the "Mouth Comp" method Always use symbols There are many ways to go about animating dialogue in Flash. The most logical methods all take advantage of reusing symbols of different

More information

Ryan Marcotte CS 499 (Honours Seminar) March 16, 2011

Ryan Marcotte   CS 499 (Honours Seminar) March 16, 2011 Ryan Marcotte www.cs.uregina.ca/~marcottr CS 499 (Honours Seminar) March 16, 2011 Outline Introduction to the problem Basic principles of skeletal animation, tag points Description of animation algorithm

More information

MODELING AND ANIMATION

MODELING AND ANIMATION UNIVERSITY OF CALICUT SCHOOL OF DISTANCE EDUCATION D M A MODELING AND ANIMATION QUESTION BANK 1. 2D Animation a) Wire Frame b) More than two Dimension c) Cel animation 2. 3D Animation a) Illution of three-dimensional

More information

Animations. Hakan Bilen University of Edinburgh. Computer Graphics Fall Some slides are courtesy of Steve Marschner and Kavita Bala

Animations. Hakan Bilen University of Edinburgh. Computer Graphics Fall Some slides are courtesy of Steve Marschner and Kavita Bala Animations Hakan Bilen University of Edinburgh Computer Graphics Fall 2017 Some slides are courtesy of Steve Marschner and Kavita Bala Animation Artistic process What are animators trying to do? What tools

More information

Mount Points Mount Points is a super simple tool for connecting objects together and managing those relationships.

Mount Points Mount Points is a super simple tool for connecting objects together and managing those relationships. Mount Points Mount Points is a super simple tool for connecting objects together and managing those relationships. With Mount Points, you can simply drag two objects together and when their mount points

More information

Unity Game Development

Unity Game Development Unity Game Development 1. Introduction to Unity Getting to Know the Unity Editor The Project Dialog The Unity Interface The Project View The Hierarchy View The Inspector View The Scene View The Game View

More information

Transforms Transform

Transforms Transform Transforms The Transform is used to store a GameObject s position, rotation, scale and parenting state and is thus very important. A GameObject will always have a Transform component attached - it is not

More information

Game Programming Lab 25th April 2016 Team 7: Luca Ardüser, Benjamin Bürgisser, Rastislav Starkov

Game Programming Lab 25th April 2016 Team 7: Luca Ardüser, Benjamin Bürgisser, Rastislav Starkov Game Programming Lab 25th April 2016 Team 7: Luca Ardüser, Benjamin Bürgisser, Rastislav Starkov Interim Report 1. Development Stage Currently, Team 7 has fully implemented functional minimum and nearly

More information

Computer Graphics. Si Lu. Fall uter_graphics.htm 11/27/2017

Computer Graphics. Si Lu. Fall uter_graphics.htm 11/27/2017 Computer Graphics Si Lu Fall 2017 http://web.cecs.pdx.edu/~lusi/cs447/cs447_547_comp uter_graphics.htm 11/27/2017 Last time o Ray tracing 2 Today o Animation o Final Exam: 14:00-15:30, Novermber 29, 2017

More information

Animation. CS 4620 Lecture 32. Cornell CS4620 Fall Kavita Bala

Animation. CS 4620 Lecture 32. Cornell CS4620 Fall Kavita Bala Animation CS 4620 Lecture 32 Cornell CS4620 Fall 2015 1 What is animation? Modeling = specifying shape using all the tools we ve seen: hierarchies, meshes, curved surfaces Animation = specifying shape

More information

RSX Best Practices. Mark Cerny, Cerny Games David Simpson, Naughty Dog Jon Olick, Naughty Dog

RSX Best Practices. Mark Cerny, Cerny Games David Simpson, Naughty Dog Jon Olick, Naughty Dog RSX Best Practices Mark Cerny, Cerny Games David Simpson, Naughty Dog Jon Olick, Naughty Dog RSX Best Practices About libgcm Using the SPUs with the RSX Brief overview of GCM Replay December 7 th, 2004

More information

DX10, Batching, and Performance Considerations. Bryan Dudash NVIDIA Developer Technology

DX10, Batching, and Performance Considerations. Bryan Dudash NVIDIA Developer Technology DX10, Batching, and Performance Considerations Bryan Dudash NVIDIA Developer Technology The Point of this talk The attempt to combine wisdom and power has only rarely been successful and then only for

More information

Animating the Page IN THIS CHAPTER. Timelines and Frames

Animating the Page IN THIS CHAPTER. Timelines and Frames e r ch02.fm Page 41 Friday, September 17, 1999 10:45 AM c h a p t 2 Animating the Page IN THIS CHAPTER Timelines and Frames Movement Tweening Shape Tweening Fading Recap Advanced Projects You have totally

More information

The Illusion of Motion Making magic with textures in the vertex shader. Mario Palmero Lead Programmer at Tequila Works

The Illusion of Motion Making magic with textures in the vertex shader. Mario Palmero Lead Programmer at Tequila Works The Illusion of Motion Making magic with textures in the vertex shader Mario Palmero Lead Programmer at Tequila Works Dark Ages before Textures in the Vertex Shader What is the Vertex Shader? A programmable

More information

MODELING AND HIERARCHY

MODELING AND HIERARCHY MODELING AND HIERARCHY Introduction Models are abstractions of the world both of the real world in which we live and of virtual worlds that we create with computers. We are all familiar with mathematical

More information

You can also export a video of what one of the cameras in the scene was seeing while you were recording your animations.[2]

You can also export a video of what one of the cameras in the scene was seeing while you were recording your animations.[2] Scene Track for Unity User Manual Scene Track Plugin (Beta) The scene track plugin allows you to record live, textured, skinned mesh animation data, transform, rotation and scale animation, event data

More information

Ciril Bohak. - INTRODUCTION TO WEBGL

Ciril Bohak. - INTRODUCTION TO WEBGL 2016 Ciril Bohak ciril.bohak@fri.uni-lj.si - INTRODUCTION TO WEBGL What is WebGL? WebGL (Web Graphics Library) is an implementation of OpenGL interface for cmmunication with graphical hardware, intended

More information

Broken Age's Approach to Scalability. Oliver Franzke Lead Programmer, Double Fine Productions

Broken Age's Approach to Scalability. Oliver Franzke Lead Programmer, Double Fine Productions Broken Age's Approach to Scalability Oliver Franzke Lead Programmer, Double Fine Productions Content Introduction Platform diversity Game assets Characters Environments Shaders Who am I? Lead Programmer

More information

3D LEADS 2D: ANIMATING A 3D CHARACTER WITH A 3D STAND-IN USING MAYA

3D LEADS 2D: ANIMATING A 3D CHARACTER WITH A 3D STAND-IN USING MAYA Chapter 3 3D CHARACTER LEADS 2D CHARACTER 53 printing and pegging of the 3D assets and possible registration issues. In scenes where one character is definitively leading the other one, it is an easy pipeline.

More information

animation projects in digital art animation 2009 fabio pellacini 1

animation projects in digital art animation 2009 fabio pellacini 1 animation projects in digital art animation 2009 fabio pellacini 1 animation shape specification as a function of time projects in digital art animation 2009 fabio pellacini 2 how animation works? flip

More information

6.837 Introduction to Computer Graphics Quiz 2 Thursday November 20, :40-4pm One hand-written sheet of notes allowed

6.837 Introduction to Computer Graphics Quiz 2 Thursday November 20, :40-4pm One hand-written sheet of notes allowed 6.837 Introduction to Computer Graphics Quiz 2 Thursday November 20, 2003 2:40-4pm One hand-written sheet of notes allowed Name: 1 2 3 4 5 6 7 / 4 / 15 / 5 / 5 / 12 / 2 / 7 Total / 50 1 Animation [ /4]

More information

Tangents. In this tutorial we are going to take a look at how tangents can affect an animation.

Tangents. In this tutorial we are going to take a look at how tangents can affect an animation. Tangents In this tutorial we are going to take a look at how tangents can affect an animation. One of the 12 Principles of Animation is called Slow In and Slow Out. This refers to the spacing of the in

More information

Section 28: 2D Gaming: Continuing with Unity 2D

Section 28: 2D Gaming: Continuing with Unity 2D Section 28: 2D Gaming: Continuing with Unity 2D 1. Open > Assets > Scenes > Game 2. Configuring the Layer Collision Matrix 1. Edit > Project Settings > Tags and Layers 2. Create two new layers: 1. User

More information

Using the API... 3 edriven.core... 5 A PowerMapper pattern... 5 edriven.gui... 7 edriven.gui framework architecture... 7 Audio... 9 Animation...

Using the API... 3 edriven.core... 5 A PowerMapper pattern... 5 edriven.gui... 7 edriven.gui framework architecture... 7 Audio... 9 Animation... 1 Using the API... 3 edriven.core... 5 A PowerMapper pattern... 5 edriven.gui... 7 edriven.gui framework architecture... 7 Audio... 9 Animation... 11 Tween class... 11 TweenFactory class... 12 Styling...

More information

CS 248 Assignment 2 Polygon Scan Converter. CS248 Presented by Abe Davis Stanford University October 17, 2008

CS 248 Assignment 2 Polygon Scan Converter. CS248 Presented by Abe Davis Stanford University October 17, 2008 CS 248 Assignment 2 Polygon Scan Converter CS248 Presented by Abe Davis Stanford University October 17, 2008 Announcements First thing: read README.animgui. It should tell you everything you need to know

More information

Queen s University CISC 454 Final Exam. April 19, :00pm Duration: 3 hours. One two sided aid sheet allowed. Initial of Family Name:

Queen s University CISC 454 Final Exam. April 19, :00pm Duration: 3 hours. One two sided aid sheet allowed. Initial of Family Name: Page 1 of 11 Queen s University CISC 454 Final Exam April 19, 2005 2:00pm Duration: 3 hours One two sided aid sheet allowed. Initial of Family Name: Student Number: (Write this at the top of every page.)

More information

Unity Animation. Objectives. Animation Overflow. Animation Clips and Animation View. Computer Graphics Section 2 ( )

Unity Animation. Objectives. Animation Overflow. Animation Clips and Animation View. Computer Graphics Section 2 ( ) Unity Animation Objectives How to animate and work with imported animations. Animation Overflow Unity s animation system is based on the concept of Animation Clips, which contain information about how

More information

Introduction to Computer Graphics. Animation (1) May 19, 2016 Kenshi Takayama

Introduction to Computer Graphics. Animation (1) May 19, 2016 Kenshi Takayama Introduction to Computer Graphics Animation (1) May 19, 2016 Kenshi Takayama Skeleton-based animation Simple Intuitive Low comp. cost https://www.youtube.com/watch?v=dsonab58qva 2 Representing a pose using

More information

IK/FK Switch : Rigging

IK/FK Switch : Rigging IK/FK Switch : Rigging www.fridgemonsters.com Page 1 Chris Shaw Copyright and Terms of Use Please leave all references to FridgeMonsters intact in the documentation and code examples. 1. Except as otherwise

More information

ANIMATOR TIMELINE EDITOR FOR UNITY

ANIMATOR TIMELINE EDITOR FOR UNITY ANIMATOR Thanks for purchasing! This document contains a how-to guide and general information to help you get the most out of this product. Look here first for answers and to get started. What s New? v1.53

More information

Ray Tracing Acceleration. CS 4620 Lecture 20

Ray Tracing Acceleration. CS 4620 Lecture 20 Ray Tracing Acceleration CS 4620 Lecture 20 2013 Steve Marschner 1 Will this be on the exam? or, Prelim 2 syllabus You can expect emphasis on topics related to the assignment (Shaders 1&2) and homework

More information

Creating a 3D Characters Movement

Creating a 3D Characters Movement Creating a 3D Characters Movement Getting Characters and Animations Introduction to Mixamo Before we can start to work with a 3D characters we have to get them first. A great place to get 3D characters

More information

Video Textures. Arno Schödl Richard Szeliski David H. Salesin Irfan Essa. presented by Marco Meyer. Video Textures

Video Textures. Arno Schödl Richard Szeliski David H. Salesin Irfan Essa. presented by Marco Meyer. Video Textures Arno Schödl Richard Szeliski David H. Salesin Irfan Essa presented by Marco Meyer Motivation Images lack of dynamics Videos finite duration lack of timeless quality of image Motivation Image Video Texture

More information

Digital Ink and Paint Week 5. Animation: Animated Symbols, Graphic Symbols vs Movie Clip Symbols, Bones, 3D Translation

Digital Ink and Paint Week 5. Animation: Animated Symbols, Graphic Symbols vs Movie Clip Symbols, Bones, 3D Translation Digital Ink and Paint Week 5 Animation: Animated Symbols, Graphic Symbols vs Movie Clip Symbols, Bones, 3D Translation Graphic Symbols and Movie Clips have their own Time Line. You can create animation

More information

Animation. CS 465 Lecture 22

Animation. CS 465 Lecture 22 Animation CS 465 Lecture 22 Animation Industry production process leading up to animation What animation is How animation works (very generally) Artistic process of animation Further topics in how it works

More information

Toon Boom Harmony Premium V15.0

Toon Boom Harmony Premium V15.0 Premium Toon Boom Harmony Premium V15.0 Gaming Guide TOON BOOM ANIMATION INC. 4200 Saint-Laurent, Suite 1020 Montreal, Quebec, Canada H2W 2R2 +1 514 278 8666 contact@toonboom.com toonboom.com Harmony 15

More information

2D/3D Geometric Transformations and Scene Graphs

2D/3D Geometric Transformations and Scene Graphs 2D/3D Geometric Transformations and Scene Graphs Week 4 Acknowledgement: The course slides are adapted from the slides prepared by Steve Marschner of Cornell University 1 A little quick math background

More information

Texturing Theory. Overview. All it takes is for the rendered image to look right. -Jim Blinn 11/10/2018

Texturing Theory. Overview. All it takes is for the rendered image to look right. -Jim Blinn 11/10/2018 References: Real-Time Rendering 3 rd Edition Chapter 6 Texturing Theory All it takes is for the rendered image to look right. -Jim Blinn Overview Introduction The Texturing Pipeline Example The Projector

More information

This lesson will focus on the Bouncing Ball exercise.

This lesson will focus on the Bouncing Ball exercise. This will be the first of an on-going series of Flipbook tutorials created by animator Andre Quijano. The tutorials will cover a variety of exercises and fundamentals that animators, of all skill levels,

More information