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

nooknazha

[Renpy] 32. วิธี เพิ่ม- ลด คะแนนคำถาม (Score Question) แบบแสดงที่หน้าอื่น
จากบทความที่สอนการเพิ่ม-ลดคะแนนก่อนหน้านี้ จะเห็นว่า... เมื่อแถบค่าสเตตัสต่างๆที่ถูกสั่งให้ไปแสดงที่หน้าหลักของเกมส์ มีผลทำให้หน้าจอเกมส์แคบลง (แล้วแต่คนชอบแต่โดยส่วนตัวข้าพเจ้าชอบให้หน้าจอหลักมันโล่งๆมากกว่า) ด้วยเหตุนี้เองในบทความนี้จึงแนะนำอีกวิธีที่จะแยกการแสดงผลคะแนนให้ไปโชว์อยู่ที่หน้าจออื่นเพื่อความสบายตามากขึ้น (หรือเปล่า? -*-)

ขั้นตอนที่ 1
- ให้เตรียมภาพ 5ภาพ  ได้แก่

1. ภาพปุ่มพิเศษแบบปกติ


2. ภาพปุ่มพิเศษแบบ hover


3. ภาพพื้นฉากแบบปกติ


4. ภาพพื้นภาพเมื่อเลื่อนเม้าส์มาวางทับ (hover)


5. ภาพที่จะมาแสดงแทนค่าคะแนนตัวแลข


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

ขั้นตอนที่ 2
เราจะต้องสร้างปุ่มพิเศษเพื่อให้สามารถคลิกไปที่หน้าสะสมคะแนนได้ซะก่อนโดยให้หาพิกัดตำแหน่งของปุ่มพิเศษในโปรแกรม Photoshop และนำโค๊ดนี้ไปแทรกเพิ่มไว้ที่หน้า QuickMenu

- ดูวิธีการทำ Quick menu แบบ Imagemapได้ที่บทความนี้ค่ะ [renpy] วิธีทำ ImagemapQuick Menu
CODE:

1. <font size="4">
   
2.         hotspot (721, 5, 54, 49) action ShowMenu('score')
   
3. 
   
4. </font>

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

ตัวอย่างการแทรกโค๊ด.............
หลังจากแทรกโค๊ดแล้ว ปุ่มพิเศษก็จะมาแสดงอยู่ที่หน้าจอเกมส์หลักดังนี้ค่ะถ้าคลิกที่ปุ่มนี้ มันก็จะวิ่งไปที่หน้า score:


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

ขั้นตอนที่ 3
- ให้สร้างหน้าscore: รองรับไว้โดยให้นำโค๊ดด้านล่างนี้ไปใส่ที่ไฟล์ options.rpyบรรทัดล่างสุด

CODE:

1. <font size="4">
   
2. 
   
3. #__________________________________________________________
   
4. ################::::  Screen_Score ::::###############
   
5. screen score:
   
6.     imagemap:
   
7.         xalign 1.0 yalign 1.0
   
8.         
   
9.         ground 'menu/bg_screen_score.png'
   
10.         hover 'menu/bg_screen_score_hover.png'
    
11.         hotspot (568, 128, 190, 56) action Return() hover_sound "sound/click.wav"
    
12.         
    
13. ##--------------------คะแนน ของกวี--------------- ##
    
14.     python:
    
15.         ui.text("ชื่อ:" , bold=True, size=25, xalign=0.25, yalign=0.09)
    
16.         ui.text("กวี", size=25, xalign=0.35, yalign=0.09)
    
17.         ui.text("score:", bold=True, size=25, xalign=0.26, yalign=0.15)
    
18.         ui.text("%d/%d" % (score_heart, max_score_heart),
    
19.             size=25, xalign=0.4, yalign=0.15)
    
20.         ui.text("ความสัมพันธ์:" , bold=True, size=25, xalign=0.295, yalign=0.21)
    
21.         
    
22.         if  score_heart == 0:
    
23.                 ui.text("เฉยๆ", xalign=0.5,yalign=0.21, size=25)
    
24.         if  score_heart == 1:
    
