[Renpy] 33. วิธี เพิ่ม- ลด คะแนนคำถาม (Score Question) แบบแสดงคะแนนที่หน้าหลัก

nooknazha

[Renpy] 33. วิธี เพิ่ม- ลด คะแนนคำถาม  (ScoreQuestion) แบบแสดงคะแนนที่หน้าหลัก

การตั้งคำถามที่มีการสะสมคะแนน จะเป็นการนำผลคะแนนที่ได้ไปเข้าสู่กระบวนการเงื่อนไขต่าง ซึ่งจะเป็นการกำหนดทิศทางการจบของเกมส์ว่าต้องการให้เกมส์จบแบบไหน

สำหรับวิธีการเพิ่ม-ลด คะแนน ด้วย Choice Menu จะไม่มีอะไรซับซัอนนะค่ะ แต่วิธีการที่จะให้แสดงผลรวมคะแนนที่ส่วนต่างๆของหน้าจอเกมส์นี่สิ มันจะมีอยู่หลายประเภทด้วยกัน เช่นให้แสดงที่หน้าจอหลักเป็นภาพ/เป็นแถบค่าพลัง หรือแสดงเป็นตัวเลข หรือ แสดงที่หน้าพิเศษแยกต่างหากในกรณีผู้เล่นจะสามารถเช็คผลรวมคะแนนของตนเองได้ก็ต่อเมื่อต้องคลิกที่ปุ่มเมนูพิเศษ(ต้องสร้างขึ้นเอง)จากหน้าเมนูหลักเข้าไปดูซึ่งโค๊ดการเขียนก็จะมีความซับซ้อนมากขึ้น


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

ในบทความนี้ข้าพเจ้าจะแนะนำ  2 แบบคือ
แบบที่1 สั่งให้โปรแกรมแสดงตัวเลขคะแนนที่กรอบคำพูดสนทนา(เป็นวิธีที่ง่ายสุด)
แบบที่2 สร้าง ui สั่งให้แสดงผลคะแนนที่หน้าเกมส์หลักพร้อมภาพและแสดงความรู้สึกของตัวละคร ซึ่งจะเปลี่ยนไปตามผลรวมคะแนนที่ผู้เล่นทำได้ --------------------------------------------------------------------------------

แบบที่ 1
สั่งให้โปรแกรมแสดงตัวเลขคะแนนที่กรอบคำพูดสนทนา

ตัวอย่างการเขียนโค๊ด เพิ่ม-ลดคะแนน ที่ไฟล์ script.rpy

1. 
   
2. 
   
3. init:
   
4.         $ b = Character('กวี', color="#f8f092")
   
5. image kawii01 = "cha/kawii_01.png"
   
6. image kawii02 = "cha/kawii_02.png"
   
7. # เริ่มเกมส์
   
8. label start:
   
9.     $ score = 0
   
10.     scene black
    
11.     show kawii01 at left with dissolve
    
12. #คำถามที่ 1
    
13. menu:
    
14.     b "พยัญชนะในภาษาอังกฤษตัว "ph" เมื่อออกเสียง ผสมกัน
    
15.         ในภาษาไทยจะเท่ากับพยัญชนะตัวอะไร ?"
    
16.    
    
17.     "ออกเสียงเป็นตัว ช.ช้าง":
    
18.         pass
    
19.     "ออกเสียงเป็นตัว ฟ.ฟัน":
    
20.         $ score += 1
    
21.         pass
    
22.     "ออกเสียงเป็นตัว พ.พาน และ ฮ.นกฮูก":
    
23.         pass
    
24.    
    
25. #คำถามที่ 2
    
26. menu:
    
27.     b "พยัญชนะในภาษาอังกฤษตัว "aew" เมื่อออกเสียง ผสมกัน
    
28.         ในภาษาไทยจะเท่ากับสระตัวอะไร ?"
    
29.    
    
30.     "สระ เ-" :
    
31.         $ score -= 1
    
32.         if  score <= 0:
    
33.             $ score = 0
    
34.         pass
    
35.     "สระ แ-ว ":
    
36.         $ score += 1
    
37.         pass
    
38.     "สระ แ- ":
    
39.         $ score -= 1
    
40.         if  score <= 0:
    
41.             $ score = 0
    
42.         pass
    
43.    
    
44. #คำถามที่ 3 (คำถามสุดท้าย)
    
45. menu:
    
46.     b "พยัญชนะในภาษาอังกฤษตัว "oei" เมื่อออกเสียง ผสมกัน
    
47.     ในภาษาไทยจะเท่ากับสระตัวอะไร ?"
    
48.    
    
49.     "สระ ไ- ":
    
