2D SIDE SCROLLING WITH XNA - LECTURE 15: 2D SPRITE GRAPHICS

Công Nghệ Thông Tin, it, phầm mềm, website, web, mobile app, trí tuệ nhân tạo, blockchain, AI, machine learning - Báo cáo khoa học, luận văn tiến sĩ, luận văn thạc sĩ, nghiên cứu - Công nghệ thông tin gamedesigninitiative at cornell university the 2D Sprite Graphics Lecture 15 gamedesigninitiative at cornell university the Graphics Lectures — Drawing Images — SpriteBatch interface — Coordinates and Transforms — Drawing Perspective — Camera — Projections — Drawing Primitives — Color and Textures — Polygons 2D Sprite Graphics bare minimum to draw graphics side-scroller vs. top down necessary for lighting shadows 2 gamedesigninitiative at cornell university the Take Away for Today — Coordinate Spaces and drawing — What is screen space? Object space? — How do we use the two to draw objects? — Do we need any other spaces as well? — Drawing Transforms — What is a drawing transform? — Describe the classic types of transforms. — List how to use transforms in a game. 2D Sprite Graphics3 gamedesigninitiative at cornell university the The SpriteBatch Interface — In this class we restrict you to 2D graphics — 3D graphics are much more complicated — Covered in much more detail in other classes — Art 1701: Artist tools for 3D Models — CS 4620: Programming with 3D models — In XNA, use the interface SpriteBatch — Sprite: Pre-rendered 2D (or even 3D) image — All you do is composite the sprites together 2D Sprite Graphics4 gamedesigninitiative at cornell university the — Use coordinate systems — Each pixel has a coordinate — Draw something at a pixel by — Specifying what to draw — Specifying where to draw — Do we draw each pixel? — Use a drawing API — Given an image; does work — This is what XNA provides 2D Sprite Graphics Drawing in 2 Dimensions y x (2,4) (-1,-1) 5 gamedesigninitiative at cornell university the Sprite Coordinate Systems — Screen coordinates: where to paint the image — Think screen pixels as a coordinate system — Very important for object transformations — Example: scale, rotate, translate — In 2D, origin is typically top left of screen — Object coordinate: location of pixels in object — Think of sprite as an image file (it often is) — Coordinates are location of pixels in this file — Unchanged when object moves about screen 2D Sprite Graphics6 gamedesigninitiative at cornell university the Sprite Coordinate Systems +y (0,0) +x Object: (0,0) Screen: (300,200) 2D Sprite Graphics7 gamedesigninitiative at cornell university the Drawing Sprites — Basic instructions: — Set origin for the image in object coordinates — Give the SpriteBatch a point to draw at — Screen places origin of image at that point — What about the other pixels? — Depends on transformations (rotated? scaled?) — But these (almost) never affect the origin — Sometimes we can reset the object origin 2D Sprite Graphics8 gamedesigninitiative at cornell university the Sprite Coordinate Systems +y (0,0) +x Object: (0,0) Screen: (300,200) 2D Sprite Graphics9 gamedesigninitiative at cornell university the Sprite Coordinate Systems 2D Sprite Graphics10 gamedesigninitiative at cornell university the Sprite Coordinate Systems +y (0,0) +x Object: (0,50) Screen: (300,200) 2D Sprite Graphics11 gamedesigninitiative at cornell university the Drawing with SpriteBatch Draw(GameTime time) { … spriteBatch.Begin(); spriteBatch.Draw(image0,origin0,color0); spriteBatch.Draw(image1,origin1,color1); … spriteBatch.End(); … } 2D Sprite Graphics screen coordinates 12 gamedesigninitiative at cornell university the 2D Transforms — A function T : R2→R2 — “Moves” one set of points to another set of points — Transforms one “coordinate system” to another — The new coordinate system is the distortion — Idea: Draw on paper and then “distort” it — Examples: Stretching, rotating, reflecting — Determines placement of “other” pixels — Also allows us to get multiple images for free 2D Sprite Graphics13 gamedesigninitiative at cornell university the The “Drawing Transform” — T : object coords → screen coords — Assume pixel (a,b) in art file is blue — Then screen pixel T(a,b) is blue — We call T the object map — By default, object space = screen space — Color of image at (a,b) = color of screen at (a,b) — By drawing an image, you are transforming it — S an image; transformed image is T(S) 2D Sprite Graphics14 gamedesigninitiative at cornell university the Example: Translation — Simplest transformation: T(v) = v + u — Shifts object in direction u — Distance shifted is magnitude of u — Used to place objects on screen — By default, object origin is screen origin — T(v) = v + u places object origin at u 2D Sprite Graphics S T(S) 15 gamedesigninitiative at cornell university the Composing Transformations — Example: T : R2→R2, S : R2→R2 — Assume pixel (a,b) in art file is blue — Transform T makes pixel T(a,b) blue — Transform ST makes pixel S(T(a,b)) blue — Strategy: use transforms as building blocks — Think about what you want to do visually — Break it into a sequence of transforms — Compose the transforms together 2D Sprite Graphics16 gamedesigninitiative at cornell university the Application: Scrolling 2D Sprite Graphics Screen World World origin Screen origin 17 gamedesigninitiative at cornell university the Application: Scrolling 2D Sprite Graphics Screen World World origin Screen origin Object origin 18 gamedesigninitiative at cornell university the Scrolling: Two Translations — Place object in the World at point p = (x,y) — Basic drawing transform is T(v) = v+p — Suppose Screen origin is at q = (x’,y’) — Then object is on the Screen at point p-q — S(v) = v-q transforms World coords to Screen — ST(v) transforms the Object to the Screen — This separation makes scrolling easy — To move the object, change T but leave S same — To scroll the screen, change S but leave T same 2D Sprite Graphics19 gamedesigninitiative at cornell university the Scrolling: Practical Concerns — Many objects will exists outside screen — Can draw if want; graphics ca...

