Ren'Py สอนทำ Imagemap แบบง่ายๆ

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. ก็จะได้ประมาณรูป ลองกันดูนะ

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

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"

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

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