Oop lab/pygame1

หน้านี้เป็นส่วนหนึ่งของ oop lab

ไลบรารีที่เราจะใช้ในการพัฒนาเกมบน Python คือ PyGame อย่างไรก็ตาม ตัว Pygame นั้นไม่ได้มีโครงสร้างที่เป็นเชิงวัตถุมากนัก ใน Tutorial นี้เราจะสร้างกรอบงานเชิงวัตถุครอบ Pygame อีกครั้ง โดยจะพยายามอ้างอิงโครงสร้างจาก Slick2D เพื่อความคุ้นเคย

สำหรับเอกสารชุดนี้ เราจะนำโค้ดเกม squash ของ อ.ชัยพร มาปรับเพิ่มเติม แม้ว่าโค้ดเก่าก็มีการแยกส่วน player และ ball ไว้แล้ว เราสามารถแกะส่วนการจัดการเกมออกมาจากโค้ดได้เพิ่มเติมอีก เพื่อนำไปใช้ในโครงงานของเราได้ ต้องขอขอบคุณ อ.ชัยพร ที่อนุญาตให้เราเอาโค้ดสอน pygame เบื้องต้นที่อาจารย์เขียนมาเล่นสนุกกันต่อในเอกสารนี้ด้วย

โค้ดเริ่มต้น

เราจะเริ่มจากโค้ด squash.py จากหน้า สร้างเกมด้วย Pygame โดยเราจะเริ่มจากการแกะส่วนแก่นของเกมในฟังก์ชัน main แยกออกมาเป็นคลาส

โค้ดที่เราสนใจอยู่ในส่วนต่อไปนี้

def main():
    global game_over,font,score,score_image

    pygame.init()
    clock = pygame.time.Clock()
    display = pygame.display.set_mode(WINDOW_SIZE)
    pygame.display.set_caption('Squash')
    game_over = False
    font = pygame.font.SysFont("monospace", 20)
    score = 0
    score_image = None
    render_score()

    ball = Ball(speed=(200,50))
    player = Player(color=pygame.Color('green'),pos=100)

    while not game_over:
        for event in pygame.event.get(): # process events
            if (event.type == QUIT) or \
               (event.type == KEYDOWN and event.key == K_ESCAPE):
                game_over = True

        if pygame.key.get_pressed()[K_UP]:
            player.pos -= 5
        elif pygame.key.get_pressed()[K_DOWN]:
            player.pos += 5

        display.fill(BLACK)  # clear screen
        display.blit(score_image, (10,10))  # draw score
        player.draw(display)  # draw player
        ball.move(1./FPS, display, player)  # move ball
        ball.draw(display)  # draw ball

        pygame.display.update()  # redraw the screen
        clock.tick(FPS)  # wait to limit FPS requirement

if __name__=='__main__':
    main()
    print "Game Over! Total score is %d." % score
    pygame.quit()

หน้าที่หลักของฟังก์ชัน main ถ้ามองในแง่ของเกมแล้ว มีดังนี้

• ตั้งค่าเริ่มต้น (init)
• ทำงานใน update/render ลูป
• จัดการกับ event

ถ้าเราพิจารณาจากโค้ด จะแบ่งเป็นส่วน ๆ ได้ตามด้านล่างนี้

def main():
    # ------------------------ init -------------------------------------
    pygame.init()
    clock = pygame.time.Clock()
    # ...
    player = Player(color=pygame.Color('green'),pos=100)

    # ------------------ event loop ------------------------------------
    while not game_over:

        # ----------------------- event processing -------------------------
        for event in pygame.event.get(): # process events
            # ...

        if pygame.key.get_pressed()[K_UP]:
            player.pos -= 5
        elif pygame.key.get_pressed()[K_DOWN]:
            player.pos += 5

        # ---------------------------- render & update ---------------------------------------
        display.fill(BLACK)  # clear screen
        display.blit(score_image, (10,10))  # draw score
        player.draw(display)  # draw player
        ball.move(1./FPS, display, player)  # move ball
        ball.draw(display)  # draw ball

        pygame.display.update()  # redraw the screen

        # ---------------------------- wait inside loop ----------------------------
        clock.tick(FPS)  # wait to limit FPS requirement

