[Renpy] 24. วิธีทำอัลบั้มภาพ CG Gallery แบบ Classic
แก้ไขครั้งสุดท้ายโดย nooknazha เมื่อ 2018-6-5 23:2124. วิธีทำอัลบั้มภาพ CG Gallery แบบ Classic
บทความ Galleryเป็นบทความที่ไม่อยากทำมากที่สุด เพราะต้องใช้ภาพประกอบเยอะมากแต่มันก็เป็นส่วนหนึ่งของเกมส์ Visual Novel ที่จำเป็นต้องมีมากที่สุดเช่นกันยังไงก็ต้องทำล่ะนะ -*- ด้วยเหตุนี้เองเพื่อความเร็วรวดข้าพเจ้าจึงทำภาพประกอบเกมส์เลยทำแบบง่ายๆ เพราะจะเน้นอธิบายแค่วิธีการเชื่อมโยงโค๊ดแต่ละส่วนจนออกมาเป็นผลลัพธ์ Gallery ดังตัวอย่างข้างบนนะค่ะ
ตอนแรกว่าจะให้เป็นบทความหลังๆแต่พอดีจะลบไฟล์ Demo เกมส์ตัว Gallery นี้ทิ้งไปแล้วจะลองเปลี่ยนมาใช้แบบ Image Map ล้วนๆดูบ้างคิดว่าน่าจะสวยดั่งกว่า แต่สำหรับคนที่ชอบแบบคราสสิคก็ให้ใช้วิธีทำตามนี้แทนค่ะ
ขั้นตอนที่ 1
- ให้โหลดไฟล์ชื่อ new_gallery.rpy
- หลังจากแตกไฟล์แล้ว ให้นำไปใส่ในแฟ้มเกมส์ของเราค่ะ
ขั้นตอนที่ 2
- ให้เตรียมภาพสำหรับทำพื้นหลัง1 ภาพ
- จากนั้นให้เปิดโปรแกรม JEdit ขึ้นมาและใช้คำสั่ง File > New (หรือกด Ctrl+N) เพื่อสร้างไฟล์ใหม่
- ให้นำโค๊ดด้านล่างไปใส่ที่ไฟล์ใหม่ค่ะimage menu_bonus= "map/pattern_Bonus.jpg"
label bonus:
scene menu_bonus with dissolve
menu:
"CG Gallery":
jump gallery
"Profilre":
jump Profile
"Music":
jump sound_game
"Return Main Menu":
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 โหลดจากที่นี่ค่ะ ทำเตรียมไว้ให้แล้ว
กลุ่มที่ 4 ภาพพื้นหลังของหน้าGallery 1 ภาพ
ตัวอย่าง
ขั้นตอนที่ 4
- เราจะทำการสร้างlabel gallery ขึ้นมาเพื่อรองรับเงื่อนไขนะค่ะ โดย....ให้คัดลอกนำโค๊ดด้านล่างนี้ ไปวางต่อท้ายโค๊ดตัวข้างบน
Code: ต้นฉบับ
init:
# Position the navigation on the right side of the screen.
$ style.gallery_nav_frame.xpos = 800 - 10
$ style.gallery_nav_frame.xanchor = 1.0
$ style.gallery_nav_frame.ypos = 12
# Add the gallery to the main menu.
$ config.main_menu.insert(2, ('Gallery', "gallery", "True"))
# The entry point to the gallery code.
label gallery:
python hide:
# Construct a new gallery object.
g = Gallery()
# The image used for locked buttons.
g.locked_button = "gallery_locked.png"
# The background of a locked image.
g.locked_background = "gallery_lockedbg.jpg"
# Frames added over unlocked buttons, in hover and idle states.
g.hover_border = "gallery_hover.png"
g.idle_border = "gallery_idle.png"
# An images used as the background of the various gallery pages.
g.background = "gallery_background.jpg"
# Lay out the gallery images on the screen.
# These settings lay images out 3 across and 4 down.
# The upper left corner of the gird is at xpos 10, ypos 20.
# They expect button images to be 155x112 in size.
g.grid_layout((3, 4), (10, 12), (160, 124))
# Show the background page.
g.page("Backgrounds")
# Our first button is a picture of the beach.
g.button("thumb_beach.jpg")
#
# These show images, if they have been unlocked. The image name must
# have been defined using an image statement.
g.unlock_image("bg beach daytime")
g.unlock_image("bg beach nighttime")
#
# This shows a displayable...
g.display("beach_sketch.jpg")
# ... if all prior images have been show.
g.allprior()
# A second set of images.
g.button("thumb_lighthouse.jpg")
g.unlock_image("bg lighthouse day")
g.unlock_image("bg lighthouse night")
g.display("lighthouse_sketch.jpg")
g.allprior()
# We can use g.page to introduce a second page.
g.page("Characters")
g.button("thumb_eileen.jpg")
#
# Note that we can give image and unlock image more than one image
# at a time.
g.unlock_image("bg lighthouse day", "eileen day happy")
g.unlock_image("bg lighthouse day", "eileen day mad")
# Another page, this one for concept art.
g.page("Concept Art")
g.button("thumb_concepts.jpg")
#
# We can apply conditions to buttons as well as to images.
# The "condition" condition checks an arbitrary expression.
g.condition("persistent.beat_game")
#
g.display("concept1.jpg")
g.display("concept2.jpg")
g.display("concept3.jpg")
# Now, show the gallery.
g.show()
jump main_menu_screen
ตัวอย่างการใส่โค๊ด...โค๊ดตัวไหนที่ยังไม่จำเป็นต้องใช้ ข้าพเจ้าจะลบทิ้งไปนะค่ะและถ้าโค๊ดตัวไหนที่จำเป็นต้องมี ข้าพเจ้าก็จะเขียนเพิ่มลงไป
Code: Modify ใหม่ใน bons.rpy ของเรา
image menu_bonus= "map/pattern_Bonus.jpg"
label bonus:
scene menu_bonus with dissolve
menu:
"CG Gallery":
jump gallery
"Profilre":
jump Profile
"Music":
jump sound_game
"Return Main Menu":
jump main_menu_screen
init:
# Position the navigation on the right side of the screen.
$ style.gallery_nav_frame.xpos = 800 - 10
$ style.gallery_nav_frame.xanchor = 1.0
$ style.gallery_nav_frame.ypos = 12
$ style.gallery_nav_frame.xalign = 0.95
$ style.gallery_nav_frame.yalign = 0.3
# Add the gallery to the main menu.
$ config.main_menu.insert(2, ('Gallery', "gallery", "True"))
###################################################
# The entry point to the gallery code.
label gallery:
python hide:
# Construct a new gallery object.
g = Gallery()
# The image used for locked buttons.
g.locked_button = "map/gallery_locked.jpg"
# The background of a locked image.
g.locked_background = "map/pattern_cat.jpg"
# Frames added over unlocked buttons, in hover and idle states.
g.hover_border = "map/gallery_hover.png"
g.idle_border = "map/gallery_idle.png"
# An images used as the background of the various gallery pages.
g.background = "map/pattern_cat.jpg"
# The transition used when switching images.
g.transition = dissolve
# Lay out the gallery images on the screen.
# These settings lay images out 3 across and 4 down.
# The upper left corner of the gird is at xpos 10, ypos 20.
# They expect button images to be 155x112 in size. 160*124)
g.grid_layout((3, 4), (50, 100), (180, 144))
####################################################
# Show the background page.
g.page("Cat")
# Our first button is a picture of the beach.
g.button("map/cat1_button.jpg")
g.unlock_image("cat1")
g.button("map/cat2_button.jpg")
g.unlock_image("cat2")
g.unlock_image("cat3")
g.button("map/cat3_button.jpg")
g.unlock_image("cat3")
g.button("map/cat4_button.jpg")
g.unlock_image("cat4")
g.button("map/cat5_button.jpg")
g.unlock_image("cat5")
g.button("map/cat6_button.jpg")
g.unlock_image("cat6")
#g.allprior()
###################################################
g.page("Bunny")
# Our first button is a picture of the beach.
g.button("map/bunny1_button.jpg")
g.unlock_image("bunny1")
g.button("map/bunny1_button.jpg")
g.unlock_image("bunny1")
g.button("map/bunny1_button.jpg")
g.unlock_image("bunny1")
###################################################
g.show()
jump main_menu_screen
(แล้วแต่จะนำไปดัดแปลงนะคะ)อธิบายโค๊ด:โค๊ดด้านล่างนี้เอาไว้จัดตำแหน่งวางเมนูที่ได้กดเปลี่ยน Page และกลับไปที่main menu (xalign คือ ตำแหน่งแนวนอน และ yalign คือ ตำแหน่งแนวตั้ง)โค๊ดนี้ไว้สำหรับเปลี่ยนภาพพื้นหลังหน้าGallery$ style.gallery_nav_frame.xalign = 0.95
$ style.gallery_nav_frame.yalign = 0.3ด้านล่างนี้เป็นโค๊ดอีกตัวที่จำเป็นต้องรู้(3,4) ตัวเลขในวงเล็บกลุ่มแรกคือจำนวนแถวและคมลัมน์(เอาไว้จัดระเบียงการวางปุ่ม) และ (50,100) ตัวเลขในวงเล็บกลุ่มที่สอง จะใช้กำหนตำแหน่งการวางภาพปุ่มทั้งกลุ่มว่าจะให้ปุ่มทั้งหมดย้ายไปกระจุกรวมกันอยู่ที่ตำแหน่งไหนของหน้าจอเกมส์ ส่วน (180,144)ตัวเลขในวงเล็บกลุ่มสุดท้าย มีไว้เพื่อจัดระยะเนื้อความกว้างยาวเช่น... ถ้าภาพปุ่มของเรามีขนาด 160*124 เราก็ควรจะกำหนดเนื้อที่ให้ปุ่มกว้างออกไปสักด้านละ20 ซึ่งก็จะเป็น 180*144 เพื่อให้ภาพปุ่มทุกภาพที่วางเรียงกันบนหน้าจอเกมส์มีช่องไฟเว้นระยะห่างบ้าง ไม่ติดกันเกินไปgg.grid_layout((3, 4), (50, 100), (180, 144))โค๊ดนี้ไว้สำหรับสร้างกลุ่มแต่ละหมวดของภาพ รวมทั้งตั้งชื่อใหม่ให้กับเมนูด้วย g.page("Bunny")โค๊ดข้างล่างนี้ให้ใส่ชื่อปุ่มกด ซึ่งในหน้า page 1 หน้าสามารถกำหนดปุ่มกดได้หลายปุ่มค่ะ ต่อจากปุ่มกด เราก็ต้องใส่ชื่อตัวแปรภาพที่จะให้ทำการแสดงเมื่อถูกคลิก (โดยปกติปุ่มกดจะถูกล๊อคไว้ ถ้าเงื่อนไขถูกต้องจึงจะแสดงปุ่มกดให้คลิกเพื่อดูภาพ CG ได้)g.button("map/bunny1_button.jpg")
g.unlock_image("bunny1")โค๊ดนี้ไว้สำหรับเปลี่ยนภาพพื้นหลังหน้าGalleryg.background = "map/pattern_cat.jpgในกรณีที่มีการเฟสภาพมากกว่า1 ภาพการใช้โค๊ดตัวนี้ร่วมด้วย จะทำให้การเฟสภาพ Gallery แต่ละภาพดูนิ่มนวลมากขึ้นg.transition = dissolveในกรณีที่ต้องการให้ปุ่มกด 1 ปุ่ม แสดงภาพ Gallery ต่อเนื่องกันตั้งแต่2 ภาพขึ้นไปก็ให้เขียนโค๊ดแบบนี้ค่ะ
g.button("map/cat2_button.jpg")
g.unlock_image("cat2")
g.unlock_image("cat3")
หากต้องการให้มีภาพตัวละครแทรกอยู่กับภาพในGallery ด้วยก็ให้เขียนโค๊ดแบบนี้ค่ะ g.button("thumb_eileen.jpg")
g.unlock_image("bg lighthouse day", "eileen")ขั้นตอนที่ 5
- นำโค๊ดด้านล่างนี้ไปใส่ที่ไฟล์ script.rpy (ใส่ไว้ที่ตำแหน่งล่างสุดก็ได้)$ persistent.gallery_unlocked = Trueตัวอย่างการใส่โค๊ด...หน้าscript.rpy
define p = Character('ปกิณกะ', color="#f8f092")
image m = "cha/dongmai_01.png"
image m Smile = "cha/dongmai_02.png"
image cat1 = "map/cat1.jpg"
image cat2 = "map/cat2.jpg"
image cat3 = "map/cat3.jpg"
image cat4 = "map/cat4.jpg"
image cat5 = "map/cat5.jpg"
image cat6 = "map/cat6.jpg"
image bunny1 = "map/bunny1.jpg"
# เริ่มเกมส์
label start:
scene bunny1
show m with dissolve
p "11111111111111111111111111!"
show m Smile with dissolve
p "222222222222222222222222222222!"
scene cat1
show m with dissolve
p "33333333333333333333333333333!"
show cat2
menu:
"ทางเลือกที่ 1 ":
jump home
"ทางเลือกที่ 2":
jump book
"ทางเลือกที่ 3":
jump work
#ทางเลือกต่างๆ หลังจากคลิกเลือกคำตอบ
label home:
show cat3
p "คำตอบของทางเลือกที่ 1"
jump next
label book:
show cat4
p "คำตอบของทางเลือกที่ 2"
jump next
label work:
show cat5
p "คำตอบของทางเลือกที่ 3"
jump next
label next:
scene cat6
"Wow........!!!!! Game Over!!!!"
$ persistent.extra_unlocked = True #สั่งให้ persistent.extra_unlocked = True (เป็นจริง)
#เปิดใช้งานหน้า Bonus
$ persistent.gallery_unlocked = True #สั่งให้ persistent.gallery_unlocked = True (เป็นจริง)
#เปิดใช้งานหน้า Gallery
#ใส่โค๊ดนี้ไว้ที่บรรทัดใดก็ได้ หรือ
#ใส่ต่อจากบทสนทนาสุดท้ายของเกมส์(จบเกมส์)
return
- จากนั้นให้บันทึกไฟล์ทั้งหมด และลองรันโปรแกรมดู-ผู้เล่นจะต้อง เล่นเกมส์ให้จบก่อน เพื่อให้หน้าเมนู "Bonus" แสดงขึ้นมา จากนั้นจึงค่อยคลิกเข้าไปดูที่หน้า CG Gallery ที่เราทำไว้- จะเห็นว่าในการเล่นจนจบเกมส์ครั้งแรก ภาพแสดงไม่ครบทุกภาพที่เป็นแบบนี้เพราะว่า "หากผู้เล่น.. เล่นเกมส์จนไปพบกับฉากภาพประทับใจภาพไหนฉากภาพนั้นใน Gallery จึงจะถูกปลดล๊อคค่ะ"- สรุปคือ มันเป็นการสร้างความกระตือรือร้นให้กับผู้เล่นจำเป็นต้องเล่นเกมส์หลายๆรอบ เพื่อสะสมภาพ Gallery ภาพต่างๆแสดงให้ครบทุกใบ แน่นอนว่าเล่นแค่ 1 รอบไม่ได้ยิ่งภาพแต่ละภาพมีความซับซ้อนในการได้มามากเท่าไหร่ โอกาสที่จะสะสมภาพ Galleryให้ครบทุกหน้า ก็ยิ่งยากขึ้นไปด้วย เหอๆๆๆ
- ภาพไหนที่ถูกปลดล๊อคแล้ว เราก็จะสามารถมองเห็นปุ่มและคลิกปุ่มเข้าไปดูภาพฉากนั้นๆได้ค่ะ
(Gallery แบบ Imagemap ถ้าขยันจะทำให้นะค่ะถ้าขี้เกียจก็.... -*- )
ปล. โค๊ดตัวเล็กมาก ถ้าไม่อยากนั่งเล็ง ก็ให้กดปุ่ม Ctrl+++ ค่ะหน้าจอจะขยายใหญ่อ่านโค๊ดง่ายขึ้น แล้วถ้าต้องการลดขนาดหน้าจอกลับก็ให้กดปุ่ม Ctrl--- ตอนนั่งทำบทความนี้ ต้องขยายถึง 200% ถึงจะตรวจเช็คโค๊ดได้ไม่งั้นตาลาย
***************************************
บทความโดย นุ้ก
ขอจบบทความแค่เพียงเท่านี้ แล้วพบกันใหม่บทความหน้าค่ะ ^^
(ขอสงวนสิทธิ์อนุญาตให้เผยแพร่เฉพาะในเว็บ www.graphicfufu.comเท่านั้น)
หน้า:
[1]