Oop lab/arcade/space

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

ติดตั้ง Arcade

เราจะใช้ game library ชื่อ arcade ในการพัฒนาเกม

ติดตั้ง pip/pip3

pip เป็นโปรแกรมสำหรับติดตั้ง library บน Python ในระบบที่มี python3 พร้อม ๆ กับ python2 เราจะเรียก pip3 เพื่อให้ติดตั้ง library ลงในส่วนของ python3

1. ติดตั้ง pip บน Windows

pip จะมาพร้อมกับการติดตั้ง python ให้เลือก option ดังกล่าวด้วย ถ้าเปิด command แล้วเรียก pip ขึ้นก็แสดงว่าได้ติดตั้งเรียบร้อย ถ้าไม่มี ให้ลองติดตั้ง python3 อีกครั้ง และให้เลือก pip ในหน้า Optional Features ด้วย

• ดูรายละเอียดการติดตั้งที่นี่ arcade installation บน windows

2. ติดตั้ง pip3 บน Linux

ให้ติดตั้ง pip3 และโปรแกรมประกอบอื่น ๆ โดยสั่ง

sudo apt install -y python3-dev python3-pip libjpeg-dev zlib1g-dev

3. ติดตั้ง pip3 บน Mac

ถ้าติดตั้ง python3 แล้ว น่าจะมี pip3 มาแล้ว ทดลองเรียกดูใน terminal

ใช้ pip ติดตั้ง arcade

ถ้าในการติดตั้ง python เราได้ลง pip มาแล้ว เราจะสามารถติดตั้ง arcade ผ่านทาง pip ได้โดยสั่ง

pip3 install arcade

ถ้าเป็น windows ให้สั่ง

pip install arcade

virtualenv

เราติดตั้ง arcade ลงใน library ของระบบเลย ซึ่งทำแบบนี้บ่อย ๆ อาจจะทำให้ library เละและตีกันได้ Python มีระบบสำหรับติดตั้ง library แยกกัน เรียกว่า virtualenv

ยังเขียนส่วนนี้ไม่เสร็จ: to do - how to install with virtualenv

เกมว่าง ๆ

ก่อนเริ่ม

สร้าง directory สำหรับเก็บเกม เราจะใช้ git อย่างสม่ำเสมอและตลอดเวลา ดังนั้น อย่าลืมเรียก

git init

ก่อนเขียน

template

ด้านล่างจะเป็น template เริ่มต้นของเกม เราจะสร้างคลาส SpaceGameWindow ที่ inherit มาจาก arcade.Window เขียนโปรแกรมหลักไว้ที่ space.py ดังด้านล่าง

import arcade

SCREEN_WIDTH = 600
SCREEN_HEIGHT = 600

class SpaceGameWindow(arcade.Window):
    def __init__(self, width, height):
        super().__init__(width, height)

        arcade.set_background_color(arcade.color.BLACK)


    def on_draw(self):
        arcade.start_render()

        
if __name__ == '__main__':
    window = SpaceGameWindow(SCREEN_WIDTH, SCREEN_HEIGHT)
    arcade.run()

โครงดังกล่าวตัดบางส่วนมาจากตัวอย่างที่ [1]

คำอธิบายทั่วไป

• เราสั่ง import arcade ด้านบน เมื่อสั่งแล้ว ในโค้ดจะมี module arcade ให้ใช้ได้ เราจะใช้ function หรือ class อะไรจากโมดูลดังกล่าวได้ โดยต้องขึ้นต้นว่า arcade เช่น arcade.Window arcade.set_background_color เป็นต้น

• คลาส SpaceGameWindow เป็น subclass ของ arcade.Window โดยเราเขียนเมท็อดเพิ่มดังนี้
  • __init__
  • on_draw เมท็อดนี้จะถูกเรียกซ้ำ ๆ เราสามารถปรับอัตราการอัพเดทได้โดยเรียกเมท็อด set_update_rate ตอนนี้เมท็อดดังกล่าวยังไม่ได้ทำอะไรเท่าใด เรียกแค่ฟังก์ชันเตรียมพร้อมเท่านั้น (arcade.start_render)

• ส่วน if __name__ == '__main__' ด้านล่าง เป็นโค้ดมาตรฐานในการตรวจสอบว่าไฟล์ที่เราเขียนอยู่ ถูกเรียกเป็นโปรแกรมหลักในการทำงานหรือไม่

ทดลองรัน

ถ้าทดลองรันได้ อย่าลืม add space.py แล้วก็

commit งานด้วย!

แสดงรูปยานอวกาศ

สร้าง sprite

เราจะใช้โปรแกรมเช่น GIMP, Photoshop, Paint.NET เพื่อวาด sprite ขนาด 64 x 64 จุด วาดยานอวกาศที่มีทิศหันขึ้น อย่าลืมทำให้ background นั้นใส (transparent) ด้วย โปรแกรมมักจะแสดงดังด้านล่าง (ถ้า background ใส)

