Credit บทความ : Nucleon

สวัสดีครับ น้องๆ ลุงๆ ชาว TRMC & iRPG ทุกท่าน นี้เป็นกระทู้แรกที่ตั้ง.. ก็ตั้งแต่อยู่มาปีเศษๆ...
ปัญหาหลายคนที่น้องๆ สร้างเกมต้องพบคือสร้างTileset(ไทล์เซ็ท) และออกแบบแมพอย่างไรให้สวย!!
หลายๆ เกมส์ที่พบ ส่วนมากจะใช้RTP Standard ก็เพราะว่าไม่รู้จะสร้างเองอย่างไร และโปรแกรมที่ใช้
น้องๆก็คงจะไม่ค่อยถนัด อย่างโปรแกรมยอดฮิต ที่คนทั้งโลกเลยจะรู้จักก็คือPhotoshop เป็นโปรแกรม
แต่งกราฟฟิกที่คิดว่ามีประสิทธิภาพดีที่สุด ตอนนี้ (หรือมีอย่างอื่นอีกหว่า)

หรือน้องๆ บางคนอาจจะถนัดการใช้Paint ก็ได้แล้วแต่ความถนัด (แต่ผมไม่ถนัดเลย)
เอาละ พร่ำมาเยอะและต่อไปเรามาดูกันเลยว่าจะสร้างแมพให้สวยมีเทคนิกดีๆ อะไรกันบ้าง !!!

1.มารู้เรื่องTileset ในRMXP กันก่อน !!
ข้อดีของRMXP ที่เห็นได้ชัดเลย นั้นคือเรื่องค่าสี 24Bit ของ .PNG ทำให้ค่าสีเพิ่มขึ้นโดยไม่ต้องกังวลเรื่องสี
ที่บางท่านใช้กับ 2k-2003 (ไม่ได้โจมตีเรื่อง Version นะครับ เดี๋ยวเกิดสงคราม ฮุๆ )

ยิ่งใช้กับPhotoshop ด้วยแล้วการจะทำให้ตัวชิ้นงาน กำหนดให้ความ ทึบ - เบา ของแสง(Opacity)
กำหนดได้ง่าย ดังรูปด่านล่างเช่นไทล์เซ็ทรูปกระจก ทำให้มองเห็นคนข้างใน หรือสิ่งของอะไรก็ได้ที่เรา
ต้องการให้มันโปร่งแสง เป็นต้น


และข้อดีที่เห็นได้ชัดอีกหนึ่งข้อของเรื่องแมพที่แตกต่างจากVersion อื่นๆ ก็คือ เรื่องของขนาดไทล์เซ็ท
ที่จะกำหนดความยาวเท่าไหร่ก็ได้ แต่หน้ากว้างจะกำหนดที่ 256pix แต่Version เก่าๆ จะไม่สามารถ
ขยายได้ ทำให้ความหลากหลายของตัวแมพที่เราจินตนาการถูกบันทอนลงไป อัตโนมัติ

ภาพแสดงขนาดของChipset และTileset ชองทั้ง2 version

2. ลักษณะการทำงานของTileset
หนึ่งช่องที่ตัวละครเราย่ำอยู่ในกรอบ จะมีขนาด 32 x 32 pix ดังนั้นในไทล์เซ็ท ขนาดหน้ากว้าง จะมีทั้งหมด
8 ช่องช่องละ 32x32 pixเหมือนกัน ดังนั้น เราต้องมีแบบฟอร์มตารางเพื่อง่ายต่อการวางชิ้นงานในไทล์เซ็ท

ไฟล์แบบฟอรม์ตาราง Tileset


ตัวอย่างการใช้งาน

รูปแบบฟอร์มของไทล์เซ็ท จะกำหนดเฉพาะความกว้าง 256pix เท่านั้น ส่วนความยาว เราจะเพิ่ม
ความยาวเท่าไหร่ก็ได้ (จากที่ผมทำแมพบางแมพใช้ความยาวถึง 8000 pix และยังเพิ่มต่อไปอีก
ซึ่งตัวโปรแกรมRMXP ก็ยังตั้งค่าให้ต่อได้ จึงสรุปไม่ได้ว่ามันจะยาวได้ไปถึงไหน)