เราจะเริ่มจากส่วน init และ update/render ลูปก่อน

คลาส SimpleGame

มาวางแผนกันก่อน... เราจะเขียนคลาส SimpleGame ที่ทำหน้าที่จัดการแกนหลักของเกม ตามที่นำมาข้างต้น เราต้องการให้คนที่เขียนเกม นำคลาสเราไปใช้เพื่อสร้างเกมขึ้นมา

เรามีทางเลือกในการออกแบบคลาสดังกล่าวสองทางคือ การใช้ inheritance กับการใช้ composition (อ่านรายละเอียดคร่าว ๆ ที่ แบบฝึกหัด 44, หนังสือ Learn Python the Hard Way) อย่างไรก็ตาม เราพยายามจะคงโครงสร้างของ Slick2D เอาไว้ ดังนั้นเราจะเลือกแบบแรก กล่าวคือ เราจะให้คนที่เขียนเกม inherit SimpleGame เพื่อสร้างเป็นคลาสใหม่ของเกมขึ้นมา ดังนั้นเราต้องวางแผนคร่าว ๆ ว่า SimpleGame ของเราจะทำอะไรบ้าง และอะไรจะเหลือให้คลาสที่ inherit ไปเอาไปเขียนเอง และจะเขียนเองอย่างไร

เราต้องการให้คน inherit คลาส SimpleGame เขียนเมท็อดเหล่านี้ที่เฉพาะเจาะจงกับเกมของตัวเอง:

• init
• render
• update
• on_key_up
• on_key_down

คลาสเกมที่ได้ เราต้องการให้เมื่อสร้างแล้วเรียกทำงานโดยเมท็อด run ได้เลย

เราจะเริ่มทยอยเขียนจากส่วนสามเมท็อดแรกก่อน เราจะเขียนคลาสดังกล่าวไว้ในไฟล์ gamelib.py ซึ่งจะเป็นโมดูลย่อยของเกมของเรา โครงของคลาสเราเป็นดังนี้

import pygame
from pygame.locals import *

class SimpleGame(object):

    def __init__(self):
        pass

    def run(self):
        pass

    def init(self):
        pass

    def update(self):
        pass

    def render(self):
        pass

เราจะเขียนโปรแกรมหลักขึ้นมาทดสอบพร้อม ๆ กัน เขียนโปรแกรมหลักในไฟล์ main.py

import pygame
from pygame.locals import *
from gamelib import SimpleGame

class SquashGame(SimpleGame):
    pass

def main():
    game = SquashGame()
    game.run()

if __name__ == '__main__':
    main()

ด้วยโค้ดเปล่า ๆ เช่นนี้ โปรแกรมเราควรจะรันแล้วจบออกมาโดยไม่ทำอะไรเลย

ลืม git ไปหรือยัง? อย่าลืมสร้าง git repository ของงานนี้ และหมั่น commit

ส่วนกำหนดค่าเริ่มต้น

เราจะเริ่มเอาโค้ดมาใส่ส่วนเริ่มต้นเกม ในคลาส SimpleGame ก่อนอื่นกลับไปพิจารณาโค้ดจากโปรแกรมต้นฉบับ เราจะพบว่าเราต้องการนำโค้ดส่วนด้านล่างนี้มาใส่ในส่วนเริ่มต้น

    pygame.init()
    clock = pygame.time.Clock()
    display = pygame.display.set_mode(WINDOW_SIZE)
    pygame.display.set_caption('Squash')
    game_over = False
    font = pygame.font.SysFont("monospace", 20)
    score = 0
    score_image = None
    render_score()

แต่ไม่ใช่ทั้งหมดจะเป็นส่วนเริ่มต้นในทุก ๆ เกม และยิ่งไปกว่านั้น สังเกตว่าพารามิเตอร์เช่น WINDOW_SIZE หรือชื่อเกม (หรือถ้าดูให้ดี ก็จะรวมส่วน FPS ที่ตอนท้ายโปรแกรมด้วย) น่าจะเป็นสิ่งที่ผู้ใช้คลาสของเรากำหนดได้ ดังนั้นเราจะรับค่าพวกนี้มาเก็บใน object เราเสียก่อน เมท็อด __init__ ที่เป็น constructor ของคลาส SimpleGame จะเป็นดังนี้

