สร้างเกมส์ ox ด้วย kivy pt.3

        หลักจากที่ได้เขียนบทความเกี่ยวกับการสร้างเกมส์ ox ด้วย kivy ไปแล้ว 2 บทความด้วยกัน ในบทความนี้จะเป็นบทความบอกความก้าวหน้าจากครั้งก่อนๆ โดยในสัปดาห์ที่ผ่าน ทาง SPN ได้มอบหมายให้ทำ เกมส์ของเรานั้น สามารถที่จะโหลดได้ และ เซฟได้ ซึ่ง ผลออกมาก็สามารถทำได้ดั่งที่ตั้งเป้าหมายไว้แล้ว ซึ่งมันจะมีความก้าวหน้ามาจากบทความเก่า ค่อนข้าง เพราะมีการแก้ไข โค้ดให้เป็นระเบียบ มีการจัดวาง Layout ใหม่ แล้วยังมีแก้ไข คลาสนู้นนี้นั้น เต็มไปหมด 

        โดยเราจะมาดูส่วนแรกที่ทำไปคือ แก้เรื่องของตัวเลขที่แสดงบนเกม ox ให้กลืนไปกลับสีของปุ่มกด ทำให้เหมือนกับว่า ปุ่มกดนั้นเป็นปุ่มกดเปล่าๆไม่มี text ใดๆอยู่เลย

        ซึ่งวิธีการแก้ในจุดนี้ง่ายมากๆ ก็แค่ ในการใส่สีจะมี 4 หลัก คือ r g b a เราก็ทำการใส่ค่า a หรือ ค่าความโปรงแสงให้กลายเป็น 0 ไปซะเลย ก็จะหายไปแล้ว

        ส่วนถัดไป คือการสร้างคลาส Status จะเป็นคลาสที่ทำหน้าที่ทุกอย่างๆ เกี่ยวกับการโชว์ สถานะ ต่างๆทั้ง Label แสดงว่าใครชนะ ตานี้ตาของใคร เกมนี้เสมอหรือเปล่า ซึ่ง ตอนแรกนั้น ได้ทำไว้ใน คลาสหลัก หรือ คลาส GameTable ซึ่งมันไม่ควรที่จะอยู่ตรงไหน ควรจะถูกแยก ออกมา 

        

        ซึ่งในไฟล์ kivy จะมีการจัดรูปแบบ Layout เพิ่มเข้าไปใหม่โดยรูปร่างหน้าตาตอนเสร็จจะเป็นแบบนี้

        โดยจากภาพประกอบด้านล่างจะมีการประกาศคลาสมาใหม่ ซึ่งคลาสนี้ จะมีการจัดออกเป็น 2 ส่วนโดยใช้ AnchorLayout เพราะจะสามารถ กำหนดจุดได้ อย่าง GameTable ส่วนนี้จะอยู่ส่วน บน หรือส่วนที่ใช้เล่นเกม ส่วน Status Bar จะถูกจัดไว้ด้านล่าง

        ต่อไป  จะเป็นส่วนของการแสดง Label โดยจะแสดง ว่าตานี้เป็นตาของใคร พอมีผู้ชนะใครเป็นคนชนะ ถ้าหากเสมอ ก็แสดงว่าเสมอ โดยจะถูกจัด อยู่ใน GridLayout ของ class Status ในไฟล์ kivy โดยจะอยู่ตรงกลาง

         

        โดยรูปร่างเมื่อออกมาจะเป็นดังนี้ โดยตอนแรก ผู้เล่นฝั่ง X จะเล่นก่อน 

         

         เมื่อถึงตาของผู้เล่นฝั่ง O

เมื่อมีผู้ชนะ

