SlideShare uma empresa Scribd logo
1 de 25
Baixar para ler offline
Texture, Sprite, 2D Graphics,[object Object],Tran Minh Triet – Nguyen KhacHuy,[object Object],Faculty of Information Technology,[object Object],University of Science, VNU-HCM,[object Object]
Game Flow (1),[object Object],Load,[object Object],Content,[object Object],Start,[object Object],Update,[object Object],Draw,[object Object],End,[object Object],Unload,[object Object],Content,[object Object]
Game Flow (2),[object Object],Initialize,[object Object],LoadContent,[object Object],UnloadContent,[object Object],Update,[object Object],Draw,[object Object]
Sprite and Texture2D,[object Object]
Display 2D Images,[object Object],Loading a Texture using SpriteBatch,[object Object],Rendering Multiple Images to the Screen,[object Object],Drawing an Image into a Rectangle,[object Object],Color Modulation,[object Object]
Rotate, Scale, Mirror an Image,[object Object]
Display Text,[object Object],Create a SpriteFont file,[object Object],Add a SpriteFont variable to your class,[object Object],String Length,[object Object]
Display Text,[object Object]
Adding a Sprite to Your Project,[object Object],Create Images folder within Content,[object Object],Add an image to Images folder,[object Object],Building your solution,[object Object],Show properties window of the image,[object Object],Remember Asset Name,[object Object]
Loading and Drawing Your Sprite,[object Object],Adding a Texture2D variable,[object Object],	Texture2D texture;,[object Object],Loading the actual image file,[object Object],texture = Content.Load<Texture2D>( @"Images/threerings");,[object Object],Drawing within the Draw method ,[object Object],spriteBatch.Begin( );,[object Object],spriteBatch.Draw(texture, Vector2.Zero,Color.White);,[object Object],spriteBatch.End( );,[object Object]
Loading and Drawing Your Sprite,[object Object],Draw method’s parameters,[object Object],		public void Draw ( ,[object Object],			Texture2D texture, ,[object Object],			Vector2 position, ,[object Object],			Color color ),[object Object],texture The sprite texture. ,[object Object],position The location, in screen coordinates, where the sprite will be drawn. ,[object Object],color The color channel modulation to use. Use Color.White for full color with no tinting.,[object Object]
Transparency and Other Options,[object Object],Two ways to render portions of images transparently,[object Object],Having a transparent ,[object Object],	background (*.png),[object Object],The portion of the image ,[object Object],	to be transparent must ,[object Object],	be solid ,[object Object],	magenta (255, 0, 255),[object Object]
Layer Depth,[object Object],The ordering of these overlapping images as the Z-order,[object Object],Change option to draw in the order specified ,[object Object],spriteBatch.Begin ( ,[object Object],			SpriteBlendMode blendMode, ,[object Object],			SpriteSortMode sortMode, ,[object Object],			SaveStateMode stateMode ),[object Object],blendMode Blending options to use when rendering. ,[object Object],sortMode Sorting options to use when rendering. ,[object Object],stateMode Rendering state options.,[object Object]
Layer Depth,[object Object],Specify the layer depth value in the Draw method,[object Object],public void Draw ( ,[object Object],Texture2D texture, ,[object Object],	Vector2 position, ,[object Object],	Nullable<Rectangle> sourceRectangle, ,[object Object],	Color color, ,[object Object],	float rotation, ,[object Object],	Vector2 origin, ,[object Object],	float scale, ,[object Object],	SpriteEffects effects, ,[object Object],float layerDepth ,[object Object],),[object Object]
Let’s Move,[object Object]
Animation,[object Object]
Animation,[object Object]
Animation,[object Object]
Animation,[object Object]
Animation,[object Object],Drawing current frame,[object Object],Point frameSize = new Point(75, 75);,[object Object],Point currentFrame = new Point(0, 0);,[object Object],Point sheetSize = new Point(6, 8);,[object Object],spriteBatch.Draw(texture, Vector2.Zero,,[object Object],    new Rectangle(currentFrame.X * frameSize.X,,[object Object],        currentFrame.Y * frameSize.Y,,[object Object],        frameSize.X, frameSize.Y),,[object Object],    Color.White, 0, Vector2.Zero,,[object Object],    1, SpriteEffects.None, 0);,[object Object]
Animation,[object Object],Moving next frame,[object Object],++currentFrame.X;,[object Object],if (currentFrame.X >= sheetSize.X),[object Object],{,[object Object],    currentFrame.X = 0;,[object Object],    ++currentFrame.Y;,[object Object],    if (currentFrame.Y >= sheetSize.Y),[object Object],        currentFrame.Y = 0;,[object Object],},[object Object]
Framerate, Animation Speed,[object Object],Framerate speed,[object Object],The default is 60 frames per second (fps),[object Object],Change the framerate,[object Object],TargetElapsedTime = new TimeSpan(0, 0, 0, 0, 50);,[object Object],Animation Speed - Add two class-level variables  to track the time between animation frames.,[object Object],timeSinceLastFrame: track how much time has passed since the animation frame was changed,[object Object],millisecondsPerFrame: specify how much time you want to wait before moving the current frame index.,[object Object]
Framerate, Animation Speed,[object Object],int timeSinceLastFrame = 0;,[object Object],int millisecondsPerFrame = 50;,[object Object],timeSinceLastFrame += gameTime.ElapsedGameTime.Milliseconds;,[object Object],if (timeSinceLastFrame > millisecondsPerFrame),[object Object],{,[object Object],    timeSinceLastFrame -= millisecondsPerFrame;,[object Object],	// move to next frame,[object Object],},[object Object]
Q&A,[object Object],?,[object Object]
References,[object Object],XNA SpriteBatch class,[object Object],http://msdn.microsoft.com/en-us/library/microsoft.xna.framework.graphics.spritebatch.draw.aspx,[object Object],Ebook,[object Object],Learning XNA 3.0,[object Object],	O’reilly, Aaron Reed, 2008,[object Object]

Mais conteúdo relacionado

Mais procurados

Zooming an image in visual basic
Zooming an image in visual basicZooming an image in visual basic
Zooming an image in visual basicHotland Sitorus
 
Techwave 2006 Advanced Datawindow Techniques
Techwave 2006 Advanced Datawindow TechniquesTechwave 2006 Advanced Datawindow Techniques
Techwave 2006 Advanced Datawindow TechniquesBuck Woolley
 
CS 354 Graphics Math
CS 354 Graphics MathCS 354 Graphics Math
CS 354 Graphics MathMark Kilgard
 
Visualization of Big Data in Web Apps
Visualization of Big Data in Web AppsVisualization of Big Data in Web Apps
Visualization of Big Data in Web AppsEPAM
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Groupdreambreeze
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Groupbernice-chan
 

Mais procurados (8)

Zooming an image in visual basic
Zooming an image in visual basicZooming an image in visual basic
Zooming an image in visual basic
 
Canvas - HTML 5
Canvas - HTML 5Canvas - HTML 5
Canvas - HTML 5
 
Techwave 2006 Advanced Datawindow Techniques
Techwave 2006 Advanced Datawindow TechniquesTechwave 2006 Advanced Datawindow Techniques
Techwave 2006 Advanced Datawindow Techniques
 
Chapter 13
Chapter 13Chapter 13
Chapter 13
 
CS 354 Graphics Math
CS 354 Graphics MathCS 354 Graphics Math
CS 354 Graphics Math
 
Visualization of Big Data in Web Apps
Visualization of Big Data in Web AppsVisualization of Big Data in Web Apps
Visualization of Big Data in Web Apps
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Group
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Group
 

Destaque

Destaque (6)

Network
NetworkNetwork
Network
 
Maps
MapsMaps
Maps
 
5 fitness quotes that irritate midlife exercisers
5 fitness quotes that irritate midlife exercisers5 fitness quotes that irritate midlife exercisers
5 fitness quotes that irritate midlife exercisers
 
EEX 4070 Action project
EEX 4070 Action projectEEX 4070 Action project
EEX 4070 Action project
 
Un
UnUn
Un
 
Integrate function and cognitive challenges into your older adult fitness groups
Integrate function and cognitive challenges into your older adult fitness groupsIntegrate function and cognitive challenges into your older adult fitness groups
Integrate function and cognitive challenges into your older adult fitness groups
 

Semelhante a Chapter 02 sprite and texture

HTML5 Canvas - Basics.pptx
HTML5 Canvas - Basics.pptxHTML5 Canvas - Basics.pptx
HTML5 Canvas - Basics.pptxAhmadAbba6
 
asmt7~$sc_210_-_assignment_7_fall_15.docasmt7cosc_210_-_as.docx
asmt7~$sc_210_-_assignment_7_fall_15.docasmt7cosc_210_-_as.docxasmt7~$sc_210_-_assignment_7_fall_15.docasmt7cosc_210_-_as.docx
asmt7~$sc_210_-_assignment_7_fall_15.docasmt7cosc_210_-_as.docxfredharris32
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebRobin Hawkes
 
Image contro, and format functions in vb
Image contro, and format functions in vbImage contro, and format functions in vb
Image contro, and format functions in vbAmandeep Kaur
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring CanvasKevin Hoyt
 
XNA L09–2D Graphics and Particle Engines
XNA L09–2D Graphics and Particle EnginesXNA L09–2D Graphics and Particle Engines
XNA L09–2D Graphics and Particle EnginesMohammad Shaker
 
Image_Processing_LECTURE_c#_programming.ppt
Image_Processing_LECTURE_c#_programming.pptImage_Processing_LECTURE_c#_programming.ppt
Image_Processing_LECTURE_c#_programming.pptLOUISSEVERINOROMANO
 
How to make a video game
How to make a video gameHow to make a video game
How to make a video gamedandylion13
 
Programming projects shall be submitted by the date due.  Items tu.docx
Programming projects shall be submitted by the date due.  Items tu.docxProgramming projects shall be submitted by the date due.  Items tu.docx
Programming projects shall be submitted by the date due.  Items tu.docxwkyra78
 
Html5 Canvas Drawing and Animation
Html5 Canvas Drawing and AnimationHtml5 Canvas Drawing and Animation
Html5 Canvas Drawing and AnimationMindfire Solutions
 
Java Graphics
Java GraphicsJava Graphics
Java GraphicsShraddha
 
WP7 HUB_XNA overview
WP7 HUB_XNA overviewWP7 HUB_XNA overview
WP7 HUB_XNA overviewMICTT Palma
 

Semelhante a Chapter 02 sprite and texture (20)

HTML5 Canvas - Basics.pptx
HTML5 Canvas - Basics.pptxHTML5 Canvas - Basics.pptx
HTML5 Canvas - Basics.pptx
 
Scmad Chapter06
Scmad Chapter06Scmad Chapter06
Scmad Chapter06
 
asmt7~$sc_210_-_assignment_7_fall_15.docasmt7cosc_210_-_as.docx
asmt7~$sc_210_-_assignment_7_fall_15.docasmt7cosc_210_-_as.docxasmt7~$sc_210_-_assignment_7_fall_15.docasmt7cosc_210_-_as.docx
asmt7~$sc_210_-_assignment_7_fall_15.docasmt7cosc_210_-_as.docx
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
 
Intro to HTML5 Canvas
Intro to HTML5 CanvasIntro to HTML5 Canvas
Intro to HTML5 Canvas
 
Image contro, and format functions in vb
Image contro, and format functions in vbImage contro, and format functions in vb
Image contro, and format functions in vb
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring Canvas
 
XNA L09–2D Graphics and Particle Engines
XNA L09–2D Graphics and Particle EnginesXNA L09–2D Graphics and Particle Engines
XNA L09–2D Graphics and Particle Engines
 
MIDP: Game API
MIDP: Game APIMIDP: Game API
MIDP: Game API
 
Intake 37 6
Intake 37 6Intake 37 6
Intake 37 6
 
XNA coding series
XNA coding seriesXNA coding series
XNA coding series
 
Image_Processing_LECTURE_c#_programming.ppt
Image_Processing_LECTURE_c#_programming.pptImage_Processing_LECTURE_c#_programming.ppt
Image_Processing_LECTURE_c#_programming.ppt
 
How to make a video game
How to make a video gameHow to make a video game
How to make a video game
 
Intake 38 6
Intake 38 6Intake 38 6
Intake 38 6
 
Programming projects shall be submitted by the date due.  Items tu.docx
Programming projects shall be submitted by the date due.  Items tu.docxProgramming projects shall be submitted by the date due.  Items tu.docx
Programming projects shall be submitted by the date due.  Items tu.docx
 
Html5 Canvas Drawing and Animation
Html5 Canvas Drawing and AnimationHtml5 Canvas Drawing and Animation
Html5 Canvas Drawing and Animation
 
Java4-Graphics.ppt
Java4-Graphics.pptJava4-Graphics.ppt
Java4-Graphics.ppt
 
Java Graphics
Java GraphicsJava Graphics
Java Graphics
 
Computer graphics
Computer graphicsComputer graphics
Computer graphics
 
WP7 HUB_XNA overview
WP7 HUB_XNA overviewWP7 HUB_XNA overview
WP7 HUB_XNA overview
 

Chapter 02 sprite and texture

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.

Notas do Editor

  1. The Initialize method is used to initialize variables and other objects associatedwith your Game1 object. Your graphics device object will be instantiated at this pointand can be used in the Initialize method to help you initialize other objects thatdepend on its settings. You’ll use this method to initialize score values and othersuch items…The LoadContent method is called after the Initialize method, as well as any timethe graphics content of the game needs to be reloaded (e.g., if the graphics device isreset due to the player changing the display settings, or something like that). TheLoadContent method is where you will load all graphics and other content required byyour game, including images, models, sounds, and so on. The Updateand Draw method is called after the LoadContent method finishes, the Game1 object will enter into something known as a game loop. The game loop is running at 60 times per second and calling both Update andDraw.The UnloadContent Method perform special unload operations when the game finish.
  2. Resource: Age of Empire II &amp; Age of Wonder
  3. RotationUsing the rotationargument, you can rotate the image before it is drawn to the screen. You need to specify the angle in radians, so if you want to rotate your image clockwise over 20 degrees, you can specify MathHelper.ToRadians(20); which will do the conversion for you.ScalingIf you want to make your image larger/smaller before it is drawn to the screen, you can specify this in the scale argument. By default, the scaling value is 1, meaning the image should be rendered in its original size. Because this argument accepts a Vector2, you can stretch the image differently in the horizontal and vertical directions.MirroringUsing SpriteEffects.FlipHorizontally or SpriteEffects.FlipVertically, which has the same effect as rotating the image over 180 degrees.
  4. If you have no build errors, this means the content pipeline recognized the format of the image and was able to convert it to an XNAinternal format, and XNAis ready to load and useyour image.The content pipeline uses an asset name to access content resources. By default, all assetnames will be the name of the file the asset represents without the file extension.
  5. -Add a Texture2D variable to your game in the Game1.cs file near the variable declarationsfor your GraphicsDeviceManager and SpriteBatch:-
  6. There are two ways to render portions of images transparently: either the image fileitself must have a transparent background, or the portion of the image that you wantto be transparent must be solid magenta (255, 0, 255)—XNAwill automatically ren-der solid magenta as transparent. Transparency can be saved to certain file formats(such as .png) that make use of an alpha channel. These formats do not contain onlyRGB values; instead, each pixel has an additional alpha channel (the A in RGBA)that determines the transparency of the pixel.
  7. Because one of your images uses transparency, set the first parameter toSpriteBlendMode.AlphaBlendSpriteSortMode Defines the sorting options of rendered sprites. There are five options:• Deferred: sprites are not drawn until SpriteBatch.End is called. Calls are thenforwarded to the graphics device in the order in which they were made. MultipleSpriteBatch objects can make Draw calls without conflict in this mode. (This is thedefault mode.)• Immediate: the Begin call immediately sets the graphics device settings and newDraw calls are immediately drawn. Only one SpriteBatch object can be active at agiven time. This is the fastest mode.• Texture: same as Deferred mode, but sprites are sorted by texture prior to beingdrawn.• BackToFront: same as Deferred mode, but sprites are ordered in front-to-backorder based on the layer depth parameter in the Draw call.• FrontToBack: same as Deferred mode, but sprites are ordered in back-to-frontorder based on the layer depth parameter in the Draw call.SaveStateMode Defines the options for saving a graphics device’s state before and after an effect. There aretwo options:• None: no device state is saved.• SaveState: the device state is saved when Begin is called and restored when End iscalled
  8. TargetElapsedTime = new TimeSpan(0, 0, 0, 0, 50); This tells XNA to only call Game.Update every 50 milliseconds, which equates to a frame rate of 20fps.timeSinceLastFrame: Track how much time has passed since the animation frame was changedmillisecondsPerFrame: The variable will be used to specify how much time you want to wait before moving the current frame index.