บทความสอนกราฟิก

 ลืมรหัสผ่าน
 ลงทะเบียน
ค้นหา
ดู: 2402|ตอบกลับ: 0

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

[คัดลอกลิงก์]

272

กระทู้

272

โพสต์

979

เครดิต

ผู้ดูแลระบบ

Rank: 9Rank: 9Rank: 9

เครดิต
979
แก้ไขครั้งสุดท้ายโดย nooknazha เมื่อ 2018-6-22 17:41

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

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

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



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

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

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

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


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

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

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

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

  1.     b "คุณได้ [score!d] คะแนน!!!"
คัดลอกไปที่คลิปบอร์ด
มาดูผลลัพธ์ที่ได้จากโค๊ดด้านบนกันค่ะ...
score_heart02.png
ตอบคำถามไปเรื่อยๆจนครบ (มี 3 คำถาม) เมื่อหมดคำถามแล้ว ตัวละครก็จะบอก "ผลคะแนน"  ที่เราทำได้ในกรอบคำพูดสนทนาดังภาพด้านล่างค่ะ
score_heart03.png
---------------------------------------------------------------------


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

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

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


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

CODE:

  1. $ show_score = True
คัดลอกไปที่คลิปบอร์ด
ดูตัวอย่างการใส่โค๊ดไฟล์ options.rpy
score_heart04.png
ตัวอย่างการใส่โค๊ดไฟล์ script.rpy
score_heart05.png

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

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

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

score_heart01.png

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

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

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

ขออภัย! คุณไม่ได้รับสิทธิ์ในการดำเนินการในส่วนนี้ กรุณาเลือกอย่างใดอย่างหนึ่ง ลงชื่อเข้าใช้ | ลงทะเบียน

รายละเอียดเครดิต

ข้อความล้วน|อุปกรณ์พกพา|ประวัติการแบน|GraphicFUFU

GMT+7, 2024-3-29 16:06 , Processed in 0.105162 second(s), 21 queries .

Powered by Discuz! X3.4 R20180101, Rev.59

© 2001-2017 Comsenz Inc.

ตอบกระทู้ ขึ้นไปด้านบน ไปที่หน้ารายการกระทู้