[Renpy] 22. วิธีที่ภาพ Animation หน้า Imagemap Main Menu และ Imagemap หน้าอื่นๆ

nooknazha

[Renpy] 22. วิธีที่ภาพ Animation หน้า Imagemap  MainMenu และ 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 วินาที (ปรับระยะเวลาจะใช้ช้าหรือเร็วก็ได้ตามความสมเหมาะ)

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เท่านั้น)