50.         $ score -= 1
    
51.         if  score <= 0:
    
52.             $ score = 0
    
53.         jump score
    
54.     "สระ เ-า":
    
55.         $ score -= 1
    
56.         if  score <= 0:
    
57.             $ score = 0
    
58.         jump score
    
59.         
    
60.     "สระ เ-ย":
    
61.         $ score += 1
    
62.         jump score
    
63. #---------สรุปผล--------------------
    
64. label score:
    
65.     hide kawii01
    
66.     show kawii02  with dissolve
    
67.     b "คุณได้ [score!d] คะแนน!!!"
    
68.     if score == 0:
    
69.         #End lose
    
70.         b "คุณควรพยายามให้มากกว่านี้!"
    
71.         jump end_lose
    
72.         
    
73.     if score == 1:
    
74.         #End normal
    
75.         b "อย่างน้อยคุณก็มีความสามารถพอใช้!"
    
76.         jump end_normal
    
77.    
    
78.     if score == 2:
    
79.         #End happy
    
80.         b "คุณเป็นคนเก่งทีเดียว! "
    
81.         jump end_happy
    
82.     if score == 3:
    
83.         #End perfect!!!
    
84.         b "คุณนี่สุดยอดจริงๆ! "
    
85.         jump end_perfect
    
86. return
    
87. 
    

คัดลอกไปที่คลิปบอร์ด

- โค๊ดด้านล่างนี้"pass" จะเป็นการสั่งให้โปรแกรมผ่านไปยังคำสั่งถัดไปต่างกับคำสั่ง "jump" ซึ่งจะเป็นการสั่งให้โปรแกรมกระโดดข้ามไปอ่านlabel ต่างๆ โดยไม่สนใจ label ต่างๆ ที่อยู่ก่อนหน้า

1. 
   
2. pass
   

คัดลอกไปที่คลิปบอร์ด

- โค๊ดด้านล่างนี้ "[score!d]" จะเป็นการสั่งให้โปรแกรมแสดงคะแนนรวมสุดท้ายที่คำนวณได้ค่ะ

1. 
   
2.     b "คุณได้ [score!d] คะแนน!!!"
   

คัดลอกไปที่คลิปบอร์ด

มาดูผลลัพธ์ที่ได้จากโค๊ดด้านบนกันค่ะ...

ตอบคำถามไปเรื่อยๆจนครบ (มี 3 คำถาม) เมื่อหมดคำถามแล้ว ตัวละครก็จะบอก "ผลคะแนน"  ที่เราทำได้ในกรอบคำพูดสนทนาดังภาพด้านล่างค่ะ

---------------------------------------------------------------------


แบบที่ 2
สร้าง ui สั่งให้แสดงผลคะแนนที่หน้าเกมส์หลักพร้อมภาพและแสดงความรู้สึกของตัวละคร ซึ่งจะเปลี่ยนไปตามผลรวมคะแนนที่ผู้เล่นทำได้

ขั้นตอนที่1
ให้เตรียมภาพ2 ภาพคือ"ภาพพื้นหลัง" และ "ภาพแทนค่าคะแนน" หรือจะคลิกขวาที่ 2ภาพด้านล่างและเซฟไปใช้ก็ได้ค่ะ
1. ภาพพื้นหลัง score

2. ภาพหัวใจ


ขั้นตอนที่ 2
เปิดไฟล์options.rpy และนำโค๊ดนี้ไปใส่ไว้ที่ด้านล่างสุดค่ะ
CODE:

1. 
   
2. #code modify-----------score_heart---------by nookfufu2
   
3. init:
   
4.     $ max_score_heart = 3
   
5.     $ score_heart = 0
   
6.     python hide:
   
7.         def score_heart():
   
8.             if show_score:
   
9.                 ui.image("menu/menu_heart.png",
   
10.                          xpos=0.0, xanchor="left",
    
11.                          ypos=0.0, yanchor="top")
    
12.                 ui.text("กวี", size=20, xalign=0.02, yalign=0.015)
    
13.                 ui.text("%d/%d" % (score_heart, max_score_heart), xalign=0.2,yalign=0.015, size=20)
    
14.                 ui.text("score: ", xalign=0.02, yalign=0.05)
    
15.                 ui.text("ความรู้สึก:", size=20, xalign=0.02, yalign=0.095)
    
16.                
    
17.                 if score_heart == 0:
    
18.                     ui.text("เฉยๆ", xalign=0.15,yalign=0.095, size=20)
    
19.                 if score_heart == 1:
    
20.                     ui.text("สนใจ", xalign=0.15,yalign=0.095, size=20)
    