25.                 ui.text("สนใจ", xalign=0.5,yalign=0.21, size=25)
    
26.                 ui.image("menu/heart1.png",xalign=0.53, yalign=0.09)
    
27.                
    
28.         if  score_heart == 2:
    
29.                 ui.text("ชอบ", xalign=0.5,yalign=0.21, size=25)
    
30.                 ui.image("menu/heart1.png",xalign=0.53, yalign=0.09)
    
31.                 ui.image("menu/heart1.png",xalign=0.56, yalign=0.09)
    
32.                
    
33.         if  score_heart == 3:
    
34.                 ui.text("สนิท", xalign=0.5,yalign=0.21, size=25)
    
35.                 ui.image("menu/heart1.png",xalign=0.53, yalign=0.09)
    
36.                 ui.image("menu/heart1.png",xalign=0.56, yalign=0.09)
    
37.                 ui.image("menu/heart1.png",xalign=0.59, yalign=0.09)
    
38.                
    
39. ##--------------------คะแนน ของปกิณกะ--------------- ##
    
40.     python:
    
41.         ui.text("ชื่อ:" , bold=True, size=25, xalign=0.25, yalign=0.43)
    
42.         ui.text("ปกิณกะ", size=25, xalign=0.36, yalign=0.43)
    
43.         ui.text("score:", bold=True, size=25, xalign=0.26, yalign=0.49)
    
44.         ui.text("%d/%d" % (score_heart2, max_score_heart2),
    
45.             size=25, xalign=0.4, yalign=0.49)
    
46.         ui.text("ความสัมพันธ์:" , bold=True, size=25, xalign=0.295, yalign=0.55)
    
47.         
    
48.         if  score_heart2 == 0:
    
49.                 ui.text("เฉยๆ", xalign=0.5,yalign=0.55, size=25)
    
50.         if  score_heart2 == 1:
    
51.                 ui.text("สนใจ", xalign=0.5,yalign=0.55, size=25)
    
52.                 ui.image("menu/heart1.png",xalign=0.53, yalign=0.415)
    
53.                
    
54.         if  score_heart2 == 2:
    
55.                 ui.text("ชอบ", xalign=0.5,yalign=0.55, size=25)
    
56.                 ui.image("menu/heart1.png",xalign=0.53, yalign=0.415)
    
57.                 ui.image("menu/heart1.png",xalign=0.56, yalign=0.445)
    
58.                
    
59.         if  score_heart2 == 3:
    
60.                 ui.text("สนิท", xalign=0.5,yalign=0.55, size=25)
    
61.                 ui.image("menu/heart1.png",xalign=0.53, yalign=0.415)
    
62.                 ui.image("menu/heart1.png",xalign=0.56, yalign=0.415)
    
63.                 ui.image("menu/heart1.png",xalign=0.59, yalign=0.415)
    
64.                
    
65. ##--------------------คะแนน ของวัฎฎะ--------------- ##
    
66.     python:
    
67.         ui.text("ชื่อ:" , bold=True, size=25, xalign=0.25, yalign=0.76)
    
68.         ui.text("วัฎฎะ", size=25, xalign=0.36, yalign=0.76)
    
69.         ui.text("score:", bold=True, size=25, xalign=0.26, yalign=0.82)
    
70.         ui.text("%d/%d" % (score_heart3, max_score_heart3),
    
71.             size=25, xalign=0.4, yalign=0.82)
    
72.         ui.text("ความสัมพันธ์:" , bold=True, size=25, xalign=0.295, yalign=0.88)
    
73.         
    
74.         if  score_heart3 == 0:
    
75.                 ui.text("เฉยๆ", xalign=0.5,yalign=0.88, size=25)
    
76.         if  score_heart3 == 1:
    
77.                 ui.text("สนใจ", xalign=0.5,yalign=0.88, size=25)
    
78.                 ui.image("menu/heart1.png",xalign=0.53, yalign=0.745)
    
79.         if  score_heart3 == 2:
    
80.                 ui.text("ชอบ", xalign=0.5,yalign=0.88, size=25)
    
81.                 ui.image("menu/heart1.png",xalign=0.53, yalign=0.745)
    