เมื่อมีการเสมอตอนท้ายเกมส์

        ส่วนถัดไปจะพูดถึงการทำ Restart โดยเราได้นำแนวคิดมาจาก ComicCreator ในส่วนของ GeneralOptions โดยในไฟล์กี่วี่จะมีการกำหนดว่า หากถูกกด จะเรียกใช้ method restart มาใช้ 

        โดยในส่วนของ method นี่ก็จะทำการวน loop while ไล่ children ที่อยู่ในคลาสของ GameTable โดยจะใช้ ID ในการช่วย ซึ่งจะทำการ set ค่าการแสดงผล หรือ พวกช่องตารางแต่ละตัวให้กลับไปเป็นเหมือนเดิม แล้วจะใส่ text ใหม่จากที่เป็น X หรือ O หรือไม่มีอะไรเลยให้เป็น เรียงเลขจาก 9 8 7 ไปเรื่อยๆ จนถึง 1 แล้วก็ใส่สีตัวอักษร ใส่สีพื้นหลังใหม่ แล้วก็จะเรียกใช้ method reset เพื่อทำการ
reset ค่าต่างๆที่ใช้ในการคำนวณ และ ตัวใน array ให้กลับไปเป็นเหมือนเริ่มต้น

        ส่วนถัดไปจะเป็นของส่วน การ save และ load โดยจะใช้เรื่องของการ read และ write ของ Python มาช่วย (Link) 

การ Save

        

       โดยจะทำการสร้าง list เปล่าๆ ขึ้นมาเพื่อนทำการเก็บข้อมูลจาก list ตัวปัจจุบัน หลังจากนั้นก็จะ open text file ขึ้นมาแล้ว write ลงไป โดยผลออกมาจะมีหน้าตาดังนี้

กด save จากการเล่นแบบด้านบน

จะเห็นได้ว่ามีไฟล์ text เพิ่มขึ้นมา แล้วข้างในจะมีลักษณะเดียวกับด้านบนคือ

ตำแหน่งตัวที่ 1 จะเป็น x ตัวที่ 5 จะเป็น o และ ตัวที่ 9 จะเป็น x

      

การ Load

        การ Load ไฟล์ก็จะทำการ นำคำสั่ง try มาช่วยเพื่อกันการกดทั้งที่ยังไม่ได้มีการ save ส่วนวิธีก็คือ ใช้การ read มา size = 9 เหตุผลที่ว่าต้องทำการ ใส่ size เพราะเมื่อมีการแก้ไขไฟล์ text จากด้านนอก แล้ว กด load หรือ ง่ายๆ คือ การโกงแก้ไขข้อมูล แล้วเข้ามาโหลดเกม จะมีบัคที่ว่า จากที่มันมีตัวใน text 9 ตัว จะกลายเป็น 10 ตัว ซึ่งทำให้การวน loop เกิด error ได้ ซึ่งคิดว่าอาจจะเกิดจาก text editor ที่พอทำการ save แล้ว มันจะเด้งไปบรรทัดใหม่ทุกครั้ง เลยกำหนดให้อ่านแค่ 9 ตัว แล้ว นำ 9 ตัวนี้ไปใส่ใน list  แล้วทำการวน loop แต่ละตัว โดยจะมี 3 เงื่อนไข คือ ถ้าช่องใดมีตัว อักษร x ก็จะให้ใส่เป็น X แล้วใส่พื้นหลัง ถ้าช่องใดมีตัว o ก็จะให้ใส่เป็น O แล้วใส่พิ้นหลัง หากว่าไม่มีตัวใดเลย ก็จะให้ใส่เป็น text ตัวนั้นเหมือนเดิม ไม่มีการเปลี่ยนแปลงใดๆ

        ก็จบกันไปสำหรับการทำ การ restart และ การ save & load โดยใช้วิธีพื้นฐานของ Python และ Kivy

การ read และ write .txt file ใน python pt.2

การ write text file โดย Python
        ก็จะเป็นการเขียน string ลงไปในไฟล์ text โดยจากที่ได้ไปค้นคว้ามาก็ทำมาลองเขียนโค้ด โดยจะมีหน้าตา โค้ดเป็นดังนี้