ดังนั้นตัวแบบฟอร์มนี้จึงมีความสำคัญเพราะจะทำให้เรารู้ พิกัด การวางตำแหน่งของชิ่นงานได้ถูกต้อง
เพราะจะมีผลต่อเส้นทาง ที่ฮีโร่ของเราจะเดินในแผนที่

จากภาพ การวางของแบบเดียวกัน แต่วางคนละตำแหน่งในแบบฟอร์มจะเห็นได้ว่า การวางแบบพอดี
เฟรมตัวฮีโร่จะยืนในแนวเดียวกัน และการคร่อมเฟรมฮีโร่ จะยืนคนละชั้นกับชิ้นงาน ข้อดีคือทำให้เกมดูมีมิติ
ที่น่าสนใจมากขึ้น

หลักสูตรต่อไป จะบอกเทคนิกการทำแมพที่ง่ายมากๆ แต่จะยากก็ตรงที่น้องๆจะใช้เครื่องมืออย่างPS
ไม่ถนัดนี่หละตัวฟอร์มหน้ากว้าง 256pix ในช่องดำๆขนาด กxย =32x32pix ดูจากภาพน่าจะเข้าใจเรื่อง
ฟอร์มแล้วนะครับว่ามีไว้ทำอะไร (แต่มีประโยชน์มั๊กๆ)

3.เทคนิกต่างๆ ของการลง Map
ตอนที่ผมนั่งทำเกมส์ตัวเองอยู่ แรกๆผมก็ใช้RTP เท่าที่มี อยากได้ไรเพิ่มก็วาดลงไปใหม่ แต่ทำไปทำมา
ก็เอ่ะใจ เวลาที่เราจะลงแมพลงในพื้นที่วาดเราก็ต้องเลือกรูป จากต้นแบบด้านขวาไปวาดด้านซ้ายถูก
ไหมครับเช่นต้นไม้ในRTP จะมี 1 ต้นเป็นต้นแบบ เราก็เลือกมาทั้งต้นเพื่อมาแปะในพื้นที่วาดเมื่อเรามา
วาดในพื้นที่วาดให้ต้นไม้ซ้อนๆกันทั้งเลเยอร์2 และ 3
**ในพื้นที่วาดปรับระดับเลเยอร์ได้ 3ชั้น (น่าจะรู้กันอยู่แล้ว)**

พอวาดเสร็จ มันก็จะมีแต่ต้นไม้ ไม่มีอะไรที่น่าสนใจ ถึงเราจะเอาดอกไม้ไปใส่ด้วยทั้งเลเยอร์2และ3 มันก็เต็ม
ด้วยต้นไม้แล้ว ดังนั้น! ทำไมเราไม่เอาดอกไม้ไปใส่ในต้นไม้เลยหละ!!!

เอาละวิธีการทำข้างล่างผมใช้โปรแกรม Image Ready CS ที่มาคู่กับ Photoshop CSครับ
ตัวย่อ PS=Photoshop IR=Image Ready

1.เริ่มจากเราเปิดไทล์เซ็ทต้นแบบ ก่อน จาก RTP ใน Photoshop โดยผมจะเลือกแมพในเกมส์เป็น
015-ForestTown01 (บางคนอาจจะถนัด Image Ready ก็ใช้ได้งับ ผมถนัด Image อ่ะ)

2.ขยายพื้นที่ของไทล์เซ็ทให้กว้างขึ้น โดยไปที่ Toolsbar ด้านบนไปที่ Image-> Canves Size
ปรับขนาดความยาว เท่าไหร่ก็ได้ดังรูปและกด OK ตมรูป

3.จากนั้นเราเอาฟอร์มไทล์เซ็ทที่เราทำไว้ มาใส่ลงในไทล์เซ็ทภูเขา เพื่อที่เราจะได้รู้พิกัดและตำแหน่ง
ที่ถูกต้อง (ลักษณะการทำงานของโปรแกรม PS:IR จะเป็นเลเยอร์หลายๆ ชั้น จะแก้ไขที่ชิ้นงานไหนต้อง
กดที่เลเยอร์และเลเยอร์ไหนอยู่บนก็จะทับชิ้นงานที่เลเยอร์ต่ำกว่า ไม่ต้องคิดมาก ก็เปรียบเทียบได้กับการ
วาดแมพในRMXP ที่มี 3เลเยอร์นะหละครับ)

