1 / 30

程式設計實習

程式設計實習. 地圖遊戲. 地圖遊戲概論. 地圖遊戲的製作，可分為下列程序：. 1. 遊戲地圖的繪製. 2. 人物移動的規則. 遊戲地圖定義. 代表「 0 」. 代表「 1 」. 地圖繪製前準備. 圖片素材. bmpMan. bmpBG. 用 PictureBox 元件顯示地圖. 背景圖片. 人物圖片. bmpMap. bmpCut. 地圖的本尊 (BitMap 物件 ). 剪貼工具. 地圖繪製前 ( 一 ) －宣告所需的各個 BitMap 物件. 先在表單上宣告下列各個變數：. Public Class Form1

clare-britt
Download Presentation

程式設計實習

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 程式設計實習 地圖遊戲

  2. 地圖遊戲概論 地圖遊戲的製作，可分為下列程序： 1.遊戲地圖的繪製 2.人物移動的規則

  3. 遊戲地圖定義 代表「0」 代表「1」

  4. 地圖繪製前準備 圖片素材 bmpMan bmpBG 用PictureBox元件顯示地圖 背景圖片 人物圖片 bmpMap bmpCut 地圖的本尊(BitMap物件) 剪貼工具

  5. 地圖繪製前(一)－宣告所需的各個BitMap物件 先在表單上宣告下列各個變數： Public Class Form1 Dim bmpMap As New Bitmap(400, 400)．．．．．為地圖本尊 Dim bmpBG, bmpMan As Bitmap．．．分別存放背景圖及人物圖的Bitmap Dim bmpCut As Bitmap．．．為圖片剪貼簿 Dim Cut As Rectangle ．．．矩形區塊，用來設定裁剪圖片的大小 Dim DrawPic As Graphics ．．．bmpMap的繪圖工具 Dim Map(9, 9) As Integer．．．地圖陣列，為繪製地圖的依據 End Class

  6. 地圖繪製前(二)－載入圖檔圖資 Private Sub Form_Load(ByVal… Dim X,Y As Integer DrawPic = Graphics.FromImage(bmpMap) ．．．繪圖工具指向bmpMap bmpBG=New Bitmap(“Ground.bmp”) ．．．由檔案載入背景素材 bmpMan=New Bitmap(“Man.bmp”)．．．由檔案載入人物素材 Microsoft.VisualBasic.FileOpen(1, "map.txt", OpenMode.Input) For Y = 0 To 9 For X = 0 To 9 Input(1, Map(X, Y))．．．將地圖結構由檔案載入陣列中備用 Next Next FileClose(1) End Sub

  7. 地圖繪製前(三)－擷取影像 (0,0) 複製區域為： （0,0,40,40) 先宣告要複製的區域 80 從來源複製圖塊 將複製的圖塊貼到目的地 40 bmpCut bmpBG 目的座標為： （0,0) bmpMap

  8. 地圖繪製前(三)－擷取剪貼範例 Private Sub Button1_Click(ByVal …. Cut=New Rectangle(0,0,40,40) ．．．設定複製範圍 BmpCut=BmpBG.Clone(Cut,BmpBG.PixelFormat) ．．．複製圖塊 DrawPic.DrawImage(BmpCut,0,0) ．．．將圖貼上 PictureBox1.Image=BmpMap ．．．顯示在PictureBox元件上看效果 End Sub

  9. 現學現用－地圖繪製副程式 Sub DrawMap() Dim Y, X As Integer For Y = 0 To 9 For X = 0 To 9 Cut=New Rectangle(0,Map(X,Y)*40,40,40) bmpCut=bmpBG.Clone(Cut,BmpBG.PixelFormat) DrawPic.DrawImage(bmpCut,X * 40,Y * 40) Next Next PictureBox1.Image=bmpMap End Sub

  10. 加入人物 完成地圖繪製後，接著就是要將主角加入，以便後續遊戲的進行。 每個方向人物大小：24 × 32

  11. 人物圖片的擷取定義 從下圖可看到為使遊戲進行更美觀，因此人物的圖片有四個方向，且每個方向皆有不同的動作可切換；所以程式中就利用兩的變數來決定所要擷取的圖形。 決定要擷取的人物方向，即控制擷取區域的Y座標，其值範圍為0~3 ManDir： 決定要擷取的人物動作，即控制擷取區域的X座標，其值範圍為0~2 ManAct： ManDir=2,ManAct=1 因此要擷取的矩形區為： (ManAct*24,ManDir*32,24,32) 每個方向人物大小：24 × 32

  12. 將人物貼上－在DrawMap增加程式 Sub DrawMap() Dim Y, X As Integer For Y = 0 To 9 For X = 0 To 9 Cut=New Rectangle(0,Map(X,Y)*40,40,40) bmpCut=bmpBG.Clone(Cut,BmpBG.PixelFormat) DrawPic.DrawImage(bmpCut,X * 40,Y * 40) Next Next Cut=New Rectangle(ManAct*24,ManDir*32,24,32) bmpCut=bmpMan.Clone(Cut,BmpMan.PixelFormat) DrawPic.DrawImage(bmpCut,ManX * 40,ManY * 40) PictureBox1.Image=bmpMap End Sub 註:ManX及ManY為人物在地圖上的座標位置，若要程式運作正常，這兩個變數必需要和ManAct及ManDir一同宣告在表單上。

  13. 去背－設定背景透明 下面兩張程式執行畫面，相信大家會比較喜歡右邊那一個沒有黑黑的背景。

  14. 在載入圖檔的同時定義背景透明色 Private Sub Form_Load(ByVal… Dim X,Y As Integer DrawPic = Graphics.FromImage(bmpMap) bmpBG=New Bitmap(“Ground.bmp”) bmpMan=New Bitmap(“Man.bmp”) bmpMan.MakeTransparent(Color.Black)．．．加入這一行 Microsoft.VisualBasic.FileOpen(1, "map.txt", OpenMode.Input) For Y = 0 To 9 For X = 0 To 9 Input(1, Map(X, Y)) Next Next FileClose(1) End Sub

  15. 控制人物移動 人物的移動控制，主要就透過上、下、左、右四個方向鍵來控制，程式如何得知按鍵動作呢？自然就是要依靠鍵盤事件－KeyDown。

  16. 鍵盤事件－KeyDown(一) 此一事件發生於按鍵被按下時，設計者可經由事件第二個參數ｅ的下列二個屬性得知按鍵資訊： keyCode：使用者所按按鍵之代碼(掃瞄碼)， 向左－keys.Left 向右－keys.Right 向上－keys.Up 向下－keys.Down

  17. 鍵盤事件－KeyDown(二) modifiers：代表按下按鍵同時是否也按下 Ctrl、Shift、Alt這三個特殊鍵，判斷時可檢查e.Control、 e.Alt、e.Shift這三個值是否為True。

  18. 鍵盤事件－KeyDown(三) 程式中放置下列圖形，透過上下左右四個鍵來決定要顯示哪一個動作的圖片． 每個方向人物大小：24 × 32

  19. 鍵盤事件－KeyDown(四) Private Sub Form1_KeyDown(ByVal sender A.. Select Case e.KeyCode Case Keys.Right ManDir=1 Manx=ManX+1 . . Case Keys.Left ManDir=3 Manx=ManX-1 . . End Select . DrawMap() End Sub

  20. 人物移動規則設定 以下圖來看，右邊為磚塊、左邊及上面為邊界，因此可以移動的方向只有向下。 Select Case e.KeyCode Case Keys.Right If ManX<9 Then If Map(ManX+1,ManY)=0 Then ManDir=1 Manx=ManX+1 . . End If Case Keys.Left ． .

  21. 第二種移動表示方式（一） 下圖左邊為遊戲時之視窗，右邊為地圖全貌和遊戲視窗所看到的範圍。

  22. 第二種移動表示方式（二） 按→方向鍵，人物向右移動。 移動後人物還在畫面中間，但是底圖整個往右平移。

  23. 第二種移動表示方式（三） 需繪製地圖的座標起點為：Map(ManX-2,ManY-2)，故繪製範圍X軸為ManX-2～ ManX+2、Y軸為ManY-2～ ManY+2 人物在地圖中的座標為： Map(ManX,ManY)

  24. 程式實作(一) 依前述說明，先將範例程式表單上之遊戲顯示區的大小改為200,200，接著修改DrawMap副程式： Sub DrawMap() Dim Y, X As Integer For Y = -2To 2 For X =-2To2 Cut=New Rectangle(0,Map(ManX+X,ManY+Y)*40,40,40) bmpCut=bmpBG.Clone(Cut,BmpBG.PixelFormat) DrawPic.DrawImage(bmpCut,(X+2)*40,(Y+2)*40) Next Next Cut=New Rectangle(ManAct*24,ManDir*32,24,32) bmpCut=bmpMan.Clone(Cut,BmpMan.PixelFormat) DrawPic.DrawImage(bmpCut,□,□) PictureBox1.Image=bmpMap End Sub

  25. 程式實作(二) Sub DrawMap() Dim Y, X As Integer For Y = -2To 2 For X = -2To2 If (ManX+X<=9 And ManX+X>=0) And(ManY+Y<=9 And ManY+Y>=0) Then Cut=New Rectangle(0,Map(ManX+X,ManY+Y)*40,40,40) bmpCut=bmpBG.Clone(Cut,BmpBG.PixelFormat) DrawPic.DrawImage(bmpCut,(X+□)*40,(Y+□)*40) End If Next Next Cut=New Rectangle(ManAct*24,ManDir*32,24,32) bmpCut=bmpMan.Clone(Cut,BmpMan.PixelFormat) DrawPic.DrawImage(bmpCut,□,□) PictureBox1.Image=bmpMap End Sub

  26. 多層式地圖 前述地圖為二維地圖（為一平面，像平房)，若將地圖改為三維，即除了XY兩軸外再加上Z軸，如下圖所示： Z (0,0,1) (1,0,1) Y X (0,0,0) (1,0,0)

  27. 多層式地圖(二) 當使用者進入特定區域時，即可進入另一圖層。

  28. Ｙ Ｘ Ｚ 多層式地圖(三)－背景和圖層的關係 原DrawMap副程式中，貼背景之程式段 Cut=New Rectangle(0,Map(ManX+X．．． Cut=New Rectangle(MapLevel*40,Map(ManX Ｚ＝０ Ｚ＝1 Ｚ＝1時使用之背景元素 Ｚ＝０時使用之背景元素

  29. 推箱子技巧 推箱子主要是要判斷人物的前方一格是否為指定物品，能否向前推則判斷箱子的前一格是否為可行走空間，如下說明： 可否前進的依據座標為(ManX+2,ManY) 人的座標(ManX,ManY) 箱子(6)的座標(ManX+1,ManY) 按右方向鍵後，人及箱子都往右移動了

  30. 可否前進的依據座標為(ManX+2,ManY) 人的座標(ManX,ManY) 箱子(6)的座標(ManX+1,ManY) 推箱子技巧－參考程式 實際參考程式： Select Case e.KeyCode Case Keys.Right If ManX<9 Then If Map(ManX+□,ManY)=6 Then If Map(ManX+□,ManY)=0 Then Map(ManX+□,ManY)=□ Map(ManX+□,ManY)=□ Manx=ManX+1 . . End If Case Keys.Left ．

More Related