[Renpy] 24. วิธีทำอัลบั้มภาพ CG Gallery แบบ Classic

nooknazha

[Renpy] 24. วิธีทำอัลบั้มภาพ CG Gallery แบบ Classic

บทความ Galleryเป็นบทความที่ไม่อยากทำมากที่สุด เพราะต้องใช้ภาพประกอบเยอะมากแต่มันก็เป็นส่วนหนึ่งของเกมส์ Visual Novel ที่จำเป็นต้องมีมากที่สุดเช่นกันยังไงก็ต้องทำล่ะนะ -*- ด้วยเหตุนี้เองเพื่อความเร็วรวดข้าพเจ้าจึงทำภาพประกอบเกมส์เลยทำแบบง่ายๆ เพราะจะเน้นอธิบายแค่วิธีการเชื่อมโยงโค๊ดแต่ละส่วนจนออกมาเป็นผลลัพธ์ Gallery ดังตัวอย่างข้างบนนะค่ะ

ตอนแรกว่าจะให้เป็นบทความหลังๆแต่พอดีจะลบไฟล์ Demo เกมส์ตัว Gallery นี้ทิ้งไปแล้วจะลองเปลี่ยนมาใช้แบบ Image Map ล้วนๆดูบ้างคิดว่าน่าจะสวยดั่งกว่า แต่สำหรับคนที่ชอบแบบคราสสิคก็ให้ใช้วิธีทำตามนี้แทนค่ะ

ขั้นตอนที่ 1
- ให้โหลดไฟล์ชื่อ new_gallery.rpy
- หลังจากแตกไฟล์แล้ว ให้นำไปใส่ในแฟ้มเกมส์ของเราค่ะ

ขั้นตอนที่ 2
- ให้เตรียมภาพสำหรับทำพื้นหลัง1 ภาพ

- จากนั้นให้เปิดโปรแกรม JEdit ขึ้นมาและใช้คำสั่ง File > New (หรือกด Ctrl+N) เพื่อสร้างไฟล์ใหม่
- ให้นำโค๊ดด้านล่างไปใส่ที่ไฟล์ใหม่ค่ะ

1. image menu_bonus  = "map/pattern_Bonus.jpg"
   
2. label bonus:
   
3.     scene menu_bonus with dissolve
   
4.     menu:
   
5.         "CG Gallery":
   
6.             jump gallery
   
7.         "Profilre":
   
8.             jump Profile
   
9.         "Music":
   
10.             jump sound_game
    
11.         "Return Main Menu":
    
12.             jump main_menu_screen

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

ตัวอย่าง....

- แล้วก็ให้ไปที่คำสั่ง File >Save (หรือกดCtrl+S) เพื่อบันทึกไฟล์
- ตั้งชื่อไฟลว่าอะไรก็ได้ที่สื่อความหมายและเราสามารถค้นหาเจอง่ายๆ และสกุลของไฟล์จะต้องบันทึกเป็น .rpy เท่านั้น!!!!

(เราบันทึกชื่อว่าbonus.rpy)

- หลังจากบันทึกไฟล์เสร็จแล้ว ให้ลองรันเกมส์ดูค่ะเมื่อเราทำการคลิกที่ปุ่มเมนู "Bonus" หน้าเมนูช้อยก็จะแสดงออกมาเป็นแบบนี้
- จากเมนูด้านล่างเราจะยังไม่สามารถคลิกเข้าไปที่ส่วนไหนได้เพราะยังไม่ได้สร้างโค๊ดที่จะมารองรับเงื่อนไขค่ะ

(*ในขั้นตอนนี้เราอาจจะกดปุ่ม"Print Screen" เพื่อแคปเจอร์หน้าจอและนำไปแก้ไขตำแหน่งต่างๆของภาพพื้นหลังใหม่ในโปรแกรม Photoshop )

ขั้นตอนที่ 3
- เตรียมภาพ 4กลุ่มด้วยกันคือ

กลุ่มที่1 ภาพสำหรับบังhover,idle 2 ภาพ และภาพที่ถูกล๊อค (ภาพ No Image ) 1ภาพ ขนาดภาพ 160*124 (หรือแล้วแต่ชอบ)
ตัวอย่าง บันทึกภาพเป็น .png
1. gallery_hover.png จะเป็นภาพโล่งๆ ไม่ได้ทำอะไร


2. gallery_idle.png จะเป็นภาพกึ่งโปร่งใสสีเทาเล็กน้อยเวลาบังจะได้มองทะลุเห็นปุ่มกดที่ถูกบังไว้ด้านหลัง


