สวัสดีค่ะท่านผู้มาเยือน!  ลงชื่อเข้าใข้งาน สมัครสมาชิก

Post Reply 
 
Thread Rating:
  • 1 Votes - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Mapper [VX/VXA] วิธีการวาดแมพ Parallax Mapping
07-05-2012, 02:36 PM (โพสต์นี้ถูกแก้ไขครั้งสุดท้ายเมื่อ: 07-09-2012 02:12 AM โดย LuZi.)
โพสต์: #1
[VX/VXA] วิธีการวาดแมพ Parallax Mapping
สวัสดีครับวันนี้ผมนาย Jacobo หรือชารีฟหญ้าสาน อย่าสั้น บลาๆทั้งหลายจะมาสอนวิธีการวาด Map ที่สามารถวาดได้ทะลุขีดจำกัดของ Rpg Maker vx และ vxa กับเทคนิคที่มีชื่อว่า "Overlay Mapping" หรือ "Parallax Mapping" ครับผม!

***บทความที่จะสอนนี้ผมได้แปลและเรียบเรียงใหม่จากต้นฉบับของท่าน SamGreen จากบอร์ด rpgmakervx.net อาจจะแปลผิดแปลถูกแปลไม่เข้าใจบ้างจุดไปบ้างก็ต้องขออภัยมา ณ ที่นี้ด้วยครับ หากใครสนใจดูเวอร์ชั่นต้นฉบับหรือภาษาอังกฤษก็สามารถหาอ่านได้ตามลิ้งค์นี้ได้เลยครั​บ [-Graphics-] Parallax Mapping

อันดับแรกครับมพร้อมจะขอให้ Rpgvxa ในการเป็นตัวอย่างในการทำสำหรับบทความนี้ละกันครับ. โดยแมพที่ใช้จะมีขนาด 17x13 ช่องหรือขนาด 544x416 pixels นั้นเองครับ...อนึ่งต้องขอบอกก่อนว่าเทคนิคนี้สามารถช่วยเราตกแต่งแมพต่างๆได้เฉพาะ Tile ที่เป็นชนิด กำแพง,หลังคาบ้าน,พื้น หรือที่เรารู้จักกันในชนิดของ TileA นั้นเองครับ. โอเคครับอันดับแรกเราต้องเซฟ screenshot ภาพแมพของเรามาก่อนแล้วแปะลงใน Photoshop เลยครับ

และนี้คือภาพเปล่าๆที่วาดเสร็จสดใหม่ ไม่มีอะไรนอกจากำแพง พื้นไม้ และโต๊ะครับ
[ภาพ: 140339.25a6cfd5.o.png]

ก่อนอื่นเราก็มาตปรับแต่งอะไรเล็กๆน้อยๆกันก่อนอย่างเช่นขอบโต๊ะที่ดูไม่ค่อยเป็นธรร​มชาติ หรือ ขอบประตูทางเข้า-ออกที่ดูแปลกๆ วิธีปรับแต่งก็แล้วแต่เทคนิคส่วนตัวของแต่ละคนกันเลยครับ...จะวาดขึ้นมาใหม่หรือตัดแ​ปะบลาๆได้หมด.
[ภาพ: 140340.60523db4.o.png]
*อย่าลืมทำขั้นตอนนี้ใน Layer ใหม่น่ะครับ...ไม่ใช่ทำทับ Layer ภาพเดิมไปเลย Tongue

