Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Ren'Py [renpy] วิธีทำ Imagemap หน้า Save & Load ...
ดู: 2078|ตอบ: 3
go

[renpy] วิธีทำ Imagemap หน้า Save & Load

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 26-12-2013 20:43 |แสดงโพสต์ทั้งหมด
[renpy] วิธีทำ Imagemap หน้า Savs & Load
ตามที่มีท่านสมาชิกขอไว้นะค่ะ เรื่องวิธีทำ Imagemap หน้า Save & Load ที่จริงบทความนี้อยากทำนานแล้ว แต่ก็ผลัดมาตลอด เพราะมันต้องใช้ภาพ map ทั้งหมด 10 ภาพด้วยกัน อิอิ


สำหรับบทความที่เกี่ยวข้องกับการทำ Imagemap ที่หน้าต่างๆ ภายในเกมส์ สามารถตามอ่านได้ที่ลิงค์ด้านล่างนะค่ะ  

- [renpy] วิธีทำ Imagemap ภายในเกมส์
- [renpy] วิธีการทำ Imagemap ภายใน Label
- [renpy]วิธีทำ Imagemap สำหรับหน้า Menu เริ่มเกมส์
- [renpy] วิธีแทรกหน้า Bonus ไว้ที่ Main Menu แบบ Imagemap
- [renpy] วิธีทำ Imagemap หน้า Preferences
- [renpy] วิธีทำ Imagemap หน้า yes/no - prompt
- [renpy] วิธีทำ Imagemap Quick Menu

----------------------------------------------------------------------------------------------------------

วิธีการทำ Imagemap หน้า Save & Load

ขั้นตอนที่ 1 : เตรียมภาพ map - สำหรับการทำหน้า Imagemap ของ Load และ Save เราต้องใช้ทั้งหมด 10 หน้าด้วยกัน คือ หน้า Load จำนวน 5 หน้า และหน้า Save จำนวน 5 หน้า ถ้าถามไว้ทำไมต้องอย่างละ 5 หน้า และแต่ละหน้ามีไว้ทำอะไรก็ขอให้กลับไปอ่านบทความ  - [renpy] วิธีทำ Imagemap หน้า Preferences ก่อนค่ะจะได้เข้าใจง่ายกว่า


- ภาพนี้เป็นภาพหน้า Load Save ที่โปรแกรม Renpy สร้างให้อัตโนมัตินะค่ะ เราจะเอาหน้านี้มาใช้เป็นตัวอย่างคร่าวๆ ในการออกแบบหน้า Imagemap Load Save ของเรา



- สำหรับภาพ Imagemap Load และ Save ที่เราออกแบบทั้ง 10 หน้าไว้ จะมีให้โหลดที่ลิงค์ด้านล่างของบทความนะค่ะ เผื่อจะลองทำตาม หรือลองเอาไปเทียบตำแหน่งพิกัดในโปรแกรม Photoshop ดูว่ากลุ่มพิกัดตัวเลขแต่ละชุด กำลังแทนค่าตำแหน่งไหนในภาพ



ขั้นตอนที่ 2 : ลบโค๊ดที่ไม่จำเป็น
2.1 ให้เปิดไฟล์ screens.rpy ขึ้นมา และเลื่อนลูกกลิ้งเม้าส์ลงไปล่างๆ หาโค๊ดหน้า Save และ Load ที่โปรแกรมทำไว้ในเรา ให้แดรกเม้าส์เลือกโค๊ดทั้งหมดตามในภาพ และกดปุ่ม "Delete"  เพื่อลบทิ้งให้หมดค่ะ

2.2 จากนั้นให้บันทึกไฟล์ (กดปุ่ม Ctrl+S) และปิดไฟล์นี้ไปซะ



ขั้นตอนที่ 3 : หาพิกัด X, Y, W, H
3.1 เปิดโปแกรม Photoshop ขึ้นมาและหาพิกัดตัวเลขแต่ละกลุ่ม สำหรับคนที่ยังหาพิกัดตัวเลขในการ Map ไม่เป็นนะค่ะ ให้ย้อนกลับไปดูบทความ - [renpy] วิธีทำ Imagemap ภายในเกมส์ ก่อน


3.2 ให้ Copy โค๊ดด้านล่างทั้งหมดไปใส่ในไฟล์ options.rpy (หรือใส่ไว้ไฟล์ screens.rpy ก็ได้ มีค่าเท่ากันค่ะ เพราะโปรแกรมจะไม่สนใจชื่อไฟล์ มันจะสนใจแต่โค๊ดคำสั่งที่อยู่ภายในนั้นอย่างเดียว)