3. gallery_locked.png เป็นภาพทึบทั้งหมด แล้วแต่จะออกแบบค่ะเอาไว้สำหรับภาพที่ยังไม่ถูกปลดล๊อค มันก็จะแสดงเป็นหน้าแบบนี้

กลุ่มที่ 2 ภาพสำหรับทำปุ่มกดให้ทำตามจำนวนภาพที่ต้องการแสดงใน gallery  เช่นภาพที่ต้องการแสดงมีทั้งหมด6 ภาพ เราก็ต้องทำภาพปุ่มกดเตรียมไว้ทั้งหมด 6 ภาพเช่นกัน ขนาดภาพ 160*124 (หรือแล้วแต่ชอบ)
ตัวอย่าง


กลุ่มที่ 3 ภาพที่จะได้แสดงในgallery ควรมีมากกว่า 3 ภาพขึ้นไป  (ภาพกลุ่มนี้... เราจะดึงภาพฉากพื้นหลังที่แสดงอยู่ภายในฉากเกมส์มาใช้)ขนาดภาพ 800*600 (เท่ากับหรือเล็กกว่าหน้าจอเกส์ก็ได้)
ตัวอย่าง

สำหรับภาพกลุ่มที่ 1 - 2 - 3 โหลดจากที่นี่ค่ะ ทำเตรียมไว้ให้แล้ว
map.rar (678.32 KB, ดาวน์โหลดแล้ว: 474)

2018-6-5 22:49 อัปโหลด

คลิกชื่อไฟล์เพื่อดาวน์โหลด

กลุ่มที่ 4 ภาพพื้นหลังของหน้าGallery 1 ภาพ
ตัวอย่าง

ขั้นตอนที่ 4
- เราจะทำการสร้างlabel gallery ขึ้นมาเพื่อรองรับเงื่อนไขนะค่ะ โดย....ให้คัดลอกนำโค๊ดด้านล่างนี้ ไปวางต่อท้ายโค๊ดตัวข้างบน

Code: ต้นฉบับ

1. 
   
2. init:
   
3.     # Position the navigation on the right side of the screen.
   
4.     $ style.gallery_nav_frame.xpos = 800 - 10
   
5.     $ style.gallery_nav_frame.xanchor = 1.0
   
6.     $ style.gallery_nav_frame.ypos = 12
   
7. 
   
8.     # Add the gallery to the main menu.
   
9.     $ config.main_menu.insert(2, ('Gallery', "gallery", "True"))
   
10. 
    
11. # The entry point to the gallery code.
    
12. label gallery:
    
13.     python hide:
    
14. 
    
15.         # Construct a new gallery object.
    
16.         g = Gallery()
    
17. 
    
18.         # The image used for locked buttons.
    
19.         g.locked_button = "gallery_locked.png"
    
20. 
    
21.         # The background of a locked image.
    
22.         g.locked_background = "gallery_lockedbg.jpg"
    
23. 
    
24.         # Frames added over unlocked buttons, in hover and idle states.
    
25.         g.hover_border = "gallery_hover.png"
    
26.         g.idle_border = "gallery_idle.png"
    
27. 
    
28.         # An images used as the background of the various gallery pages.
    
29.         g.background = "gallery_background.jpg"
    
30. 
    
31.         # Lay out the gallery images on the screen.
    
32.         # These settings lay images out 3 across and 4 down.
    
33.         # The upper left corner of the gird is at xpos 10, ypos 20.
    
34.         # They expect button images to be 155x112 in size.
    
35.         g.grid_layout((3, 4), (10, 12), (160, 124))
    
36. 
    
37.         # Show the background page.
    
38.         g.page("Backgrounds")
    
39. 
    
40.         # Our first button is a picture of the beach.
    
41.         g.button("thumb_beach.jpg")
    
42.         #
    
43.         # These show images, if they have been unlocked. The image name must
    
44.         # have been defined using an image statement.
    
45.         g.unlock_image("bg beach daytime")
    
46.         g.unlock_image("bg beach nighttime")
    
47.         #
    
48.         # This shows a displayable...
    
49.         g.display("beach_sketch.jpg")
    
50.         # ... if all prior images have been show.
    
51.         g.allprior()
    
52. 
    
53.         # A second set of images.
    
54.         g.button("thumb_lighthouse.jpg")
    
55.         g.unlock_image("bg lighthouse day")
    
56.         g.unlock_image("bg lighthouse night")
    
57.         g.display("lighthouse_sketch.jpg")
    
58.         g.allprior()
    
59. 
    
60. 
    
61. 
    
62.         # We can use g.page to introduce a second page.
    
63.         g.page("Characters")
    
