2D Graphics Overview

2D Graphics Overview

Sprites are 2D bitmaps drawn directly on the screen, as opposed to being drawn in 3D space. Sprites are commonly used to display information such as health bars, number of lives, or text such as scores. Some games, especially older games, are composed entirely of sprites. This topic discusses sprites in detail, covering the following areas.

2D graphics的应用场景。例如：分数，血条等。

• Overview
• Sprite Origin
• Sprite Depth
• Sampling Textures
• Sprite Scaling
• Sprite Transformation Matrices
• Sprite Fonts
• Sprite Batching
• Render States
• Point Sprites

Overview

Sprites are positioned on the screen by coordinates. The width and height of the screen is the same as the back buffer. The x-axis represents the screen width and the y-axis represents the screen height. It is important to note that the y-axis is measured from the top of the screen and increases as you move down the screen, and the x-axis is measured from left to right. For example, when the graphics back buffer is 800×600, 0,0 is the upper left of the screen, and 800,600 is the lower right of the screen (see Figure 1).

注意XY坐标的起始点都是在屏幕左上角。

 

Figure 1.  A sprite's location in screen coordinates (x-axis 400, y-axis 200)

To draw a sprite, you must create a SpriteBatch object, initialize it by calling Begin, and then call Draw for each sprite. The bitmap information for a sprite is taken from a Texture2D object. The texture may contain alpha channel information to make part of the texture transparent or semi-transparent. You can tint, rotate, or scale sprites by using Draw. This method also gives you the option of drawing only part of the texture on the screen. After you draw the sprites, call End before calling Present.

使用SpriteBatch来绘制Sprite。我们也可以对sprite缩放，旋转，着色。注意，绘制之前需要调用Begin,结束之后调用End。

Sprite Origin

When you draw sprites, the sprite origin is the most important concept. The origin is a specific point on the sprite, which is by default the upper-left corner of the sprite, or (0,0). Draw draws the origin of the sprite at the screen location you specify. For example, if you draw a 50×50 pixel sprite at location (400,200) without specifying an origin, the upper left of the sprite will be on pixel (400,200). If you use the center of the 50×50 sprite as the origin (25,25), to draw the sprite in the same position you must add the origin coordinates to the position. In this case, the position is (425,225) and the origin is (25,25), as shown in Figure 2.

Figure 2.  The blue dot indicates the center coordinate of the sprite

When rotating a sprite, the method uses the origin as the center of the rotation. In these cases, it is common to use the center of the sprite as the origin when calculating where to draw the sprite on the screen.

设置origin，就是设置了sprite的绘制中点。

Sprite Depth

Sprites also have a concept of depth. When drawing a sprite, you can specify a depth between 0 and 1 as a floating-point number. Sprites drawn at a depth of 0 are at the "front" of the screen, and will cover any sprites drawn at a lower depth. Sprites drawn at a depth of 1 are at the "back" of the screen, and will be covered by any sprites drawn at a depth less than 1. 、

精灵的深度代表绘制覆盖顺序，就是深度接近0的在上面，接近1的在后面。

Sampling Textures

A sprite is based on a Texture2D object—in other words, a bitmap. Draw can draw the entire texture, or a portion of the texture. To draw a portion of the texture, use the sourceRectangle parameter to specify which texels to draw as a sprite. A texel is a pixel in the texture. A 32×32 texture has 1024 texels, specified as x and y values similar to how screen coordinates are specified. Specifying a sourceRectangle of (0, 0, 16, 16) would select the upper-left quadrant of a 32×32 texture.

设置sourceRectangle可以绘制部分sprite.

Sprite Scaling

Draw provides three methods of scaling sprites. Draw accepts either a uniform scaling parameter, a nonuniform scaling parameter, or a source and destination rectangle.

三种缩放方式。

 

The uniform scaling parameter is a floating-point number that multiplies the sprite size through both the x- and y-axes. This will shrink or expand the sprite along each axis equally, maintaining the original ratio between the sprite width and height.

统一缩放，根据数值，同时缩放长宽。

 

To scale the x- and y-axes independently, Draw accepts a Vector2 value as a scalar. This Vector2 specifies nonuniform scaling: x- and y-axes are scaled independently according to the X and Y fields of the Vector2.

通过Vector2来设置缩放，可以让长宽独立缩放。

 

Draw also accepts a source and destination rectangle. The destination rectangle is specified in screen coordinates, while the source rectangle is specified in texels. Draw takes the pixels on the texture specified in sourceRectangle and scales them independently along the x- and y-axes until they fit the screen coordinates specified by destinationRectangle.

通过区域来缩放。就是可以截取sprite的一部分，然后绘制到屏幕的某个区域。

Sprite Transformation Matrices

XNA Game Studio includes a feature for sprite batches—the ability to specify a transformation matrix that the batch can apply to each sprite before drawing.

通过SpriteBatch可以设置转换矩阵，以此应用到sprite上面。

 

The transformation matrix can be any combination of translation, rotation, or scaling matrices multiplied together into a single matrix.

这个变换矩阵可以进行组合。

 