3.3 เมื่อนำโค๊ดที่ Copy ไปวางแล้ว อย่าลืมเปลี่ยนพิกัดตัวเลข X, Y, W, H เป็นตำแหน่งใหม่ ตามภาพImagemap ที่เราออกแบไว้ด้วยนะค่ะ (สำหรับคนที่โหลดภาพ Imagemap ทั้ง 10 ภาพ ที่เราทำไว้ให้ไปลองทำตามดู ก็ยังไม่จำเป็นต้องเปลี่ยนพิกัดใหม่นะค่ะ เพราะพิกัดในโค๊ดเราใส่ให้ถูกตำแหน่งกับภาพ Map หมดแล้ว)

(อันนี้เป็นภาพตัวอย่างโค๊ด ที่แยกสีไว้ให้ดูง่ายเฉยๆค่ะ โค๊ดตัวที่ให้ Copy ไปวางได้ จะอยู่อันล่าง)



โค๊ดข้างล่างทั้งหมดนี่แหล่ะ Copy ไปวางต่อท้ายที่ไฟล์  options.rpy เลยค่ะ
  1. #-----------------------------------------------------------------------------
  2. #-----------------   IMAGEMAP SAVE / LOAD SCREEN  ---------------
  3. #-----------------------------------------------------------------------------

  4. screen load_save_slot:
  5.     $ file_text = "% s\n  %s" % (FileTime(number, empty="Empty Slot."), FileSaveName(number))

  6.     add FileScreenshot(number) xpos 5 ypos 15 #<---- ตำแหน่งวางภาพหน้า ScreenShot ปัจจุบันที่บันทึก
  7.     text file_text xpos 100 ypos 11 #<---- ตำแหน่งแสดง Text ที่บันทึก
  8.     key "save_delete" action FileDelete(number)

  9. screen load:
  10.     tag menu
  11.    
  12.     imagemap:
  13.         #หน้า Load ใช้ทั้งหมด 5 ภาพ
  14.         ground 'menu/load_ground.png'
  15.         idle 'menu/load_idle.png'
  16.         hover 'menu/load_hover.png'
  17.         selected_idle 'menu/load_selected_idle.png'
  18.         selected_hover 'menu/load_selected_hover.png'

  19.         #หน้าสำหรับ Load มีทั้งหมด 5 หน้า ให้กดคลิกเพื่อเปลี่ยนไปแต่ละหน้า
  20.         hotspot (-1, -1, -1, -1) action FilePage('auto')
  21.         hotspot (315, 106, 92, 86) action FilePage(1) hover_sound "sound/click.wav"
  22.         hotspot (407, 106, 92, 86) action FilePage(2) hover_sound "sound/click.wav"
  23.         hotspot (500, 106, 92, 86) action FilePage(3) hover_sound "sound/click.wav"
  24.         hotspot (596, 106, 92, 86) action FilePage(4) hover_sound "sound/click.wav"
  25.         hotspot (688, 106, 92, 86) action FilePage(5) hover_sound "sound/click.wav"
  26.         
  27.         #แทนตำแหน่งช่องสำหรับ  Load ทั้ง 8 ช่อง
  28.         hotspot (279, 215, 249, 81) action FileAction(0):
  29.             use load_save_slot(number=0)
  30.         hotspot (279, 307, 249, 81) action FileAction(1):
  31.             use load_save_slot(number=1)
  32.         hotspot (279, 399, 249, 81) action FileAction(2):
  33.             use load_save_slot(number=2)
  34.         hotspot (279, 499, 249, 81) action FileAction(3):
  35.             use load_save_slot(number=3)
  36.             
  37.         hotspot (540, 215, 249, 81) action FileAction(4):
  38.             use load_save_slot(number=4)
  39.         hotspot (540, 307, 249, 81) action FileAction(5):
  40.             use load_save_slot(number=5)
  41.         hotspot (540, 399, 249, 81) action FileAction(6):
  42.             use load_save_slot(number=6)
  43.         hotspot (540, 499, 249, 81) action FileAction(7):
  44.             use load_save_slot(number=7)
  45.             
  46.         hotspot (43, 260, 193, 50) action Return() hover_sound "sound/click.wav"
  47.         hotspot (43, 310, 193, 50) action ShowMenu('save') hover_sound "ssound/click.wav"
  48.         hotspot (43, 362, 193, 50) action ShowMenu('load') hover_sound "sound/click.wav"
  49.         hotspot (43, 412, 193, 50) action ShowMenu('preferences') hover_sound "sound/click.wav"
  50.         hotspot (43, 464, 193, 50) action MainMenu() hover_sound "sound/click.wav"
  51.         hotspot (43, 516, 193, 50) action Quit() hover_sound "sound/click.wav"

  52. screen save:
  53.    
  54.     tag menu
  55.    
  56.     imagemap:
  57.         #หน้า Save ใช้ทั้งหมด 5 ภาพ
  58.         ground 'menu/save_ground.png'
  59.         idle 'menu/save_idle.png'
  60.         hover 'menu/save_hover.png'
  61.         selected_idle 'menu/save_selected_idle.png'
  62.         selected_hover 'menu/save_selected_hover.png'

  63.         #หน้าสำหรับ Save มีทั้งหมด 5 หน้า ให้กดคลิกเพื่อเปลี่ยนไปแต่ละหน้า
  64.         hotspot (-1, -1, -1, -1) action FilePage('auto')
  65.         hotspot (315, 106, 92, 86) action FilePage(1) hover_sound "sound/click.wav"
  66.         hotspot (407, 106, 92, 86) action FilePage(2) hover_sound "sound/click.wav"
  67.         hotspot (500, 106, 92, 86) action FilePage(3) hover_sound "sound/click.wav"
  68.         hotspot (596, 106, 92, 86) action FilePage(4) hover_sound "sound/click.wav"
  69.         hotspot (688, 106, 92, 86) action FilePage(5) hover_sound "sound/click.wav"
  70.         
  71.         #แทนตำแหน่งช่องสำหรับ Save ทั้ง 8 ช่อง
  72.         hotspot (279, 215, 249, 81) action FileAction(0):
  73.             use load_save_slot(number=0)
  74.         hotspot (279, 307, 249, 81) action FileAction(1):
  75.             use load_save_slot(number=1)
  76.         hotspot (279, 399, 249, 81) action FileAction(2):
  77.             use load_save_slot(number=2)
  78.         hotspot (279, 499, 249, 81) action FileAction(3):
  79.             use load_save_slot(number=3)
  80.             
  81.         hotspot (540, 215, 249, 81) action FileAction(4):
  82.             use load_save_slot(number=4)
  83.         hotspot (540, 307, 249, 81) action FileAction(5):
  84.             use load_save_slot(number=5)
  85.         hotspot (540, 399, 249, 81) action FileAction(6):
  86.             use load_save_slot(number=6)
  87.         hotspot (540, 499, 249, 81) action FileAction(7):
  88.             use load_save_slot(number=7)
  89.             
  90.         hotspot (43, 260, 193, 50) action Return() hover_sound "sound/click.wav"
  91.         hotspot (43, 310, 193, 50) action ShowMenu('save') hover_sound "sound/click.wav"
  92.         hotspot (43, 362, 193, 50) action ShowMenu('load') hover_sound "sound/click.wav"
  93.         hotspot (43, 412, 193, 50) action ShowMenu('preferences') hover_sound "sound/click.wav"
  94.         hotspot (43, 464, 193, 50) action MainMenu() hover_sound "sound/click.wav"
  95.         hotspot (43, 516, 193, 50) action Quit() hover_sound "sound/click.wav"
