02-06-2020, 11:34 AM
จะมาสอนการทำ Imagemap แบบง่ายๆ
มันมีวิธีทำหลายอย่างนะครับ อันนี้เป็นแค่รูปแบบหนึ่งเท่านั้น อาจไม่ดีที่สุดแต่มันทำง่าย
หลักการทำงานของมันก็คือ
เราจะให้มันแสดงภาพแผนที่ และก็ให้แสดงไอค่อน สำหรับคลิกกระโดด ไปยังเหตุการณ์ต่างๆ
1. ก่อนอื่นเราต้องเตรียมรูป ไอค่อน และ พื้นหลังไว้ก่อน
โดยในตัวอย่างผมจะทำ บ้านกับโรงเรียน ไอค่อนสองสี เวลาเราเอาเมาส์ไปชี้แล้วมันจะเปลียนสี
[attachment=512]
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."
return4. ก็จะได้ประมาณรูป ลองกันดูนะ
[attachment=513]
เพิ่มเติมให้นิดครับ กรณีต้องการเปลียนสีกรอบของไอค่อน ก็ใส่โค้ดนี้ลงไป
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"