21.                     ui.image("menu/heart1.png",xalign=0.1, yalign=0.06)
    
22.                 if score_heart == 2:
    
23.                     ui.text("ชอบ", xalign=0.15,yalign=0.095, size=20)
    
24.                     ui.image("menu/heart1.png",xalign=0.1, yalign=0.06)
    
25.                     ui.image("menu/heart1.png",xalign=0.13, yalign=0.06)
    
26.                 if score_heart == 3:
    
27.                     ui.text("สนิท", xalign=0.15,yalign=0.095, size=20)
    
28.                     ui.image("menu/heart1.png",xalign=0.1, yalign=0.06)
    
29.                     ui.image("menu/heart1.png",xalign=0.13, yalign=0.06)
    
30.                     ui.image("menu/heart1.png",xalign=0.16, yalign=0.06)
    
31.         config.overlay_functions.append(score_heart)
    

คัดลอกไปที่คลิปบอร์ด

ขั้นตอนที่ 3
ให้เปิดไฟล์script.rpy ขึ้นมาและให้นำโค๊ดนี้ไปใส่ต่อ label start: ค่ะ

CODE:

1. 
   
2. $ show_score = True
   

คัดลอกไปที่คลิปบอร์ด

ดูตัวอย่างการใส่โค๊ดไฟล์ options.rpy

ตัวอย่างการใส่โค๊ดไฟล์ script.rpy


จากโค๊ดด้านบน จะเห็นว่าข้าพเจ้ากำหนดเงื่อนไขการจบของเกมส์ไว้ด้วยซึ่งเราจะต้องสร้าง label ฉากจบแบบต่างๆไว้มารองรับ  เช่น label จบแบบแย่ๆ /label จบแบบธรรมดา/ label จบแบบแฮปปี้ หรือ label จบแบบเพอเฟคสุดๆ

(ถ้าไม่สร้าง labelฉากจบแบบต่างๆรองรับเตรียมไว้ เมื่อโปรแกรมวิ่งมาถึงเงื่อนไข jumpมันจะเกิด error แจ้งว่าไม่มี label ฉากจบดังกล่าวในโปรแกรมค่ะ)

บันทึกไฟล์และรันโปรแกรม ก็จะได้ผลลัพธ์ดังนี้ค่ะ

ถ้าต้องการสร้างค่าคะแนนของตัวละครมากกว่า1 ตัวละครเราก็ต้องสร้างหน้ากาก ui แยกการทำงานตามจำนวนที่เราต้องการค่ะดังตัวอย่างโค๊ดด้านล่าง...........

1. 
   
2. #-----------------------------------------------------------------------------
   
3. #code modify-----------score_heart---------by nookfufu2--------11111111
   
4. init:
   
5.     $ max_score_heart = 3
   
6.     $ score_heart = 0
   
7.     python hide:
   
8.         def score_heart():
   
9.             if show_score:
   
10.                 ui.image("menu/menu_heart.png",
    
11.                          xpos=0.1, xanchor="left",
    
12.                          ypos=0.0, yanchor="top")
    
13.                 ui.text("กวี", size=20, xalign=0.12, yalign=0.015)
    
14.                 ui.text("%d/%d" % (score_heart, max_score_heart), xalign=0.3,yalign=0.015, size=20)
    
15.                 ui.text("score: ", xalign=0.12, yalign=0.05)
    
16.                 ui.text("ความรู้สึก:", size=20, xalign=0.13, yalign=0.095)
    
17.                
    
18.                 if score_heart == 0:
    
19.                     ui.text("เฉยๆ", xalign=0.25,yalign=0.095, size=20)
    
20.                 if score_heart == 1:
    
21.                     ui.text("สนใจ", xalign=0.25,yalign=0.095, size=20)
    
22.                     ui.image("menu/heart1.png",xalign=0.205, yalign=0.06)
    
23.                 if score_heart == 2:
    
24.                     ui.text("ชอบ", xalign=0.25,yalign=0.095, size=20)
    
25.                     ui.image("menu/heart1.png",xalign=0.205, yalign=0.06)
    
26.                     ui.image("menu/heart1.png",xalign=0.235, yalign=0.06)
    
27.                 if score_heart == 3:
    
28.                     ui.text("สนิท", xalign=0.25,yalign=0.095, size=20)
    
29.                     ui.image("menu/heart1.png",xalign=0.205, yalign=0.06)
    
30.                     ui.image("menu/heart1.png",xalign=0.235, yalign=0.06)
    
31.                     ui.image("menu/heart1.png",xalign=0.265, yalign=0.06)
    
32.         config.overlay_functions.append(score_heart)
    
33. #-----------------------------------------------------------------------------
    
