[Renpy] 25. วิธีทำ CG Gallery แบบ Imagemap

nooknazha

[Renpy] 25. วิธีทำ CG Gallery แบบ Imagemap

บทความนี้จะต่อเนื่องมาจากบทความสอนวิธีการแทรกหน้า Bonus ไว้ที่หน้าเมนูหลัก  2 บทความด้านล่างนะค่ะ

ขั้นตอนที่ 1
ในที่นี้ข้าพเจ้าจะทำให้เมื่อคลิกที่เมนู"Bonus" โปรแกรมวิ่งไปที่หน้าGallery ชื่อ CG_Gallery_CAT ก่อนเป็นหน้าแรก(หรีอคุณจะเอาหน้าไหนขึ้นก่อนก็ได้)

1. [renpy] วิธีแทรกหน้าBonus ที่ Main Menu แบบ Classic

1. 
   
2. textbutton _("Bonus") action ShowMenu("CG_Gallery_CAT")

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

.

2. [renpy] วิธี Imagemap หน้า Bonus ไว้ที่ Main Menu

ในกรณีที่กำหนด 'CG_Gallery_CAT' เป็น labelจะใช้คำสั่งนี้ในการเรียกหา label ค่ะ

1. <font size="4" face="Tahoma">hotspot (314, 283, 251, 72) action Start('CG_Gallery_CAT')</font>

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

แต่จากบทความที่ผ่านมาข้าพเจ้าจะแนะนำให้สร้างเป็นหน้าscreen ขึ้นมาใหม่เลยก็จะใช้คำสั่งนี้แทนค่ะ

1. <font size="4" face="Tahoma">hotspot (314, 283, 251, 72)action ShowMenu('CG_Gallery_CAT')</font>

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

ขั้นตอนที่ 2
- ปัจจัยหลักสำคัญเลยสำหรับการทำGallery นั่นก็คือภาพฉากสำคัญต่างๆ ที่จำเป็นต้องมีในเกมส์นอกจากนี้ก็รวมถึงหน้าเมนูที่เราจะต้องออกแบบเองด้วย

- ให้เตรียมภาพ 2 ชุดด้วยกันค่ะ คือ

1. เตรียมภาพหน้าเมนู CG Gallery ของแต่ละตัวละคร***ย้ำ!!! ของแต่ละตัวละคร ถ้ามีตัวละคร 4 ตัวเราก็ต้องออกแบบหน้าเมนูของตัวละคร 4 กลุ่มด้วยกัน

ยกตัวอย่างเช่น มีตัวละครทั้งหมด 4 ตัวภาพหน้าเมนู Gallery ที่คุณจะต้องออกแบบจะต้องเตรียมไว้ทั้งสิ้น 4 ชุดและภายในภาพแต่ละชุดนั้นจะประกอบไปด้วยภาพเมนูแบบต่างที่ให้มีผลและไม่มีผลกับเม้าส์ และภาพที่มีผลต่อเงื่อนไข ชุดละ 4 -5 ภาพ ด้วยกัน

สรุป!!! ถ้ามีตัวละคร 4 ตัวในเกมส์คุณจะต้องเตรียมภาพเมนูหน้า Gallery ทั้งสิ้น  16ภาพด้วยกัน!!! แต่ใจเย็นค่ะในความเป็นจริงเราคงไม่ต้องใช้มากขนาดนั้น เพราะบางภาพเราก็ใช้ซ้ำกันได้เช่นพวกแถบเมนูปุ่มต่างๆ  ภาพที่ใช้ร่วมกันไม่ได้ก็มีแค่หน้าสกีนของตัวละครตัวนั้นๆแค่นั้น

ในบทความนี้เข้าพเจ้าจะออกแบบไว้เฉพาะแค่หน้า CG_Gallery_CATเท่านั้นนะค่ะ หน้า CG_Gallery_DOG , CG_Gallery_BUNNY ,CG_Gallery_XXX ไม่ทำ (ขี้เกียจ -*- )

ตัวอย่างภาพที่ต้องเตรียมในแต่ละชุด....

1. ภาพที่ไม่สามารถคลิกเข้าไปดูได้ หากเงื่อนไขไม่ถูกต้อง(ยังไม่ถูกปลดล๊อค)

2. ภาพที่จะเปลี่ยนแปลงเมื่อมีเม้าส์เลื่อนมาวางทับ