คัดลอกไปที่คลิปบอร์ด


3.4 อย่าลืมลบคำสั่ง  "sound/click.wav" ออกด้วยนะค่ะ สำหรับคนที่ไม่มีไฟล์เสียงประกอบ
3.5 จากนั้นให้บันทึกไฟล์ (กดปุ่ม Ctrl+S) และปิดไฟล์นี้ไปซะ

ขั้นตอนที่ 4 : ตรวจสอบผลลัพธ์ที่ได้
- ทดสอบรันเกมส์เลยค่ะ ในภาพด้านล่างคือหน้า Load ที่ทำ Imagemap ใหม่แล้ว


- ลองเปิดหน้า Save ดูบ้าง


สำหรับหน้า Save และหน้า Load ซึ่งเรากำหนดไว้ให้มี 5 หน้าด้วยกัน ในภาพคือหน้า Save ที่ 2 ถ้าใครต้องการมากกว่านี้ก็ไปเพิ่มโค๊ดเอาเองนะค่ะ มองโค๊ดแล้วน่าจะเพิ่มเองได้ไม่ยาก




( โหลดภาพ Imagemap ที่เราทำไว้ทั้งหมด 10 ภาพตรงนี้ค่ะ )


แล้วพบกันใหม่บทความหน้านะค่ะ




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


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

Rank: 1

โพสต์เมื่อ 27-12-2013 19:46 |แสดงโพสต์ทั้งหมด
ขอบคุณมากๆค่ะ

Rank: 1

โพสต์เมื่อ 1-8-2014 06:21 |แสดงโพสต์ทั้งหมด
ขอบใจจ้า

Rank: 1

โพสต์เมื่อ 26-12-2015 00:14 |แสดงโพสต์ทั้งหมด
ขอบคุณมากครับ
คุณต้องเข้าสู่ระบบก่อนจึงจะสามารถตอบกลับ เข้าสู่ระบบ | สมัครสมาชิก


Thaigraph

GMT+7, 17-9-2019 05:24 , Processed in 0.092525 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