Presentation is loading. Please wait.

Presentation is loading. Please wait.

Build your own 2D Game Engine and Create Great Web Games using HTML5, JavaScript, and WebGL. Sung, Pavleas, Arnez, and Pace, 2015. Chapter 7 Manipulating.

Published byShanna Phelps Modified over 8 years ago

Similar presentations

Presentation on theme: "Build your own 2D Game Engine and Create Great Web Games using HTML5, JavaScript, and WebGL. Sung, Pavleas, Arnez, and Pace, 2015. Chapter 7 Manipulating."— Presentation transcript:

1 Build your own 2D Game Engine and Create Great Web Games using HTML5, JavaScript, and WebGL. Sung, Pavleas, Arnez, and Pace, 2015. Chapter 7 Manipulating the Camera

2 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 2 This Chapter Make the camera easier to work with Define default manipulation functionality Interpolate values to support smooth transitions Use of math in describing behaviors Program with multiple views Already know this Transform between Canvas (Device) Coordinate to World Coordinate Support mouse input

3 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 3 Review Encoded in ViewProjection matrix

4 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 4 Camera Manipulations

5 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 5 7.1: Camera Manipulations Project

6 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 6 7.1: Goals Experience common camera manipulation operations Understand the mapping from manipulation operations to camera parameters Implement the manipulation operations

7 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 7 Camera_Manipulation.js: opeations Translate WC window Zoom with respect to center

8 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 8 Zoom towards a fix location Zoom wrt pos (Dye) Delta: from wcCenter towards pos If zoom > 1 wcCenter moves away from pos (see more world) If zoom < 1 wcCenter moves towards pos (see less world) After moved wcCenter, change wcWidth as usual delta: from wcCenter towards pos

9 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 9 Clamp Obj (xform) to Camera WC Bounds

10 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 10 Opposite of clamp: Pan Camera with Obj Camera_Manipulation.js

11 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 11 Testing: WASD: move hero to pan camera (90%) Arrow: move portal clamped (80%) L/R: Camera pan to Left/Right N/M: Zoom wrt center L/R/P/H: Select Left/Right/Portal/Hero J/K: zoom wrt to selected position Put finger over selected object and zoom Object does not change relative position

12 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 12 Powerful functionality, bad user experience Sudden changes resulting from manipulation (e.g., panTo()) May seem incoherent (whole world jumped) Gradual changes (in real life) would be nice

13 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 13 Need for interpolation Gradual change of values: over time in this case Example: two types of interpolations Linear: change with fix rate Exponential: change based on ratio of current value (our turn towards function)

14 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 14 7.2: Camera Interpolation Project

15 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 15 7.2: Goals Understand and work with interpolated results Implement interpolation to support gradual camera parameter changes Understand keys to implementing interpolation Keeping track of and separating: current from final values Support access to current values Need update() to trigger interpolation computation to take current value closer to final value

16 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 16 Interpolate.js: A Utility From: mCurrentValue, Change to: mFinalValue In: mCycles, changes at mRate mCyclesLeft: keeps track of how many left

17 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 17 Interpolate.js: get/set/configure Get current interpolated result setFinalValue() triggers new interpolation Stiffness: how quickly values change Duration: how long to change from initial to final

18 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 18 Interpolate.js: compute intermediate value If cycles left compute Each iteration: linearly changing from current to final Overall: exponential function from initial to final

19 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 19 InterpolateVec2.js Need to interpolate vec2 objects! Vec2.lerp() implements the same interpolate._interpolateValue() For each of the x/y components

20 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 20 CameraState.js: current and final values Notice the references to: Interpolate and InterpolateVec2 Configuration:

21 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 21 CameraState.js: set/get, trigger interpolation Get current values Set: sets final value for interpolation Triggers actual interpolation

22 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 22 Integrate CameraState Camera only reference to CameraState All set/get to wcCenter and wcWidth now refers to CameraState

23 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 23 Camera manipulation: to CameraState

24 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 24 Camera_Manipulate: update + config

25 Ch 7: Camera ManipulationsBuild your own 2D Game Engine. Sung, Pavleas, Arnez, and Pace, 2015. 25 Testing interpolated manipulation Notice the much smoother transitions MyGame.update()  calls camera.update()!! Stiffness: Large values (e.g., 0.8, or 0.9): degenerates to sudden changes Very smaller values (e.g., 0.01): Slow motion effect Duration: Very large values (e.g., 500) Seems to never reach stable value (tiny movements towards the end) Very small values (e.g., 10) Unable to complete the function smoothly Degenerates to sudden jumps at the end

