10-07-2018, 01:07 PM
วันนี้จะขอแชร์เทคนิคการทำ battler sprite หน่อยนะครับ
ส่วนตัวแล้วตัวละครต่างๆผมใช้ powerpoint ที่ใช้ทำ presentation นี่แหละทำหมดเลย เสร็จแล้วมานั่งดัดท่าเอานะครับ
วันนี้ผมจะแชร์หลักการโดยภาพรวม แต่รายละเอีดการวาด การใส่สี การใส่แสงเงา ไว้ค่อยว่ากันวันหลัง
powerpoint ก็ใส่ gradient ใส่แสงเงาในวัตถุได้นะครับ ส่วนที่ทำไม่ได้ผมก็ใช้โปรแกรม Gimp ทำเอา (Gimp นี่เป็นโปรแกรมฟรีนะครับ สำหรับใครที่ไม่มีหรือไม่ได้ซื้อ photoshop ก็ใช้โปรแกรมนี้ทำได้)
![[Image: howto1.png]](https://2.bp.blogspot.com/-Vxre-FdnFec/W7mak-QL7HI/AAAAAAAAAVs/u-0kLfdJNWU9HAiUGPJG35Dzjoq5xxBEwCPcBGAYYCw/s640/howto1.png)
ตอนแรกก็มา re-design กันก่อนครับว่า ท่าโพส เราอยากให้เป็นแบบไหน อันนี้ก็ไปเอารูปจาอินเตอรเนตมาเทียบได้เลยครับ แล้วดัดท่าเอา
![[Image: howto2.png]](https://2.bp.blogspot.com/-uo1uiorDSsw/W7mak_LxKgI/AAAAAAAAAV0/uYiN2eqgvRE7NSR4-sAIx7YIdaPPY4XRwCPcBGAYYCw/s640/howto2.png)
เสร็จแล้วก็มาดัดท่าเอา เฟรมต่อเฟรม ส่วนใหญ่แล้ว platform ของ battler จะใช้สามเฟรมในแต่ละท่าครับ
![[Image: howto5.png]](https://3.bp.blogspot.com/-jGfGcH092aY/W7mamB1ftCI/AAAAAAAAAV0/TuiziDKsUNIp-oKV81KM0eSw_cazQt0DACPcBGAYYCw/s640/howto5.png)
จริงแล้วมันก็คือการใช้รูปทรงอิสระหลายๆอันมาประกอบกัน เสร็จแล้วก็จัดกลุ่มให้เป็นชิ้นเดียวกันหลายๆชิ้นมาประกอบกัน
![[Image: howto4.png]](https://3.bp.blogspot.com/-OIwnSZPTLAk/W7malhMl2CI/AAAAAAAAAVw/W36EFRNRShMiKUcvREifjjIvKYkWNjDYgCPcBGAYYCw/s640/howto4.png)
แสงและเงาก็ใช้ function Gradient fill เสร็จแล้วอยากให้เป็นโลหะก็ทำให้ส่วนที่สะท้อนกับมืดต่างกันเยอะๆหน่อย อันนี้ก็เป็นเทคนิคหนึ่งนะครับ
![[Image: howto7.png]](https://4.bp.blogspot.com/-XKgOiZ7ZhSU/W7mf8BADYVI/AAAAAAAAAWM/MIs6z0WIacE0mEjxSjU94YJgUEdVUIF8wCLcBGAs/s640/howto7.png)
เสร็จแล้วก็เอา ภาพแรกนั่นแหละ มาดัดๆเฟรมต่อเฟรม
![[Image: howto6.png]](https://3.bp.blogspot.com/-Im5i-C--NKY/W7mamEH18LI/AAAAAAAAAV4/g_HXrsxQ4rY_Y_hsf_NbXjNeu_x0a1aUgCPcBGAYYCw/s640/howto6.png)
ส่วนภาพ sprite ของ battler ผมใช้โปรแกรม GIMP ทำนะครับ ตัด background ทิ้งให้เป็น transparent
โดยปกติแล้ว 1 ภาพในสไลด์ powerpoint ความกว้างต่อความสูงจะเป็นอัตราส่วน 4:3
ส่วนตัวก็จะ set grid ให้แต่ละช่องใน Gimp ก็จะใช้ ความกว้าง 200 pixels x150 pixels จะเล็กหรือใหญ่กว่านี้ก็แล้วแต่ แต่ขอให้เป็นอัตราส่วนกว้างต่อสูงเป็น 4:3 ก็แล้วกันครับ
ดังนั้น battler 1 ภาพใหญ่ก็จะมีความกว้าง 200 x 9 =1800 pixels ความสูง 150 x 6 = 900 pixels ครับ
ส่วนตัวแล้วตัวละครต่างๆผมใช้ powerpoint ที่ใช้ทำ presentation นี่แหละทำหมดเลย เสร็จแล้วมานั่งดัดท่าเอานะครับ
วันนี้ผมจะแชร์หลักการโดยภาพรวม แต่รายละเอีดการวาด การใส่สี การใส่แสงเงา ไว้ค่อยว่ากันวันหลัง
powerpoint ก็ใส่ gradient ใส่แสงเงาในวัตถุได้นะครับ ส่วนที่ทำไม่ได้ผมก็ใช้โปรแกรม Gimp ทำเอา (Gimp นี่เป็นโปรแกรมฟรีนะครับ สำหรับใครที่ไม่มีหรือไม่ได้ซื้อ photoshop ก็ใช้โปรแกรมนี้ทำได้)
ตอนแรกก็มา re-design กันก่อนครับว่า ท่าโพส เราอยากให้เป็นแบบไหน อันนี้ก็ไปเอารูปจาอินเตอรเนตมาเทียบได้เลยครับ แล้วดัดท่าเอา
เสร็จแล้วก็มาดัดท่าเอา เฟรมต่อเฟรม ส่วนใหญ่แล้ว platform ของ battler จะใช้สามเฟรมในแต่ละท่าครับ
จริงแล้วมันก็คือการใช้รูปทรงอิสระหลายๆอันมาประกอบกัน เสร็จแล้วก็จัดกลุ่มให้เป็นชิ้นเดียวกันหลายๆชิ้นมาประกอบกัน
แสงและเงาก็ใช้ function Gradient fill เสร็จแล้วอยากให้เป็นโลหะก็ทำให้ส่วนที่สะท้อนกับมืดต่างกันเยอะๆหน่อย อันนี้ก็เป็นเทคนิคหนึ่งนะครับ
เสร็จแล้วก็เอา ภาพแรกนั่นแหละ มาดัดๆเฟรมต่อเฟรม
ส่วนภาพ sprite ของ battler ผมใช้โปรแกรม GIMP ทำนะครับ ตัด background ทิ้งให้เป็น transparent
โดยปกติแล้ว 1 ภาพในสไลด์ powerpoint ความกว้างต่อความสูงจะเป็นอัตราส่วน 4:3
ส่วนตัวก็จะ set grid ให้แต่ละช่องใน Gimp ก็จะใช้ ความกว้าง 200 pixels x150 pixels จะเล็กหรือใหญ่กว่านี้ก็แล้วแต่ แต่ขอให้เป็นอัตราส่วนกว้างต่อสูงเป็น 4:3 ก็แล้วกันครับ
ดังนั้น battler 1 ภาพใหญ่ก็จะมีความกว้าง 200 x 9 =1800 pixels ความสูง 150 x 6 = 900 pixels ครับ