This matrix is combined with the sprite position, rotation, scaling, and depth parameters supplied to Draw. Because the matrix also applies to depth, any z-coordinate transformation that makes the sprite depth greater than 1.0 or less than 0.0 will cause the sprite to disappear.

这个矩阵可以包含位置，旋转，缩放和深度信息。注意，深度超过1或者小于0的就没有办法显示出来了。

 

See How To: Rotate a Group of Sprites for an example of matrix rotation, and How To: Scale Sprites Based On Screen Size for an example of matrix scaling.

Sprite Fonts

XNA Game Studio enables you to draw text using SpriteBatch. The DrawString method will draw text on screen with position, color, rotation, origin, and scaling.

可以绘制文字。

 

DrawString also requires a special type of texture encapsulated by the SpriteFont class. A SpriteFont is created by the Content Pipeline when you add a Sprite Font file to your project. The Sprite Font file has information such as the name and point size of the font, and which Unicode characters to include in the SpriteFont texture. At run time, a SpriteFont is loaded with ContentManager.Load just like a Texture2D object.

绘制文字时需要SpriteFont对象。

 

See How To: Draw Text for an example of how to use SpriteFont to draw text, and Sprite Font XML Schema Reference for a list of Sprite Font tags. You can use the Content Pipeline to determine your character regions automatically. For more information, see How To: Extend the Font Description Processor to Support Additional Characters.

Sprite Batching

In normal drawing, the SpriteBatch object does not change any render states or draw any sprites until you call End. This is known as Deferred mode. In Deferred mode, SpriteBatch saves the information from each Draw call until you call End. When you then call End, SpriteBatch changes the graphics device settings and draws each sprite in the batch. End then resets the device settings, if you specified SaveStateMode.SaveState.

默认情况下，调用End方法时，SpriteBatch才会改变显卡设置，并且绘制sprite。这是Deferred模式。

 

If you call Begin, specifying SpriteSortMode.Immediate, it triggers Immediate mode. In Immediate mode, the SpriteBatch immediately changes the graphics device render states to begin drawing sprites. Thereafter, each call to Draw immediately draws the sprite using the current device settings. Calling End resets the device settings, if you specified SaveStateMode.SaveState.

关于Immediate模式。

 

In Immediate mode, once you call Begin on one SpriteBatch instance, do not call it on any other SpriteBatch instance until you call End for the first SpriteBatch.

注意：在Immediate模式下，SpriteBatch对象需要逐个调用Begin和End。

 

Deferred mode is slower than Immediate mode, but it allows multiple instances of SpriteBatch to accept Begin and Draw calls without interfering with each other.

在Deferred模式下，XNA可以接受多个SpriteBatch对象的Begin和End而不会相互影响。

Render States

The SpriteBatch object sets the following render states on the graphics card when drawing sprites.

Render StateValueGraphicsDevice.RenderState.CullModeCullMode.CullCounterClockwiseFaceGraphicsDevice.RenderState.DepthBufferEnablefalseGraphicsDevice.RenderState.AlphaBlendEnabletrueGraphicsDevice.RenderState.AlphaBlendOperationBlendFunction.AddGraphicsDevice.RenderState.SourceBlendBlend.SourceAlphaGraphicsDevice.RenderState.DestinationBlendBlend.InverseSourceAlphaGraphicsDevice.RenderState.SeparateAlphaBlendEnabledfalseGraphicsDevice.RenderState.AlphaTestEnabletrueGraphicsDevice.RenderState.AlphaFunctionCompareFunction.GreaterGraphicsDevice.RenderState.ReferenceAlpha0GraphicsDevice.SamplerStates[0].AddressUTextureAddressMode.ClampGraphicsDevice.SamplerStates[0].AddressVTextureAddressMode.ClampGraphicsDevice.SamplerStates[0].MagFilterTextureFilter.LinearGraphicsDevice.SamplerStates[0].MinFilterTextureFilter.LinearGraphicsDevice.SamplerStates[0].MipFilterTextureFilter.LinearGraphicsDevice.SamplerStates[0].MipMapLevelOfDetailBias0.0fGraphicsDevice.SamplerStates[0].MaxMipLevel0

The most important settings changed are DepthBufferEnable (normally true), AlphaBlendEnable (normally false), and AlphaTestEnable (normally false). You may also want to set TextureAddressMode.Wrap for the AddressU and AddressV sampler states.

最重要的几个属性。

 

The SpriteBatch object also sets the Vertices, Indices, VertexDeclaration, VertexShader, and PixelShader properties on the current GraphicsDevice.

In Immediate mode, all of the render states can be changed before Draw is called, and Draw will use the new render states. How To: Apply a Pixel Shader to Sprites takes advantage of this to apply a custom pixel shader to Draw.

Point Sprites

Point sprites are sprites drawn in 3D space. These sprites are specified by a position and a size. When a point sprite is rendered, it always appears the same size on screen (no matter where the point lies in 3D space relative to the camera) and faces the camera. Point sprites are used to render particle systems. How To: Apply a Pixel Shader to Sprites gives an example of how to render point sprites using a simple pixel and vertex shader.

Point Sprite应用在3D空间中，可以指定位置和大小。注意，point sprite的大小是不会变化的，即使我们移动了camera. 一般我们使用Point Sprite来渲染粒子系统。