3. ภาพที่ถูกปลดล๊อคแล้ว สามารถคลิกเข้าไปดูได้

4. ภาพเมนูที่ กำลังถูกคลิกเลือกอยู่

ขั้นตอนที่ 3
- ภาพชุดที่ 2คือ เราจะต้องเตรียมภาพ CG ไว้ให้มากที่สุด จะ20 หรือ 30 ถ้าขยันวาดได้ก็ขนมาเยอะๆหุหุ (แต่ข้าพเจ้าขี้เกียจวาด เอาภาพแมวตามเน็ตมาใส่แทนก่อนก็แล้วกัน ^^")ขนาดภาพ 800*600 pt หรือหรือเท่ากับขนาดหน้าจอเกมส์ที่เราเซ็ตไว้ เช่น 1024 หรือมากกว่านั้นก็ได้

ขั้นตอนที่ 4
1. เปิดโปรแกรม JEditขึ้นมา(เปิดผ่านโปรแกรม renpy ก็ได้)และไปที่คำสั่ง File > New.... (หรือกดปุ่ม Ctrl+N)

2. โปรแกรมจะสร้างหน้า New โล่งๆมาให้เรา
3. ให้นำก๊อปปี้โค๊ดด้านล่างนี้ไปใส่ค่ะ

1. <font size="4" face="Tahoma">
   
2. ##########################################
   
3. #--รวมหน้า Screen ภาพของ...แมว...แต่ละภาพ (มีทั้งหมด 4 ภาพ)--
   
4. ##########################################
   
5. label cat1: #<--ภาพแมว ภาพที่ 1
   
6.     scene cat1 with dissolve
   
7.     $ renpy.pause ()  #<---- ถ้าคลิกเม้าส์ เปลี่ยนถึงจะเปลี่ยน หากไม่ใส่คำสั่งนี้ ภาพจะเฟสต่อเนื่องจนครบ
   
8.    
   
9.     scene cat5 with dissolve
   
10.     $ renpy.pause ()
    
11.    
    
12.     scene cat6 with dissolve
    
13.     $ renpy.pause ()
    
14.     #$ renpy.pause (5.0) <----แบบกำหนดระยะเวลาในการเฟสภาพอัตโนมัติ
    
15.     p "น่ารักทุกภาพเลยเน๊าะ >0<...."
    
16.     hide cat1
    
17.     hide cat5
    
18.     hide cat6
    
19.     $ renpy.game_menu("CG_Gallery_CAT") #<สั่งให้กลับไปที่หน้า Gallery ของ กลุ่มภาพแมวอีกครั้ง
    
20. return
    
21.    
    
22. screen cat2: #<--ภาพแมว ภาพที่ 2
    
23.     button clicked Hide("cat2", transition=fade)#<แบบสั่งให้แสดงภาพ cat2 เมื่อคลิกอีกครั้งจะวิ่งไปที่ screen CG_Gallery_CAT
    
24.     add "map/cat2.jpg"
    
25.    
    
26. screen cat3: #<--ภาพแมว ภาพที่ 3
    
27.     button clicked   Hide("cat3", transition=fade)  
    
28.     add "map/cat3.jpg"
    
29.    
    
30. screen cat4: #<--ภาพแมว ภาพที่ 4
    
31.     button clicked  Hide("cat4", transition=fade)
    
32.     add "map/cat4.jpg"
    
33. 
    
34. ##########################################   
    
35. #----รวมหน้า Screen ภาพของ...สุนัข...แต่ละภาพ (มีทั้งหมด 4 ภาพ)
    
36. ##########################################
    
37. 
    
38. screen dog1: #<--ภาพสุนัข ภาพที่ 1
    
39.     button clicked  Hide("dog1", transition=fade)
    
40.     add "map/dog1.jpg" #<---ใส่ชื่อหลอกไว้ จริงๆมันไม่มีภาพ (ยังไม่ได้ภาพหมาไว้)
    
41.    
    
42. screen dog2: #<--ภาพสุนัข ภาพที่ 2
    
43.     button clicked  Hide("dog2", transition=fade)
    
44.     add "map/dog2.jpg"
    
45.    
    
46. screen dog3: #<--ภาพสุนัข ภาพที่ 3
    
47.     button clicked  Hide("dog3", transition=fade)
    
48.     add "map/dog3.jpg"
    
49.    
    
50. screen dog4: #<--ภาพสุนัข ภาพที่ 4
    
51.     button clicked  Hide("dog4", transition=fade)
    
52.     add "map/dog4.jpg"
    
53. 
    
54. ##########################################
    
55. #---รวมหน้า Screen ภาพของ...กระต่าย...แต่ละภาพ (มีทั้งหมด 4 ภาพ)
    
56. ##########################################
    
57. 
    
58. screen bunny1: #<--ภาพกระต่าย ภาพที่ 1
    
59.     button clicked  Hide("bunny1", transition=fade)
    
60.     add "map/bunny1.jpg" #<---ใส่ชื่อหลอกไว้ จริงๆมันไม่มีภาพ (ยังไม่ได้ภาพหมาไว้)
    
61.    
    
62. screen bunny2: #<--ภาพกระต่าย ภาพที่ 2
    
63.     button clicked  Hide("bunny2", transition=fade)
    
64.     add "map/bunny2.jpg"
    
65.    
    
66. screen bunny3: #<--ภาพกระต่าย ภาพที่ 3
    
67.     button clicked  Hide("bunny3", transition=fade)
    
68.     add "map/bunny3.jpg"
    
69.    
    
70. screen bunny4: #<--ภาพกระต่าย ภาพที่ 4
    
71.     button clicked  Hide("bunny4", transition=fade)
    
72.     add "map/bunny4.jpg"
    
73. 
    
74. ##########################################
    
75. #----รวมหน้า Screen ภาพของ...???(ตัวละครลับ)...แต่ละภาพ (มีทั้งหมด 4 ภาพ)--
    
76. ##########################################
    
77. 
    
78. screen xxx1: #<--ภาพพิเศษ ภาพที่ 1
    
79.     button clicked  Hide("xxx1", transition=fade)
    
80.     add "map/xxx1.jpg" #<---ใส่ชื่อหลอกไว้ จริงๆมันไม่มีภาพ
    
81.    
    
82. screen xxx2: #<#<--ภาพพิเศษ ภาพที่  2
    
83.     button clicked  Hide("xxx2", transition=fade)
    
84.     add "map/xxx2.jpg"
    
85.    
    
86. screen xxx3: #<--ภาพพิเศษ ภาพที่  3
    
87.     button clicked  Hide("xxx3", transition=fade)
    
88.     add "map/xxx3.jpg"
    
89.    
    
90. screen xxx4: #<--ภาพพิเศษ ภาพที่  4
    
91.     button clicked  Hide("xxx4", transition=fade)
    
92.     add "map/xxx4.jpg"
    
93.    
    
94. ########################################
    
95. #-------------Gallery รวมภาพของ...หน้า Gallery กลุ่มแมว...------------
    
96. ########################################
    
97. 
    
98. screen CG_Gallery_CAT:
    
99.     tag menu
    
100.     imagemap:
     
101.         ground 'menu/menu_gallery_ground_cat.png'
     
102.         idle 'menu/menu_gallery_idle_cat.png'
     
103.         hover 'menu/menu_gallery_hover_cat.png'
     
104.         selected_idle 'menu/menu_gallery_selected_idle_cat.png'
     
105.         selected_hover 'menu/menu_gallery_hover_cat.png'
     
106. 
     
107.         hotspot (607, 463, 193, 56) action Return() hover_sound "sound/click.wav"
     
108.         
     
109.         if persistent.group_image_cat_sum: #<กลุ่มภาพของ cat dog และ bunny ถูกปลดล๊อคครบ ภาพกลุ่มพิเศษ ???  ก็ถึงจะถูกปลดล๊อค
     
110. 
     
111.             if persistent.group_image_dog_sum:
     
112.                 if persistent.group_image_bunny_sum:
     
113.                     $ persistent.group_image_XXX_sum = True #<กลุ่มชุดรวมภาพ Gallery หน้าหลักของ XXX ถูกปลดล๊อค
     
114.             
     
115.         
     
116.         if persistent.group_image_XXX_sum: #<กลุ่มภาพของ ??? จะเปิดใช้ได้ก็ต่อเมื่อ เงื่อนไข persistent.group_image_XXX_sum เป็น True
     
117.             
     
118.             hotspot (607, 395, 193, 56) action ShowMenu("CG_Gallery_XXX") hover_sound "sound/click.wav"
     
119.         
     
120.         if persistent.group_image_bunny_sum: #<กลุ่มภาพของ BUNNY จะเปิดใช้ได้ก็ต่อเมื่อ เงื่อนไข persistent.group_image_bunny_sum เป็น True
     
121.             
     
122.             hotspot (607, 325, 193, 56) action ShowMenu("CG_Gallery_BUNNY") hover_sound "sound/click.wav"
     
123.         
     
124.         if persistent.group_image_dog_sum: #<กลุ่มภาพของ DOG จะเปิดใช้ได้ก็ต่อเมื่อ เงื่อนไข persistent.group_image_dog_sum เป็น True
     
125.             
     
126.             hotspot (607, 256, 193, 56) action ShowMenu("CG_Gallery_DOG") hover_sound "sound/click.wav"
     
127.         if persistent.group_image_cat_sum: #<กลุ่มภาพของ CAT จะเปิดใช้ได้ก็ต่อเมื่อ เงื่อนไข persistent.group_image_cat_sum เป็น True
     
128.             
     
129.             hotspot (607, 184, 193, 56) action ShowMenu("CG_Gallery_CAT") hover_sound "sound/click.wav"
     
130.             
     
131.             
     
132.             if persistent.group_image_cat_01:
     
133.                 hotspot (75, 189, 208, 141) action Start(label ="cat1") #<เมื่อคลิกที่ภาพ cat1 สั่งให้วิ่งไปที่ label cat1
     
134.             
     
135.             if persistent.group_image_cat_02:
     
136.                 hotspot (321, 189, 208, 141) action Show("cat2", transition=fade) #<เมื่อคลิกที่ภาพ cat2 สั่งให้วิ่งไปที่ screen cat2
     
137.             
     
138.             if persistent.group_image_cat_03:
     
139.                 hotspot (75, 365, 208, 139) action Show("cat3", transition=fade)
     
140.             
     
141.             if persistent.group_image_cat_04:
     
142.                 hotspot (321, 365, 211, 139) action Show("cat4", transition=fade)
     
143.                
     
144. 
     
145. ##########################################
     
146. #-------------Gallery รวมภาพของ...หน้า Gallery กลุ่มสุนัข...-----------------
     
147. ##########################################
     
148. 
     
149. screen CG_Gallery_DOG:
     
150.     tag menu
     
151.     imagemap:
     
152.         ground 'menu/menu_gallery_ground_cat.png'
     
153.         idle 'menu/menu_gallery_idle_cat.png'
     
154.         hover 'menu/menu_gallery_hover_cat.png'
     
155.         selected_idle 'menu/menu_gallery_selected_idle_cat.png'
     
156.         selected_hover 'menu/menu_gallery_hover_cat.png'
     
157. 
     
158.         hotspot (607, 463, 193, 56) action Return() hover_sound "sound/click.wav"
     
159.         
     
160.         if persistent.group_image_cat_sum: #<กลุ่มภาพของ cat dog และ bunny ถูกปลดล๊อคครบ ภาพกลุ่มพิเศษ ???  ก็ถึงจะถูกปลดล๊อค
     
161.             if persistent.group_image_dog_sum:
     
162.                 if persistent.group_image_bunny_sum:
     
163.                     $ persistent.group_image_XXX_sum = True #<กลุ่มชุดรวมภาพ Gallery หน้าหลักของ XXX ถูกปลดล๊อค
     
164.         
     
165.         if persistent.group_image_cat_sum: #<กลุ่มภาพของ CAT จะเปิดใช้ได้ก็ต่อเมื่อ เงื่อนไข persistent.group_image_cat_sum เป็น True
     
166.             
     
167.             hotspot (607, 184, 193, 56) action ShowMenu("CG_Gallery_CAT") hover_sound "sound/click.wav"
     
168.         
     
169.         if persistent.group_image_XXX_sum: #<กลุ่มภาพของ ??? จะเปิดใช้ได้ก็ต่อเมื่อ เงื่อนไข persistent.group_image_XXX_sum เป็น True
     
170.             
     
171.             hotspot (607, 395, 193, 56) action ShowMenu("CG_Gallery_XXX") hover_sound "sound/click.wav"
     
172.         
     
173.         if persistent.group_image_bunny_sum: #<กลุ่มภาพของ BUNNY จะเปิดใช้ได้ก็ต่อเมื่อ เงื่อนไข persistent.group_image_bunny_sum เป็น True
     
174.             
     
175.             hotspot (607, 325, 193, 56) action ShowMenu("CG_Gallery_BUNNY") hover_sound "sound/click.wav"
     
176.         
     
177.         if persistent.group_image_dog_sum: #<กลุ่มภาพของ DOG จะเปิดใช้ได้ก็ต่อเมื่อ เงื่อนไข persistent.group_image_dog_sum เป็น True
     
178.             
     
179.             hotspot (607, 256, 193, 56) action ShowMenu("CG_Gallery_DOG") hover_sound "sound/click.wav"
     
180.             if persistent.group_image_dog_01:
     
181.                 hotspot (75, 189, 208, 141) action Show("dog1", transition=fade)
     
182.             
     
183.             if persistent.group_image_dog_02:
     
184.                 hotspot (321, 189, 208, 141) action Show("dog2", transition=fade)
     
185.             
     
186.             if persistent.group_image_dog_03:
     
187.                 hotspot (75, 365, 208, 139) action Show("dog3", transition=fade)
     
188.             
     
189.             if persistent.group_image_dog_04:
     
190.                 hotspot (321, 365, 211, 139) action Show("dog4", transition=fade)
     
191.                
     
192. ##########################################
     
193. #----------------Gallery รวมภาพของ...หน้า Gallery กลุ่มกระต่าย...-----------
     
194. ##########################################
     
195. 
     
196. screen CG_Gallery_BUNNY:
     
197.     tag menu
     
198.     imagemap:
     
199.         ground 'menu/menu_gallery_ground_cat.png'
     
200.         idle 'menu/menu_gallery_idle_cat.png'
     
201.         hover 'menu/menu_gallery_hover_cat.png'
     
202.         selected_idle 'menu/menu_gallery_selected_idle_cat.png'
     
203.         selected_hover 'menu/menu_gallery_hover_cat.png'
     
204. 
     
205.         hotspot (607, 463, 193, 56) action Return() hover_sound "sound/click.wav"
     
206.         
     
207.         if persistent.group_image_cat_sum: #<กลุ่มภาพของ cat dog และ bunny ถูกปลดล๊อคครบ ภาพกลุ่มพิเศษ ???  ก็ถึงจะถูกปลดล๊อค
     
208.             if persistent.group_image_dog_sum:
     
209.                 if persistent.group_image_bunny_sum:
     
210.                     $ persistent.group_image_XXX_sum = True #<กลุ่มชุดรวมภาพ Gallery หน้าหลักของ XXX ถูกปลดล๊อค
     
211. 
     
212.         if persistent.group_image_cat_sum: #<กลุ่มภาพของ CAT จะเปิดใช้ได้ก็ต่อเมื่อ เงื่อนไข persistent.group_image_cat_sum เป็น True
     
213.             
     
214.             hotspot (607, 184, 193, 56) action ShowMenu("CG_Gallery_CAT") hover_sound "sound/click.wav"
     
215.         
     
216.         if persistent.group_image_XXX_sum: #<กลุ่มภาพของ ??? จะเปิดใช้ได้ก็ต่อเมื่อ เงื่อนไข persistent.group_image_XXX_sum เป็น True
     
217.             
     
218.             hotspot (607, 395, 193, 56) action ShowMenu("CG_Gallery_XXX") hover_sound "sound/click.wav"
     
219.         
     
220.         if persistent.group_image_bunny_sum: #<กลุ่มภาพของ BUNNY จะเปิดใช้ได้ก็ต่อเมื่อ เงื่อนไข persistent.group_image_bunny_sum เป็น True
     
221.             
     
222.             hotspot (607, 325, 193, 56) action ShowMenu("CG_Gallery_BUNNY") hover_sound "sound/click.wav"
     
223.         
     
224.         if persistent.group_image_dog_sum: #<กลุ่มภาพของ DOG จะเปิดใช้ได้ก็ต่อเมื่อ เงื่อนไข persistent.group_image_dog_sum เป็น True
     
225.             
     
226.             hotspot (607, 256, 193, 56) action ShowMenu("CG_Gallery_DOG") hover_sound "sound/click.wav"
     
227.         
     
228.             if persistent.group_image_bunny_01:
     
229.                 hotspot (75, 189, 208, 141) action Show("bunny1", transition=fade)
     
230.             
     
231.             if persistent.group_image_bunny_02:
     
232.                 hotspot (321, 189, 208, 141) action Show("bunny2", transition=fade)
     
233.             
     
234.             if persistent.group_image_bunny_03:
     
235.                 hotspot (75, 365, 208, 139) action Show("bunny3", transition=fade)
     
236.             
     
237.             if persistent.group_image_bunny_04:
     
238.                 hotspot (321, 365, 211, 139) action Show("bunny4", transition=fade)
     
239.                
     
240. ##########################################
     
241. #-------------Gallery รวมภาพของ...หน้า Gallery กลุ่ม....???...--------------
     
242. ##########################################
     
243. 
     
244. screen CG_Gallery_XXX:
     
245.     tag menu
     
246.     imagemap:
     
247.         ground 'menu/menu_gallery_ground_cat.png'
     
248.         idle 'menu/menu_gallery_idle_cat.png'
     
249.         hover 'menu/menu_gallery_hover_cat.png'
     
250.         selected_idle 'menu/menu_gallery_selected_idle_cat.png'
     
251.         selected_hover 'menu/menu_gallery_hover_cat.png'
     
252. 
     
253.         hotspot (607, 463, 193, 56) action Return() hover_sound "sound/click.wav"
     
254.         
     
255.         
     
256.         if persistent.group_image_cat_sum: #<กลุ่มภาพของ CAT จะเปิดใช้ได้ก็ต่อเมื่อ เงื่อนไข persistent.group_image_cat_sum เป็น True
     
257.             
     
258.             hotspot (607, 184, 193, 56) action ShowMenu("CG_Gallery_CAT") hover_sound "sound/click.wav"
     
259.         
     
260.         if persistent.group_image_XXX_sum: #<กลุ่มภาพของ ??? จะเปิดใช้ได้ก็ต่อเมื่อ เงื่อนไข persistent.group_image_XXX_sum เป็น True
     
261.             
     
262.             hotspot (607, 395, 193, 56) action ShowMenu("CG_Gallery_XXX") hover_sound "sound/click.wav"
     
263.         
     
264.         if persistent.group_image_bunny_sum: #<กลุ่มภาพของ BUNNY จะเปิดใช้ได้ก็ต่อเมื่อ เงื่อนไข persistent.group_image_bunny_sum เป็น True
     
265.             
     
266.             hotspot (607, 325, 193, 56) action ShowMenu("CG_Gallery_BUNNY") hover_sound "sound/click.wav"
     
267.         
     
268.         if persistent.group_image_dog_sum: #<กลุ่มภาพของ DOG จะเปิดใช้ได้ก็ต่อเมื่อ เงื่อนไข persistent.group_image_dog_sum เป็น True
     
269.             
     
270.             hotspot (607, 256, 193, 56) action ShowMenu("CG_Gallery_DOG") hover_sound "sound/click.wav"
     
271.             if persistent.group_image_xxx_01:
     
272.                 hotspot (75, 189, 208, 141) action Show("xxx1", transition=fade)
     
273.             
     
274.             if persistent.group_image_xxx_02:
     
275.                 hotspot (321, 189, 208, 141) action Show("xxx2", transition=fade)
     
276.             
     
277.             if persistent.group_image_xxx_03:
     
278.                 hotspot (75, 365, 208, 139) action Show("xxx3", transition=fade)
     
279.             
     
280.             if persistent.group_image_xxx_04:
     
281.                 hotspot (321, 365, 211, 139) action Show("xxx4", transition=fade)
     
282. </font>

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

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



ขั้นตอนที่ 5
- จากนั้นเราก็จะมาใส่โค๊ดที่ไฟล์script.rpy เพื่อปลดล๊อค หน้าเมนูหลักภาพ CG แต่ละตัวละคร และ CG ย่อยที่ซ่อนอยู่ภายในแต่ละภาพกันค่ะ
- ตัวอย่างการใส่โค๊ดที่ไฟล์ script.rpy

1. # Declare images below this line, using the image statement.
   
2. # eg. image eileen happy = "eileen_happy.png"
   
3. # Declare characters used by this game.
   
4. 
   
5. define p = Character('ปกิณกะ', color="#f8f092")
   
6. 
   
7. 
   
8. image cat1 = "map/cat1.jpg"
   
9. image cat2 = "map/cat2.jpg"
   
10. image cat3 = "map/cat3.jpg"
    
11. image cat4 = "map/cat4.jpg"
    
12. image cat5 = "map/cat5.jpg"
    
13. image cat6 = "map/cat6.jpg"
    
14. 
    
15. # เริ่มเกมส์
    
16. label start:
    
17.     scene black
    
18.     p "ในบรรดาสัตว์เลี้ยง อย่าง.. แมว สุนัข กระต่าย คุณชื่นชอบชนิดไหนเป็นพิเศษค่ะ?"
    
19. menu:
    
20.     "ฉันชอบแมวมากที่สุด":
    
21.         jump cat
    
22.         #jump input_screen
    
23.     "ฉันชอบสุนัขมากที่สุด":
    
24.         jump dog
    
25.         
    
26.     "ฉันชอบกระต่ายมากที่สุด":
    
27.         jump bunny
    
28.         
    
29. #ทางเลือกต่างๆ หลังจากคลิกเลือกคำตอบ
    
30. #------------------------เลือก Cat ข้อ 1. -------------------------
    
31. label cat:
    
32.     scene cat1
    
33.     $ persistent.group_image_cat_01 = True #<-----สั่งให้ภาพ cat1.jpg ที่หน้า CG_Gallery_CAT ถูกปลดล๊อค
    
34.     p "ฉันก็ชอบแมวเหมือนกันนะ...^^...."
    
35.     scene cat2
    
36.     $ persistent.group_image_cat_02 = True #<-----สั่งให้ภาพ cat2.jpg ที่หน้า CG_Gallery_CAT ถูกปลดล๊อค
    
37.     p "ฉันก็ชอบแมวเหมือนกันนะ...^^...."
    
38.    
    
39.     scene cat3
    
40.     $ persistent.group_image_cat_03 = True  #<-----สั่งให้ภาพ cat3.jpg ที่หน้า CG_Gallery_CAT ถูกปลดล๊อค
    
41.     p "บางทีเราอาจจะมีนิสัยคล้ายๆกัน"
    
42.    
    
43.     $ persistent.group_image_cat_sum = True #<------กลุ่มชุดรวมภาพ Gallery หน้าหลักของ CAT ถูกปลดล๊อค
    
44.    
    
45.     $ persistent.extra_unlocked = True #สั่งให้ persistent.extra_unlocked = True (เป็นจริง)
    
46.                                                         #เปิดใช้งานหน้า Bonus
    
47.     #jump end_cat
    
48.    
    
49. #------------------------เลือก Dog ข้อ 2. -------------------------
    
50. label dog:
    
51.     scene cat4 #ไม่มีภาพหมา เอาภาพแมวไปก่อน -*-
    
52.    
    
53.     $ persistent.group_image_cat_04 = True  #<-----สั่งให้ภาพ cat4.jpg ที่หน้า CG_Gallery_CAT ถูกปลดล๊อค
    
54.    
    
55.     $ persistent.group_image_dog_01 = True  #<-----สั่งให้ภาพ dog1.jpg ที่หน้า CG_Gallery_CAT ถูกปลดล๊อค
    
56.    
    
57.     $ persistent.group_image_dog_sum = True #<------กลุ่มชุดรวมภาพ Gallery หน้าหลักของ DOG ถูกปลดล๊อค
    
58.    
    
59.     p "ที่บ้านฉันเลี้ยงสุนัขไว้ 2 ตัวเป็นพันธุ์ชิวาว่าล่ะ .. :D... "
    
60.    
    
61.     $ persistent.extra_unlocked = True #สั่งให้ persistent.extra_unlocked = True (เป็นจริง)
    
62.                                                         #เปิดใช้งานหน้า Bonus
    
63.     #jump end_dog
    
64. #------------------------เลือก Bunny ข้อ 3. -------------------------
    
65. label bunny:
    
66.     scene cat1 #ไม่มีภาพกระต่าย เอาภาพแมวไปก่อน -*-
    
67. 
    
68.     $ persistent.group_image_bunny_01 = True #<-----สั่งให้ภาพ bunny1.jpg ที่หน้า CG_Gallery_CAT ถูกปลดล๊อค
    
69. 
    
70. 
    
71.     p "ฉันเคยเลี้ยงกระต่ายไว้ที่บ้าน มันน่ารักมาก แต่มันก็มีนิสัยเสียตรงที่ชอบกัดสายไฟ -*- "
    
72. 
    
73.     $ persistent.group_image_bunny_sum = True #<------กลุ่มชุดรวมภาพ Gallery หน้าหลักของ BUNNY ถูกปลดล๊อค
    
74. 
    
75.     $ persistent.extra_unlocked = True #สั่งให้ persistent.extra_unlocked = True (เป็นจริง)
    
76.                                                         #เปิดใช้งานหน้า Bonus
    
77.     #jump end_bunny
    
78. return

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

ตัวอย่างการใส่โค๊ด....และการสร้างเงื่อนไข

ที่ไฟล์ bonus จะเห็นว่าเรากำหนดโค๊ดเงื่อนไขเพื่อล๊อคภาพไว้ว่า
    if persistent.group_image_cat_sum: #<----ชื่อด้านหลังเราจะกำหนดว่าอะไรก็ได้ขอเพียงให้มีคำว่า "if persistent." นำหน้ามันก็จะกลายเป็นการสร้างเงื่อนไขล๊อคภาพนั้นไว้ทันที

และเพื่อให้ภาพนั้นถูกปลดล๊อค (เป็น True) เราจำเป็นต้องใส่โค๊ดปลดล๊อคไว้ที่ไฟล์ script.rpy ด้วยไม่งั้นภาพต่างๆก็จะยังถูกล๊อคไว้ตลอดกาล ไม่แสดง และไม่สามารถคลิกเข้าไปดูได้การปลดล๊อคก็เพียงกำหนดให้เงื่อนไขมีค่าเท่ากัน True แค่นั้นเอง  
    $ persistent.group_image_cat_sum= True

***ถ้ามีภาพ CGใน Gallery 16 ภาพ เมื่อสร้างเงื่อนไขล๊อคครบ 16ภาพแล้ว อย่าลืมใส่โค๊ดเพื่อปลดล๊อคทั้ง 16 ภาพเอาไว้ด้วยนะค่ะ

เมื่อทำตามขั้นตอนทั้งหมดแล้วก็ลองรันโปรแกรมเพื่อTest โค๊ดคำสั่งต่างๆดูหลายๆรอบเพื่อความแน่ใจในขั้นตอนนี้ ข้าพเจ้าเองลองรันโปรแกรมหลายรอบแล้ว โค๊ดตัวคำสั่งทั้งหมด ยังไม่พบ Errorใดๆ มันจะติด Error อยู่อย่างเดียวคือภาพกลุ่ม dog.jpg,  bunny.jpg , xxx.jpg ทั้งหมดไม่มี(ขี้เกียจหามาใส่) ถ้าไปเผลอคลิกเข้าโปรแกรมจะเด้ง นอกนั้นก็ไม่มีอะไรรันโปรแกรมได้ตามปกติค่ะ

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

นอกจากนี้ จากโค๊ดทั้งหมดจะเห็นว่าข้าพเจ้าได้กำหนดให้มีภาพ CG ของตัวละครลับ(xxx)เพิ่มขึ้นมาด้วย โดยภาพของตัวละครลับนี้ข้าพเจ้ากำหนดให้มันถูกปลดล๊อคได้ก็ต่อเมื่อ หน้าหลักGalleryของcat dog bunny ถูกปลดล๊อคทั้ง 3 หน้าแล้ว(ที่มีคำว่า sum ต่อท้ายคือหน้ากาก Gallery หลักของแต่ละตัวละคร) (ซึ่งก็ไม่จำเป็นว่า ภาพ CG  01 ,02 ,03, 04 ฯลฯ ทุกภาพจะต้องถูกปลดผนึกจนครบ)

จากภาพด้านล่างเมื่อภาพใดถูกปลดล๊อค ตรงปุ่มจะมีไฟสีเขียวแสดงอยู่นั่นแสดงว่าเราสามารถคลิกเข้าไปดูกลุ่มภาพ CG ข้างในได้ และเมื่อ Gallery ของ cat dog และ bunny ถูกล๊อคแล้วก็จะส่งผลให้ xxx(???) ถูกปลดล๊อคตามด้วยเช่นกัน





(คลิกเข้าไปดูแต่ละภาพ)




อัพโหลดไฟล์ตัวอย่างที่ใช้สอนในประกอบบทความ Test Gallery Image Map-1.0-win.zip (9.52 MB, ดาวน์โหลดแล้ว: 459)

2019-12-1 02:14 อัปโหลด

คลิกชื่อไฟล์เพื่อดาวน์โหลด
ปล. จะเอาภาพหน้าหลัก Gallery ของตัวละครตัวไหนขึ้นเป็นหน้าแรกก่อนก็ได้ค่ะแล้วแต่เราจะเป็นผู้กำหนด ยกเว้นภาพตัวละครลับ

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

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