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

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

[Renpy] 75. วิธีแทรก มินิเกมส์ Jigsaw Puzzle (แบบ 2)

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

272

กระทู้

272

โพสต์

979

เครดิต

ผู้ดูแลระบบ

Rank: 9Rank: 9Rank: 9

เครดิต
979
75_Insert_Jigsaw_minigame_2_01.jpg
[Renpy] 75. วิธีแทรก มินิเกมส์ Jigsaw Puzzle (แบบ 2)
เป็นโค๊ดมินิเกมส์แนว จิ๊กซออีกแบบที่พัฒนาขึ้นโดยทีมงาน PYTOM นะคะ เห็นว่าการจัดวางและเทคนิคลูกเล่นน่าสนใจดี เลยเอามาทำเป็นบทความให้สำหรับคนที่สนใจอยากจะแทรกมินิเกมส์เพิ่มลูกเล่นให้กับเกมส์ของตัวเองค่ะ

มินิเกมส์แบบที่ 2 จะมีไฟล์เพิ่มมา 2 ไฟล์คือ puzzle.rpy และ cardgame.rpy และมีโฟลเดอร์สำหรับใช่เก็บภาพจิ๊กซอเพิ่มมาอีก 1 คือ โฟลเดอร์ card (ทั้งหมดนี้มีให้โหลดสำหรับใช้ดูประกอบที่ท้ายบทความค่ะ)

75_Insert_Jigsaw_minigame_2_14.jpg
ขั้นตอนการทำในส่วนของตัวโค๊ดมีให้ในไฟล์ดิบให้โหลดไปดูได้เลยค่ะ แต่ในส่วนของภาพที่จะใช้ สำหรับคนที่ไม่มีพื้นฐานโปรแกรม Photoshop มาก่อนอาจจะงงสักหน่อยเวลาตัดภาพที่จะเอามาทำเป็นชิ้นส่วนจิ๊กซอ ในบทความนี้เลยจะขอเน้นไปที่ขั้นตอนการเตรียมภาพแทนนะคะ (เพราะตัวโค๊ดคุณโหลดไฟล์ดิบไปเปิดดูประกอบดูได้เลย นอกจากเปลี่ยนชื่อภาพให้เป็นชื่อภาพของคุณแล้วก็แทบไม่ต้องปรับแต่งอะไร)

ขั้นตอนการเตรียมภาพนะค่ะ
1. ให้เปิดโปรแกรม Photoshop และเปิดภาพที่จะใช้ทำเป็นจิ๊กซอ (ให้มีขนาด 800*600 pt หรือให้เท่ากับขนาดหน้าจอเกมส์ของคุณ)
2. ถ้าที่พื้นที่งานคุณยังไม่โชว์แถบวัดไม้บรรทัด ก็ให้กดปุ่ม Ctrl+R เพื่อเรียกไม้บรรทัดขึ้นมาก่อนค่ะ
3. คุณจะต้องเริ่มจากสร้างเส้นไกด์ขึ้นมาก่อน โดยให้คลิกที่แถบไม้บรรทัดค้างไว้ แล้วแดรกเม้าส์ลากลงมา เส้นไกด์จะถูกสร้างให้อัตโนมัติ (ถ้าดึงจากแถบบรรทัดด้านบนเส้นไกด์จะเป็นแนวขวาง และถ้าดึงจากแถบไม้บรรทัดมุมซ้ายจะได้เส้นไกด์เป็นแนวตั้ง) ให้คุณสร้างเส้นไกด์มาวางเรียงเป็นช่องตารางโดยให้มีขนาดเท่ากับ 3*4 (ยาว*กว้าง)  (มี 12 ช่อง)

75_Insert_Jigsaw_minigame_2_02.jpg

4. แล้วให้ใช้เครื่องมือ Slice Tool
75_Insert_Jigsaw_minigame_2_03.jpg

5. ทำการตัดภาพตาช่องเส้นไกด์ทีละช่อง จนครบทั้ง 12 ช่องตามภาพด้านล่างค่ะ (ต้องให้แต่ละมุมตัดแต่ละบรรจบกันให้ดีด้วย)
75_Insert_Jigsaw_minigame_2_04.jpg