82.                 ui.image("menu/heart1.png",xalign=0.56, yalign=0.745)
    
83.                
    
84.         if  score_heart3 == 3:
    
85.                 ui.text("สนิท", xalign=0.5,yalign=0.88, size=25)
    
86.                 ui.image("menu/heart1.png",xalign=0.53, yalign=0.745)
    
87.                 ui.image("menu/heart1.png",xalign=0.56, yalign=0.745)
    
88.                 ui.image("menu/heart1.png",xalign=0.59, yalign=0.745)
    
89. #________________________________________________________
    
90. ###########################################
    
91. </font>

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

(***ค่าตำแหน่ง xalign กับ, yalignเราต้องกะระยะเอาเองโดยการทดลองเปลี่ยนตัวเลขจุดทศนิยมข้างหลังและรันโปรแกรมเพื่อดูผลลัพธ์ที่หน้าจอเกมส์ X คือปรับค่าแสดงผลตามแนวนนอน/ Y ปรับค่าแสดงผลตามแนวตั้งมันเสียเวลาจะหาตำแหน่งยากแค่อันแรกๆ พอหาตำแหน่งหลักได้ที่เหลือก็แค่เปลี่ยนตัวเลขขยับตาม หรือ+ค่าเพิ่มไปแค่นิดหน่อย)
-------------------------------------------

ขั้นตอนที่ 4
- ตัวอย่างการเขียนโค๊ดที่ไฟล์script.rpy อันนี้ข้าพเจ้าเขียนแค่พอเป็นแนวทางนะค่ะไปประยุกต์สร้างเงื่อนไขเอาเอง

CODE:

1. <font size="4">
   
2. # You can place the script of your game in this file.
   
3. # Declare images below this line, using the image statement.
   
4. # eg. image eileen happy = "eileen_happy.png"
   
5. 
   
6. define  b = Character('กวี', color="#FCFC68",
   
7.                what_xpos = 5,
   
8.                
   
9.                ctc="ctc_animation",ctc_position="fixed",
   
10.                
    
11.                show_side_image=ConditionSwitch(
    
12.                     "ccg == 'normal' ", "cha/kawii_mini2.png",
    
13.                     "ccg == 'happy' ", "cha/kawii_mini_smile2.png",
    
14.                     None, Null(),
    
15.                     xalign=0.01, yalign=1.01))
    
16. image ctc_animation = Animation("menu/ctc_1_1.png", 0.20,
    
17.                                                  "menu/ctc_1_2.png", 0.20,
    
18.                                                  "menu/ctc_1_3.png", 0.20,
    
19.                                                  xpos=0.85, ypos=0.95,
    
20.                                                  xanchor=1.0, yanchor=1.0 )
    
21. image kawii01 = "cha/kawii_01.png"
    
22. image kawii02 = "cha/kawii_02.png"
    
23. image group_charactor = "cha/group_charactor.png"
    
24. #------------------------------------------------------------------------------
    
25. # เริ่มเกมส์
    
26. label start:
    
27.     $ score_num = 0
    
28.     $ max_score_heart = 3
    
29.     $ max_score_heart2 = 3
    
30.     $ max_score_heart3 = 3
    
31.     $ score_heart = 0
    
32.     $ score_heart2 = 0
    
33.     $ score_heart3 = 0
    
34.     scene black
    
35.     show kawii01 at left with dissolve
    
36.     $ ccg = 'happy'
    
37. #------------------------------------------------------------------------------
    
38. #คำถามที่ 1 ------เก็บคะแนนของ....กวี-----------------
    
39. menu:
    
40.     b "พยัญชนะในภาษาอังกฤษตัว "ph" เมื่อออกเสียง ผสมกัน
    
41.         ในภาษาไทยจะเท่ากับพยัญชนะตัวอะไร ?"
    
42.    
    
43.     "ออกเสียงเป็นตัว ช.ช้าง":
    
44.         pass
    
45.     "ออกเสียงเป็นตัว ฟ.ฟัน":
    
46.         $ score_num +=1
    
47.         $ score_heart += 1
    
48.         pass
    