game design initiative

at cornell university the

2D Sprite Graphics

Lecture 15

Take Away for Today

—   Coordinate Spaces and drawing

—   What is screen space? Object space?

—   How do we use the two to draw objects?

—   Do we need any other spaces as well?

—   Drawing Transforms

—   What is a drawing transform?

—   Describe the classic types of transforms

The SpriteBatch Interface

—   In this class we restrict you to 2D graphics

—   3D graphics are much more complicated

—   Covered in much more detail in other classes

—  Art 1701: Artist tools for 3D Models

—  CS 4620: Programming with 3D models

—   In XNA, use the interface SpriteBatch

—   Sprite: Pre-rendered 2D (or even 3D) image

—   All you do is composite the sprites together

—   Use coordinate systems

—   Each pixel has a coordinate

—   Draw something at a pixel by

—   Specifying what to draw

—   Specifying where to draw

—   Do we draw each pixel?

—   Use a drawing API

—   Given an image; does work

Sprite Coordinate Systems

—   Screen coordinates: where to paint the image

—   Think screen pixels as a coordinate system

—   Very important for object transformations

—   In 2D, origin is typically top left of screen

—   Object coordinate: location of pixels in object

—   Think of sprite as an image file (it often is)

—   Coordinates are location of pixels in this file

—   Unchanged when object moves about screen

Sprite Coordinate Systems

Object: (0,0) Screen: (300,200)

Drawing Sprites

—   Basic instructions:

—   Set origin for the image in object coordinates

—   Give the SpriteBatch a point to draw at

—   Screen places origin of image at that point

—   What about the other pixels?

—   Depends on transformations (rotated? scaled?)

—   But these (almost) never affect the origin

—   Sometimes we can reset the object origin

Sprite Coordinate Systems

Object: (0,0) Screen: (300,200)

Sprite Coordinate Systems

Sprite Coordinate Systems

Object: (0,50) Screen: (300,200)

Drawing with SpriteBatch

screen coordinates

2D Transforms

—   A function T : R2→ R2

—   “Moves” one set of points to another set of points

—   Transforms one “coordinate system” to another

—   The new coordinate system is the distortion

—   Idea: Draw on paper and then “distort” it

—   Examples: Stretching, rotating, reflecting

—   Determines placement of “other” pixels

The “Drawing Transform”

—   T : object coords → screen coords

—   Assume pixel (a,b) in art file is blue

—   Then screen pixel T(a,b) is blue

—   We call T the object map

—   By default, object space = screen space

—   Color of image at (a,b) = color of screen at (a,b)

—   By drawing an image, you are transforming it

—   S an image; transformed image is T(S)

Example: Translation

—   Simplest transformation: T(v) = v + u

—   Shifts object in direction u

—   Distance shifted is magnitude of u

—   Used to place objects on screen

—   By default, object origin is screen origin

—   T(v) = v + u places object origin at u

Composing Transformations

—   Example: T : R2→ R2, S : R2→ R2

—   Assume pixel (a,b) in art file is blue

—   Transform T makes pixel T(a,b) blue

—   Transform S !T makes pixel S(T(a,b)) blue