ไฟล์ Python 

ไฟล์ text หลังจากมีการเขียน โดย Python

text_file = open("write_it","w") และ text_file = open("write_it_2","w") จะเป็นการเปิดไฟล์ขึ้นมาเพื่อให้ w ได้ หรือ write ได้นั้นเอง จากครั้งที่แล้ว ที่ต้องการจะอ่านจะใช้ r แทน

text_file.write("line 1\n") จะเป็นคำสั่งที่ใช้ในการ write ซึ่งในจุดนี้ จะ เขียน line 1 แล้ว \n หมายถึงให้เว้นบรรทัด หน้าตาของโค้ดส่วนนี้เมื่อไปดูใน text file ชื่อ write_it ก็จะมีหน้าตา เหมือนกับด้านบน

text_file.writelines(lines) จะเป็นคำสั่งที่ใช้ write ทีละเป็นชุด อย่างในตัวอย่างจะ ให้ตัวแปร lines เก็บข้อมูลเป็น string 3 ตัว จากนั้นก็ใช้คำสั่ง text_file.writelines(lines) มันก็จะทำการ write ไป 3 บรรทัดดังรูปด้านบน

ปล. จากในคลิปตัวอย่าง เรื่องการ write เหมือนจะมีปัญหา หากว่าได้ทำการ open แล้ว ไม่ close ไฟล์ .txt ทำให้คิดว่า จำเป็นที่จะต้องมีการ close ทุกครั้ง เมื่อใช้คำสั่งเขียน หรือ อ่านเสร็จ

การ read และ write .txt file ใน python pt.1

        จากสิ่งที่ SPN ได้บอกในคลาสว่าต้องการ ให้เกม xo นั้น สามารถ save และ load game เป็น ไฟล์ .txt ได้ ก็เลยลองไปหาข้อมูลการ save และ การ write ไฟล์ text ด้วย python

https://docs.python.org/3/tutorial/inputoutput.html

ลิ้งค์ดังกล่าว ที่แปะ ไว้ เป็นลิ้งค์จากทางเว็บของ Python โดยตรง ซึ่งได้อธิบายไว้ได้ละเอียดมากกกก โดยทางผมก็อ่านแล้วยังไม่เห็นภาพเลย เปิด tab ใหม่แล้วเปิด youtube search หา tutorial ซึ่งก็ได้พบ กับ channel นึง ชื่อว่า investary ที่ได้อธิบายละเอียดมาก

โดยผมจะแปะลิ้งค์ไว้ สำหรับคนที่ต้องการข้อมูล

Reading text file with python.

Writing text file with python.

การอ่านไฟล์ text โดย Python
         จากที่ได้ดูในคลิปของ investary ผมก็ลองทำตามเขาไป จนได้เห็นภาพ โดย code ที่ได้เขียนขึ้นจะมีหน้าตาดังนี้

ไฟล์ Python

ไฟล์ text

จากโค้ดด้านบน ก็จะมีคำสั่งที่เกี่ยวกับการ read text file โดยมีดังนี้