49.     "ออกเสียงเป็นตัว พ.พาน และ ฮ.นกฮูก":
    
50.         pass
    
51.    
    
52. #คำถามที่ 2
    
53. menu:
    
54.     b "พยัญชนะในภาษาอังกฤษตัว "aew" เมื่อออกเสียง ผสมกัน
    
55.         ในภาษาไทยจะเท่ากับสระตัวอะไร ?"
    
56.    
    
57.     "สระ เ-" :
    
58.         $ score_heart -= 1
    
59.         if  score_heart <= 0:
    
60.             $ score_heart = 0
    
61.         pass
    
62.     "สระ แ-ว ":
    
63.         $ score_num +=1
    
64.         $ score_heart += 1
    
65.         pass
    
66.     "สระ แ- ":
    
67.         $ score_heart -= 1
    
68.         if  score_heart <= 0:
    
69.             $ score_heart = 0
    
70.         pass
    
71.    
    
72. #คำถามที่ 3 (คำถามสุดท้าย)
    
73. menu:
    
74.     b "พยัญชนะในภาษาอังกฤษตัว "oei" เมื่อออกเสียง ผสมกัน
    
75.     ในภาษาไทยจะเท่ากับสระตัวอะไร ?"
    
76.    
    
77.     "สระ ไ- ":
    
78.         $ score_heart -= 1
    
79.         if  score_heart <= 0:
    
80.             $ score_heart = 0
    
81.         pass
    
82.     "สระ เ-า":
    
83.         $ score_heart -= 1
    
84.         if  score_heart <= 0:
    
85.             $ score_heart = 0
    
86.         pass
    
87.         
    
88.     "สระ เ-ย":
    
89.         $ score_num +=1
    
90.         $ score_heart += 1
    
91.         pass
    
92. #------------------------------------------------------------------------------
    
93. #คำถามที่ 1----เก็บคะแนนของ.....วัฎฎะ-------------
    
94. menu:
    
95.     b "พยัญชนะในภาษาอังกฤษตัว "ph" เมื่อออกเสียง ผสมกัน
    
96.         ในภาษาไทยจะเท่ากับพยัญชนะตัวอะไร ?"
    
97.    
    
98.     "ออกเสียงเป็นตัว ช.ช้าง":
    
99.         pass
    
100.     "ออกเสียงเป็นตัว ฟ.ฟัน":
     
101.         $ score_num +=1
     
102.         $ score_heart2 += 1
     
103.         pass
     
104.     "ออกเสียงเป็นตัว พ.พาน และ ฮ.นกฮูก":
     
105.         pass
     
106.    
     
107. #คำถามที่ 2
     
108. menu:
     
109.     b "พยัญชนะในภาษาอังกฤษตัว "aew" เมื่อออกเสียง ผสมกัน
     
110.         ในภาษาไทยจะเท่ากับสระตัวอะไร ?"
     
111.    
     
112.     "สระ เ-" :
     
113.         $ score_heart2 -= 1
     
114.         if  score_heart2 <= 0:
     
115.             $ score_heart2 = 0
     
116.         pass
     
117.     "สระ แ-ว ":
     
118.         $ score_num +=1
     
119.         $ score_heart2 += 1
     
120.         pass
     
121.     "สระ แ- ":
     
122.         $ score_heart2 -= 1
     
123.         if  score_heart2 <= 0:
     
124.             $ score_heart2 = 0
     
125.         pass
     
126.    
     
127. #คำถามที่ 3 (คำถามสุดท้าย)
     
128. menu:
     
129.     b "พยัญชนะในภาษาอังกฤษตัว "oei" เมื่อออกเสียง ผสมกัน
     
130.     ในภาษาไทยจะเท่ากับสระตัวอะไร ?"
     
131.    
     
132.     "สระ ไ- ":
     
133.         $ score_heart2 -= 1
     
134.         if  score_heart2 <= 0:
     
135.             $ score_heart2 = 0
     
136.         pass
     
137.     "สระ เ-า":
     
138.         $ score_heart2 -= 1
     
139.         if  score_heart2 <= 0:
     
140.             $ score_heart2 = 0
     
141.         pass
     
142.         
     