4.จากนั้นเราคัดลอกต้นไม้จากRTP ลงมายังพื้นที่ว่างๆ ด้านล่างที่เราขยายไว้ จากรูปด้านล่างส่วนแรก

5.ขึ้นตอนต่อไปง่ายๆ แค่เราเอาสิ่งที่เราต้องการจะใส่ไปลงในแมพโดยเอาภาพจากไทล์เซ็ทRTP แบบ
อื่นๆมาใส่ด้วยก็ได้ครับ เพื่อให้ดูแปลกตามากขึ้นตามรูปด้านบนส่วนที่สอง เมื่อวางเสร็จแล้วอย่าลืมลบ
รูปฟอร์มไทล์เซ็ทออกเพราะเดี๋ยวจะไปติดที่แมพด้วย

6.เซฟรูปภาพของแมพที่เราทำเป็นชื่ออื่น(ระวังไปเซฟทับตัวRTP ละ) โดยขั้นแรกของการเซฟใน IR
ไปที่Optimize

โดยช่อง Preset : คือการกำหนดว่าให้เซฟแบบค่าสีระดับเท่าใด
(โดยในที่นี้เราจะเลือก PNG-24 เพื่อค่าสีที่สูงสุด)
ช่อง Format : คือการเซฟในรูปแบบนามสกุลใด (โดยในที่นี้เราจะเลือก PNG-24 เพื่อค่าสีที่สูงสุด)
เมื่อเลือกเสร็จไปที่ Tools->File-> Save Optimize As และเซฟปกติ

(Save Optimize และ Save ใน Tools จะต่างกันตรง Save ปกติจะทำการบันทึกไฟล์การทำงานของ
Photoshop ที่เราใช้นามสกุลจะเป็น .PSD ส่วน Save Optimize เป็นการเซฟไฟล์ตาม
นามสกุลที่เราเลือกในช่องของ Optimize)

7.จากนั้นเราก็ Import ลงเกมส์ของเราปกติครับ เมื่อนำมาใช้จะเห็นว่าของเราทำได้เพิ่มขึ้นมาในแมพแล้ว!!!

จากรูป เราสามารถตั้งค่าพื้นที่ของไทล์เซ็ท ว่าตัวไหนผ่านใดผ่านไม่ได้หรือปกคลุมกี่ชั้นอย่างไรที่
Database ->Tileset ครับแค่นี้ก็ได้แมพที่ดูมีมิติ มีเนื้อเรื่องที่น่าสนใจได้ในระดับนึงครับ

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

ต่อไปเป็นส่วนบทความปลีกย่อย ที่จะพูดถึง Tools(เครื่องมือ) ต่างๆ ใน PS/IR ครับเพื่อให้น้องๆที่สนใจ
มีความเข้าใจมากขึ้น แต่ขอบอกก่อนว่าผมบอกตามที่รู้นะครับ เพราะว่าผมไม่ได้ไปเรียนที่ไหน เกิดจากที่
มั่วสุ่มเอาเองครับ ทำให้(เครื่องมือ)บางตัวใน PS ผมก็ไม่รู้เหมือนกันครับ และเครื่องมือที่ผมสอนจะใช้
โปรแกรม Image Ready นะครับ

รู้จักกับ Layer (เลเยอร์)

Tools -> Layer
Layer คือลำดับชั้นของชิ้นงานที่เราทำครับ ตัวลำดับของชิ้นงานจะขึ้นอยู่กับว่าเราเอาเลเยอร์ไหน ขึ้นก่อน-ขึ้นหลังครับ


**ดูจากรูปน่าจะเข้าใจนะครับ ถ้าเปรียบแล้วก็เหมือนกับRMXP ที่มีชั้นของเลเยอร์ทั้ง 3 ชั้นละครับ **



Tools ต่างๆ ใน Layer
1.ไว้ปรับรูปแบบของชิ้นงานในแต่ละเลเยอร์ครับ ว่าต้องการให้เป็นรูปแบบใดโดยแต่ละที่ปรับค่าจะกระทบ
ต่อการแสดงผลต่อเลเยอร์ ที่ลองลงมา

