[Unity 2D] วิธีการจัดหน้าหลังโดยไม่ใช่ Z! by

31
May
0

โดยปกติแล้ว Unity เป็น tool ที่เอาไว้ทำเกม 3D ซึ่ง offset ตำแหน่งต่างๆก็จะเป็น x y z แต่ในเมื่อเราต้องการเราจะทำเกม 2D แล้ว z จึงเป็นค่าที่เราไม่ควรไปยุ่งเป็นอย่างมาก (ใช้แล้วจะงงเอง) การจัดหน้าหลังของ Unity แบบปกติก็จะใช้ค่า z เพื่อกำหนดความลึกแบบ 3 มิตื แต่พอเรามาทำ 2D เลยมีวิธีที่ไม่ใช้ Z ดังนี้ครับ

  • Object ทั่วไปใน Scene ของเราจะใช้ Sprite Renderer ซึ่งมีค่า Sorting Layer และ Order in Layer ซึ่งเราจะมาเริ่มกับ Sorting Layer กันก่อน

หลักๆที่เราจะใช้คือค่า Sorting Layer และ Order in Layer

  • ให้เรากดที่เมนู Sorting Layer ซึ่งตอนแรกจะมีแต่ Default ให้เราทำการเพิ่มก่อนโดยการกด Add Sorting Layer….

Add Sorting Layer… เพื่อเพิ่ม / ปรับ Layer

  • จากนั้นก็เพิ่ม Layer ต่างๆที่เราต้องการใช้ในการจัดเรียงหน้าแบบหลักๆกันก่อน (สามารถคลิกลากขึ้นลงเพื่อปรับได้)

Layer UI ด้านหน้า / Layer ตัวเกม / Layer ฉากหลัง

  • จากตัวอย่างเมื่อเราแบ่ง Layer หลักๆเช่น UI ด้านหน้า / ตัวเกม / ฉากหลัง เป็นที่เรียบร้อยแล้ว ในส่วนเลเยอร์ของตัวเกมเองก็จะมี Object หลายๆตัวที่ยังจัดเรียงไม่ถูกอยู่ ให้เราใช้ Order in Layer ครับ

ตัวละครด้านหลังมาทับตัวละครด้านหน้าซึ่งอยู่ใน Sorting Layer เดียวกัน

  • ซึ่ง Order in Layer ที่มีค่ามากจะอยู่หน้า Object ที่มีค่านี้น้อยกว่าเสมอๆ

ปรับค่าตัวหน้าให้มากกว่าก็จะอยู่เหนือกว่าทันที!

* ภาคเสริม : ใน Object ของ NGUI จะไม่มี Order in Layer ให้เราตั้งค่าที่ Depth แทนนะครับ (ทำงานเหมือนๆกัน)

ปรับ Depth แทนได้เลย

Unit test (PHPUnit) by

31
May
0

ก่อนอื่นเรามาเกริ่นกันก่อนนะว่า Unit test คืออะไร มีประโยชน์ยังไง และใช้ยังไง

Unit test – เป็นการทดสอบในระดับ function call เพื่อเป็นการยืนยันการทำงานระดับย่อยที่สุดว่าทำงานได้ถูกต้อง เป็นการทดสอบโดยนักเขียนโปรแกรมผู้เขียนโค้ด

ประโยชน์ของ Unit test
- ช่วยให้โครงสร้างโค้ดดีขึ้น
- Developer ที่มารับงานต่อ สามารถทำความเข้าใจโค้ดได้ง่ายขึ้น โดยการดู unit test ที่เขียนไว้
เป็นต้น

ใช้ยังไง วันนี้เราจะมาพูดถึง PHPUnit กันนะครับ
เราจะข้างเรื่องของการ Install ไปนะครับ เอาเป็นว่าไปดูกันในนี้ละกันนะครับ วิธี Install PHPUnit

เราจะมาดูกันในเรื่องการเขียน Unit test ดีกว่านะครับ

class Class_nameTest extends PHPUnit_Framework_TestCase{

static $variable;

public static function setUpBeforeClass(){
self::$variable = 123;
}

function setUp(){
$this->variable = self::$variable;
}

function test1(){
$this->assertTrue(true);
}

function test2(){
$this->assertFalse(false);
}

function test3(){
$this->assertEquals(1, 1);
}
}

