PDA

ดูเวอร์ชั่นเต็ม : [VX/VXA] แจกคู่มือ/ตัวอย่าง โปรเจกการวาดแผนที่แบบ Parallax Mapping



seedall
21st July 2015, 19:15
http://www.mx7.com/i/857/p5oRBC.jpg

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

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

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

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

http://up.gameindy.com/6/140342.c4f5e0e2.o.png

http://up.gameindy.com/4/140343.247a5550.o.png

และเราก็จะได้ตารางแบบไหนภาพนี้นั้นเองครับ
http://up.gameindy.com/1/140352.b391cd82.o.png

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

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

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

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

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

ทีนี้เราก็ต้องเซฟภาพนี้เก็บไว้ใช้นั้นเอง ซึ่งต้องต้องปิดทุก Layers แต่เปิดเฉพาะ Layer ที่เราทำการตกแต่งไว้นั้นเองครับ...จากนั้นเซฟไว้ที่ไหนก่อนก็ได้ครับเพราะเดี๋ยวเราจะต้อง Import เข้าไปยังโฟร์เดอร์ที่สคริปต้องการ (***อาจจะงงว่าโฟร์เดอร์อะไร อ่านต่อไปเรื่อยๆก่อนครับเดี๋ยวถึงขั้นตอนการใช้สคริปแล้วจะมีบอก)
Image has been scaled down 17% (800x529). Click this bar to view original image (959x634). Click image to open in new window.
http://up.gameindy.com/2/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 ด้วยเช่นกันครับ
Show ContentSpoiler:

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

แค่นี้เราก็กดรันเกมเพื่อทดสอบได้แล้วครับ !~ และแล้วก็จบขั้นตอนการทำ Parallax Mapping แล้วน่ะครับ...

ข้อมูลจาก : http://irpg.massgo.com/thread-198.html

Download : คลิกที่นี่ (http://adf.ly/1L8kbe)
Password : คลิกที่นี่ (http://adf.ly/1L8mDS)