143.     "สระ เ-ย":
     
144.         $ score_num +=1
     
145.         $ score_heart2 += 1
     
146.         pass
     
147. #------------------------------------------------------------------------------
     
148. #คำถามที่ 1--------เก็บคะแนนของ....ปกิณกะ-----------
     
149. menu:
     
150.     b "พยัญชนะในภาษาอังกฤษตัว "ph" เมื่อออกเสียง ผสมกัน
     
151.         ในภาษาไทยจะเท่ากับพยัญชนะตัวอะไร ?"
     
152.    
     
153.     "ออกเสียงเป็นตัว ช.ช้าง":
     
154.         pass
     
155.     "ออกเสียงเป็นตัว ฟ.ฟัน":
     
156.         $ score_num +=1
     
157.         $ score_heart3 += 1
     
158.         pass
     
159.     "ออกเสียงเป็นตัว พ.พาน และ ฮ.นกฮูก":
     
160.         pass
     
161.    
     
162. #คำถามที่ 2
     
163. menu:
     
164.     b "พยัญชนะในภาษาอังกฤษตัว "aew" เมื่อออกเสียง ผสมกัน
     
165.         ในภาษาไทยจะเท่ากับสระตัวอะไร ?"
     
166.    
     
167.     "สระ เ-" :
     
168.         $ score_heart3 -= 1
     
169.         if  score_heart3 <= 0:
     
170.             $ score_heart3 = 0
     
171.         pass
     
172.     "สระ แ-ว ":
     
173.         $ score_num +=1
     
174.         $ score_heart3 += 1
     
175.         pass
     
176.     "สระ แ- ":
     
177.         $ score_heart3 -= 1
     
178.         if  score_heart3 <= 0:
     
179.             $ score_heart3 = 0
     
180.         pass
     
181.    
     
182. #คำถามที่ 3 (คำถามสุดท้าย)
     
183. menu:
     
184.     b "พยัญชนะในภาษาอังกฤษตัว "oei" เมื่อออกเสียง ผสมกัน
     
185.     ในภาษาไทยจะเท่ากับสระตัวอะไร ?"
     
186.    
     
187.     "สระ ไ- ":
     
188.         $ score_heart3 -= 1
     
189.         if  score_heart3 <= 0:
     
190.             $ score_heart3 = 0
     
191.         jump score
     
192.     "สระ เ-า":
     
193.         $ score_heart3 -= 1
     
194.         if  score_heart3 <= 0:
     
195.             $ score_heart3 = 0
     
196.         jump score
     
197.         
     
198.     "สระ เ-ย":
     
199.         $ score_num +=1
     
200.         $ score_heart3 += 1
     
201.         jump score
     
202.         
     
203. #------------สรุปผล...ว่าได้จะให้จบแบบไหน----(ตัวอย่างแบบย่อ...แล้วแต่จะนำโค๊ดไปประยุกช์ค่ะ)---------#
     
204. label score:
     
205.     hide kawii01
     
206.     show group_charactor with dissolve
     
207.     b "คุณได้ [score_num!d] คะแนน!!!"
     
208.     if score_num <= 0:
     
209.         #End lose
     
210.         b "คุณควรพยายามให้มากกว่านี้!"
     
211.         jump end_lose
     
212.         
     
213.     if score_num <= 3:
     
214.         #End normal
     
215.         b "อย่างน้อยคุณก็มีความสามารถพอใช้!"
     
216.         jump end_normal
     
217.    
     
218.     if score_num <= 6:
     
219.         #End happy
     
220.         b "คุณเป็นคนเก่งทีเดียว! "
     
221.         jump end_happy
     
222.     if score_num <= 9:
     
223.         #End perfect!!!
     
224.         $ ccg = 'happy'
     
225.         b "คุณนี่สุดยอดจริงๆ! "
     
226.         jump end_perfect
     
227. return
     
228. 
     
229. </font>

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

ทดสอบรันโปรแกรมโดยการตอบคำถามไปเรื่อยๆ แล้วคอยดูว่าคะแนนของตัวละครที่หน้า score: เพิ่มตามด้วยไหม



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

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