64. 
    
65.         g.button("thumb_eileen.jpg")
    
66.         #
    
67.         # Note that we can give image and unlock image more than one image
    
68.         # at a time.
    
69.         g.unlock_image("bg lighthouse day", "eileen day happy")
    
70.         g.unlock_image("bg lighthouse day", "eileen day mad")
    
71. 
    
72. 
    
73. 
    
74.         # Another page, this one for concept art.
    
75.         g.page("Concept Art")
    
76. 
    
77.         g.button("thumb_concepts.jpg")
    
78.         #
    
79.         # We can apply conditions to buttons as well as to images.
    
80.         # The "condition" condition checks an arbitrary expression.
    
81.         g.condition("persistent.beat_game")
    
82.         #
    
83.         g.display("concept1.jpg")
    
84.         g.display("concept2.jpg")
    
85.         g.display("concept3.jpg")
    
86. 
    
87. 
    
88.         # Now, show the gallery.
    
89.         g.show()
    
90. 
    
91.     jump main_menu_screen
    

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

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


Code: Modify ใหม่ใน bons.rpy ของเรา

1. image menu_bonus  = "map/pattern_Bonus.jpg"
   
2. 
   
3. label bonus:
   
4.     scene menu_bonus with dissolve
   
5.     menu:
   
6.         "CG Gallery":
   
7.             jump gallery
   
8.         "Profilre":
   
9.             jump Profile
   
10.         "Music":
    
11.             jump sound_game
    
12.         "Return Main Menu":
    
13.             jump main_menu_screen
    
14. 
    
15. init:
    
16.     # Position the navigation on the right side of the screen.
    
17.     $ style.gallery_nav_frame.xpos = 800 - 10
    
18.     $ style.gallery_nav_frame.xanchor = 1.0
    
19.     $ style.gallery_nav_frame.ypos = 12
    
20. 
    
21.     $ style.gallery_nav_frame.xalign = 0.95
    
22.     $ style.gallery_nav_frame.yalign = 0.3
    
23. 
    
24.     # Add the gallery to the main menu.
    
25.     $ config.main_menu.insert(2, ('Gallery', "gallery", "True"))
    
26. 
    
27. ###################################################
    
28. # The entry point to the gallery code.
    
29. label gallery:
    
30. 
    
31.     python hide:
    
32. 
    
33.         # Construct a new gallery object.
    
34.         g = Gallery()
    
35. 
    
36.         # The image used for locked buttons.
    
37.         g.locked_button = "map/gallery_locked.jpg"
    
38. 
    
39.         # The background of a locked image.
    
40.         g.locked_background = "map/pattern_cat.jpg"
    
41. 
    
42.         # Frames added over unlocked buttons, in hover and idle states.
    
43.         g.hover_border = "map/gallery_hover.png"
    
44.         g.idle_border = "map/gallery_idle.png"
    
45. 
    
46.         # An images used as the background of the various gallery pages.
    
47.         g.background = "map/pattern_cat.jpg"
    
48.         
    
49.         # The transition used when switching images.
    
50.         g.transition = dissolve
    
51. 
    
52.         # Lay out the gallery images on the screen.
    
53.         # These settings lay images out 3 across and 4 down.
    
54.         # The upper left corner of the gird is at xpos 10, ypos 20.
    
55.         # They expect button images to be 155x112 in size. 160*124)
    
56.         g.grid_layout((3, 4), (50, 100), (180, 144))
    
57. 
    
58.         
    
59. ####################################################
    
60.         # Show the background page.
    
61. 
    
62.         g.page("Cat")
    
63.         # Our first button is a picture of the beach.
    
64.         g.button("map/cat1_button.jpg")
    
65.         g.unlock_image("cat1")
    
66. 
    
67.         g.button("map/cat2_button.jpg")
    
68.         g.unlock_image("cat2")
    
69.         g.unlock_image("cat3")
    
70. 
    
71.         g.button("map/cat3_button.jpg")
    
72.         g.unlock_image("cat3")
    
73.         
    
74.         g.button("map/cat4_button.jpg")
    
75.         g.unlock_image("cat4")
    
76.         
    
77.         g.button("map/cat5_button.jpg")
    
78.         g.unlock_image("cat5")
    
79. 
    
80.         g.button("map/cat6_button.jpg")
    
81.         g.unlock_image("cat6")
    
82.         #g.allprior()
    
83.         
    
84. ###################################################
    
85.         g.page("Bunny")
    
86.         # Our first button is a picture of the beach.
    
87.         g.button("map/bunny1_button.jpg")
    
88.         g.unlock_image("bunny1")
    
89. 
    
