Try   HackMD

PyGame小遊戲-馬保國的奇幻冒險

這是小弟的第一篇筆記,內容不夠完整,還請包涵(*^ー^)

1.啟發

動機

每當看到遊戲,都會令我們的眼睛為之一亮,每個人的電腦或手機裡,或許都存有一款能夠消磨時間的遊戲,然而無論手機或是電腦遊戲,背後都是由一行行的程式碼組成。隨著科技的進步,現在遊戲的規模和精緻程度已經與以往有很大的差距,像是傳說對決、英雄聯盟、絕地求生、神魔之塔等遊戲。回到以前的經典遊戲 1942,縱然經過了很多年,仍然有許多玩家熱衷於這款遊戲,操控主角的戰機,一邊迴避敵人的子彈,一邊射擊攻擊敵人,這種軸射擊遊戲到了現在也有人設計加上一些改版,可以說是歷久不衰的經典遊戲。

​​​​於是,我們便抱著這份熱忱,著手設計了這款遊戲。

搜索資料後,發現 Pygame 是一種適合初學者的遊戲程式引擎,可以透過 Python 的語法撰寫遊戲。因此我們決定要用 Python 配合 Pygame ,再搭配馬保國在 YouTube 上的閃電五連鞭影片的內容,製作出一款彈幕遊戲。我們打算使用 Python 配合 Pygame 製作出一個打隕石的遊戲,目的為進一步熟練 Python 語法,了解 Python 如何應用,以及嘗試製作出一款遊戲。


2.遊戲架構

遊戲流程圖

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

遊戲內容

接下來會介紹我們的遊戲內容與畫面

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

▲遊戲進場畫面,字幕閃爍、用滑鼠點擊畫面可以產生粒子效果,按下空白鍵開始遊戲。


Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

▲第一關畫面,玩家使用方向鍵控制戰機,在閃避的同時以空白鍵射擊隕石。


Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

▲第二關畫面,玩家使用方向鍵控制馬保國,在閃避的同時以閃電鞭攻擊隕石。


Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

▲第三關畫面,玩家使用方向鍵控制戰機,無法攻擊隕石,須持續閃避直到航空母艦出現並降落。


Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

▲結束畫面,會有煙火不斷釋放出來,以及迎接新年的字。

程式

這裡將會介紹我們遊戲裡面較為困難的程式部份

效果

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

不論是進場畫面或是第二關角色的粒子效果,原理實際上是在視窗上畫會移動的圓形,利用二維陣列 (Two-dimensional list)儲存各個圖形的位置、速度、和圖形的半徑大小,然後再把所有圖形的陣列堆疊成一個三維陣列,用 for 迴圈個別移動並變換大小的數據,最後再把它顯示在視窗上,當圖形超出視窗外面,就會把它刪除。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →


Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

要判斷滑鼠是否有按下,由於 Pygame 只能判斷按下的和放開的那一刻,設定一個變數 left_clicking ,偵測到按下就指定為 True,偵測到放開就設定為 False,每當執行一次程式時,如果 left_clicking 為 True,就新增一項。


Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

粒子效果分為本體和光芒,基本上原理都是一樣的,而且同一個圖形的位置和速度都是一樣的,所以不用另外設定陣列,但光芒本體的大小較大,顏色也不一樣,在Pygame 裡面,可以設定 special_flag 變數為 BLEND_RGB_ADD,產生顏色疊加的變化。

繪製角色與物品

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

主角的子彈和敵機的子彈都是我們運用 Krita 這個繪圖軟體繪製, Krita 是一個功能非常廣的自由繪圖軟體,無論是筆刷的大小、透明度、顏色、圖層,還有裁剪功能,除了繪製單張的圖像,它也可以製作動畫。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

血條顯示

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

我們想要做一個動畫顯示的血條,需要一個白色外框,紅色是真實血量,黃色是動畫的血量。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

health_ratio 是真實血量與所要呈現血量的比值,當主角受到傷害時,就把目標血量減掉傷害,如果目前血量小於或等於 0,主角就會死掉。反之,如果目前血量如果還沒達到目標血量,就把目前血量減掉血量變化速度,這樣看起來就會有動畫的效果。最後要呈現在螢幕上,用目標血量除以 health_ratio 就是紅色血條的長度,目前血量減掉目標血量再除以 health_ratio 就是黃色動畫血條的長度。

碰撞判斷