(หลังจากตัดภาพทั้งหมดครบ 12 ช่อง(ภาพ)แล้ว)
75_Insert_Jigsaw_minigame_2_05.jpg

6. จากนั้นก็ให้ได้ที่คำสั่ง File >Save for Web...
75_Insert_Jigsaw_minigame_2_06.jpg

- บันทึกภาพเป็นสกุล .jpg ชื่อ "princess"
75_Insert_Jigsaw_minigame_2_07.jpg

(หลังจากบันทึกภาพแล้ว คุณก็จะได้ไฟลเดอร์ชื่อ "images" ที่เก็บภาพทั้ง 12 ภาพมาค่ะ)
75_Insert_Jigsaw_minigame_2_08.jpg

7. เมื่อคลิกเข้าไปในโฟลเดอร์ "images" ก็จะพบภาพที่ถูกตัดแยกออกเป็น 12 ชิ้นด้วยกัน คุณจะต้องจำลำดับภาพและลำดับตัวเลขที่แสดงไว้ในภาพด้านล่างให้ดีนะค่ะ (เพราะคุณจะต้องแก้ไขชื่อภาพใหม่ทั้งหมดโดยใส่ตัวเลขดังกล่าวไว้หลังชื่อภาพของคุณ)

วิธีแก้ไขชื่อของภาพ ให้คลิกเม้าส์ขวาบนภาพที่ต้องการ แล้วเลือกคำสั่ง "Rename" ให้คุณแก้ไขชื่อภาพใหม่ให้หมดทั้ง 12 ภาพ

75_Insert_Jigsaw_minigame_2_09.jpg

(หลังจากแก้ไขชื่อภาพใหม่ทั้งหมดเรียนร้อยแล้ว (ชื่อหน้าเหมือนเดิม แต่ใส่ลำดับตัวเลขลงไปต่อท้ายภาพ))

8. แล้วก็ให้นำภาพทั้ง 12 ชิ้นที่เปลี่ยนชื่อแล้วมาวางไว้ที่โฟลเดอร์ชื่อ "card" (โฟลเดอร์ "images" ไม่ได้ใช้อะไรแล้วก็ลบทิ้งไปได้เลยค่ะ)

75_Insert_Jigsaw_minigame_2_10.jpg

เสร็จแล้วค่ะสำหรับขั้นตอนการเตรียมภาพ

-------------------------------------------------------------
ขั้นตอนการทำงาน
เมื่อเข้าเกมส์มาก็จะเจอหน้าอธิบายวิธีเล่นก่อน
75_Insert_Jigsaw_minigame_2_11.jpg

- แล้วก็เลิกเล่นมินิเกมส์ได้เลย โดยคุณจะต้องทั้งหมุนภาพ สลับภาพจนกว่าจะได้ตำแหน่งภาพที่ถูกต้อง
75_Insert_Jigsaw_minigame_2_15.jpg

(ที่มุมซ้ายล่างจะมีเมนูให้คุณคลิกออกจากมินิเกมส์ได้ตลอดเวลา)
75_Insert_Jigsaw_minigame_2_12.jpg

- ในกรณีที่คุณคลิกออกจากมินิเกมส์กระทันหันทั้งที่ยังเล่นไม่จบเกมส์ จะมีหน้าคำถามแสดงขึ้นมาเพื่อกันในกรณีที่คุณเผลอพลาดไปคลิดโดนปุ่มกดออก
75_Insert_Jigsaw_minigame_2_13.jpg

เมื่อคุณเล่นจนจบเกมส์แล้วก็จะมีหน้าแสดงความยินดีโชว์ขึ้นมาให้ค่ะ


โหลดไฟล์ที่นี่ Thaigraph_Jigsaw_Puzzles_2.zip (875.38 KB, ดาวน์โหลดแล้ว: 427)
ขออภัย! คุณไม่ได้รับสิทธิ์ในการดำเนินการในส่วนนี้ กรุณาเลือกอย่างใดอย่างหนึ่ง ลงชื่อเข้าใช้ | ลงทะเบียน

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

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

GMT+7, 2024-12-22 10:01 , Processed in 0.066383 second(s), 22 queries .

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

© 2001-2017 Comsenz Inc.

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