2.Opacity : คือการกำหนดค่า ความ หนา - บาง ของตัวชิ้นงาน โดย set ได้ตั้งแต่ 1 - 100 %
ยิ่งลดค่ามากตัวงานจะจางมากขึ้นทำให้เห็นตัวเลเยอร์ที่อยูรองลงมาวิธีนี้สามารถใช้ทำชิ้นงานที่เป็นกระจก
หรือของที่โปร่งแสงได้ครับ!

3.ดวงตา คำอธิบาย: Indicate Layer Visible : ไว้สำหรับปิดภาพเลเยอร์นั้นทำให้มอง มองไม่เห็น แต่
ไม่ได้ลบออกไปเลยนะครับ ถ้าต้องการให้โชว์ก็กดที่ดวงตาใหม่

4.โซ่ คำอธิบาย Indicate if layer linked : ถ้าเราตั้งค่าตัวโซ่ดังภาพ(เลเยอร์4 ไฮไลท์ไว้ส่วนโซ่ถูก
ติดที่เลเยอร์3 )ดังนั้นถ้าเลเยอร์4 เคลื่อนย้ายเลเยอร์3 ก็จะตามไปด้วย ไม่ได้ตามในเลเยอร์นะครับแต่ตามใน
พื้นที่การทำงาน ** พื้นที่การทำงาน คือ พื้นที่ๆ เราทำภาพน่ะหละครับ**

5.รูป Folder : ไว้สำหรับ Create Folder(สร้างโฟลเดอร์) เพื่อจัดระเบียบในเลเยอร์ เพราะการทำภาพเรา
ไม่ได้ใช้แค่ 1หรือ2เลเยอร์ แต่อาจจะใช้50ถึง100เลเยอร์เลยก็ได้ครับ ดังนั้นจึงมีโฟลเดอร์มาแบ่งไว้ให้เรา
ใช้งานได้สะดวก

6.Create Layer : คือการสร้างเลเยอร์เปล่าๆ ขึ้นมาใหม่

7.Delete Layer : คือการลบเลเยอร์ครับ

8.Lock : คือการล็อกการทำงานของชิ้นงาน แน่นอนว่าภาพ1ภาพ ที่เรากำลังสร้างมีหลายชั้นเลเยอร์
การล็อกตัวเลเยอร์จะทำให้เราสะดวกในการใช้งานเช่น เลเยอร์1 เป็นภาพขนาดใหญ่ทับตัวเลเยอร์2 ถ้าเราทำ
การล๊อกเลเยอร์1 เมื่อเรากดที่เลเยอร์2 โดยที่ต้องผ่านเลเยอร์1 // ตัวเลเยอร์1 ก็จะไม่มีผลอะไร เพราะเราทำ
การล็อกตัวชิ้นงานนั้นไว้

- Lock Transparent Pixel : คือการล็อกค่าโปร่งแสง เมื่อเราทำการลบตัวชิ้นงาน
ตัวชิ้นงานจะไม่ขาดหายไป แต่จะเป็นค่าสีแทน ในตัวเลือกSet Background Color (ที่มีให้เลือก 2 สีที่เราจะ
ใช้ตรง Tool bar ยาวๆ)
- Lock Image Pixel : คือจะทำไม่ให้สามารถลงสีหรือเปลี่ยนค่าใดๆ กับตัวเลเยอร์
นี้ได้เลย!! ไม่ว่าจะเอาสีพ้น ดินสอเขียน หรือเปลี่ยนค่ารูปภาพ (ดูจากข้อ 1 ด้านบน)แต่ยังสามารถกำหนดค่า
Opacity ได้
- Lock Position : คือล็อกตำแหน่ง ของชิ้นงาน ไม่ให้สามารถเลื่อนตัวชิ้นงานไป
ตำแหน่งอื่นได้Function นี้ผมว่ามีประโยชน์เพราะเลเยอร์ที่เราใช้ในภาพมีจำนวนมาก อาจจะทำให้เราเคลื่อน
ย้ายผิดตัว จนกดความรำคาญ
- Lock All : ล็อกการทำงานทั้งหมด ทั้ง 3 Function
(ส่วนตัว Unify ผมใช้ไม่เป็นคร๊าบไม่รู้เอาไว้ทำอะไร ใช้ยังไง )