irpg Community

Full Version: [VX/VXA] วิธีการวาดแมพ Parallax Mapping
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
สวัสดีครับวันนี้ผมนาย Jacobo หรือชารีฟหญ้าสาน อย่าสั้น บลาๆทั้งหลายจะมาสอนวิธีการวาด Map ที่สามารถวาดได้ทะลุขีดจำกัดของ Rpg Maker vx และ vxa กับเทคนิคที่มีชื่อว่า "Overlay Mapping" หรือ "Parallax Mapping" ครับผม!

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

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

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

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

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

[Image: 140342.c4f5e0e2.o.png]

[Image: 140343.247a5550.o.png]

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

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

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

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

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

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

ทีนี้เราก็ต้องเซฟภาพนี้เก็บไว้ใช้นั้นเอง ซึ่งต้องต้องปิดทุก Layers แต่เปิดเฉพาะ Layer ที่เราทำการตกแต่งไว้นั้นเองครับ...จากนั้นเซฟไว้ที่ไหนก่อนก็ได้ครับเพราะเดี๋ยวเราจะต้อง Import เข้าไปยังโฟร์เดอร์ที่สคริปต้องการ (***อาจจะงงว่าโฟร์เดอร์อะไร อ่านต่อไปเรื่อยๆก่อนครับเดี๋ยวถึงขั้นตอนการใช้สคริปแล้วจะมีบอก)
[Image: 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/' " นั้นเองครับ
[Image: 140351.33e0057e.o.png]

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

***ห้ามคัดลอกหรือนำไปเผยแพร่ที่อื่นก่อนได้รับอนุญาตจาก sharifyasan หรือ Jacobo ก่อนเป็นอันขาด***
Last Update : 5/07/2012
สคริปต์หนูขายออกแล้ว เย้ ๆ :3
- - สงสัยเรื่องระดับ ถ้าตรงของประดับผนังไม่บัง Hero แล้วตรงผักที่วางบนโต๊ะบัง Hero ยังไง ที่ดูมันใช้ภาพอันเดียวกัน

ปล.ถ้า Hero ส่วนสูงเกิน 32 นะ
ตรงผักที่วางบนโต๊ะแล้วมันบังตัว Hero ผมจงใจทำไว้เองครับ...ตั้งใจจะทำแบบว่ามันผักมันอยู่ข้างหน้าเราจริงๆ ก็เหมือนเวลาเราปรับระดับชั้นต่างๆของ Tile ให้อยู่สูงกว่า Hero สักสองชั้นน่ะครับ (เช่นพวกต้นไม้) อีกกรณีคือ Hero ที่ใช้เป็นฮีโร่แบบ rmxp ซึ่งตัวจะสูงว่า vx, vxa ก็จะโดนภาพบังได้เช่นกันครับ...วิธีแก้คือจัดตำแหน่ง Tile ใหม่ให้อยู่สูงขึ้นไปอีกครับ
เหมือนว่ามันตั้งให้มี fog 2 ชัันได้นี่ ชั้นแรกสูงกว่าพื้นต่ำกว่าฮีโ่ร่ ชั้นสองสูงกว่าฮีโร่ มันแก้ปัญหาของซ้อนได้
สวยงามมาก เป็นประโยชน์
เยี่ยมเลยครับ จะได้ไม่ต้องไปเปิดดูในบร์อดนอกบ่อย
ปล.ลายน้ำมาก + ชัดไปมั้ยเนี่ย
@Tenes
ว๊ากกก! ผมปรับให้ opacity 20% เองน่ะครับ ;w;
สุดยอดเลยฮะ; w ; วาดแบบนี้นี่เอง..!
;w;b ชารีฟขยันขิงๆ /me ปราบปลื้ม

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