—   Strategy: use transforms as building blocks

—   Think about what you want to do visually

—   Break it into a sequence of transforms

—   Compose the transforms together

Scrolling: Two Translations

—   Place object in the World at point p = (x,y)

—   Basic drawing transform is T(v) = v+p

—   Suppose Screen origin is at q = (x’,y’)

—   Then object is on the Screen at point p-q

—   S(v) = v-q transforms World coords to Screen

—   S !T(v) transforms the Object to the Screen

—   This separation makes scrolling easy

—   To move the object, change T but leave S same

Scrolling: Practical Concerns

—   Many objects will exists outside screen

—   Can draw if want; graphics card will drop them

—   It is expensive to keep track of them all

—   But is also unrealistic to always ignore them

—   In graphics, drawing transform = matrix

—   Hence composition = matrix multiplication

—   Details beyond the scope of this course

—   XNA handles all of this for you (sort of)

Using Transforms in XNA

—   XNA has methods for creating transforms

—   Important: transforms are all 3D, not 2D

—  Just make sure the z-value is always 0

—   Methods are part of the Matrix class

—  Matrix.CreateTranslation(x,y,z

—   Parameters fill in details about transform

—   Example: Position (x,y,z) if a translation

Positioning in XNA

Draw(GameTime time) {"

Vector2 origin = new Vector2(0,0);"

Vector2 oPos = object.Position();"

Matrix tran = Matrix.CreateTranslation(oPos.x,oPos.y,0);"

"

spriteBatch.End();"

too advanced for this class

Translate origin to position in world

Positioning in XNA

Draw(GameTime time) {"

Vector2 origin = new Vector2(0,0);"

Vector2 oPos = object.Position();"

Matrix tran = Matrix.CreateTranslation(oPos.x,oPos.y,0);"

Vector2 wPos = viewWindow.Position();"

Matrix wTran = Matrix.CreateTranslation(-wPos.x,-wPos.y,0);" Matrix tran = Matrix.multiply(wTran,oTran);"

spriteBatch.End();"

Positioning in XNA

Draw(GameTime time) {"

Vector2 origin = new Vector2(0,0);"

Vector2 oPos = object.Position();"

Matrix tran = Matrix.CreateTranslation(oPos.x,oPos.y,0);"

Vector2 wPos = viewWindow.Position();"

Matrix wTran = Matrix.CreateTranslation(-wPos.x,-wPos.y,0);" Matrix tran = Matrix.multiply(wTran,oTran);"

spriteBatch.End();"

A Hybrid Approach

// Just get translation for window"

Vector2 wPos = viewWindow.Position();"

Matrix tran = Matrix.CreateTranslation(-wPos.x,-wPos.y,0);"

// Apply window translation to contents of SpriteBatch"

// Use oPos for origin"

spriteBatch.End();"

Matrix Transform Gallery

—   Uniform Scale:

Matrix Transform Gallery

—   Nonuniform Scale:

Matrix.CreateScale(sx,sy,1);

Matrix Transform Gallery

—   Rotation:

Matrix Transform Gallery

—   Reflection:

—   View as special case of Scale

Matrix Transform Gallery

—   Shear:

Image-By-Image Transforms

spriteBatch.Draw("

color,

Image-By-Image Transforms

spriteBatch.Draw("

color,

Compositing Transforms

—   In general not commutative: order matters!

Compositing Transforms

—   In general not commutative: order matters!

A Word About Scaling

—   If making smaller, it drops out pixels

—   Suppose T(v) = 0.5v

—   (0,0) = T(0,0); pixel (0,0) colored from (0,0) in file

—   (0,1) = T(0,2); pixel (0,1) colored from (0,2) in file

—   But if making larger, it duplicates pixels

—   Suppose T(v) = 2v

—   (0,1) = T(0,0.5); pixel (0,1) colored from (0,1) in file

—   (0,1) = T(0,1); pixel (0,2) colored from (0,1) in file

—   This can lead to jaggies

—   Jaggies: Image is blocky

—   Possible to smooth image

—   Done through blurring

—   Some graphic card support

—   Solution for games

—   Shrinking is okay

—   Enlarging not (always) okay

Scaling and Jaggies

Summary

—   Drawing is all about coordinate systems

—   Object coords: Coordinates of pixels in image file

—   Screen coords: Coordinates of screen pixels

—   Transforms alter coordinate systems

—   “Multiply” image by matrix to distort them

—   Multiply transforms together to combine them

—  Matrices are not commutative

—  First transform goes on “the right”