[XP] หลักสูตรเทคนิกการทำ TILESET & MAP - Printable Version +- irpg Community (https://irpg.in.th) +-- Forum: irpg Fabella RPG Maker Academia (https://irpg.in.th/forum-4.html) +--- Forum: The Great RPG Maker Library (https://irpg.in.th/forum-5.html) +--- Thread: [XP] หลักสูตรเทคนิกการทำ TILESET & MAP (/thread-37.html)

[XP] หลักสูตรเทคนิกการทำ TILESET & MAP - LuZi - 05-04-2012 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 ผมใช้ไม่เป็นคร๊าบไม่รู้เอาไว้ทำอะไร ใช้ยังไง )