[XNA]2D图形概要(2D Graphics Overview)

2D图形概要(2D Graphics Overview)

Sprites are 2D bitmaps that are drawn directly to a render target without using the pipeline for transformations, lighting or effects. 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.

Sprite是能直接在render target上面画2D位图,而不必使用管线(pipeline)实现进行转换,光照,特效.Sprite通常用来展示一些例如血条,剩余生命,或者分数之类的信息.有一些游戏,特别是比较老的(2D居多~~),完全是用Sprite做成的.

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. 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).

Sprite通过坐标被标摆放在屏幕上.屏幕的宽高和Back Buffer的宽高一样.x轴表示屏幕的宽,y轴表示屏幕的高.屏幕的左上角是(0,0),向下y轴+,向右x轴+.比如有一个800*600的back buffer,(0,0)是左上角,那么(800,600)就是右下角.

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

To draw a sprite, create a SpriteBatch object, initialize it by calling Begin, and then call Draw for each sprite. The bitmap data 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 a sprite, call End before calling Present.

为了画Sprite,需要创建一个SpiteBatch对象,通过Begin初始化,然后调用Draw画各个Sprite.Sprite的位图数据来源于Texture2D对象(纹理).纹理可能包含Alpha通道来实现透明或者半透明.你可以通过Draw函数来实现染色,旋转,伸缩你的Sprite.该方法也提供了画纹理的某一部分的功能.当你画完了,在Present之前需要调用End方法.

Sprite Origin

Sprite的圆点

When you draw a sprite, the sprite origin is an 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.

当你要画一个Sprite,Sprite的圆点就是一个很重要的概念了.圆点是Sprite里面一个特殊的点,默认就是Sprite的左上角,或者(0,0).Draw方法通过你传递的圆点和位置(location)来画Sprite.例如,如果你想在一个50*50的Sprite画在(400,200)处,而且没有圆点信息,那么Sprite的左上角坐标就是(400,200).如果你用50*50的中心作为圆点(25,25),去画这个Sprite(同时使用location和origin).这样的话,位置便是(425,225),圆点是(25,25)……

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.

当旋转Sprite的时候,旋转的中心便是这个圆点.在这种情况下,把Sprite的中心作为圆点来计算他们画在屏幕上时就很正常了.

Sprite Depth

Sprite的层次

Sprites also have a concept of depth which is a floating-point number between 0 and 1. Sprites drawn at a depth of 0 are drawn in front of sprites which have a depth of greater than 0; sprites drawn at a depth of 1 are covered by sprites drawn at a depth less than 1.

Sprite也有层次这个概念(其值是从0到1的浮点数).层次为0的Sprite在深度大于0的Sprite的上面.层次为1的Sprite被其他所有层次小于1的Sprite遮盖住……

Sampling Textures

关于纹理

A sprite is based on a Texture2D object—in other words, a bitmap. Use Draw to 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, or texture pixel, to draw. 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.

Sprite是基于Texture2D对象的,也叫位图.用Draw方法整个或者部分纹理.想画部分纹理的画,就需要使用sourceRectangle参数去说明哪些纹理像素需要被画出来.一个32*32的纹理有1024个texels, specified as x and y values similar to how screen coordinates are specified.设定sourceRectangle值为(0,0,16,16)将选择32*32这个纹理的1/4左上角.

Sprite Scaling

Sprite伸缩

Draw provides three options for scaling a sprite: using 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.

Draw函数提供了伸缩Sprite的选项: 使用统一伸缩参数, 不统一伸缩参数, 或者是srcRect和destRect. 统一伸缩参数用一个浮点数来表示伸缩Sprite的x轴和y轴的倍数.这种方法会使得x轴和y轴都同样的伸缩.

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.

当x轴和y轴伸缩的比例不一样时,这时就需要是哟不过Vector2的重载.这个结构体表示这不统一的伸缩: x轴和y轴的伸缩倍数都取决于X和Y成员.

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.

Draw函数当然也有source和desttination  rectangle的重载(就是srcRect,destRect).这个下面不翻译了,都知道是怎么回事,如果有用Win32API的画.

Sprite Transformation Matrices

Sprite转化矩阵

You can also specify a transformation matrix that the batch can apply to each sprite before drawing. 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.