class SimpleGame(object):
    # ...
     def __init__(self, title, window_size=(640,480), fps=60):
        self.title = title
        self.window_size = window_size
        self.fps = fps

หมายเหตุ: สังเกตตัวอย่างการใช้ default parameter ในโค้ดข้างต้น

ส่วนโค้ดเริ่มเกม เรานำมาเขียนเป็นเมท็อด game_init ได้ดังด้านล่าง:

class SimpleGame(object):
    # ...
    def game_init(self):
        pygame.init()
        self.clock = pygame.time.Clock()
        self.surface = pygame.display.set_mode(self.window_size)
        pygame.display.set_caption(self.title)
        self.font = pygame.font.SysFont("monospace", 20)

หมายเหตุ เราแก้บรรทัดที่เก็บค่า display เป็นการเก็บ surface เพื่อให้ตรงกับใน pygame (Surface)

คำถามคือเราจะเรียกเมท็อดนี้ที่ไหน? เพราะว่าเราเตรียมเมท็อด init เอาไว้ให้คนที่จะเอาคลาสเราไปใช้เขียนส่วนกำหนดค่าเริ่มต้นเองด้วย เรามีสองคำตอบหลัก ๆ

ทางเลือกที่ 1: แบบแรกคือเรียกที่ในเมท็อด run เช่นเราอาจจะเขียนเป็น

class SimpleGame(object):
    # ...
    def run(self):
        self.game_init()
        # ... perform the event loop

จากนั้นส่วนเมท็อด init ไม่ต้องเขียนอะไรเลย วิธีนี้ทำให้คนนำคลาสไปใช้ สามารถเขียนเมท็อด init ได้อย่างสะดวก อย่างไรก็ตาม ถ้ามีการ init อะไรที่ต้องทำหลัง pygame.init เราจะทำไม่ได้

ทางเลือกที่ 2: (เราจะเลือกทางนี้) เราจะเรียกเมท็อดดังกล่าวในเมท็อด init เลย ดังนี้:

class SimpleGame(object):
    # ...
    def init(self):
        self.game_init()

การเลือกเช่นนี้ ทำให้ถ้าคลาสที่ inherit ไป มีการแก้ไขเมท็อด init จะต้องเรียกเมท็อด init ของคลาส SimpleGame ให้ทำงานเองด้วย การเลือกทางนี้อาจจะมีข้อยุ่งยาก แต่ให้ความคล่องตัวมากกว่า โดยเราอาจจะเขียนเมท็อด init ในคลาส SquashGame ของเราเป็นดังนี้

class SquashGame(SimpleGame):
    # ...
    # ---- Note: This is an example in the Squash game
    def init(self):        
        # .... do anything you want to do before calling pygame init code
        #

        super(SquashGame, self).init()

        # .... do anything you want to do after calling pygame init code
        #

หมายเหตุ: สังเกตตัวอย่างการใช้ฟังก์ชัน super เพื่ออ้างถึงคลาสแม่ ในตัวอย่างข้างต้น

ให้แก้และทดลองโปรแกรมให้ทำงาน เราจะพบว่าโปรแกรมไม่จบการทำงานเมื่อเราสั่งปิดโปรแกรมที่หน้าต่าง ให้กด Ctrl-C ที่ใน terminal เพื่อปิดโปรแกรมแทน

