Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Ren'Py [renpy] วิธีที่ภาพ Animation หน้า Imag ...
ดู: 2185|ตอบ: 4
go

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

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 10-10-2014 05:57 |แสดงโพสต์ทั้งหมด
[renpy] วิธีที่ภาพ Animation หน้า Imagemap  Main Menu และ Imagemap  หน้าอื่นๆ

บทความนี้จะมีเนื้อหาต่อเนื่องมาจากการทำ Imagemap ที่หน้า main menu จากบทความ [renpy]วิธีทำ Imagemap สำหรับหน้า Main Menu นะค่ะ และในบทความนี้จะแนะนำวิธีแทรกภาพอนิเมชั่น ไว้ที่หน้า Imagemap Main Menu (หรือถ้าเป็น Imagemap หน้าอื่นภายในเกมส์ ก็จะใช้วิธีการเดียวกันค่ะ )

- ภาพที่ต้องใช้หลักๆของบทความนี้ คือ 1.ภาพ Imapgemap แบบปกติ



- และ 2. หน้า Imagemap  (เฉพาะปุ่มกด) ที่จะเปลี่ยนรูปลักษณ์ไปเมื่อ cursor เม้าส์ลากมาโดน


- ที่พิเศษเพิ่มมาสำหรับบทความนี้อีก คือภาพที่เราจะต้องใช้ทำเป็นภาพ Animation ค่ะ จำนวนภาพจะมากหรือน้อยขึ้นอยู่กับว่าเราต้องการ Animation ให้มีลักษณะเคลื่อนไหวแบบไหน โดยแนะนำให้ควรมีตั้งแต่ 3 ภาพขึ้นไป บันทึกเป็นภาพสกุล .png ด้วย จะได้ไม่ไปแสดงทับปุ่มกดปุ่มต่างๆ ในภาพ Imagemap เข้า

(สำหรบัในตัวอย่างนี้ เราเตรียมไว้ 5ภาพค่ะ (ค่ะขี้เกียจวาดเยอะแหะๆ) เป็นภาพผีเสื้อที่ค่อยๆกางปีกและหุบปีกสลับกัน)



################################################
เอาล่ะ เมื่อภาพพร้อมแล้วก็มาเริ่มกันเลยค่ะ
- ให้เปิดไฟล์ script.rpy ขึ้นมาและพิมพ์โค๊ด "ประกาศตัวแปรภาพ" ลงไปตามในกรอปสีแดงด้านล่างค่ะ (อย่าลืมเปลี่ยนชื่อภาพ และเพิ่ม-ลดจำนวนภาพด้วยนะค่ะ ใครเตรียมภาพไว้มากก็ใส่มากหน่อย )




- ที่ไฟล์ script.rpy ตัวเต็มจะเขียนประมาณนี้ค่ะ (มีไฟล์ที่ทำสำเร็จแล้วให้โหลดไปศึกษาอยู่ท้ายบทความค่ะ)


  1. # You can place the script of your game in this file.
  2. # Declare images below this line, using the image statement.
  3. # eg. image eileen happy = "eileen_happy.png"

  4. #-----------------------[ Image butterfly ]--------------------------------

  5. image butterfly:
  6.     "h1.png"
  7.     pause 0.1
  8.     "h2.png"
  9.     pause 0.1
  10.     "h3.png"
  11.     pause 0.1
  12.     "h4.png"
  13.     pause 0.1
  14.     "h5.png"
  15.     pause 0.1
  16.     "h4.png"
  17.     pause 0.1
  18.     "h3.png"
  19.     pause 0.1
  20.     "h2.png"
  21.     pause 0.1
  22.     "h1.png"
  23.     pause 0.1
  24.     repeat
  25.    
  26. # Declare characters used by this game.
  27. define e = Character('Eileen', color="#c8ffc8")


  28. # The game starts here.
  29. label start:

  30.     e "You've created a new Ren'Py game."

  31.     e "Once you add a story, pictures, and music, you can release it to the world!"

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

- โค๊ดด้านล่างนี้จะหมายถึงระยะเวลาที่จะให้หยุดแสดงผลก่อนที่จะเล่นภาพถัดไปค่ะ 0.1 คือ 0.1 วินาที (ปรับระยะเวลาจะใช้ช้าหรือเร็วก็ได้ตามความสมเหมาะ)

  1. pause 0.1
คัดลอกไปที่คลิปบอร์ด

- ต่อไปเราก็ต้องเพิ่มคำสั่ง "add" ต่อท้ายกลุ่มโค๊ดแสดงหน้า Imagemap  ดังภาพด้านล่างค่ะ




ไฟล์ screen.rpy
  1. ############################################################


  2. screen main_menu:
  3.     tag menu

  4.     imagemap:
  5.         ground 'ground.jpg'
  6.         hover 'hover.png' ##ชื่อภาพที่จะเปลี่ยนแปลงเมื่อเลื่อนเม้าส์มาวางทับ
  7.         
  8.         hotspot (105, 300, 133, 132) action Start()
  9.         hotspot (214, 438, 132, 133) action ShowMenu('load')
  10.         hotspot (434, 453, 132, 132) action ShowMenu('preferences')
  11.         hotspot (577, 321, 132, 128) action Quit(confirm=False)
  12.         

  13.     add "butterfly"
  14.    

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

เสร็จแล้วก็ลองรันไฟล์เกมส์ดูนะคะ หรับความเร็วการแสดงผลแต่ละภาพตามความเหมาะสม


(หลังรันไฟล์เกมส์ ภาพกลุ่มผีเสื้อตรงกลางจะกระพือปีกสลับกันต่อเนื่อง)





ไฟล์เกมส์สำเร็จของเนื้อหาในบทความนี้ค่ะ ^^"


บทความโดย NOOKFUFU2

(ขอสงวนสิทธิ์ให้เผยแพร่เฉพาะในเว็บไทยกราฟเท่านั้น!!!)



ไฟล์แนบ: คุณจำเป็นต้องเข้าสู่ระบบก่อนจึงจะสามารถดูและดาวน์โหลดไฟล์แนบได้ หากยังไม่มีแอคเคานต์หรือยังไม่ได้เป็นสมาชิก กรุณาสมัครสมาชิก
บางบทความคุณจำเป็นต้องสมัครสมาชิกแบบ VIP และ SUPERVIP ถึงจะเข้าอ่านบทความได้

Rank: 1

โพสต์เมื่อ 10-10-2014 13:00 |แสดงโพสต์ทั้งหมด
ありがとうございます อีกครั้งที่อูสารับฟังคำขอของข่าน้อยนะขอรับ

Rank: 1

โพสต์เมื่อ 27-10-2014 11:49 |แสดงโพสต์ทั้งหมด
โอ้ววว  ช่างเป็นความรู้ยิ่งนัก  ขอขอบพระคุณท่านหลายยยครับ

Rank: 1

โพสต์เมื่อ 26-1-2015 20:56 |แสดงโพสต์ทั้งหมด
ありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございますありがとうございます

Rank: 1

โพสต์เมื่อ 25-12-2015 23:24 |แสดงโพสต์ทั้งหมด
ขอบคุณมากๆเลย ทีนี้หน้าตางเกมส์จะได้ดูดีสักที
คุณต้องเข้าสู่ระบบก่อนจึงจะสามารถตอบกลับ เข้าสู่ระบบ | สมัครสมาชิก


Thaigraph

GMT+7, 22-9-2019 08:48 , Processed in 0.092130 second(s), 20 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books