What is a Sprite Screen Coordinate System Sprite

大綱 • What is a Sprite • Screen Coordinate System • Sprite Origin • Sprite Depth • Color Key • Alpha Blending • Drawing a Sprite • Sprite. Batch Class • 範例 • Rendering Text • 參考資料

What is a Sprites are 2 D 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.

Screen Coordinate System 800× 480 X 0 (0, 0) Y 479 0 799

Alpha Blending Destination（目標） 紅色區域 alpha = 1. 0 白色區域 alpha = 0. 5 Source（來源）

Drawing a Sprite 1. Derive a class from Game. 2. Define a Sprite. Batch object as a field on your game class. 1 2

3. In your Load. Content method, construct the Sprite. Batch object, passing the current graphics device. 4. Load the textures that will be used for drawing sprites in Load. Content. 3 private Texture 2 D Sprite. Texture; protected override void Load. Content() { sprite. Batch = new Sprite. Batch(Graphics. Device); Sprite. Texture = Content. Load<Texture 2 D>("ship"); 4 }

5. In the overridden Draw method, call Clear. 6. After Clear, call Begin on your Sprite. Batch object. 7. Create a Vector 2 to represent the screen position of the sprite. 8. Call Draw on your Sprite. Batch object, passing the texture to draw, the screen position, and the color to apply. 9. Use Color. White to draw the texture without any color effects. 10. When all the sprites have been drawn, call End on your Sprite. Batch object.

protected override void Draw(Game. Time game. Time) { 5 Graphics. Device. Clear(Color. Cornflower. Blue); 6 sprite. Batch. Begin(); 7 Vector 2 pos = new Vector 2(100, 200); 8 sprite. Batch. Draw(Sprite. Texture, pos, Color. White); 9 sprite. Batch. End(); base. Draw(game. Time); }

Sprite. Batch Class 用於繪製一批具有相同設定的 sprites。 Constructor public Sprite. Batch (Graphics. Device graphics. Device) 範例 Sprite. Batch sprite. Batch; sprite. Batch = new Sprite. Batch(Graphics. Device);

Public Methods Begins a sprite batch operation. public void Begin () public void Begin (Sprite. Sort. Mode sort. Mode, Blend. State blend. State) sort. Mode 若為 null，代表預設值 Sprite. Sort. Mode. Defered。 blend. State 若為 null，代表預設值 Blend. State. Alpha. Blend。

Sprite. Sort. Mode public enum Sprite. Sort. Mode; 成員名稱 說明 Defered Sprites are not drawn until End is called. End will apply graphics device settings and draw all the sprites in one batch, in the same order calls to Draw were received. This mode allows Draw calls to two or more instances of Sprite. Batch without introducing conflicting graphics device settings. Sprite. Batch defaults to Deferred mode. Immediate Begin will apply new graphics device settings, and sprites will be drawn within each Draw call. In Immediate mode there can only be one active Sprite. Batch instance without introducing conflicting device settings.

Back. To. Front Same as Deferred mode, except sprites are sorted by depth in back-to-front order prior to drawing. This procedure is recommended when drawing transparent sprites of varying depths. Front. To. Back Same as Deferred mode, except sprites are sorted by depth in front-to-back order prior to drawing. This procedure is recommended when drawing opaque sprites of varying depths. Texture Same as Deferred mode, except sprites are sorted by texture prior to drawing. This can improve performance when drawing non-overlapping sprites of uniform depth.

Public Methods Adds a sprite to a batch of sprites to be rendered. public void Draw (Texture 2 D texture, Vector 2 position, Color color) texture A texture. position The location (in screen coordinates) to draw the sprite. color The color to tint a sprite. Use Color. White for full color with no tinting. position texture

Public Methods public void Draw (Texture 2 D texture, Vector 2 position, Nullable<Rectangle> source. Rectangle, Color color) source. Rectangle A rectangle that specifies (in texels) the source texels from a texture. Use null to draw the entire texture. position source. Rectangle texture

Public Methods public void Draw (Texture 2 D texture, Rectangle destination. Rectangle, Color color) destination. Rectangle texture A rectangle that specifies (in screen coordinates) the destination for drawing the sprite. If this rectangle is not the same size as the source rectangle, the sprite will be scaled to fit. destination. Rectangle

Public Methods public void Draw (Texture 2 D texture, Rectangle destination. Rectangle, Nullable<Rectangle> source. Rectangle, Color color) source. Rectangle destination. Rectangle

Public Methods public void Draw (Texture 2 D texture, Vector 2 position, Nullable<Rectangle> source. Rectangle, Color color, float rotation, Vector 2 origin, float scale, Sprite. Effects effects, float layer. Depth) rotation Specifies the angle (in radians) to rotate the sprite about its center. origin The sprite origin; the default is (0, 0) which represents the upperleft corner. scale Scale factor. effects Effects to apply. layer. Depth The depth of a layer. By default, 0 represents the front layer and 1 represents a back layer. Use Sprite. Sort. Mode if you want sprites to be sorted during drawing.

