[Renpy] 22. วิธีที่ภาพ Animation หน้า Imagemap Main Menu และ Imagemap หน้าอื่นๆ
แก้ไขครั้งสุดท้ายโดย nooknazha เมื่อ 2018-5-27 23:5122. วิธีที่ภาพ Animation หน้า ImagemapMainMenu และ Imagemapหน้าอื่นๆ
ในบทความนี้จะแนะนำวิธีแทรกภาพอนิเมชั่น ไว้ที่หน้า Imagemap Main Menu(หรือถ้าเป็น Imagemap หน้าอื่นภายในเกมส์ก็จะใช้วิธีการเดียวกันค่ะ )
- ภาพที่ต้องใช้หลักๆของบทความนี้คือ 1.ภาพ Imapgemap แบบปกติ
- และ 2. หน้า Imagemap(เฉพาะปุ่มกด) ที่จะเปลี่ยนรูปลักษณ์ไปเมื่อ cursor เม้าส์ลากมาโดน
- ที่พิเศษเพิ่มมาสำหรับบทความนี้อีกคือภาพที่เราจะต้องใช้ทำเป็นภาพ Animation ค่ะจำนวนภาพจะมากหรือน้อยขึ้นอยู่กับว่าเราต้องการ Animation ให้มีลักษณะเคลื่อนไหวแบบไหนโดยแนะนำให้ควรมีตั้งแต่ 3 ภาพขึ้นไป บันทึกเป็นภาพสกุล .pngด้วย จะได้ไม่ไปแสดงทับปุ่มกดปุ่มต่างๆ ในภาพ Imagemap เข้า
(สำหรับในตัวอย่างนี้เราเตรียมไว้ 5ภาพค่ะ (ค่ะขี้เกียจวาดเยอะแหะๆ)เป็นภาพผีเสื้อที่ค่อยๆกางปีกและหุบปีกสลับกัน)
################################################
เอาล่ะเมื่อภาพพร้อมแล้วก็มาเริ่มกันเลยค่ะ
- ให้เปิดไฟล์ script.rpyขึ้นมาและพิมพ์โค๊ด "ประกาศตัวแปรภาพ"ลงไปตามในกรอปสีแดงด้านล่างค่ะ (อย่าลืมเปลี่ยนชื่อภาพและเพิ่ม-ลดจำนวนภาพด้วยนะค่ะ ใครเตรียมภาพไว้มากก็ใส่มากหน่อย )
- ที่ไฟล์ script.rpy ตัวเต็มจะเขียนประมาณนี้ค่ะ(มีไฟล์ที่ทำสำเร็จแล้วให้โหลดไปศึกษาอยู่ท้ายบทความค่ะ)
# You can place the script of your game in this file.# Declare images below this line, using the image statement.# eg. image eileen happy = "eileen_happy.png"
#-----------------------[ Image butterfly ]--------------------------------
image butterfly: "h1.png" pause 0.1 "h2.png" pause 0.1 "h3.png" pause 0.1 "h4.png" pause 0.1 "h5.png" pause 0.1 "h4.png" pause 0.1 "h3.png" pause 0.1 "h2.png" pause 0.1 "h1.png" pause 0.1 repeat # Declare characters used by this game.define e = Character('Eileen', color="#c8ffc8")
# The game starts here.label start:
e "You've created a new Ren'Py game."
e "Once you add a story, pictures, and music, you can release it to the world!"
return
- โค๊ดด้านล่างนี้จะหมายถึงระยะเวลาที่จะให้หยุดแสดงผลก่อนที่จะเล่นภาพถัดไปค่ะ0.1 คือ 0.1 วินาที (ปรับระยะเวลาจะใช้ช้าหรือเร็วก็ได้ตามความสมเหมาะ)
pause 0.1
- ต่อไปเราก็ต้องเพิ่มคำสั่ง "add" ต่อท้ายกลุ่มโค๊ดแสดงหน้า Imagemapดังภาพด้านล่างค่ะ
ไฟล์ screen.rpy
############################################################
screen main_menu: tag menu
imagemap: ground 'ground.jpg' hover 'hover.png' ##ชื่อภาพที่จะเปลี่ยนแปลงเมื่อเลื่อนเม้าส์มาวางทับ hotspot (105, 300, 133, 132) action Start() hotspot (214, 438, 132, 133) action ShowMenu('load') hotspot (434, 453, 132, 132) action ShowMenu('preferences') hotspot (577, 321, 132, 128) action Quit(confirm=False)
add "butterfly"
###########################################################
เสร็จแล้วก็ลองรันไฟล์เกมส์ดูนะคะหรับความเร็วการแสดงผลแต่ละภาพตามความเหมาะสม
(หลังรันไฟล์เกมส์ภาพกลุ่มผีเสื้อตรงกลางจะกระพือปีกสลับกันต่อเนื่อง)
***************************************
โหลดภาพประกอบสำหรับใช้ทำตามบทความได้ที่นี่ค่ะ (คลิกขวาที่ภาพเลือก save)
***************************************
บทความโดย นุ้ก
ขอจบบทความแค่เพียงเท่านี้ แล้วพบกันใหม่บทความหน้าค่ะ ^^
(ขอสงวนสิทธิ์อนุญาตให้เผยแพร่เฉพาะในเว็บ www.graphicfufu.comเท่านั้น)
หน้า:
[1]