Pygame 遊戲實作

# Pygame 遊戲實作 ## Pygame 基礎 ### 淺談遊戲根據維基百科 : 「遊戲既可以指人的一種娛樂活動，也可以指這種活動過程。」因此要滿足「遊戲」的條件，勢必是「娛樂性佳」的，否則只是操作介面和動畫。本次課程中，無法讓各位做出非常大型的遊戲 ( 譬如X紀帝國、X世神、Cyberxxxk等 ) 但是有了基本的概念，剩下的就僅是想法、美術、和利用各種工具滿足需求了。 ### 安裝Pygame 真的很簡單，只需要在終端機上面輸入 : pip install pygame ![](https://i.imgur.com/OR5xnK6.png) ### 第一支程式 ```python= import pygame, sys from pygame.locals import * # main pygame.init() # 設定視窗大小，可以改變參數設定成喜歡的大小。 DISPLAY = pygame.display.set_mode((800,600)) # 設定標題 pygame.display.set_caption("HELLO") # 這邊會顯示黑色，可以透過修改參數的方式改成自己喜歡的顏色。 DISPLAY.fill((0,0,0)) # 無窮迴圈 while True: # 取得所有的Event for event in pygame.event.get(): # 如果event是QUIT，也就是按右上角的x if event.type == pygame.QUIT: # 將pygame殺掉 pygame.quit() # 終止程式 sys.exit() # 一直更新pygame的畫面 pygame.display.update() ``` <br> ![](https://i.imgur.com/vPNquVt.png) 好的，恭喜你寫了第一個「遊戲」，~~是不是覺得很快樂呢?~~ 看到這邊的你們肯定想燒了這份講義，但是不要緊張，一定會教你們怎麼寫能玩的遊戲。 ### GUI vs CLI :::success 在上午的課中，我們介紹了print()函數並在終端機上面看結果，那就是CLI 而真正的遊戲因為有各種圖片及操作，因此可以算是一種GUI ::: | 比較 | GUI| CLI | | -------- | -------- | -------- | | 中文名稱 | 圖形化介面 | 命令列介面 | | 定義 | 使用各種圖形建立的介面 | 純文字介面 | | 操作方式 | 點擊、鍵盤 | 只能使用鍵盤 | | 視覺體驗 | 較豐富且生動 | 只有文字，偏無聊 | | 對使用者來說 | 較友善且容易操作 | 較不友善且不易操作 | | 開發難度 | __很難__ | __很難__ | | 開發時間 | __很長__ | __很長__ | ### Game Loop ![](https://i.imgur.com/YkBh9ZS.png) 大部分的遊戲都是照著上面的 Game Loop 運作。 ### 座標 :::success 數學的原點是在中心點。往右x增加，往上y增加。但是在程式裡面原點是在「左上角」，且往下y增加。 ::: ![](https://i.imgur.com/zR5taRf.gif =100%x) ### 顏色 :::success 遊戲怎麼可能少了顏色呢? 有了好的顏色，可以讓遊戲變得更好看、更熱賣。 ::: 在程式設計裡面，顏色是由三原色 ( RGB ) 組成。常用的顏色 | 顏色 | RGB | -------- | -------- | 水藍色 | ( 0, 255, 255 ) | 黑色 | ( 0, 0, 0 ) | 藍色 | ( 0, 0, 255 ) | 紫紅色 | ( 255, 0, 255 ) | 灰色 | ( 128, 128, 128 ) | 紅色 | ( 128, 128, 128 ) | 綠色 | ( 0, 128, 0 ) | 黃色 | ( 255, 255, 0 ) | 白色 | ( 255, 255, 255 ) 當然還有更多顏色等著大家去探索。連結 : https://www.peko-step.com/zhtw/tool/tfcolor.html 。 ### 事件 (pygame.event) :::success 在 Pygame 中，每個事件都是存在 pygame.event 裡面。在前面的程式中，我們看到了 for event in pygame.event.get()，這是用來將Pygame裡的每個事件取出來。 ::: 以下是常用的 event 種類 #### 退出 pygame.QUIT : 若使用者按下了右上角的叉叉 #### 滑鼠 pygame.MOUSEBUTTONDOWN : 按下滑鼠按鍵 pygame.MOUSEMOTION : 移動滑鼠 pygame.mouse.get_pos() : 抓取滑鼠的位置 #### 鍵盤 pygame.KEYDOWN : 按下鍵盤按鍵如果有偵測到 pygame.KEYDOWN 就可以進一步偵測是哪個按鍵以下是 pygame 常用的按鍵 pygame.K_UP : 上 pygame.K_DOWN : 下 pygame.K_w : W 鍵依此類推 ### 基本圖形 :::success 好的遊戲怎麼能缺少圖案呢? 有了圖案，可以增加視覺體驗。 ::: Pygame本身提供了很多圖形，像是多邊形、方型、線段、圓形、橢圓、曲線等 #### 線段 pygame.draw.line( surface, color, ( x1, y1 ), ( x2, y2 ), width = 0 ) surface : 想畫在哪個平面 color : 顏色 x1 跟 y1 : 起始位置的 x 和 y 座標 x2 跟 y2 : 終點位置的 x 和 y 座標 width : 粗度 :::info 補充 : 一次畫出多個連續線段。 pygame.draw.lines( surface, color, closed, points, width ) closed : 是否為封閉圖形 True的話，基本上就跟下面的polygon差不多，只是差在無法做出實心的多邊形。 False的話就是一組線段，最後一個點並不會連到第一個點。 ::: #### 多邊形 pygame.draw.polygon( surface, color, points, width=0 ) points : 點座標集合，點越多就可以畫出越多邊像是 [ ( 146, 0 ), ( 291, 106 ), ( 236, 277 ), ( 56, 277 ), ( 0, 106 ) ] 就可以畫出一個五邊形。 width : ( 可以不用加，預設是0 ) 增加多邊形的粗度。 width > 0 : 空心的多邊形，線段會因為 width 增加而加粗。 width = 0 : 填滿的多邊形。 width < 0 : 什麼都沒有，什麼都看不到。 #### 方形 pygame.draw.rect(surface, color, rect) rect : Rect物件，可以直接寫( x, y, width, height ) x : 方形左上角的x座標 y : 方形左上角的y座標 width : 方形的長 height : 方形的寬 #### 圓形 pygame.draw.circle( surface, color, center_point, radius, width ) center_point : 中心點 radius : 半徑 width : 請參考多邊形的width __以上只是舉例幾種，當然還有更多種好玩的圖形等著大家去發掘 ( Google )__ :::info 在實際撰寫遊戲時，當然不可能一個圖形接著一個這樣子慢慢畫，肯定是借助各種圖案以及模型做出複雜的圖形，接下來將會講到圖片。 ::: 開始練習畫圖吧! ```python= import pygame, sys from pygame.locals import * pygame.init() # 設定螢幕大小 DISPLAYSURF = pygame.display.set_mode((500, 400), 0, 32) pygame.display.set_caption('Drawing') # 設定顏色 BLACK = ( 0, 0, 0) WHITE = (255, 255, 255) RED = (255, 0, 0) GREEN = ( 0, 255, 0) BLUE = ( 0, 0, 255) ''' 判斷是否在多邊形內部原理 : 利用射線法就可以判斷一個點是否在多邊形內部如果焦點個數為奇數就是在多邊形內反之則在外面參考 : https://blog.csdn.net/leviopku/article/details/111224539 ''' def isInPolygon(p,poly): # 先取得輸入進來的點放進去px, py裡面 px,py = p # 先假設 flag 為 False 也就代表在外面 flag = False # 用 i 來當作記錄在該陣列的第幾個位置 # corner來當作數值 for i, corner in enumerate(poly): j = i + 1 # 下一個點 if(j>=len(poly)) : j = 0 # 先取兩個相鄰的點 x1, y1 = corner x2, y2 = poly[j] #如果在點上就直接寫True if(x1 == px and y1 == py) or (x2 == px and y2 == py): flag = True break # 如果該點在兩端點的y之間 if(min(y1,y2)<py<=max(y1,y2)): # 計算 X # X 為 x1去加上 (py - y1) 乘以斜率分之一 x = x1 + (py-y1) * (x2-x1)/(y2-y1) # 如果x在點上就代表在內部 if(x==px): flag = True break # 有焦點讓 flag 變成 flag的相反 elif x > px: flag = not flag return flag # 判斷是否在方形區塊內 def isInRect(p,rect): x1, y1 = p x2, y2, len, width = rect if(x1<x2 or x1 > x2+len) : return False elif (y1<y2 or y1>y2+width) : return False else: return True # 定義座標位置 POLYGON = ((146, 0), (291, 106), (236, 277), (56, 277), (0, 106)) RECT = (200, 150, 100, 50) # 一開始設定為 True 代表每個都會顯示 DISPLAY = [True,True,True,True,True,True,True] # 開始繪圖吧 def draw(): DISPLAYSURF.fill(WHITE) if (DISPLAY[0]) : pygame.draw.polygon(DISPLAYSURF, GREEN, POLYGON) if (DISPLAY[1]) : pygame.draw.line(DISPLAYSURF, BLUE, (60, 60), (120, 60), 4) if (DISPLAY[2]) : pygame.draw.line(DISPLAYSURF, BLUE, (120, 60), (60, 120)) if (DISPLAY[3]) : pygame.draw.line(DISPLAYSURF, BLUE, (60, 120), (120, 120), 4) if (DISPLAY[4]) : pygame.draw.circle(DISPLAYSURF, BLUE, (300, 50), 20, 0) if (DISPLAY[5]) : pygame.draw.ellipse(DISPLAYSURF, RED, (300, 250, 40, 80), 1) if (DISPLAY[6]) : pygame.draw.rect(DISPLAYSURF, RED, RECT) # 點擊被點到就設定為False def click(): global DISPLAY x,y = pygame.mouse.get_pos() if isInPolygon((x,y),POLYGON) : DISPLAY[0] = False if isInRect((x,y),(300,50,20,20)): DISPLAY[4] = False if isInRect((x,y),(300, 250, 40, 80)) : DISPLAY[5] = False if isInRect((x,y),RECT): DISPLAY[6] = False def show(): global DISPLAY DISPLAY = [True,True,True,True,True,True,True] # 執行 Game loop while True: for event in pygame.event.get(): if event.type == QUIT: pygame.quit() sys.exit() if event.type == MOUSEBUTTONDOWN: click() if event.type == pygame.KEYDOWN: show() # 每次進來都要再重畫一遍才能看得出特色 draw() pygame.display.update() ``` ![](https://i.imgur.com/TZdkTHW.png) ### 匯入圖片&簡單的動畫為何遊戲這麼吸引人，當然是因為可以隨著使用者的想法操作動畫，比起傳統的動畫有了更多互動性。 :::success 我們所看到的動畫，在電腦裡面其實只是一張一張圖片隨著時間慢慢地改變位置。用專業術語講的話，就是禎數，禎數越多代表每秒顯示的圖片數越多。 ::: 若要執行以下程式，請先去 http://invpy.com/cat.png 下載貓的圖案，並且跟程式放在同一個資料夾。 ```python= import pygame, sys from pygame.locals import * # 初始化 pygame.init() FPS = 60 # 設定每秒幾禎 fpsClock = pygame.time.Clock() # Clock # 設定視窗 DISPLAYSURF = pygame.display.set_mode((400,300), 0, 32) pygame.display.set_caption('Cat Animation') # 設定一些基本的數值 WHITE = (255, 255, 255) catImg = pygame.image.load('cat.png') # 設定貓的x y 軸 catx = 10 caty = 10 direction = 'right' # 一開始的方向 while True: # the main game loop DISPLAYSURF.fill(WHITE) if direction == 'right': # 往右跑 catx = catx + 5 if catx > DISPLAYSURF.get_width()-catImg.get_width(): # 如果跑到邊界就讓貓往下跑 direction = 'down' elif direction == 'down': # 往下跑 caty = caty + 5 if caty > DISPLAYSURF.get_height()-catImg.get_height(): # 如果讓貓跑到邊界就讓貓往左跑 direction = 'left' elif direction == 'left': # 往左跑 catx = catx - 5 if catx < 10: direction = 'up' elif direction == 'up': # 往上跑 caty = caty - 5 if caty < 10: direction = 'right' DISPLAYSURF.blit(catImg, (catx, caty)) #繪製覆蓋整個視窗 # 偵測事件 for event in pygame.event.get(): # 按叉叉就退出 if event.type == QUIT: pygame.quit() sys.exit() #記得更新畫面 pygame.display.update() #並且讓clock tick 一下 fpsClock.tick(FPS) ``` ![](https://i.imgur.com/gyKHN4q.png) :::info 這個程式有個好玩的地方 : 當你把FPS調得越高，貓移動的速度越快。 ::: :::danger 若把fpsClock.tick(FPS)註解掉，程式就不會暫停，貓移動的速度會根據每台電腦的性能而增加 ( 像我的電腦配備R7+3080，跑特別快 ) ::: #### 匯入圖片: catImg = pygame.image.load('cat.png') 其中catImg是個surface，透過 load 讀 cat.png DISPLAYSURF.blit(catImg,(catx,caty)) catImg就是上面讀的那張圖片 catx跟caty就是圖片呈現的位置(左上角) :::success 若想要免費的素材庫可以在 https://craftpix.net/ 中尋找，或者是在Google上搜尋 Game Sprite 即可。 ::: ### 文字 :::success 怎麼樣顯示出還有多少時間以及得了多少分? 最直覺的就是用文字表達了。 ::: 如果你們很認真看講義的話，搞不好你們會想做一件事 : 嘗試用draw.line()畫出文字，__但這麼做只會把你們逼瘋。__ 下面是一個能夠輸出Hello World的一個程式 ```python= import pygame, sys from pygame.locals import * pygame.init() DISPLAYSURF = pygame.display.set_mode((400, 300)) pygame.display.set_caption('Hello World!') WHITE = (255, 255, 255) GREEN = (0, 255, 0) BLACK = (0,0,0) fontObj = pygame.font.Font('freesansbold.ttf', 32) #創字體的物件 textSurfaceObj = fontObj.render('Hello world!', True, GREEN,BLACK) #創文字Surface textRectObj = textSurfaceObj.get_rect() #文字方塊 textRectObj.center = (200, 150) while True: # main game loop DISPLAYSURF.fill(WHITE) DISPLAYSURF.blit(textSurfaceObj, textRectObj) for event in pygame.event.get(): if event.type == QUIT: pygame.quit() sys.exit() pygame.display.update() ``` 要創文字，需要以下六步驟 1. 創 pygame.font.Font 物件 ( 13行 ) 2. 使用 fontObj.render() 創 Surface ( 14行 ) 3. 使用 get_rect() 方法創 Rect物件 ( 15行 ) 4. 設定center的位置( 16行 ) 5. 使用blit畫出字體 6. 使用 pygame.display.update() 顯示在螢幕上這樣完美的字體就能呈現了 :::info 很多人會感到疑惑，為何第14行的第二個參數要設成True? 因為當設成True時，pygame會幫我們做出反鋸齒 ( Anti-Aliasing ) ，也就能讓字體變的更柔順，更好看。當然，如果你要做出那種像素感很重的復古遊戲，可以設定成False。 ::: ### 音樂、音效 :::success 好的音樂和音效能夠增加遊戲體驗，及讓遊戲變的更有趣。 ::: ```python= soundObj = pygame.mixer.Sound('fileName.mp3') soundObj.play() # 當不要播時 : soundObj.stop() ``` 是不是覺得比匯入圖片更簡單了呢? 如果有空的時候，可以多玩玩上述的這些功能。 ### 打包遊戲 :::success 為何要學會打包遊戲 ? 直接給使用者原始碼叫他自己編譯不就好了 ? 事實上大錯特錯。回想一下，在安裝這麼多遊戲中，哪次看到原始碼了。通常為了使用者方便以及保護好程式碼，通常是不會讓使用者直接看到程式在寫什麼。所以打包是一件非常重要的事情。 ::: 首先先在terminal輸入pip install auto-py-to-exe ![](https://i.imgur.com/WRzNySn.png) 然後再輸入auto-py-to-exe ![](https://i.imgur.com/gTEivgy.png) :::info Script Location是放遊戲的main One Directory / One File 是打包成一個資料夾或者是一個exe檔 Console Window是指要不要顯示CLI ( 如果你們覺得很醜的話就勾Window Based ) ::: 完成 : ![](https://i.imgur.com/RJaz6ST.png) 糟糕怎麼出錯了XD :::danger 注意 ! 打包完成後如果直接打開，會出現錯誤，因為打包的檔案並不包含上面引入的圖片或者是音樂。若要正常執行，請將輸出的檔案放回去原本的資料夾。 ::: 這樣才是正常的 : ![](https://i.imgur.com/5fjgze4.png) ### 總結上述的這些功能只佔遊戲設計中的小小一環，要做出功能完整的遊戲需要學習的知識點遠遠不止這些。但當你們掌握今天上午的課程以及上述的這些指令後，就能做出小遊戲了。今天學習到的概念只是製作遊戲的基礎，如果對於大型遊戲設計感到興趣的話，除了掌握今天所學外，還可以去接觸 Unity 或是 JavaScript，僅僅學習今天的東西還是不夠的XD。 ## 正式的遊戲設計 ### 打地鼠 ![](https://i.imgur.com/9juJztP.png) (不用你們說，我知道很醜) 資源包 : https://drive.google.com/drive/folders/1DNa6-j81sERV2FgpYOsZsCtFIO49jWmW?usp=sharing ```python= import pygame import time from random import randint #視窗大小 SCREEN_WIDTH = 400 SCREEN_HEIGHT = 400 #常用顏色 GREEN = (73,188,11) WHITE = (255,255,255) #地鼠座標 / 分數 /遊戲時間 / 開始時間 / 狀態 x,y = None,None score = 0 game_time = 20 start_time = 0 state = 0 #首頁0 遊戲中1 結束2 #建立視窗及頻率鐘 screen = pygame.display.set_mode((SCREEN_WIDTH,SCREEN_HEIGHT)) pygame.display.set_caption('打地鼠') clock = pygame.time.Clock() #載入遊戲圖片 mallet = pygame.image.load('mallet.png') down_mallet = pygame.image.load('down-mallet.png') mole = pygame.image.load('mole.png') grass = pygame.image.load('grass.png') #隱藏滑鼠座標顯示及初始化文字模組 pygame.mouse.set_visible(False) pygame.font.init() # FPS FPS = 60 # 歡迎畫面 def welcome_screen(): # 全部填滿草 screen.blit(grass,(0,0)) # 字體設定 font = pygame.font.SysFont('corbel',48) # 文字設定 text = font.render('Press ENTER to start',False,WHITE) # 畫出文字部分 screen.blit(text,((SCREEN_WIDTH - text.get_width()) / 2, 185 ) ) #畫出一個地鼠 screen.blit(mole,(120,50)) # 取得槌子的矩形範圍 mallet_position = mallet.get_rect() # 將槌子的中心點設在滑鼠點的位置 mallet_position.center = pygame.mouse.get_pos() if pygame.mouse.get_pressed()[0]: screen.blit(down_mallet, mallet_position) else: screen.blit(mallet, mallet_position) def play(): # 取用遊戲狀態、分數及開始時間資訊 global state, score, start_time # 設定遊戲開始時間 time.time() 會取得目前的時間 start_time = time.time() # 將分數歸 0 且狀態設定為 1 遊玩中 score = 0 state = 1 # 產生新的老鼠（這邊先立一個函式之後完成） new_mole() # 產生瞬間先檢查是否有被打到（這邊先立一個函式之後完成） whack() def end(): # 狀態改為 2 結束遊戲 global state state = 2 def new_mole(): # 隨機決定下一個老鼠產生的位置 global x, y # x 從螢幕最左到右邊扣掉老鼠的寬都能取, y 則向下移 30 到底部扣掉老鼠的高都能取 x = randint(0, SCREEN_WIDTH - mole.get_width()) y = randint(30, SCREEN_HEIGHT - mole.get_height()) # 判斷是否在方形區塊內 def isInRect(p,rect): # 先取得點座標 x1, y1 = p # 再取得方形座標 x2, y2, len, width = rect # 如果不在區域內就 return false if(x1<x2 or x1 > x2+len) : return False elif (y1<y2 or y1>y2+width) : return False # else return true else: return True def whack(): global score # 取得滑鼠當前的位置 mx, my = pygame.mouse.get_pos() # 取得老鼠的寬及高 width, height = mole.get_size() # 將座標計算是不是點擊在老鼠的圖片上, 如果有的話要加分和產生下一隻新的 if isInRect((mx,my),(x,y,width,height)): score += 1 new_mole() # 遊戲畫面 def play_screen(): # 畫出草 screen.blit(grass,(0,0)) # 字體設定 font = pygame.font.SysFont('corbel',30) # 分數的文字 text_score = font.render(str(score),False,WHITE) # 現在的時間 current = game_time - (time.time() - start_time) # 如果時間結束就跳到 end if current <= 0: end() # 時間的文字 text_time = font.render(str(int(current)),False,WHITE) # 如果按下了滑鼠 if pygame.mouse.get_pressed()[0]: # 就在鼠標位置顯示下降的槌子 screen.blit(down_mallet, pygame.mouse.get_pos()) # 如果不是的話 else: # 就在鼠標的位置顯示一般的槌子 screen.blit(mallet,pygame.mouse.get_pos()) # 顯示分數 screen.blit(text_score,(10,0)) #顯示時間 screen.blit(text_time,(370,0)) # 顯示地鼠 screen.blit(mole,(x,y)) # 結束話面 def end_screen(): # 背景填滿綠色 screen.fill(GREEN) # 設定字體樣板分別顯示遊戲結束、分數及重新開始按鈕 font = pygame.font.Font(None, 30) game_over = font.render("GAME OVER", False, WHITE) font = pygame.font.Font(None, 25) # 分數 points = font.render("Score: " + str(score), False, WHITE) font = pygame.font.Font(None, 22) restart = font.render("Press ENTER to play again", False, WHITE) # 將上述資訊顯示到螢幕上 screen.blit(game_over, (SCREEN_WIDTH / 2 - game_over.get_width() / 2, 100)) screen.blit(points, (SCREEN_WIDTH / 2 - points.get_width() / 2, 200)) screen.blit(restart, (SCREEN_WIDTH / 2 - restart.get_width() / 2, 300)) #遊戲執行 running=True while running: #事件處理 for event in pygame.event.get(): #當遊戲視窗被關閉 if event.type==pygame.QUIT:#當遊戲視窗被關閉 running=False elif state == 0:#遊戲還沒開始的事件 if event.type == pygame.KEYDOWN and event.key == pygame.K_RETURN: play() elif state == 1:#遊戲中的事件 # 如果按下滑鼠就打 if event.type == pygame.MOUSEBUTTONDOWN: whack() elif state == 2:#遊戲結束的事件 if event.type == pygame.KEYDOWN and event.key ==pygame.K_RETURN: play() if state == 0:#還沒開始的畫面 welcome_screen() elif state == 1:#遊戲中的畫面 play_screen() elif state == 2:#遊戲結束的畫面 end_screen() clock.tick(FPS)#限制畫面最高更新 60 FPS pygame.display.update()#更新畫面 pygame.quit() ```  參考資源 : 1. Making Games with Python & Pygame ( https://inventwithpython.com/pygame/ ) 2. Python 功力提升的樂趣

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.