irpg Community
Ren'Py สอนทำ Imagemap แบบง่ายๆ - Printable Version

+- irpg Community (https://irpg.in.th)
+-- Forum: irpg Sugar School of Ren'Py (https://irpg.in.th/forum-38.html)
+--- Forum: Ren'Py Engine School (https://irpg.in.th/forum-39.html)
+--- Thread: Ren'Py สอนทำ Imagemap แบบง่ายๆ (/thread-3438.html)



Ren'Py สอนทำ Imagemap แบบง่ายๆ - j2547 - 02-06-2020

What

จะมาสอนการทำ  Imagemap แบบง่ายๆ
มันมีวิธีทำหลายอย่างนะครับ อันนี้เป็นแค่รูปแบบหนึ่งเท่านั้น อาจไม่ดีที่สุดแต่มันทำง่าย

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

1. ก่อนอื่นเราต้องเตรียมรูป ไอค่อน และ พื้นหลังไว้ก่อน
โดยในตัวอย่างผมจะทำ บ้านกับโรงเรียน  ไอค่อนสองสี เวลาเราเอาเมาส์ไปชี้แล้วมันจะเปลียนสี




2. นำโค้ดนี้ไปวางไว้ ด้านบนหน้า script
    ในตัวอย่างผมจะทำไอค่อนแค่ 2 อัน ท่านสามารถเพิ่มเป็นหลายๆอันได้


Code:
screen simple_screen():
    frame:
        xalign 0.87 ypos 500 # ที่อยู่พิกัดของไอค่อน
        imagebutton:
            idle "home bw" # ชื่อของรูปอันแรก
            hover "home base"  # ชื่อของรูปอันที่ 2
            action Jump("home") alt "Home" # หัวข้อที่เราต้องการให้กระโดดไป
    frame:
        xalign 0.30 ypos 250
        imagebutton:
            idle "school bw"
            hover "school base"
            action Jump("school") alt "school"


3. การใช้งาน หลักๆก็ให้มันแสดงภาพพื้นหลัง แสดงไอค่อน และเหตุการณ์ที่เราจะโดดไป


Code:
   scene v1001 #ให้แสดงภาพพื้นหลัง
   call screen simple_screen #ให้แสดงไอค่อน


   # เหตุการณ์ที่เราต้องการให้กระโดดไป.
label home:
   scene bg room
   e "home."

   return


label school:
   scene bg room
   e "school."

   return


4. ก็จะได้ประมาณรูป ลองกันดูนะ




Derp 

เพิ่มเติมให้นิดครับ กรณีต้องการเปลียนสีกรอบของไอค่อน ก็ใส่โค้ดนี้ลงไป

Code:
background Solid("#FF00FF")


ใส่แล้วจะได้ประมาณนี้
Code:
   frame:
       background Solid("#FF00FF") # ใส่สีของกรอบไอค่อน
       xalign 0.30 ypos 250
       imagebutton:
           idle "school bw"
           hover "school base"
           action Jump("school") alt "school"
้ถ้าจะให้โปร่งใส่ก็ใส่โคตรตัวนี้ก็ได้ครับ

Code:
background Solid("#99000000")

หรือ ถ้าต้องการคลิกแล้วมีเสียง ก็เอาโค้ดนี้ไปใส่ บรรทัด ต่อจาก action Jump
Code:
activate_sound "audio/Door_Open.mp3"

เอาเมาส์แตะแล้วมีเสียง ก็ใส่โค้ดนี้


Code:
hover_sound "audio/Door_Open.mp3"


Trollface


RE: Ren'Py สอนทำ Imagemap แบบง่ายๆ - XthemeCore - 02-07-2020

สุดยอดไปเลยครับ ทำแผนที่โรงเรียนในเกมจีบสาวได้เลย