ถ้าไม่ได้ทำให้ background ใส เวลาแสดงจะเห็นเป็นกรอบขาว ๆ ดังรูปด้านล่าง

สร้างไดเรกทอรี images เพื่อเก็บ assets รูป จากนั้นจัดเก็บรูปดังกล่าวชื่อ ship.png

ถ้าขี้เกียจวาด ไปเอารูปได้ที่ ship.png.

Sprite

เราจะสร้างวัตถุจากคลาส arcade.Sprite แทนยานอวกาศดังกล่าว เราจะเพิ่ม attribute ship เพื่อเก็บ sprite นี้

    def __init__(self, width, height):
        super().__init__(width, height)

        arcade.set_background_color(arcade.color.BLACK)

        self.ship = arcade.Sprite('images/ship.png')
        self.ship.set_position(100, 100)

สังเกตว่าเราเรียกเมท็อด set_position ในการระบุตำแหน่งของยานอวกาศบนหน้าจอ ตำแหน่งนี้จะเป็นตำแหน่งของจุดตรงกลางของ sprite ซึ่งสามารถอ่านได้จาก attribute center_x และ center_y

เราจะวาดรูปยานอวกาศในเมท็อด on_draw ดังนี้

    def on_draw(self):
        arcade.start_render()
        
        self.ship.draw()

ทดลองรันโปรแกรม จะเห็นว่ามียานอวกาศนิ่ง ๆ ปรากฏบนหน้าจอ

ได้เวลา commit สักที (อย่าลืม add images/ship.png ด้วย)

เคลื่อนที่

เราจะปรับตำแหน่งของ self.ship เป็นระยะ ๆ โดยเขียนเมท็อด animate ซึ่งจะถูกเรียกเป็นระยะ ๆ โดยอัตโนมัติโดย framework เมท็อดดังกล่าวจะได้รับ parameter delta แทนระยะเวลาระหว่างการเรียกเมท็อด animate ครั้งที่แล้ว กับครั้งนี้ มาด้วย ซึ่งเราจะใช้หรือไม่ก็ได้

โค้ดด้านล่างปรับตำแหน่งของ self.ship สังเกตว่าเราปรับตำแหน่งโดยคงค่า center_x ไว้ แต่เพิ่ม center_y ขึ้น 5

    def animate(self, delta):
        self.ship.set_position(self.ship.center_x, self.ship.center_y + 5)

ให้สังเกตการใช้ self.ship ในโค้ดด้านบนด้วย

เมื่อทดลองรัน เราจะเห็นว่ายานจะวิ่งทะลุไปด้านบนของหน้าจอ

เราจะปรับให้ยานวิ่งทะลุมาจากด้านล่างโดยตรวจสอบพิกัดในแกน y ของยานก่อน ดังโค้ดด้านล่าง

    def animate(self, delta):
        ship = self.ship

        if ship.center_y > SCREEN_HEIGHT:
            ship.center_y = 0
        ship.set_position(ship.center_x, ship.center_y + 5)

สังเกตว่าเราจะต้องเรียกใช้ self.ship บ่อย เราเลยเอามาเก็บไว้ในตัวแปร local ชื่อ ship เสียก่อนเลย

ทดลองรันทดสอบโปรแกรมว่าทำงานได้ถูกต้องหรือไม่

ได้เวลา commit อีกทีล่ะ

World, WorldRenderer

โปรแกรมที่เราเขียนมามีปัญหาหลายอย่าง หลัก ๆ คือโค้ดทั้งหมดรวมอยู่ใน space.py ที่แย่ไปกว่านั้นก็คือสถานะของยานอวกาศผูกอยู่กับ sprite ทำให้ถ้าเราต้องการจะทดสอบโค้ดที่เกี่ยวข้องกับการทำงานของยานอวกาศ เราต้องไปยุ่งกับ sprite ด้วย อาจจะทำให้ทำ unit test ได้ลำบาก

ในส่วนนี้เราจะพยายามแยกโค้ดต่าง ๆ ออกมาจากโปรแกรมหลัก โดยพยายามอิงกับโครงสร้างของเกมจาก libGDX ที่เราเคยเขียนบน Java เราจะจัดการเป็นขั้น ๆ ดังนี้

คลาส Ship

เราจะแยกโค้ดเกี่ยวกับการจัดการตำแหน่ง (และอื่น ๆ ในอนาคต) ของยานอวกาศ มาไว้ในคลาส Ship เราจะรวมโค้ดส่วนนี้ไว้ในโมดูลชื่อว่า models

เขียน class Ship ใน models.py ดังนี้ สังเกตว่าเราแทบจะย้ายโค้ดมาจาก space.py เลย เรายังมีปัญหาในการนำค่า SCREEN_HEIGHT มาใช้ ตอนนี้ให้ใส่เป็นค่าคงที่ไว้ก่อน (เดี๋ยวเราจะไปแก้)

class Ship:
    def __init__(self, x, y):
        self.x = x
        self.y = y

    def animate(self, delta):
        if self.y > 600:
            self.y = 0
        self.y += 5