34. #code modify-----------score_heart---------by nookfufu2--------22222222
    
35. init:
    
36.     $ max_score_heart2 = 3
    
37.     $ score_heart2 = 0
    
38.     python hide:
    
39.         def score_heart():
    
40.             if show_score:
    
41.                 ui.image("menu/menu_heart.png",
    
42.                          xpos=0.36, xanchor="left",
    
43.                          ypos=0.0, yanchor="top")
    
44.                 ui.text("ปกิณกะ", size=20, xalign=0.41, yalign=0.015)
    
45.                 ui.text("%d/%d" % (score_heart2, max_score_heart2), xalign=0.57,yalign=0.015, size=20)
    
46.                 ui.text("score: ", xalign=0.4, yalign=0.05)
    
47.                 ui.text("ความรู้สึก:", size=20, xalign=0.42, yalign=0.095)
    
48.                
    
49.                 if score_heart2 == 0:
    
50.                     ui.text("เฉยๆ", xalign=0.52,yalign=0.095, size=20)
    
51.                 if score_heart2 == 1:
    
52.                     ui.text("สนใจ", xalign=0.52,yalign=0.095, size=20)
    
53.                     ui.image("menu/heart1.png",xalign=0.475, yalign=0.06)
    
54.                 if score_heart2 == 2:
    
55.                     ui.text("ชอบ", xalign=0.52,yalign=0.095, size=20)
    
56.                     ui.image("menu/heart1.png",xalign=0.475, yalign=0.06)
    
57.                     ui.image("menu/heart1.png",xalign=0.505, yalign=0.06)
    
58.                 if score_heart2 == 3:
    
59.                     ui.text("สนิท", xalign=0.52,yalign=0.095, size=20)
    
60.                     ui.image("menu/heart1.png",xalign=0.475, yalign=0.06)
    
61.                     ui.image("menu/heart1.png",xalign=0.505, yalign=0.06)
    
62.                     ui.image("menu/heart1.png",xalign=0.535, yalign=0.06)
    
63.         config.overlay_functions.append(score_heart)
    
64.         
    
65. #-----------------------------------------------------------------------------
    
66. #code modify-----------score_heart---------by nookfufu2--------3333333
    
67. init:
    
68.     $ max_score_heart3 = 3
    
69.     $ score_heart3 = 0
    
70.     python hide:
    
71.         def score_heart():
    
72.             if show_score:
    
73.                 ui.image("menu/menu_heart.png",
    
74.                          xpos=0.62, xanchor="left",
    
75.                          ypos=0.0, yanchor="top")
    
76.                 ui.text("วัฎฎะ", size=20, xalign=0.67, yalign=0.015)
    
77.                 ui.text("%d/%d" % (score_heart3, max_score_heart3), xalign=0.85,yalign=0.015, size=20)
    
78.                 ui.text("score: ", xalign=0.69, yalign=0.05)
    
79.                 ui.text("ความรู้สึก:", size=20, xalign=0.71, yalign=0.095)
    
80.                
    
81.                 if score_heart3 == 0:
    
82.                     ui.text("เฉยๆ", xalign=0.80,yalign=0.095, size=20)
    
83.                 if score_heart3 == 1:
    
84.                     ui.text("สนใจ", xalign=0.80,yalign=0.095, size=20)
    
85.                     ui.image("menu/heart1.png",xalign=0.74, yalign=0.06)
    
86.                 if score_heart3 == 2:
    
87.                     ui.text("ชอบ", xalign=0.80,yalign=0.095, size=20)
    
88.                     ui.image("menu/heart1.png",xalign=0.74, yalign=0.06)
    
89.                     ui.image("menu/heart1.png",xalign=0.77, yalign=0.06)
    
90.                 if score_heart3 == 3:
    
91.                     ui.text("สนิท", xalign=0.80,yalign=0.095, size=20)
    
92.                     ui.image("menu/heart1.png",xalign=0.74, yalign=0.06)
    
93.                     ui.image("menu/heart1.png",xalign=0.77, yalign=0.06)
    
94.                     ui.image("menu/heart1.png",xalign=0.80, yalign=0.06)
    
95.         config.overlay_functions.append(score_heart)
    

คัดลอกไปที่คลิปบอร์ด

ผลลัพธ์ที่ได้ก็จะออกมาเป็นดังนี้..........

***************************************

บทความโดย นุ้ก
ขอจบบทความแค่เพียงเท่านี้ แล้วพบกันใหม่บทความหน้าค่ะ ^^
(ขอสงวนสิทธิ์อนุญาตให้เผยแพร่เฉพาะในเว็บ www.graphicfufu.comเท่านั้น)