หมายเหตุ: อย่าลืมแก้บรรทัดที่สร้าง SquashGame ในฟังก์ชัน main ให้ส่งค่า title ด้วย (เพราะว่าเราแก้ __init__ ของ SimpleGame แล้ว

คำถาม ทำไมโปรแกรมไม่หยุดการทำงาน?

อย่าลืมครับ

เมท็อดแบบ private

โค้ดข้างต้นเราเขียนเมท็อด game_init ไว้ในคลาส SimpleGame เราต้องระวังไม่ให้การนำคลาสดังกล่าวไปใช้ มีการสร้างเมท็อดชื่อ game_init ขึ้นมาซ้ำ

ใน Python การระบุให้เมท็อดเป็น private โดยสมบูรณ์นั้นทำไม่ได้ อย่างไรก็ตาม เราทำโดยตั้งชื่อเมท็อดขึ้นด้วย __ เมท็อดนั้นจะถูกเปลี่ยนชื่อภายในระบบของ python ให้มีชื่อเป็น "_classname__method" ทำให้เรียกซ้ำได้ยาก ดังนั้นเราจะเปลี่ยนชื่อเมท็อด game_init และแก้เมท็อด init เป็นดังนี้

    def __game_init(self):
        # ... 

    def init(self):        
        self.__game_init()

อ่านเพิ่มเติมเกี่ยวกับ private methods: https://docs.python.org/2/tutorial/classes.html#private-variables-and-class-local-references

ส่วน render/update loop

เราจะเพิ่ม render/update loop ที่ยังใช้ไม่ได้จริงเข้าไปใน เมท็อด run ของคลาส

    def run(self):
        self.init()
        while True:
            self.update()
            self.render()
            self.clock.tick(self.fps)

สังเกตว่า เราทำงานไปเรื่อย ๆ ไม่มีวันจบ

คำถาม เราจะทดสอบได้อย่างไรว่าโปรแกรมนี้ทำงานถูกต้อง

ทดสอบโปรแกรมให้เรียบร้อย ก่อนจะ commit และทำงานต่อไป

การจัดการ event พื้นฐาน

โปรแกรมเราไม่จบการทำงานเพราะว่าเราขาดบรรทัดต่อไปนี้ จากโปรแกรมเริ่มต้น

        for event in pygame.event.get(): # process events
            if (event.type == QUIT) or \
               (event.type == KEYDOWN and event.key == K_ESCAPE):
                game_over = True

ในการจะจัดการดังกล่าว เราต้องหาวิธีการเอาตัวเองออกจาก event loop ของช่วงก่อน ที่เราใส่ while True เอาไว้...

เราจะเพิ่มตัวแปร is_terminated ในวัตถุคลาส SimpleGame และเมท็อดที่เกี่ยวข้องดังนี้

    def __init__(self,
                 title,
                 window_size=(640,480),
                 fps=60):
        # ...
        self.is_terminated = False

    def terminate(self):
        self.is_terminated = True

จากนั้นเราจะแก้เงื่อนไข while ของ event loop เป็น

    def run(self):
        # ...
        while not self.is_terminated:
            #....

เราจะเพิ่มเมท็อด __handle_events (สังเกตว่านี่จะเป็น private method จากชื่อ) ที่จัดการ event ของเกม ซึ่งในตอนแรกนี้จะทำงานเพียงแค่จัดการ event QUIT เท่านั้น

    def __handle_events(self):
        for event in pygame.event.get():
            if event.type == QUIT:
                self.terminate()

และเรียกเมท็อดนี้ใน event loop

    def run(self):
        # ...
        while not self.is_terminated:
            self.__handle_events()
            # ...

ทดลองโปรแกรมว่าโปรแกรมจบการทำงานเมื่อกดปิดตามต้องการหรือไม่

จัดการ event ของการกดปุ่ม

เราจะเพิ่มเมท็อด on_key_up และ on_key_down ลงในคลาส SimpleGame

class SimpleGame(object):
    # ...
    def on_key_up(self, key):
        pass

    def on_key_down(self, key):
        pass

งานของคุณ: ให้แก้เมท็อด __handle_events ให้จัดการเรียกเมท็อดเหล่านี้เมื่อมีการกดและปล่อยปุ่ม จากนั้นให้แก้คลาส SquashGame เพื่อทดสอบว่าการทำงานถูกต้องจริง

การเรียก Render และฟังก์ชันลบหน้าจอ

ในส่วนของการวาดนั้น โค้ดตั้งต้นมีการลบหน้าจอด้วยสีดำ เราจะปรับ __init__ ของ SimpleGame ให้รับสี background ก่อน

    def __init__(self,
                 title,
                 background_color,
                 window_size=(640,480),
                 fps=60):
        # ...
        self.background_color = background_color
        # ...

เราจะปรับเมท็อด render เพื่อให้มีการส่งค่า surface ไปด้วย

    def render(self, surface):
        pass

จากนั้นแก้เมท็อด run ให้มีการลบหน้าจอและเรียก pygame.display.update

    def run(self):
        # ...
        while not self.is_terminated:
            # ...
            self.surface.fill(self.background_color)
            self.render(self.surface)
            pygame.display.update()
            # ...

งานของคุณ เราจะทดสอบส่วนการเรียก render นี้ โดยแก้คลาส SquashGame ใน main.py เราจะให้โครงต่าง ๆ ที่ด้านล่าง แต่คุณจะต้องแก้คลาสเพื่อให้แสดงผลและ update อะไรบางอย่าง เพื่อทดสอบ SimpleGame

class SquashGame(gamelib.SimpleGame):
    BLACK = pygame.Color('black')
    WHITE = pygame.Color('white')

    def __init__(self):
        super(SquashGame, self).__init__('Squash', SquashGame.BLACK)
        # .... init something here

    def update(self):
        # ... update the position

    def render(self, surface):
        # ... draw something

    # ...

def main():
    game = SquashGame()
    game.run()

งานที่เหลือ

ให้คุณย้ายโค้ดส่วนคลาส Ball และ Player ไปใส่ไว้ในไฟล์ elements.py (เป็นโมดูล elements) จากนั้นให้แก้ SquashGame จนทำงานได้

อุปสรรคที่คุณต้องเจอและ hint น่าจะเป็นดังนี้:

• คุณต้องสะสางการเรียกใช้ constants ที่เกี่ยวข้องจากโปรแกรมหลักจากคลาส Player และ Ball
• การสลับการเรียก display และ surface ในเมท็อด draw
• เราควรจะเปลี่ยนชื่อเมท็อด draw เป็น render
• ย้ายส่วนการแสดงคะแนนเอามาใส่ใน SquashGame
• ส่วนการตรวจสอบว่าตีโดนหรือไม่ ต้องย้ายมาที่ SquashGame เช่นเดียวกัน

ให้คุณทยอยสะสางไปทีละเรื่อง อาจจะ comment โค้ดอื่น ๆ ไปก่อน เพื่อให้เขียนได้ง่าย

เก็บกวาดเพิ่มเติม

เราอาจจะเก็บกวาดเพิ่มเติมเพื่อให้โค้ดอ่านง่ายขึ้น

ยกตัวอย่างเช่น

• ในโค้ดของคุณอาจจะมีการเรียกใช้ pos โดยตรงจาก player เช่นเรียก self.player.pos += 5
• เราอาจจะเพิ่มเมท็อดในการตรวจสอบว่ามีการกด key หรือเปล่า แทนที่จะตรวจจาก pygame.key.get_pressed() โดยตรง

ดูการแก้พวกนี้ได้ที่ commit นี้

โค้ด

ถ้าคุณอับจนสิ้นหนทาง ดูโค้ดที่แก้แล้วที่นี่ github

Inheritance vs. Composition

การทำ inheritance เป็นทางเลือกที่เราใช้ เพื่อสร้างคลาส SimpleGame เพื่อให้คนนำไปใช้ต่อได้สะดวก อย่างไรก็ตามมี debate มากมายว่าวิธีดังกล่าวนี้ดีหรือไม่ อีกแนวทางหนึ่งที่สามารถใช้ได้ และในหลาย ๆ กรณีทำให้ได้โค้ดที่จัดการง่ายกว่าการทำ inheritance คือการใช้ composition

อ่านรายละเอียดเพิ่มเติมได้ที่นี่

• บทความ Composition over inheritance ในวิกิพีเดีย
• เอกสารเรื่อง Exercise 44: Inheritance Versus Composition จากหนังสือ Learn Python the Hard Way โดย Zed Shaw

หรือ google: inheritance composition เพื่อดูเอกสารออนไลน์อื่น ๆ