在 Pygame 裡面,一般兩個物件的碰撞 (collision) 是以 Rectangle(長方形)判斷。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

▲更改前的碰撞判斷程式

但這種方式可能會產生一種問題,當兩個物件形狀並非長方形時,就會產生誤判,為了解決這個問題,我們查了很久的資料,發現可以使用遮罩 (mask) 作為判斷的依據,只要在判斷碰撞的程式後面加上一個變數 Pygame.sprite.collide_mask 就可以達到像素級別的判斷。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

▲長方形碰撞的示意圖

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

▲更改後的碰撞判斷程式

3.未來展望

▶加入更難以擊敗的敵人:目前敵人只要受到攻擊就會死亡,我們希望能增加不同難度 的敵人,增加遊戲難度。

▶將網路圖片更換為自行繪製:遊戲中部份影像來自網路,期望日後能自行設計角色和背景,讓遊戲更具獨特性。

▶讓地圖更有互動性:遊戲中的背景是固定的,讓背景可以轉換或有特殊作用,增加遊戲互動性。

▶加入不同的道具,豐富遊戲性:遊戲中沒有增益道具,設計一些道具,讓遊戲玩法更豐富。

▶製作 Apk,方便以手機遊玩:我們希望遊戲不要只侷限在電腦,可以開發多平台版本,讓遊戲更普及。

4.參考文獻

  1. GrandmaCan -我阿嬤都會(2021 年 7 月 8 日)。Pygame 3 小時製作一個遊戲[影片]。
    YouTube。 https://www.youtube.com/watch?v=61eX0bFAsYs&t=175s
  2. Pygame(2020 年 10 月 28 日)。Pygame documentation。 https://www.Pygame.org/docs/
  3. Clear Code(2021 年 7 月 11 日)。The ultimate introduction to Pygame[影片]。
    YouTube。 https://www.youtube.com/watch?v=AY9MnQ4x3zk
  4. Clear Code(2021 年 12 月 4 日)。Understanding Pygame masks[影片]。YouTube。
    https://www.youtube.com/watch?v=uW3Fhe-Vkx4
  5. Clear Code(2020 年 10 月 2 日)。Creating a health bar in Pygame [Dark Souls style] [影
    片]。YouTube。 https://www.youtube.com/watch?v=pUEZbUAMZYA
  6. Clear Code(2020 年 4 月 23 日)。Python / Pygame Tutorial: Creating multiple stages. ingame
    [影片]。YouTube。 https://www.youtube.com/watch?v=j9yMFG3D7fg
  7. DafluffyPotato(2020 年 3 月 27 日)。Particles - Pygame Tutorial[影片]。YouTube。
    https://www.youtube.com/watch?v=F69-t33e8tk
  8. DafluffyPotato(2020 年 8 月 19 日)。Lighting in Pygame (Tutorial)[影片]。 YouTube。
    https://www.youtube.com/watch?v=NGFk44fY0O4
  9. DafluffyPotato(2020 年 1 月 27 日)。Menus - Pygame Tutorial[影片]。YouTube。
    https://www.youtube.com/watch?v=0RryiSjpJn0
  10. Tech With Tim(2018 年 3 月 14 日)。How to Fade Your Screen in Pygame [CODE IN.
    DESCRIPTION][影片]。YouTube。 https://www.youtube.com/watch?v=H2r2N7D56Uw
  11. Clear Code(2020 年 4 月 22 日)。Python / Pygame Tutorial: An introduction to sprites [
    影片]。YouTube。https://www.youtube.com/watch?v=hDu8mcAlY4E
  12. Aditya Bhandari(2021 年 1 月 5 日)。New Year Fireworks using PYGAME |
    2021|.#Python#Pygame[影片]。YouTube。https://www.youtube.com/watch?v=76a4bn14fP4
  13. Pete Shinners(2016 年 12 月 14 日)。Python Pygame Introduction。
    http://www.Pygame.org/docs/tut/PygameIntro.html
  14. 文淵閣工作室。 Python 零基礎入門班(第三版)。(台北市:碁峰,民國 110)。
  15. 廣瀨豪。Python 遊戲開發講座。(台北市:碁峰,民國 110)。
  16. 洪錦魁。Python 邁向領航者之路:超零基礎。(台北市:深智,民國 109)。
  17. Capcom (1942 年) 。Acrade History 。 https://www.arcade-
    history.com/?n=1942&page=detail&id=6