text_file = open(read_file.txt","r") ==> จะเป็นการเปิดไฟล์ text โดย open(ชื่อไฟล์,โหมด) โหมดในที่นี้ก็คือ เหมือนกับว่าต้องการเปิดมาทำอะไร r ก็น่าจะมาจาก read หรือ อ่านนั้นเอง

text_file.read(1) และ text_file.read(5) ==> จะเป็นการอ่านไฟล์ โดยใส่ size เข้าไป อ้างอิงจาก
website ของ Python เอง โดยเมื่อ กดรัน จะได้ออกมาหน้าตาแบบนี้

ซึ่ง จะเห็นได้ว่า บรรทัดแรกจะเขียนว่า Line 1 เมื่อเรียกใช้ text_file.read(1) จะอ่าน 1 ตัว และ text_file.read(5) จะอ่านอีก 5 ตัวถัดไป คำถามต่อไปที่ขึ้นมาในหัวของผมก็คือ จำนวนตัวนี้รวม เว้นวรรคด้วยหรือเปล่า เพราะว่า บรรทัด Line 1 นั้นมีการเคาะเว้นวรรค เลยทำการแก้ไข ให้มันอ่าน ตัว 1 แล้วอ่าน 4 ตัว ผลที่ได้คือ

มันนับว่าเป็นตัวอักษรด้วย ซึ่งก็จบไปกับคำสั่งนี้

text_file.close () จะเป็นคำสั่งไว้ใช้ในการ ปิดไฟล์ text ซึ่งในส่วนนี้ investary ผู้สอนในยูทูป ได้บอกว่าคุณควรจะมีการปิด ไฟล์ทุกครั้งหลังจากที่ใช้งานเสร็จ หรือ ก็คือ open เสร็จแล้วต้อง close ด้วยทุกครั้ง เพื่อไม่ให้เกิดปัญหาที่อาจจะตามมา

text_file.readline() จะเป็นคำสั่งที่ใช้ในการอ่านไฟล์เป็นทีละบรรทัดๆ ในส่วนซึ่ง ในโค้ด Python ด้านบนผมได้ เรียกใช้ คำสั่งนี้ไป 3 ครั้ง ผลออกมาก็จะเป็นดังนี้

จะเห็นได้กว่า จะอ่านออกมา ทีละบรรทัดๆ

text.files.readlines() เป็นคำสั่งที่จะอ่านไฟล์ ทั้งหมด ตั้งแต่บรรทัดแรกยันบรรทัดสุดท้าย โดยจะเก็บออกมาในรูปแบบ ชุด String

ซึ่งหลังจากได้สร้าง for loop ออกมาแล้วให้อ่านทีละบรรทัด ก็จะได้ผล เหมือนกับการเรียกใช้คำสั่ง readline ธรรมดา 3 ครั้งเช่นเดียวกัน

ซึ่งก็หมดแล้วสำหรับการ read ไฟล์ ส่วนการ write ไฟล์ จะมาต่อในอีกบทความนึง
หากมีความผิดพลาดประการใดก็ขออภัยไว้ ณ ที่นี้ด้วย

รวม link การค้นหาข้อมูลที่ใช้ในการสร้าง

การใช้ label และ button

Label

Button

การใส่สี kivy จะใช้ เป็น r g b a
โดย a จะเป็นความโปร่งแสง
ส่วนค่า rgb นั้น ในตอนแรกนึกว่าจะต้องใส่เป็นแค่ค่า 0-1 แต่ความจริงแล้วสามารถใส่ได้ 0-255 เลยได้ไปหาเว็บที่ไว้บอกว่าสีแต่ละสี มีค่า rgb เท่าไรมาช่วยในการแต่งสี

http://www.rapidtables.com/web/color/RGB_Color.htm

หรือ ถ้าสัญญาณ อินเทอร์เน็ตไม่ดีก็สามารถ ใช้ paint แทนได้เช่นกัน

สร้างเกมส์ ox ด้วย kivy pt.2

        จากที่ได้ clone มาจาก bitbucket ซึ่งรับงานจากเพื่อนมาทำต่อ ก็ได้ศึกษา โค้ดที่เพื่อนได้เขียน และใส่สิ่งต่างๆ เพิ่มไป
        โดยในขณะที่ได้เขียน บล็อกอยู่นี้ ก็ได้เริ่มทำงานไประยะนึง แล้ว นี่คือหน้าตาของเกมในตอนนี้

        โดย จากแนวคิดที่เพื่อนได้ทำมา ก็คือการนำโค้ด xo ตัวเก่ามาดัดแปลงให้เข้ากับ kivy โดยเจ้าตัวเลข 1-9 ที่ผู้อ่านได้เห็นนั้น ก็คือ ลำดับของช่องตาราง ถามว่านำไปแปะไว้ทำไม คำตอบก็คือ เมื่อทำการกดที่ปุ่มใดๆ จะทำการส่งค่า text ในปุ่มนั้นๆที่กดโดนไปให้คำนวณเป็นตัวในตาราง

        โดยภาพด้านล่างจะเป็น ไฟล์ kivy ซึ่งแต่ละปุ่มจะมี text เรียงเลขไป จาก 1-9

        โดยในเงื่อนไขด้านล่างนี้หาก กดโดนที่จุดใด จะทำการเรียกใช้ method enter_pos ซึ่งจะส่งค่า text ตัวเลขไปยัง method นั้น

        โดยใน method ดังกล่าวจะมีการคำนวณ โดยนำค่าที่รับได้มา cast เป็น int เพื่อใช้ในการคำนวณ แถว และ หลัก ใน array ที่เก็บ ค่าตัว X,O โดย แถว จะนำไป ลบ 1 แล้วหาร ด้วย 3 หลักจะนำไป % กับ 3 และ ลบ ด้วย 1 ก็จะได้หลัก กับ แถวที่ต้องการมาแล้ว



        โดยจากที่ทำมาสักพักก็สังเกตเห็นได้ว่า ส่วนที่มีการเกี่ยวกับกับทาง gui นั้นก็คือ ส่วนที่จะต้องมีปฏิสัมพันธ์กับ user ซึ่งในที่นี้ก็คือ การเล่น หรือ การกดใส่ค่า x หรือ o และ การแสดงผลต่างๆ ซึ่งจากแต่ก่อนที่แสดงใน terminal เราก็เปลี่ยนมาใช้เป็นแบบ แสดงทางหน้าจอเลย โดยใช้ Label ในส่วนการรับค่า หลักและแถว เราก็ใช้แนวคิดเดียว กับการใส่ input แบบ 1-9 ลงในตาราง เพียงแต่เปลี่ยนจากการที่พิมพ์ตัวเลข ใส่ใน terminal เราก็หันมาใช้ ในส่วนของ collide_point ว่ากดโดยที่ตัวใด แล้ว text ตัวเลขของมันนั้นเลขอะไร จากนั้นส่งค่าไปให้ method เดิม อันเดียวกับตอนที่เล่น ใน terminal
       ซึ่งในตอนนี้เราก็ได้ใส่เงื่อนไข ให้มันเล่นได้ เหลือแต่การเก็บตก สิ่งเล็กๆน้อย เช่น ทำให้เลข 1-9 นั้นมองไม่เห็น ฯลฯ

สร้างเกมส์ ox ด้วย kivy pt.1

        ในตอนนี้เริ่มทำไปได้เพียง การสร้างปุ่มกด จำนวน 9 ปุ่ม โดยใช้ layout แบบ grid เพราะจากการที่ลองใช้แบบอื่นๆดูแล้ว แบบ grid ดูจะมีความยุ่งยากน้อยที่สุด แล้วยังมีคุณสมบัติในการที่สามารถ จะกำหนด หลัก หรือ columns ได้ แล้วยังมี spacing ในการเว้นระยะห่างจากปุ่มถึงปุ่ม padding เว้น จากกรอบหน้าจอ จึงทำให้คิดว่าเหมาะแก่การที่จะนำมาใช้ในการจัดวางตำแหน่ง ปุ่มที่มีลักษณะเป็น ตาราง 3*3
       
 # File name: tictactoe.kv
#:kivy 1.9.0

<Button>:
    background_color:(1,0,1,1)
       
<Table>:
    GridLayout:
        cols: 3
        padding: 150,100
        spacing: 30
        Button:
        Button:
        Button:
        Button:
        Button:
        Button:
        Button:
        Button:
        Button:

จาก code ก็คือ ยังไม่ได้กำหนดอะไร เพียงแต่กำหนดให้เป็นปุ่มกด มีการกำหนดสี ยังไม่ได้ใส่เงื่อนไขอะไรทั้งสิ้น ซึ่งจะเป็นจุดเริ่มต้นการสร้างเกมส์ OX

API (Kivy)

website : https://kivy.org/docs/api-kivy.uix.button.html
ใช้ในการศึกษา API แต่ละตัวของ kivy

ศึกษาการใช้คำสั่ง hg merge

จากเว็บที่ได้มีเพื่อนแนะนำมา( Sarik Kumpan)

https://www.mercurial-scm.org/wiki/ThaiMerge

ตัวของกระผมก็พอที่จะสรุปได้ว่า การ merge กันใน mercurial นั้นก็คือการรวม branch ให้กลายเป็น  branch เดียว หรือก็คือการ รวมการแก้ไขทั้งหมดให้เป็นการแก้ไขเดียว
ซึ่งได้ลองทำ กับเพื่อนในกลุ่ม ซึ่งผลออกมาก็ยังไม่ค่อยเข้าใจซะทีเดียว

โดยการจะ merge นั้นก็จะให้เพื่อนลองคอมมิท งานบน bitbucket โดยที่เรา จะทำงานกันคนละกิ่ง พอเพื่อนคอมมิท ผมก็จะ ใช้คำสั่ง hg pull แล้วจากนั้นก็ hg merge ซึ่งผลก็ยังไม่เป็นตามที่คาดหมาย แต่ในสัญลักษณ์ ใน commit บน bitbucket ก็ได้แสดงว่า merge กันแล้ว

รายงานผล Test 2

โจทย์ข้อแรก
        ลองเปลี่ยนชื่อ Method on_children ใน drawingspace.py เพื่อทำให้สามารถไม่สามารถที่จะถูกเรียกใช้ได้แบบ อัติโนมัติ
วิธีที่แก้ปัญหา
ให้ทำการเรียกใช้ method เมื่อมีการ add หรือ remove widgets

โจทย์ข้อที่สอง
        ลองทำการลบแบบกลุ่ม
วิธีที่ใช้ ในไฟล์ generaloptions.py จะเป็นโค้ดเกี่ยวกับการกระทำต่างๆ พวกการลบ การจับกลุ่มจะอยู่ในส่วนี้ เลยทำการแก้ไขให้ตอนที่จะมีการกด remove ว่ามีการกดโหมดกลุ่มอยู่หรือเปล่าถ้าหากใช้ก็จะทำการเช็ค children ทุกตัวว่าตัวไหนถูก selected อยู่ ก็จะถูกลบทั้งหมด

โจทย์ข้อที่สาม

        นับจำนวนของ stickman

วิธีที่ใช้ จากการขอคำแนะนำจากเพื่อน เพื่อนได้แนะนำว่าให้ลอง ปริ้นท์ Child ออกมาดูว่าเป็นยังไง พอลองปริ้นออกมาแล้วนั้น ได้ผลดังนี้

ซึ่งทำให้รู้ว่า สิ่งที่ถูกเก็บใน children นั้น คือ object สองประเภทในที่นี้คือ StickMan และ DraggableWidget ซึ่งก็เลยลองแปลงค่าเหล่านี้ ให้กลายเป็น String แล้วทำการเช็คว่าใน String ที่เก็บค่ามาจาก children นั้นว่าเป็นคำอะไร อย่างในโค้ดก็จะเป็นตัวอักษร index ที่ 14 15 16 17 18 

ซึ่งถ้าเรียงเป็นคำว่า Stick จะทำให้นับเป็นจำนวนของ Stickman

 พอการนับทำได้ก็ต้องทำการแสดงผล โดยจะไปเพิ่มใน statusbar.kv เพิ่ม label เข้าไปแล้วก็ไปเพิ่ม ตัวแปรเก็บค่า ที่ statusbar.py ด้วยเช่นกัน