你也可以指定一个转化矩阵,在画之前成批的处理Sprite.转化矩阵可以将任何转化,旋转或者伸缩矩阵合并为一个矩阵.这个包含Sprite位置,旋转,伸缩和层次参数的矩阵,将被提供给Draw方法.因为矩阵也处理层次信息,和z坐标,所以有可能使得Sprite的层次信息大于1.0或者小于0.0,然后导致Sprite看不见了…

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

Sprite字体

Use a SpriteBatch to draw text. 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.

用SpriteBatch来画字体.DrawSrting方法可以画文字的位置,颜色,旋转,圆点,和伸缩等(没想出来怎么翻译…).DrawString需要一个字体纹理对象SpriteFont.当你把Sprite字体添加到工程里面,SpriteFont对象就通过内容管线被创建出来.Sprite字体文件包含字体名称,字体大小,还有哪个unicode字符集被添加进来.运行时,通过ContentManager.Load来加载SpriteFont,就跟加载Texture2D一样.

See 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

Sprite批处理(?)

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.

一般画的时候,SpriteBatch对象不会改变render状态或者画任何Sprite,直到你调用End方法.这就是延迟加载(??没想到好的解释,延迟加载??).在延迟加载模式中,SpriteBatch记录下各个Draw函数的信息,直到你调用End他才会去画.

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.

如果你调用Begin,并且设置了SpriteSorMode.Immediate,就会触发即时模式.在这种模式下,SpriteBatch会立即改变图形设备的Render状态,然后去画Sprite.然后,每一个Draw都会立马去画DrawSprite.(这玩意儿怎么跟Win32里面的一样)

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.

在即时模式中,一旦你调用了这个SpriteBatch的Begin方法,那么在调用End之前不能在调用其他SpriteBatch实例的Begin方法.Begin..End的Scope不能有交集,在这种模式下.

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.

延迟加载模式比即时模式慢,但是他可以使多个实例一起工作,而不会互相打断.

 

PS:

英语就四级那种水平,大家凑合着看~~

看到后面有一点欣慰,在GDI里面想要做图片旋转,基本上是很难的,除了扣像素,或者用IImage做固定度数的旋转,基本上没有其他办法....

而且这个XNA性能还不错(至少在Windows里面看不出来耗多少CPU),以前用GDI做动画很难,现在要easy很多,而且引入的概念也不是很好:-)

另外,原文的地址是: http://msdn.microsoft.com/en-us/library/bb203919.aspx

 

2D图形概要(2D Graphics Overview)

Sprites are 2D bitmaps that are drawn directly to a render target without using the pipeline for transformations, lighting or effects. 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.

Sprite是能直接在render target上面画2D位图,而不必使用管线(pipeline)实现进行转换,光照,特效.Sprite通常用来展示一些例如血条,剩余生命,或者分数之类的信息.有一些游戏,特别是比较老的(2D居多~~),完全是用Sprite做成的.

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. 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).

Sprite通过坐标被标摆放在屏幕上.屏幕的宽高和Back Buffer的宽高一样.x轴表示屏幕的宽,y轴表示屏幕的高.屏幕的左上角是(0,0),向下y轴+,向右x轴+.比如有一个800*600的back buffer,(0,0)是左上角,那么(800,600)就是右下角.

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

To draw a sprite, create a SpriteBatch object, initialize it by calling Begin, and then call Draw for each sprite. The bitmap data 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 a sprite, call End before calling Present.

为了画Sprite,需要创建一个SpiteBatch对象,通过Begin初始化,然后调用Draw画各个Sprite.Sprite的位图数据来源于Texture2D对象(纹理).纹理可能包含Alpha通道来实现透明或者半透明.你可以通过Draw函数来实现染色,旋转,伸缩你的Sprite.该方法也提供了画纹理的某一部分的功能.当你画完了,在Present之前需要调用End方法.

Sprite Origin

Sprite的圆点

When you draw a sprite, the sprite origin is an 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.

当你要画一个Sprite,Sprite的圆点就是一个很重要的概念了.圆点是Sprite里面一个特殊的点,默认就是Sprite的左上角,或者(0,0).Draw方法通过你传递的圆点和位置(location)来画Sprite.例如,如果你想在一个50*50的Sprite画在(400,200)处,而且没有圆点信息,那么Sprite的左上角坐标就是(400,200).如果你用50*50的中心作为圆点(25,25),去画这个Sprite(同时使用location和origin).这样的话,位置便是(425,225),圆点是(25,25)……

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.

