2020年10月5日 星期一

pygame玩遊戲系列(6)~認識一下pygame中的矩形座標物件Rect

 遊戲主要的設計及操作,大都在於安排遊戲中的角色定位、移動、行為、顯示/隱藏及偵測使用者行為及物件之間的相對關係及重要的「碰撞偵測」等等!

而這些有關物件的位置安排及相對位置、移動甚至是碰撞偵測等等,都跟pygame中一個物件:矩形座標物件:Rect 有關!

先簡單認識一下:pygame.Rect

基本上rect矩形物件是由一個矩形的四個參數:Rect(left, top, width, height) -> Rect 所構成的一個寬度=width, 高度=height, 矩形左上角座標:(left, top)的矩形參數物件。


在pygame中只要是引入的角色(物件)都能藉由設定獲取一組專屬的矩形物件,作為該物件定點、移動、物件相對位置及關係等等相關操作之應用。

例如~我們在前一篇設定小車在遊戲視窗中的起始位置的設定、遊戲視窗左右邊界偵測判斷等等,是先將計算後的數字設定成小車的座標點。這樣的操作,日後若是程式日益龐大或是我們要修改視窗大小等參數時,就得將相關數字一併重新計算修改,這樣不僅勞神耗時,而且非常容易因為漏改或計算錯誤而產生不易察覺的錯誤,造成維護及操作上的困擾!

在進入程式碼操作之前,我們先來認識一下rect的一些重要概念:

一、遊戲中物件獲取矩形座標參數方法:物件名稱.get_rect()

二、獲取矩形座標參數(rect)後,可藉由該物件其矩形座標相關虛擬參數:

進行相關設定及操作。

有關pygame.rect的詳細介紹可參考pygame官方文件

現在我們就將前一篇相關位置的設定及邊界偵測等相關參數改為使用rect參數進行操作,如下:

import pygame, sys
from pygame.locals import *
pygame.init()

car_img = pygame.image.load("./imgs/car6.png")
screen_width, screen_height = 500, 380  #設定遊戲視窗寬、高參數
screen = pygame.display.set_mode((screen_width, screen_height))
pygame.display.set_caption('騎車春遊趣')

screen_rect = screen.get_rect() #獲取遊戲視窗矩形座標參數儲存於參數:screen_rect
car_rec = car_img.get_rect()    #獲取小車矩形座標參數儲存於參數:car_rect

#設定小車座標方式:將(小車中心點x座標定位於視窗中心點x座標, 小車底部座標與視窗底部貼齊)
car_rec.centerx, car_rec.bottom = screen_rect.centerx, screen_rect.bottom
#另一種完全相同且更簡便的設定方法,就是將小車的中心底部座標設定與視窗的中心底部座標貼齊即可
car_rec.midbottom = screen_rect.midbottom

while True:
    screen.fill((255,255,0))   #將遊戲視窗背景塗成黃色
    for event in pygame.event.get():
        if event.type == QUIT:
            pygame.quit()
            sys.exit()

    key_p = pygame.key.get_pressed()
    if (key_p[pygame.K_l] or key_p[pygame.K_LEFT]) and car_rec.left >= screen_rect.left:
        car_rec.x -= 2
    if (key_p[pygame.K_r] or key_p[pygame.K_RIGHT]) and car_rec.right <= screen_rect.right:
        car_rec.x += 2

    # 透過小車矩形參數:car_rec於指定位置繪製小車(car_img)
    screen.blit(car_img, car_rec)

    pygame.display.update()    #更新視窗


這樣全部的設定中就只剩下了遊戲視窗的寬、高設定,其他都是透過rect參數座標進行相關設定及操作,日後維護起來就方便多了!

接著為了方便觀看rect的相關特性並順道練習幾個pygame中繪圖的功能操作,我們同樣以相關的rect參數在上述程式碼第32行加上下列程式碼,繪製相關圖形:

# 繪製從視窗左邊界中心點至視窗右邊界中心點的一條橫線
    pygame.draw.line(screen, (0,0,255), screen_rect.midleft, (screen_rect.right, screen_rect.centery))
    # 繪製從視窗上方中心點至視窗底部中心點的一條垂直線
    pygame.draw.line(screen, (0, 0, 255), screen_rect.midtop, screen_rect.midbottom)
    pygame.draw.circle(screen, (255, 0, 0), screen_rect.center, 5, 1)   #繪製以視窗中心為圓心半徑5的紅色小圓
    pygame.draw.rect(screen, (255,0,0), car_rec, 1) #使用car_rect的矩形座標進行繪製出正好可將小車框住的矩形

結果如下,當然我還額外加上一些標註說明供參!





沒有留言:

張貼留言