在XNA中如何在螢幕上顯示圖片
2D貼圖程式流程:
貼一張圖片需先將圖片加入到專案的Content裡面程式才能夠讀取到,在Content按右鍵=>加入=>現有項目,就可以把圖片加入到專案中。
在來看一下圖片在XNA裡所提供的屬性有哪些,在點擊檔案圖片後下方會出現圖片屬性的視窗,如下圖:
Asset name這個屬性主要是在將圖片轉成xnb檔後的檔名,此名稱在專案中是不能重複的,再來就是建置動作,它會將圖片編譯成xnb檔,複製到輸入目錄,選擇不要複製的原因在於通常不會將原本類型的檔案輸出到編譯後的目錄去。
再來就是程式碼的撰寫:
在遊戲類別一開始就必須先宣告一些會用到的變數。
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
之後再到LoadContent這個函數裡面撰寫讀取我們所需要用到的圖片的程式碼。
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
在UnloadContent這個函數裡面都是撰寫我們在遊戲中所要釋放的資源,物件都會有一個成員函數可以使用Dispose(),最主要就是在不需要用到該資源時就會釋放該資源,再次使用到時就會去LoadContent去讀取該資源。
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
然後再到Draw函數裡面真正的顯示出圖片,要顯示圖片就必須用到開啟新專案時就有預設好的一個變數spriteBatch,必須使用到裡面Draw這個成員函數才能顯示圖片,這邊使用最簡單的三個參數輸入,第一個參數為圖片變數,第二個參數為圖片位置,第三個參數是整張圖片的顏色,而spriteBatch.Draw()必須在spriteBatch.Begin()和spriteBatch.End()之間,這樣就可以把圖片顯示到視窗螢幕上了。
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
2D貼圖程式範例:
01
using System;
02
using System.Collections.Generic;
03
using System.Linq;
04
using Microsoft.Xna.Framework;
05
using Microsoft.Xna.Framework.Audio;
06
using Microsoft.Xna.Framework.Content;
07
using Microsoft.Xna.Framework.GamerServices;
08
using Microsoft.Xna.Framework.Graphics;
09
using Microsoft.Xna.Framework.Input;
10
using Microsoft.Xna.Framework.Media;
11
using Microsoft.Xna.Framework.Net;
12
using Microsoft.Xna.Framework.Storage;
13![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
14
namespace test_2D
15
{
16
public class Game1 : Microsoft.Xna.Framework.Game
17
{
18
GraphicsDeviceManager graphics;
19
SpriteBatch spriteBatch;
20
Texture2D mypic; //宣告存放2D圖片的變數
21
Vector2 spritePosition = Vector2.Zero; //宣告擺放2D圖片的位置
22![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
23 public Game1()
24
{
25
graphics = new GraphicsDeviceManager(this);
26
Content.RootDirectory = "Content";
27
}
28![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
29 protected override void Initialize()
30
{
31
base.Initialize();
32
}
33![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
34 protected override void LoadContent()
35
{
36
spriteBatch = new SpriteBatch(GraphicsDevice);
37
mypic = Content.Load<Texture2D>("enemy");
38
}
39![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
40 protected override void UnloadContent()
41
{
42
mypic.Dispose(); //物件的成員函數Dispose主要是在不使用到該物件時能夠釋放物件
43
}
44![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
45 protected override void Update(GameTime gameTime)
46
{
47
base.Update(gameTime);
48
}
49![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
50 protected override void Draw(GameTime gameTime)
51
{
52
graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
53
spriteBatch.Begin(); //到螢幕上動作就必須在Begin~End中
54
spriteBatch.Draw(mypic, spritePosition, Color.White); //spriteBatch.Draw(圖片變數,圖片位置,整張圖片顏色
55
spriteBatch.End();
56
base.Draw(gameTime);
57
}
58
}
59
}
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedBlockStart.gif)
02
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
03
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
04
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
05
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
06
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
07
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
08
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
09
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
10
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
11
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
12
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedBlockEnd.gif)
13
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
14
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
15
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedBlockStart.gif)
16
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
17
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
18
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
19
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
20
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
21
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
22
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
23 public Game1()
24
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
25
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
26
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
27
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
28
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
29 protected override void Initialize()
30
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
31
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
32
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
33
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
34 protected override void LoadContent()
35
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
36
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
37
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
38
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
39
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
40 protected override void UnloadContent()
41
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
42
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
43
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
44
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
45 protected override void Update(GameTime gameTime)
46
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
47
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
48
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
49
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
50 protected override void Draw(GameTime gameTime)
51
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
52
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
53
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
54
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
55
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
56
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
57
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
58
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
59
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedBlockEnd.gif)
2D貼圖範例執行結果圖:
最後附上2D貼圖程式整個專案檔:test-2D.rar