当旋转Sprite的时候,旋转的中心便是这个圆点.在这种情况下,把Sprite的中心作为圆点来计算他们画在屏幕上时就很正常了.

Sprite Depth

Sprite的层次

Sprites also have a concept of depth which is a floating-point number between 0 and 1. Sprites drawn at a depth of 0 are drawn in front of sprites which have a depth of greater than 0; sprites drawn at a depth of 1 are covered by sprites drawn at a depth less than 1.

Sprite也有层次这个概念(其值是从0到1的浮点数).层次为0的Sprite在深度大于0的Sprite的上面.层次为1的Sprite被其他所有层次小于1的Sprite遮盖住……

Sampling Textures

关于纹理

A sprite is based on a Texture2D object—in other words, a bitmap. Use Draw to 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, or texture pixel, to draw. 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.

Sprite是基于Texture2D对象的,也叫位图.用Draw方法整个或者部分纹理.想画部分纹理的画,就需要使用sourceRectangle参数去说明哪些纹理像素需要被画出来.一个32*32的纹理有1024个texels, specified as x and y values similar to how screen coordinates are specified.设定sourceRectangle值为(0,0,16,16)将选择32*32这个纹理的1/4左上角.

Sprite Scaling

Sprite伸缩

Draw provides three options for scaling a sprite: using 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.

Draw函数提供了伸缩Sprite的选项: 使用统一伸缩参数, 不统一伸缩参数, 或者是srcRect和destRect. 统一伸缩参数用一个浮点数来表示伸缩Sprite的x轴和y轴的倍数.这种方法会使得x轴和y轴都同样的伸缩.

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.

当x轴和y轴伸缩的比例不一样时,这时就需要是哟不过Vector2的重载.这个结构体表示这不统一的伸缩: x轴和y轴的伸缩倍数都取决于X和Y成员.

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.

Draw函数当然也有source和desttination  rectangle的重载(就是srcRect,destRect).这个下面不翻译了,都知道是怎么回事,如果有用Win32API的画.

Sprite Transformation Matrices

Sprite转化矩阵

You can also specify a transformation matrix that the batch can apply to each sprite before drawing. 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.

你也可以指定一个转化矩阵,在画之前成批的处理Sprite.转化矩阵可以将任何转化,旋转或者伸缩矩阵合并为一个矩阵.这个包含Sprite位置,旋转,伸缩和层次参数的矩阵,将被提供给Draw方法.因为矩阵也处理层次信息,和z坐标,所以有可能使得Sprite的层次信息大于1.0或者小于0.0,然后导致Sprite看不见了…

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

Sprite字体

Use a SpriteBatch to draw text. 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.

用SpriteBatch来画字体.DrawSrting方法可以画文字的位置,颜色,旋转,圆点,和伸缩等(没想出来怎么翻译…).DrawString需要一个字体纹理对象SpriteFont.当你把Sprite字体添加到工程里面,SpriteFont对象就通过内容管线被创建出来.Sprite字体文件包含字体名称,字体大小,还有哪个unicode字符集被添加进来.运行时,通过ContentManager.Load来加载SpriteFont,就跟加载Texture2D一样.

See 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

Sprite批处理(?)

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.

一般画的时候,SpriteBatch对象不会改变render状态或者画任何Sprite,直到你调用End方法.这就是延迟加载(??没想到好的解释,延迟加载??).在延迟加载模式中,SpriteBatch记录下各个Draw函数的信息,直到你调用End他才会去画.

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.

如果你调用Begin,并且设置了SpriteSorMode.Immediate,就会触发即时模式.在这种模式下,SpriteBatch会立即改变图形设备的Render状态,然后去画Sprite.然后,每一个Draw都会立马去画DrawSprite.(这玩意儿怎么跟Win32里面的一样)

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.

在即时模式中,一旦你调用了这个SpriteBatch的Begin方法,那么在调用End之前不能在调用其他SpriteBatch实例的Begin方法.Begin..End的Scope不能有交集,在这种模式下.

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.

延迟加载模式比即时模式满,但是他欲寻多个实例一个工作,而不会互相打断.