โดยตั้ง Class_name คือชื่อ Class ที่เราจะ Test แล้วตามด้วยคำว่า Test

ประกาศตัวแปรชื่อ variable ให้เป็น global variable (ในที่นี้ให้ตัวแปรชื่อนี่เฉยๆ ตอนใช้จริงจะตั้งชื่อตัวแปรว่าอะไรก็ได้นะ)

function setUpBeforeClass เป็น function ที่จะทำแค่ครั้งเดียวตอนก่อนจะ Test Class นี้

function setUp เป็น function ที่จะทำทุกครั้งก่อน Test แต่ละ Function

function ที่มีชื่อขึ้นต้นว่า test จะเป็น function ที่ใช้ test จริงๆ

จากตัวอย่างนี้ ลำดับของ function ที่จะถูกเรียกก็เป็นตามนี้

setUpBeforeClass -> setUp -> test1 -> setUp -> test2 -> setUp -> test3

ประมาณนี้ครับ PHPUnit ยังมีลูกเล่นอีกมากกกกกกมายยยยย แต่เดี๋ยวไว้ต่อกันคราวหน้าละกันนะคร้าบบบบ

สร้าง pattern ของเราเองใน illustrator ლ(◉◞౪◟◉ ) by

31
May
0

เปิด  illustrator ขึ้นมา ตั้งค่าหน้ากระดาษเป็น 450×450  (หรือจะเท่าไรก็ได้แล้วแต่เราเลย)

นำรูปที่เราต้องการมาจัดวางให้อยู่ในกระดาษ

จัดวางแล้วแต่ความชอบเลยเคอะ 5555

นำลูกศรสีดำ (selection tool) มาครอบรูปที่เราทำทั้งหมด ไปที่ Edit > Define Patten

ก็จะมีหน้าต่างนี้ขึ้นมา ตรง swatch name เราสามารถตั้งชื่อ pattern ที่เราทำได้

(เล็กไปหน่อย) โว้ววววลาา~~ pattern ที่เราทำก็จะปรากฎขึ้นมา

สร้างสี่เหลี่ยม(rectangle tool) ขึ้นมาขนาดใหญ่ๆ (หรือจะขนาดเท่ากับหน้าdesktopคอมเราก็ได้)

คลิกที่ช่อง patten ที่เราทำไว้

*ปิ๊ง* มาแล้วววววววว

เท่านี้ก็ได้ pattern ของเราเองแล้วว เย้ๆ

ทำมาทั้งทีอยากใส่เป้นรูป wallpaper หน้า desktop จังเลย ก็ไปที่ save for web & devices > save เท่านี้ก็ได้ wallpaper ของเราเองแล้วว 5555

ไหนๆทำแล้วก็ลองใส่รูป wallpaper  หน้าdesktop ดูสิ แฮ่~~~~~ ლ(◉◞౪◟◉ )

วิธีการวาดตัวการตูนchibiอย่างง่ายๆ by. lataedelan by

31
May
0

how-to-chibi

ทำวงเวทย์ง่ายๆโดยใช้ illustrator by

31
May
0

1. ลากไกด์ไลน์ให้ทับกัน
1
2.สร้างวงกลมตรงกลางไกด์ไลน์
2
3.ทำลากไกด์ไลน์เพิ่มรอบๆ วงกลมให้เป็นกรอบสีเหลี่ยมผืนผ้าและสร้างวงกลมอีกอันให้เล็กกว่าอันก่อนแล้วอยู่ภายในอันก่อน
3
4.สร้างสีเหลี่ยมให้ขนาดพอดีกับวงกลามภายใน
4
5.จากนั้นให้ก็อบปี้สีเหลี่ยมแล้ว Rotate มันให้รอบๆ วงกลมและตกแต่งตามใจชอบ
5
6.ตกแต่งเพิ่มเติมตามใจชอบ
6
7.ใส่ตัวอักษรเวทย์ลงไป (หาฟอนท์เอาเองนะจ้ะ)
7
8. ตกแต่งเพิ่มเติม
8
9.เสร็จ
9

กู้เงิน | เศรษฐกิจพอเพียง | สินเชื่อบุคคล | สมัครบัตรกดเงินสด | สินเชื่อ | เงินกู้ด่วน | ยืมเงินทรูมูฟ | เงินด่วนนอกระบบ