เมื่อเราปรับแต่งส่วนต่างๆเสร็จเรียบร้อยแล้วเราก็มาดูวิธีวัดขนาดช่องที่เราต้องการ​วาด tile กันก่อนครับ
1. ไปที่ View > Show > Grid (หรือกดคีย์ลัด Ctrl+' )
2. ไปที่ Edit > Preferences > Guides, Grid & Slices
3. ปรับ Gridline Every ให้เป็น "32 และเลือก pixels " ด้วยน่ะครับ
[ภาพ: 140341.ee7ef5c5.o.png]

[ภาพ: 140342.c4f5e0e2.o.png]

[ภาพ: 140343.247a5550.o.png]

และเราก็จะได้ตารางแบบไหนภาพนี้นั้นเองครับ
[ภาพ: 140352.b391cd82.o.png]

โอเคครับเมื่อปรับกันเสร็จเรียบร้อยแล้วก็ถึงเวลาที่จะบรรเลงกันแล้วน่ะครับ โดยขั้นตอนนี้ไม่มีอะไรมากครับ "ตัดแปะ - ตัดแปะ - ตัดแปะ" และแน่นอนว่าเราสามารถเอา Tile อันนั้นมาแปะก็ได้ (ขอแค่ให้เข้ากับธีมเดิมก็พอครับ) เช่น เอา Tile จาก rmxp มาแปะ rmvxa ก็ยังได้ครับ

ไม่ว่าจะวางชั้นหนังสือ,ชั้นวางของแล้วมีกล่องหรือลังไม้มาวางอยู่ข้างหน้า หรือแจกันดอกไม้ที่สามารถวางซ้อนกันได้ (เทดดี้แบร์ที่อยู่คู่กัน?)
[ภาพ: 140344.0a4789f7.o.png]

กำแพงก็เช่นกันครับ สามารถวางรูปภาพใกล้ๆกันได้หลายๆรูปหรือแม้กระทั่งปรับความยาวของชั้นวางของ...รวมไป​ถึงทำให้กำแพงมีรอยราวหรือรอยแตกหักก็ได้เช่นกันครับ
[ภาพ: 140346.50fea9ac.o.png]

จะเห็นได้ว่าสามารถวาง Tile นึงซ้อนกันหลายๆชั้นได้โดยไม่ต้องคำนึงว่า "1 Tile = 1 ช่อง" และไม่ต้องเสียเวลาไปนั่งวาด Tile หลายๆแบบเพื่อยัดไปใน Tileset เต็มๆเลยครับ
[ภาพ: 140345.c9b79045.o.png]

ทาดา !~? เมื่อเราตกแต่งเสร็จเรียบร้อยแล้วเราก็จะได้ห้องที่เต็มไปด้วยข้าวของรกๆตามภาพครับ
[ภาพ: 140347.0411cdbb.o.png]

ทีนี้เราก็ต้องเซฟภาพนี้เก็บไว้ใช้นั้นเอง ซึ่งต้องต้องปิดทุก Layers แต่เปิดเฉพาะ Layer ที่เราทำการตกแต่งไว้นั้นเองครับ...จากนั้นเซฟไว้ที่ไหนก่อนก็ได้ครับเพราะเดี๋ยวเรา​จะต้อง Import เข้าไปยังโฟร์เดอร์ที่สคริปต้องการ (***อาจจะงงว่าโฟร์เดอร์อะไร อ่านต่อไปเรื่อยๆก่อนครับเดี๋ยวถึงขั้นตอนการใช้สคริปแล้วจะมีบอก)
[ภาพ: 140348.5640ecce.o.png]

เอาละครับพอมาถึงขั้นตอนนี้ให้เปิดโปรแกรม Rpg Maker ขึ้นมาแล้วสร้าง Event ขึ้นมาหนึ่งอีเว้นและเซตเงื่อนไขการณ์เริ่มเหตุการณ์เป็น "พร้อมเนื้อเรื่อง" ครับ.
จากนั้นให้เลือกคำสั่ง "เรียกใช้สคริป" แล้วใส่โค้ดตามภาพนี้ไปเลยครับ
Code:
$fog.name = 'ชื่อภาพ'
$fog.hue = (0)
$fog.tone = [0, 0, 0, 0]
$fog.opacity = (255)
$fog.blend = (0)
$fog.zoom = (100)
$fog.sx = (0)
$fog.sy = (0)
$fog.show(1)

อธิบายทีละบรรทัดน่ะครับ
1. ชื่อไฟล์ภาพของเราที่ตกแต่งไว้
2. ค่า Hue ของภาพสามารถใส่ได้ตั้งแต่ 0-360
3. ค่าโทนสีของภาพ [red, green, blue, gray]
4. ค่าความโปร่งใสของภาพ สามารถใส่ได้ตั้งแต่ 0-255
5. ค่า Blend 0=normal, 1=add, 2=sub
6. ขนาดของภาพ (การซูมของภาพ)
7. ค่าความเร็วในการเคลื่อนที่ของภาพ "ในแนวนอน"
8. ค่าความเร็วในการเคลื่อนที่ของภาพ "ในแนวตั้ง"
9 คำสั่งโชว์ภาพโดยใส่หมายเลขไอดีของภาพลงไป

จากนั้นก็ยัดสคริปนี้ไว้เหนือ Main เลยครับ (แล้วทำไมไม่ยัดสคริปก่อนค่อยดูโค้ดฟระ!?) ซึ่งสคริปนี้ก็เป็นของ woratana หรือวอวาย (วไว, ;w; ) ขาเกย์ประจำบอร์ดเรานั้นเองครับ...แต่ตัวสคริปนี้วอวายเขียนมาเพื่อ rmvx เท่านั้น แต่ก็มีชาวต่างชาติเอามาแปลงเพื่อใช้สำหรับ rmvxa ด้วยเช่นกันครับ
Spoiler:

โดยเมื่อยัดเสร็จแล้วเข้าเมนูสคริปไปดูประมาณบรรทัดที่ 94 ก่อนครับ...จะเห็นว่ามันเขียนไว้ว่า " @fog_path = 'Graphics/Fogs/' " ซึ่งชื่อ Fogs นั้นคือโฟรเดอร์ที่เราต้องเอาภาพที่ตกแต่งไว้ที่ได้เกิ่นไว้ในขั้นตอนก่อนมาใส่นั้นเ​องครับ. โดยเราเองก็สามารถเปลี่ยนเป็นโฟรเดอร์อื่นหรือสร้างโฟร์เดอร์ใหม่ขึ้นก็ได้เช่นกันคร​ับ...แต่ก็ต้องแก้โค้ดกันด้วย เช่น อยากเก็บภาพที่ตกแต่งไว้ในโฟร์เดอร์ "Bujuu" ก็ต้องแก้โค้ดเป็น " @fog_path = 'Graphics/Bujuu/' " นั้นเองครับ
[ภาพ: 140351.33e0057e.o.png]

แค่นี้เราก็กดรันเกมเพื่อทดสอบได้แล้วครับ !~ และแล้วก็จบขั้นตอนการทำ Parallax Mapping แล้วน่ะครับ...ใครมีข้อสงสัยอะไรไม่เข้าใจอะไรยังไงสามารถถามได้น่ะครับ หากผมตอบได้ยินดีที่จะตอบให้ครับ :"D
สุดท้ายนี้ขอขอบคุณเทคนิคดีๆจาก Mr.SamGreen และสคริปของวอวาย (และคนที่แปลงสคริป) มากๆด้วยครับ~

***ห้ามคัดลอกหรือนำไปเผยแพร่ที่อื่นก่อนได้รับอนุญาตจาก sharifyasan หรือ Jacobo ก่อนเป็นอันขาด***
Last Update : 5/07/2012
ค้นหาโพสต์ทั้งหมดของสมาชิกผู้นี้
Like Post อ้างอิงข้อความนี้ตอนตอบกระทู้ unknown unknown
[-] The following 17 users Like sharifyasan's post:
[IRPG] bassza123 (10-24-2013), birdmoto (07-05-2012), Ivan_GilDong (09-19-2015), KonRaiNamJai (06-27-2014), Kuntana (07-05-2012), LuZi (07-05-2012), motley (07-13-2014), Muge9thD (07-05-2012), Neoz Kaho (08-08-2012), Nivas (07-05-2012), pomza2000 (07-07-2012), Pummy (08-08-2012), Rhen (07-05-2012), royalcafe (01-11-2015), SnowSilver (09-02-2015), vertiria (07-05-2012), นิราจ (07-18-2013)
07-05-2012, 02:41 PM
โพสต์: #2
RE: [Mapper] วิธีการวาดแมพแบบ Parallax
สคริปต์หนูขายออกแล้ว เย้ ๆ :3

คิดถึง แพนด้าจ๊าก
ค้นหาโพสต์ทั้งหมดของสมาชิกผู้นี้
Like Post อ้างอิงข้อความนี้ตอนตอบกระทู้ unknown unknown
[-] The following 3 users Like woratana's post:
Atomix (10-04-2013), sharifyasan (07-05-2012), TheMoo2000 (09-04-2012)
07-05-2012, 03:02 PM (โพสต์นี้ถูกแก้ไขครั้งสุดท้ายเมื่อ: 07-05-2012 03:08 PM โดย hengmana.)
โพสต์: #3
RE: [Mapper] วิธีการวาดแมพ Parallax Mapping
- - สงสัยเรื่องระดับ ถ้าตรงของประดับผนังไม่บัง Hero แล้วตรงผักที่วางบนโต๊ะบัง Hero ยังไง ที่ดูมันใช้ภาพอันเดียวกัน

ปล.ถ้า Hero ส่วนสูงเกิน 32 นะ

ค้นหาโพสต์ทั้งหมดของสมาชิกผู้นี้
Like Post อ้างอิงข้อความนี้ตอนตอบกระทู้ unknown unknown
07-05-2012, 03:11 PM (โพสต์นี้ถูกแก้ไขครั้งสุดท้ายเมื่อ: 07-05-2012 03:15 PM โดย sharifyasan.)
โพสต์: #4
RE: [Mapper] วิธีการวาดแมพ Parallax Mapping
ตรงผักที่วางบนโต๊ะแล้วมันบังตัว Hero ผมจงใจทำไว้เองครับ...ตั้งใจจะทำแบบว่ามันผักมันอยู่ข้างหน้าเราจริงๆ ก็เหมือนเวลาเราปรับระดับชั้นต่างๆของ Tile ให้อยู่สูงกว่า Hero สักสองชั้นน่ะครับ (เช่นพวกต้นไม้) อีกกรณีคือ Hero ที่ใช้เป็นฮีโร่แบบ rmxp ซึ่งตัวจะสูงว่า vx, vxa ก็จะโดนภาพบังได้เช่นกันครับ...วิธีแก้คือจัดตำแหน่ง Tile ใหม่ให้อยู่สูงขึ้นไปอีกครับ
ค้นหาโพสต์ทั้งหมดของสมาชิกผู้นี้
Like Post อ้างอิงข้อความนี้ตอนตอบกระทู้ unknown unknown
07-05-2012, 03:51 PM
โพสต์: #5
RE: [Mapper] วิธีการวาดแมพ Parallax Mapping
เหมือนว่ามันตั้งให้มี fog 2 ชัันได้นี่ ชั้นแรกสูงกว่าพื้นต่ำกว่าฮีโ่ร่ ชั้นสองสูงกว่าฮีโร่ มันแก้ปัญหาของซ้อนได้
ค้นหาโพสต์ทั้งหมดของสมาชิกผู้นี้
Like Post อ้างอิงข้อความนี้ตอนตอบกระทู้ unknown unknown
07-05-2012, 06:42 PM
โพสต์: #6
RE: วิธีการวาดแมพ Parallax Mapping
สวยงามมาก เป็นประโยชน์

คิดถึง irpg คิดถึง แพนด้าจ๊าก ทุกที แมวน้ำขาว แมวน้ำซิ้ง
ค้นหาโพสต์ทั้งหมดของสมาชิกผู้นี้
Like Post อ้างอิงข้อความนี้ตอนตอบกระทู้ unknown unknown
07-05-2012, 07:46 PM
โพสต์: #7
RE: วิธีการวาดแมพ Parallax Mapping
เยี่ยมเลยครับ จะได้ไม่ต้องไปเปิดดูในบร์อดนอกบ่อย
ปล.ลายน้ำมาก + ชัดไปมั้ยเนี่ย

Available for Commission :3
Contact : Facebook
ค้นหาโพสต์ทั้งหมดของสมาชิกผู้นี้
Like Post อ้างอิงข้อความนี้ตอนตอบกระทู้ unknown unknown
07-05-2012, 07:59 PM
โพสต์: #8
RE: วิธีการวาดแมพ Parallax Mapping
@Tenes
ว๊ากกก! ผมปรับให้ opacity 20% เองน่ะครับ ;w;
ค้นหาโพสต์ทั้งหมดของสมาชิกผู้นี้
Like Post อ้างอิงข้อความนี้ตอนตอบกระทู้ unknown unknown
07-05-2012, 09:17 PM
โพสต์: #9
RE: วิธีการวาดแมพ Parallax Mapping
สุดยอดเลยฮะ; w ; วาดแบบนี้นี่เอง..!
ค้นหาโพสต์ทั้งหมดของสมาชิกผู้นี้
Like Post อ้างอิงข้อความนี้ตอนตอบกระทู้ unknown unknown
07-05-2012, 09:50 PM
โพสต์: #10
RE: วิธีการวาดแมพ Parallax Mapping
;w;b ชารีฟขยันขิงๆ /me ปราบปลื้ม

ลายน้ำลองแบบสีขาวดูมิ

[ภาพ: RG2015_zps4ac655d4.png][ภาพ: fc6330f76f34ef1d.png]
เข้าสู่เว็บไซต์ของสมาชิกผู้นี้ ค้นหาโพสต์ทั้งหมดของสมาชิกผู้นี้
Like Post อ้างอิงข้อความนี้ตอนตอบกระทู้ unknown unknown
Post Reply 


ข้ามไปบอร์ด:


User(s) browsing this thread: 1 Guest(s)

Download Opera - A faster and more secure Web browser.