90.         g.button("map/bunny1_button.jpg")
    
91.         g.unlock_image("bunny1")
    
92.         
    
93.         g.button("map/bunny1_button.jpg")
    
94.         g.unlock_image("bunny1")
    
95. 
    
96. ###################################################
    
97.         g.show()
    
98.     jump main_menu_screen
    

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

(แล้วแต่จะนำไปดัดแปลงนะคะ)

อธิบายโค๊ด:

โค๊ดด้านล่างนี้เอาไว้จัดตำแหน่งวางเมนูที่ได้กดเปลี่ยน Page และกลับไปที่main menu (xalign คือ ตำแหน่งแนวนอน และ yalign คือ ตำแหน่งแนวตั้ง)โค๊ดนี้ไว้สำหรับเปลี่ยนภาพพื้นหลังหน้าGallery

1. $ style.gallery_nav_frame.xalign = 0.95
   
2. $ style.gallery_nav_frame.yalign = 0.3

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

ด้านล่างนี้เป็นโค๊ดอีกตัวที่จำเป็นต้องรู้(3,4) ตัวเลขในวงเล็บกลุ่มแรกคือจำนวนแถวและคมลัมน์(เอาไว้จัดระเบียงการวางปุ่ม) และ (50,100) ตัวเลขในวงเล็บกลุ่มที่สอง จะใช้กำหนตำแหน่งการวางภาพปุ่มทั้งกลุ่มว่าจะให้ปุ่มทั้งหมดย้ายไปกระจุกรวมกันอยู่ที่ตำแหน่งไหนของหน้าจอเกมส์ ส่วน (180,144)ตัวเลขในวงเล็บกลุ่มสุดท้าย มีไว้เพื่อจัดระยะเนื้อความกว้างยาวเช่น... ถ้าภาพปุ่มของเรามีขนาด 160*124 เราก็ควรจะกำหนดเนื้อที่ให้ปุ่มกว้างออกไปสักด้านละ20 ซึ่งก็จะเป็น 180*144 เพื่อให้ภาพปุ่มทุกภาพที่วางเรียงกันบนหน้าจอเกมส์มีช่องไฟเว้นระยะห่างบ้าง ไม่ติดกันเกินไป

1. gg.grid_layout((3, 4), (50, 100), (180, 144))

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

โค๊ดนี้ไว้สำหรับสร้างกลุ่มแต่ละหมวดของภาพ รวมทั้งตั้งชื่อใหม่ให้กับเมนูด้วย

1. g.page("Bunny")

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

โค๊ดข้างล่างนี้ให้ใส่ชื่อปุ่มกด ซึ่งในหน้า page 1 หน้าสามารถกำหนดปุ่มกดได้หลายปุ่มค่ะ ต่อจากปุ่มกด เราก็ต้องใส่ชื่อตัวแปรภาพที่จะให้ทำการแสดงเมื่อถูกคลิก (โดยปกติปุ่มกดจะถูกล๊อคไว้ ถ้าเงื่อนไขถูกต้องจึงจะแสดงปุ่มกดให้คลิกเพื่อดูภาพ CG ได้)

1. g.button("map/bunny1_button.jpg")
   
2. g.unlock_image("bunny1")

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

โค๊ดนี้ไว้สำหรับเปลี่ยนภาพพื้นหลังหน้าGallery

1. g.background = "map/pattern_cat.jpg

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

ในกรณีที่มีการเฟสภาพมากกว่า1 ภาพการใช้โค๊ดตัวนี้ร่วมด้วย จะทำให้การเฟสภาพ Gallery แต่ละภาพดูนิ่มนวลมากขึ้น

1. g.transition = dissolve

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

ในกรณีที่ต้องการให้ปุ่มกด 1 ปุ่ม แสดงภาพ Gallery ต่อเนื่องกันตั้งแต่2 ภาพขึ้นไปก็ให้เขียนโค๊ดแบบนี้ค่ะ

1. 
   
2.         g.button("map/cat2_button.jpg")
   
3.         g.unlock_image("cat2")
   
4.         g.unlock_image("cat3")
   

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

หากต้องการให้มีภาพตัวละครแทรกอยู่กับภาพในGallery ด้วยก็ให้เขียนโค๊ดแบบนี้ค่ะ

1.         g.button("thumb_eileen.jpg")
   
2.         g.unlock_image("bg lighthouse day", "eileen")

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

ขั้นตอนที่ 5
- นำโค๊ดด้านล่างนี้ไปใส่ที่ไฟล์ script.rpy (ใส่ไว้ที่ตำแหน่งล่างสุดก็ได้)