Download ppt "Build your own 2D Game Engine and Create Great Web Games using HTML5, JavaScript, and WebGL. Sung, Pavleas, Arnez, and Pace, 2015. Chapter 7 Manipulating."

Similar presentations

Announcements. Structure-from-Motion Determining the 3-D structure of the world, and/or the motion of a camera using a sequence of images taken by a moving.

Announcements. Structure-from-Motion Determining the 3-D structure of the world, and/or the motion of a camera using a sequence of images taken by a moving.
CSC321: 2011 Introduction to Neural Networks and Machine Learning Lecture 7: Learning in recurrent networks Geoffrey Hinton.

CSC321: 2011 Introduction to Neural Networks and Machine Learning Lecture 7: Learning in recurrent networks Geoffrey Hinton.
1 A/V Production Camera Movements IVCP: Camera Movements2 Camera Movements Often great camera work and movement is not noticeable, doesn ’ t draw attention.

1 A/V Production Camera Movements IVCP: Camera Movements2 Camera Movements Often great camera work and movement is not noticeable, doesn ’ t draw attention.
Richard Yu.  Present view of the world that is: Enhanced by computers Mix real and virtual sensory input  Most common AR is visual Mixed reality virtual.

Richard Yu.  Present view of the world that is: Enhanced by computers Mix real and virtual sensory input  Most common AR is visual Mixed reality virtual.
Motion Tracking. Image Processing and Computer Vision: 82 Introduction Finding how objects have moved in an image sequence Movement in space Movement.

Motion Tracking. Image Processing and Computer Vision: 82 Introduction Finding how objects have moved in an image sequence Movement in space Movement.
Electrical and Computer Engineering Vitaly Gordievsky Alex Trefonas Scott Richard Matt Beckford Final Project Review.

Electrical and Computer Engineering Vitaly Gordievsky Alex Trefonas Scott Richard Matt Beckford Final Project Review.
Motion Analysis Slides are from RPI Registration Class.

Motion Analysis Slides are from RPI Registration Class.
Motion Analysis (contd.) Slides are from RPI Registration Class.

Motion Analysis (contd.) Slides are from RPI Registration Class.
3D orientation.

3D orientation.
Advanced Computer Graphics (Fall 2010) CS 283, Lecture 20: Inverse Kinematics Ravi Ramamoorthi Most slides courtesy.

Advanced Computer Graphics (Fall 2010) CS 283, Lecture 20: Inverse Kinematics Ravi Ramamoorthi Most slides courtesy.
Chapter 10: Coordinate Systems Chapter 10.

Chapter 10: Coordinate Systems Chapter 10.
Now Playing: Gong Sigur Rós From Takk... Released September 13, 2005.

Now Playing: Gong Sigur Rós From Takk... Released September 13, 2005.
© 2003 by Davi GeigerComputer Vision October 2003 L1.1 Structure-from-EgoMotion (based on notes from David Jacobs, CS-Maryland) Determining the 3-D structure.

© 2003 by Davi GeigerComputer Vision October 2003 L1.1 Structure-from-EgoMotion (based on notes from David Jacobs, CS-Maryland) Determining the 3-D structure.
Animation. Outline  Key frame animation  Hierarchical animation  Inverse kinematics.

Animation. Outline  Key frame animation  Hierarchical animation  Inverse kinematics.
TA: Zhicheng Yan Sushma S Kini Mary Pietrowicz

TA: Zhicheng Yan Sushma S Kini Mary Pietrowicz
Scenes, Cameras & Lighting. Outline  Constructing a scene  Using hierarchy  Camera models  Light models.

Scenes, Cameras & Lighting. Outline  Constructing a scene  Using hierarchy  Camera models  Light models.
Another Look at Camera Control

Another Look at Camera Control
Professor Michael J. Losacco CIS 1150 – Introduction to Computer Information Systems System Software Chapter 4.

Professor Michael J. Losacco CIS 1150 – Introduction to Computer Information Systems System Software Chapter 4.
Radial Basis Function Networks

Radial Basis Function Networks
Name That Graph…. Parent Graphs or Base Graphs Linear Quadratic Absolute Value Square Root Cubic Exponential Math 30-11.

Name That Graph…. Parent Graphs or Base Graphs Linear Quadratic Absolute Value Square Root Cubic Exponential Math

Similar presentations

Ads by Google