Microsoft PowerPoint - Chap04.ppt [相容模式]

Size: px

Start display at page:

Download "Microsoft PowerPoint - Chap04.ppt [相容模式]"

璃墩和
5 years ago
Views:

1 本章目的 2D / 3D 遊戲程式設計入門使用 XNA 3.0 與 C# 2D 圖形與字型的呈現介紹 XNA 支援的 2D 圖形格式介紹 2D 圖形的應用範圍以多個範例來示範在 XNA 架構下 2D 圖形和字型的呈現方式介紹 2D 圖形碰撞測試的演算法 1 2 2D 圖形的應用範圍紋理圖展開的 UV 貼圖紋理圖 (Texture) 精靈圖 (Sprite) 小張的背景拼圖大張的背景圖 3 4

2 2D 角色精靈圖無接縫 2D 圖形 5 6 大張捲動的背景圖視窗切割線慢慢往右移動 XNA 可輸入的 2D 圖形格式.BMP 取自 Bitmap 的縮寫, 是無壓縮的點陣圖形檔.DDS 是可以包含有 alpha 值的圖形檔案也可以是有六張貼圖的立體紋理圖 (cube map).dib 與 BMP 相似, 所以 BMP 也被稱為 DIB.HDR 每一個像素除了有 RGB 資訊外, 還有改點的亮度資訊.JPG 全彩及灰階圖形資料標準壓縮檔採用失真壓縮演算法.PFM 一種字型格式.PNGPNG 是包含有 alpha 值的圖形檔案.PPM 可移植的像素映射位圖檔.TGA 全稱 Truevision Targa, 包含有 alpha 值的圖形檔案 7 8

3 MipMap 圖一個典型的 2D 圖形上載與繪出方式 MipMap (Multum in Parvo) public class Game1 :Microsof.Xna.Framework.Game // 宣告一個 Texture2D 參照 Texture2D myspritetexture; protected override void LoadContent() // 上載一張 2D 圖形 myspritetexture = Content.Load<Texture2D>("png-0001"); Protected override void Draw(GameTime gametime) // 繪出 Texture2D spritebatch.begin(); Vector2 pos = new Vector2(100, 100); spritebatch.draw(myspritetexture, pos, Color.White); spritebatch.end(); 9 10 呈現出一個 2D 圖形 protected override void Draw(GameTime gametime) graphics.graphicsdevice.clear(color.cornflowerblue); // TODO: Add your drawing code here spritebatch.begin(); Vector2 pos = new Vector2(0, 0); spritebatch.draw( myspritetexture, t re pos, // 位置 } Color.White); // 過濾顏色也就是完全不過濾 spritebatch.end(); base.draw(gametime); 11 縮放或呈現部分 2D 圖形 // 方式 1 : 目的地位置 Vector2 pos = new Vector2(0, 0); spritebatch.draw(myspritetexture, t t pos, // 位置 Color.White); // 過濾顏色也就是完全不過濾 // 方式 2 : 改變過濾顏色 pos.x = 150; spritebatch.draw(myspritetexture, pos, Color.Red); // 只要紅色 12

4 縮放或呈現部分 2D 圖形 // 方式 3 : 標示目的地的位置和寬高 Rectangle rec = new Rectangle(300, 10, 43, 64); spritebatch.draw(myspritetexture, rec, Color.White); // 方式 4 : 標示目的地位置寬高和來源矩形的位置寬高 Rectangle rec2 = new Rectangle(400, 10, 340, 210); Rectangle rec_src = new Rectangle(40, 20, 380, 230); spritebatch.draw(myspritetexture, p rec2, rec_ SRC, Color.White); 旋轉的 2D 圖形 Rectangle recdest = new Rectangle(graphics.GraphicsDevice.Viewport.Width / 2, graphics.graphicsdevice.viewport.height / 2, myspritetexture.width, myspritetexture.height); spritebatch.draw(myspritetexture, // 2D Texture recdest, // 目的區的矩形區塊 null, // 來源區的矩形區塊 Color.White, // 顏色濾鏡 MathHelper.ToRadians(Angle), // 旋轉徑度 new Vector2(mySpriteTexture.Width / 2, myspritetexture.height / 2), // 2D Texture 旋轉中心點 SpriteEffects.None, // 旋轉效果 06f); 0.6f); // 圖層深度 ~ 10( 1.0 後 ) SpriteSortMode.BackToFront SpriteSortMode.FrontToBack 圖層深度為 1.0 圖層深度為 0.8 圖層深度為 0.6 圖層深度為圖層深度為 0.0 SpriteSortMode.BackToFront SpriteSortMode.FrontToBack 圖層深度為圖層深度為 8.0 圖層深度為 0.6 圖層深度為 0.5 圖層深度為

5 兩個矩形是否在水平方向 (X 軸 ) 重疊兩個矩形是否在垂直方向 (Y 軸 ) 重疊 X1 X2 如果 X2 > X3 而且 X4 > X1 Y1 Y2 Y3 Y 軸 X3 X 軸 X4 Y 使用無接縫圖佈滿視窗客戶區 W i=0 i=1 i=2 i = W / BG_ Texture.Width 使用捲動的無接縫圖佈滿視窗客戶區 j =-1 i = -1 i = 0 i = 1 i = W / BG_Texture.Width j = 0 BG_Texture.Width H j = 1 BG_Texture.Height BG_ Texture.Width j = 0 BG_Texture.Height j = H / BG_Texture.Height j = H / BG_Texture.Height 19 20

6 有 16 個小圖的角色圖加入字型項往前行走往後行走往右行走往左行走 Courier New.spritefont 字型項目 SpriteBatch.DrawString() 第一種格式 :( 簡易型 ) SpriteBatch.DrawString t St i (SpriteFont, t String, Vector2, Color); 使用範例 : spritebatch.drawstring(font1, // 字型 message, // 字串 FontPos, // 位置 Color.Black // 字的顏色 ); 23 24

7 SpriteBatch.DrawString() SpriteBatch.DrawString (SpriteFont, String, Vector2, Color, Single, Vector2, Single, SpriteEffects, Single); 使用範例 : spritebatch.drawstring(font1, // 字型 message, // 字串 FontPos, // 位置 Color.Black, // 字的顏色 0, // 旋轉角度 FontOrigin,// 字串中心點 3.0f, // 縮放倍數 SpriteEffects.None,// 旋轉效果 0); // 圖層深度 ~ 10( 1.0 後 ) SpriteBatch.DrawString() SpriteBatch.DrawString (SpriteFont, String, Vector2, Color, Single, Vector2, Vector2, SpriteEffects, Single); 使用範例 : spritebatch.drawstring(font1, // 字型 message, // 字串 FontPos, // 位置 Color.Black, // 字的顏色 0, // 旋轉角度 FontOrigin,// 字串中心點 new Vector2(2,3), // 縮放倍數 SpriteEffects.None,// 旋轉校果 0); // 圖層深度 ~ 10( 1.0 後 ) The End 27

Microsoft PowerPoint - Chap03.ppt [相容模式]

Microsoft PowerPoint - Chap03.ppt [相容模式] 本章目的 2D / 3D 遊戲程式設計入門使用 XNA 3.0 與 C# 探討 XNA 遊戲程式內部的基本架構與遊戲開發流程示範如何完成一個簡單的 XNA 遊戲方案第三章 XNA 遊戲程式基本架構 1 2 新增 XNA 專案新增 XNA 專案 3 4 XNA 相關的命名空間 Game1.cs 程式中的六個函數 using Microsoft.Xna.Framework; // 和 XNA 架構相關的型別