Sprite. Effects public enum Sprite. Effects; 成員名稱 說明 Flip. Horizontally Rotate 180 degrees about the Y axis before rendering. Flip. Vertically Rotate 180 degrees about the X axis before rendering. None No rotations specified. Flip. Horizontally Flip. Vertically

Public Methods public void Draw (Texture 2 D texture, Vector 2 position, Nullable<Rectangle> source. Rectangle, Color color, float rotation, Vector 2 origin, Vector 2 scale, Sprite. Effects effects, float layer. Depth) scale Scale factor (sx, sy).

Public Methods public void Draw (Texture 2 D texture, Rectangle destination. Rectangle, Nullable<Rectangle> source. Rectangle, Color color, float rotation, Vector 2 origin, Sprite. Effects effects, float layer. Depth) destination. Rectangle 提供繪圖位置與縮放比例的資訊

Public Methods Flushes the sprite batch and restores the device state to how it was before Begin was called. public void End ()

Vector 2 Center. Of. Viewport (Viewport v) { Vector 2 center = new Vector 2(v. X + v. Width/2, v. Y+v. Height/2); return center; } protected override void Draw(Game. Time game. Time) { Graphics. Device. Clear(background. Color); Vector 2 cov = Center. Of. Viewport (Graphics. Device. Viewport); Vector 2 position = new Vector 2( cov. X – sprite. Width/2, cov. Y – sprite. Height/2); sprite. Batch. Begin(); sprite. Batch. Draw(sprite, position, Color. White); sprite. Batch. End(); base. Draw(game. Time); }

protected override void Draw(Game. Time game. Time) { Graphics. Device. Clear(background. Color); Vector 2 cov = Center. Of. Viewport(Graphics. Device. Viewport); Vector 2 sprite_origin = new Vector 2(sprite. Width/2, sprite. Height/2); sprite. Batch. Begin(); sprite. Batch. Draw(sprite, cov, null, Color. White, (float) (Math. PI / 6. 0), sprite_origin, 1, Sprite. Effects. None, 0); sprite. Batch. End(); base. Draw(game. Time); }

範例三：Sprite. Sort. Mode (Sprite. Sort. Order. rar) 觀察一：在 sprite. Batch. Begin 中指定排序方式。 觀察二：在 sprite. Batch. Draw 中指定個別 sprite 的深度 。

void Draw. Sprite (Texture 2 D sprite, Vector 2 position, float order) { sprite. Batch. Draw (sprite, position, null, Color. White, 0, Vector 2. Zero, 1, Sprite. Effects. None, order); } void Draw. Sprites (Sprite. Sort. Mode mode, int xoffset) { sprite. Batch. Begin(mode, Blend. State. Alpha. Blend); Draw. Sprite(sprite 1, new Vector 2(xoffset, 100), } 0. 5 f); // 中 Draw. Sprite(sprite 2, new Vector 2(xoffset+75, 175), 0 ); // 前 Draw. Sprite(sprite 3, new Vector 2(xoffset+150, 250), 1 ); // 後

執行結果 Draw. Sprites(Sprite. Sort. Mode. Deferred, 85); Draw. Sprites(Sprite. Sort. Mode. Back. To. Front, 285); Draw. Sprites(Sprite. Sort. Mode. Front. To. Back, 485);

. spritefont 檔案格式解說 • XML 格式的文字檔。 • <Font. Name>Segoe UI Mono</Font. Name> 字型名稱 • <Size>14</Size> 文字大小（單位為 point） • <Style>Regular</Style> 文字樣式：Regular, Bold, Italic（標準、粗體、斜體）

<!-Character. Regions control what letters are available in the font. Every character from Start to End will be built and made available for drawing. The default range is from 32, (ASCII space), to 126, ('~'), covering the basic Latin character set. The characters are ordered according to the Unicode standard. See the documentation for more information. --> <Character. Regions> <Character. Region> <Start> </Start> <End>~ </End> </Character. Regions>

利用 Sprite. Font. Measure. String 來計算字串的寬與高 public Vector 2 Measure. String (string text) • 參數 text 是欲測量寬與高的字串。 • 傳回值為 Vector 2 型態，其中 X 為寬度，Y 為 高度，單位都是像素。 範例 Vector 2 size = font. Measure. String(“Hello, XNA”); // size. X 是寬度 // size. Y 是高度

顯示中文字 把程式用到的所有中文字，按照左 圖所示的格式加進字型描述檔中。 string msg = "哈囉, XNA"; float msg. Width = font. Measure. String(msg). X; Vector 2 position = new Vector 2((graphics. Preferred. Back. Buffer. Width - msg. Width) / 2, 0); sprite. Batch. Begin(); sprite. Batch. Draw. String(font, msg, position, Color. White); sprite. Batch. End();

Sprite. Font Class

Sprite. Batch. Draw. String() 方法