1. $ persistent.gallery_unlocked = True

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

ตัวอย่างการใส่โค๊ด...หน้าscript.rpy

1.   
   
2. define p = Character('ปกิณกะ', color="#f8f092")
   
3. 
   
4. image m = "cha/dongmai_01.png"
   
5. image m Smile = "cha/dongmai_02.png"
   
6. image cat1 = "map/cat1.jpg"
   
7. image cat2 = "map/cat2.jpg"
   
8. image cat3 = "map/cat3.jpg"
   
9. image cat4 = "map/cat4.jpg"
   
10. image cat5 = "map/cat5.jpg"
    
11. image cat6 = "map/cat6.jpg"
    
12. image bunny1 = "map/bunny1.jpg"
    
13. 
    
14. # เริ่มเกมส์
    
15. label start:
    
16. 
    
17.     scene bunny1
    
18.     show m with dissolve
    
19.     p "11111111111111111111111111!"
    
20. 
    
21.     show m Smile with dissolve
    
22.     p "222222222222222222222222222222!"
    
23.     scene cat1
    
24.     show m with dissolve
    
25. 
    
26.     p "33333333333333333333333333333!"
    
27.     show cat2
    
28.    
    
29. menu:
    
30. 
    
31.     "ทางเลือกที่ 1 ":
    
32.         jump home
    
33. 
    
34.     "ทางเลือกที่ 2":
    
35.         jump book
    
36.         
    
37.     "ทางเลือกที่ 3":
    
38.         jump work
    
39.         
    
40. #ทางเลือกต่างๆ หลังจากคลิกเลือกคำตอบ
    
41. 
    
42. label home:
    
43.     show cat3
    
44.     p "คำตอบของทางเลือกที่ 1"
    
45.     jump next
    
46. 
    
47. label book:
    
48.     show cat4
    
49.     p "คำตอบของทางเลือกที่ 2"
    
50.     jump next
    
51. 
    
52. label work:
    
53.     show cat5
    
54.     p "คำตอบของทางเลือกที่ 3"
    
55.     jump next
    
56. 
    
57. label next:
    
58. 
    
59.     scene cat6
    
60.     "Wow........!!!!! Game Over!!!!"
    
61.         
    
62.     $ persistent.extra_unlocked = True #สั่งให้ persistent.extra_unlocked = True (เป็นจริง)
    
63.                                                         #เปิดใช้งานหน้า Bonus
    
64. 
    
65. 
    
66.     $ persistent.gallery_unlocked = True #สั่งให้ persistent.gallery_unlocked = True (เป็นจริง)
    
67.                                                          #เปิดใช้งานหน้า Gallery
    
68.                                                              #ใส่โค๊ดนี้ไว้ที่บรรทัดใดก็ได้ หรือ
    
69.                                                              #ใส่ต่อจากบทสนทนาสุดท้ายของเกมส์(จบเกมส์)
    
70. 
    
71. return
    

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

- จากนั้นให้บันทึกไฟล์ทั้งหมด และลองรันโปรแกรมดู-ผู้เล่นจะต้อง เล่นเกมส์ให้จบก่อน เพื่อให้หน้าเมนู "Bonus" แสดงขึ้นมา จากนั้นจึงค่อยคลิกเข้าไปดูที่หน้า CG Gallery ที่เราทำไว้

- จะเห็นว่าในการเล่นจนจบเกมส์ครั้งแรก ภาพแสดงไม่ครบทุกภาพที่เป็นแบบนี้เพราะว่า "หากผู้เล่น.. เล่นเกมส์จนไปพบกับฉากภาพประทับใจภาพไหนฉากภาพนั้นใน Gallery จึงจะถูกปลดล๊อคค่ะ"

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

- ภาพไหนที่ถูกปลดล๊อคแล้ว เราก็จะสามารถมองเห็นปุ่มและคลิกปุ่มเข้าไปดูภาพฉากนั้นๆได้ค่ะ

(Gallery แบบ Imagemap ถ้าขยันจะทำให้นะค่ะถ้าขี้เกียจก็.... -*- )

ปล. โค๊ดตัวเล็กมาก ถ้าไม่อยากนั่งเล็ง ก็ให้กดปุ่ม Ctrl+++ ค่ะหน้าจอจะขยายใหญ่อ่านโค๊ดง่ายขึ้น แล้วถ้าต้องการลดขนาดหน้าจอกลับก็ให้กดปุ่ม Ctrl--- ตอนนั่งทำบทความนี้ ต้องขยายถึง 200% ถึงจะตรวจเช็คโค๊ดได้ไม่งั้นตาลาย
***************************************

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