[NGUI] สอนการใช้ Anchor by

30
Nov
0

จากในช่วงแรกที่ค้นคว้าการทำให้ UI ใน Unity ชิดขอบจอไม่ว่าจะจอ Mobile ผู้ใช้จะมีสัดส่วนต่างๆกัน เราเลยได้รู้วิธีใช้ Anchor ใน NGUI เวอร์ชั่นนี้กันครับ

Anchors type จะมี 2 แบบ Unified และ Advanced

  • แบบ Unified จะอ้างอิงจาก GameObject ตัวเดียวกัน

Anchor แบบ Unified

  • แบบ Advanced จะอ้างอิงจาก GameObject หลายๆตัวได้

Anchor แบบ Advanced

Anchors จะเลือกช่วงที่จะอัพเดท UI ที่จะชิดได้มีสามช่วงคือ

  • OnEnable อัพเดทเมื่อ Enable
  • OnUpdate อัพเดททุกเฟรม
  • OnStart อัพเดทเมื่อเริ่มใช้

Execute ได้ 3 ช่วง OnEnable OnUpdate OnStart

ส่วนที่ใช้อ้างอิงในแต่ละด้านจะมีทั้งหมด 4 แบบ ซ้าย/กลาง/ขวา/ปรับเป็น% ข้อสุดท้ายคือเลือก ณ ตำแหน่งปัจจุบัน ระบบจะคำนวนเป็นแบบ % มาให้เลย (ถ้าของ Top/Bottom ก็จะเปลี่ยน ซ้าย/ขวา เป็น บน/ล่าง)

เลือกส่วนที่จะอ้างอิงชิดด้านใดได้ 4 แบบ

นอกจากชิดแล้วยัง + Unit เพิ่มเอาได้

ข้อควรระวัง : ถ้าเกิดมีการบังคับเปลี่ยน Aspect ของ GameObject นั้นๆ ควรจะใช้ Anchor ในตัวมันและลูกๆเป็นแบบ % ให้หมด เพราะแบบ Unit เมื่อมีการเปลี่ยนค่าอาจจะผิดเพี้ยนได้

แบบ Left/Right/Top/Bottom ถ้า 0 ชิดด้านนั้นๆ ถ้า + ก็เพิ่มระยะห่างจากขอบ แบบ Custom ทำการเลื่อน % ที่เว้นจากระยะขอบได้เลย

เท่านี้ก็จะชิดทุกด้านได้ตามที่เราต้องการแล้วล่ะครับ

ตัวอย่างผลลัพธ์แบบจอ 3:2

ตัวอย่างผลลัพธ์แบบ 16:9

ตัวอย่างผลลัพธ์แบบ 3:4

[Unity] วิธีเพิ่ม frameworks หรือ library ให้กับ XCode โดยอัตโนมัติ by

30
Nov
0

เคยไหมที่ Build project Unity for iOS แล้วต้องมา add framework/library เพิ่มเอง? Build กี่ทีก็ต้องมา add เองทุกครั้ง วันนี้ผมมีวิธีช่วยให้ไม่ต้องทำอย่างนั้นแล้ว :)

หมายเหตุ: ก่อนอื่นต้องบอกก่อนว่าผมใช้ Library Facebook for Unity ในการทำอยู่แล้วจึงสามารถทำแบบนี้ได้ หากใครไม่ได้ใช้อาจจะต้องดึงไฟล์บางส่วนมาใช้เอง หรือใช้ Library mod-pbxproj แทน แต่ผมลองแล้วมันไม่สำเร็จ (ฮ่าๆ)

วิธีการก็ง่ายมาก ถ้าใช้ Library Facebook for Unity อยู่แล้ว ให้เข้าไปแก้ไฟล์ Assets/Facebook/Editor/iOS/fixup.projmods โดยหน้าตาจะเป็นดังนี้


{
"group": "Facebook",
"patches": [],
"libs": [
"libsqlite3.0.dylib:weak",
"Facebook/Editor/iOS/FacebookSDK/FacebookSDK.a:",
],
"librarysearchpaths": [
"Facebook/Editor/iOS/FacebookSDK/",
],
"frameworks": [
"Accounts.framework:weak",
"AdSupport.framework:weak",
"Social.framework:weak",
"Security.framework:weak",
],
"headerpaths": [
"Facebook/Editor/iOS",
"Facebook/Scripts"
],
"files": [
"Facebook/Editor/iOS/FbUnityInterface.mm",
"Facebook/Editor/iOS/FbUnityInterface.h",
"Facebook/Scripts/NativeDialogModes.cs",
],
"folders": [],
"excludes": ["^.*\\.meta$", "^.*\\.mdown^", "^.*\\.pdf$"]
}

จะเป็นไฟล์ JSON เรามาดูทีละส่วน

  • libs : ให้ใส่พวกไฟล์ .a หรือ .dylib (อย่าลืมใส่ :weak, : ตามตัวอย่าง)
  • frameworks: ใส่พวก .framework (อย่าลืมใส่ :weak ตามตัวอย่าง)
  • files: ใส่พวก .mm, .h, .cs

เพียงเราเพิ่ม comma เขียนต่ออีกบรรทัดในแต่ละส่วน แล้วสั่ง Build เราก็จะได้ Project XCode ที่ไม่ต้องมา add library เองให้เมื่อยอีกต่อไป ง่ายมากๆ เลยใช่ไหม :) ตัวอย่างสิ่งที่ผมเพิ่มเข้าไปตามด้านล่าง


{
"group": "Facebook",
"patches": [],
"libs": [
"libsqlite3.0.dylib:weak",
"libz.dylib:weak",
"Facebook/Editor/iOS/FacebookSDK/FacebookSDK.a:",
],
"librarysearchpaths": [
"Facebook/Editor/iOS/FacebookSDK/",
],
"frameworks": [
"Accounts.framework:weak",
"AdSupport.framework:weak",
"Social.framework:weak",
"Security.framework:weak",
"CoreTelephony.framework:weak",
"MessageUI.framework:weak",
"EventKitUI.framework:weak",
"EventKit.framework:weak",
"CoreData.framework:weak"
],
"headerpaths": [
"Facebook/Editor/iOS",
"Facebook/Scripts"
],
"files": [
"Facebook/Editor/iOS/FbUnityInterface.mm",
"Facebook/Editor/iOS/FbUnityInterface.h",
"Facebook/Scripts/NativeDialogModes.cs",
],
"folders": [],
"excludes": ["^.*\\.meta$", "^.*\\.mdown^", "^.*\\.pdf$"]
}

วาดฉากให้ดูมีความลึกแบบง่ายๆ by

30
Nov
0

วิธีทำให้ฉากหลัง ดูมีมิติ มีความลึก แบบง่ายๆ ตามสไตล์มือใหม่หัดวาดฉากครับ

1.แบ่งส่วนของภาพเป็น Foreground และ Background ก่อน Foreground คือระยะด้านหน้าของภาพ Background คือด้านหลังเป็นระยะที่ไกลออกไป

2.ใส่วัตถุต่างๆลงไปใน Background โดยคิดไว้ก่อนว่า วัตถุอันไหนอยู่ลึกกว่าอันไหนด้วย(ไกลจาก Foreground กว่ากัน)

โดยภาพนี้ผมแบ่งระดับความลึกออกเป็น 4 ระดับ

3.คอนเซปต์หลักๆคือ
วัตถุที่ไกลที่สุด สี จะใกล้เคียงกับ สีของbackground มากที่สุด
วัตถุที่ใกล้ที่สุด จะเห็นรายละเอียดชัดที่สุด
ก็ลองเลือกสีของแต่ละระดับมาก่อนคร่าวๆครับจากการปรับเฉดสี(Hue)

*หมายเหตุ: ไม่ควรเลือกสีของ Background เป็นโทนที่ใกล้เคียงกับ Foreground ไม่งั้นภาพของเราจะกลายเป็น Monotone ไป

จากนั้นก็ใช้ Blending Option ใส่ Color Overlay สีตามที่เราเลือกมาเลยครับ แล้วก็ปรับ Opacity ของ Color Overlay ตามระดับความลึกด้วย อันที่อยู่ไกล ก็ปรับเยอะๆ อันที่ใกล้ก็ปรับน้อยๆ

จากภาพนี้ระดับที่ไกลสุด ผมใช้ Opacity 85% ส่วนอันที่ใกล้สุด 25%

4.จากการปรับ Opacity จะทำให้รายละเอียดของวัตถุชัดน้อยไล่กันไปแล้ว แต่ถ้ายังไม่พอ ใช้ Blur ช่วยให้รายละเอียดชัดน้อยลงอีกก็ได้ครับ

5.สุดท้ายถ้ายังรู้สึกไม่สาแก่ใจก็ปรับอุณหภูมิของภาพดูด้วยก็ได้ครับ โดยธรรมชาติแล้ว สีโทนร้อนจะมีความสว่างมากกว่าสีโทนเย็น
ถ้า Background มืดกว่า Foreground ก็ปรับให้เย็นขึ้นอีก ถ้ากลับกันก็ใช้สีโทนร้อนครับ

ภาพจาก http://harizanov.com/2013/07/temperature-to-rgb-led/


ภาพที่ปรับอุณหภูมิของ Background แล้ว

ปรับเส้นให้ดูพริ้วขึ้นใน SAI by

29
Nov
0

บ่อยครั้งที่ ที่ตัดเส้นใน SAI ก็อยากได้เส้นคมๆ เหมือนเส้น vector เวลาตัดเส้น แต่เส้นแข็งโป๊ก
- ร่างภาพ เตรียมตัดเส้น

ss001

- เลือกเปิดเลเยอร์ใหม่ ให้เลือกที่มีรูปปากกา

ss002

-เลือก pen tool แล้ว จัดเส้น ตามเส้นร่าง

แต่เส้นมีน้ำหนักเท่ากันหมดเลยดูแข็งๆ เราสามารถปรับน้ำหนักเส้นได้ ด้วยเครื่องมือ pressure

ss003

- จิ้มเลือก เครื่องมือ pressure ในกล่องเครื่องมือ

ss004

- ไปจิ้มตรงปลายเส้นที่เราอยากจะปรับขนาดแล้ว เลื่อน ซ้าย-ขวา

ss005

ss006

ปลายเส้นจะเรียวเล็ก หรือ ใหญ่ขึ้น สามารถปรับได้ตามความต้องการ

ค่อยๆ ทำไปทีละเส้น ก็จะได้รูปที่มี เส้นคมชัด และ พริ้วไหวด้วยล่ะ

ลองฝึกกันดูนะค้า

วาดของที่อยู่ใต้น้ำกัน by

29
Nov
0

sample8a

เริ่มด้วยของที่อยากเอามาวางก่อน

sample8b

เติมน้ำให้มันหน่อย

sample8c

จากนั้นกำหนดตำแหน่งความสูงของผิวน้ำบนมือ ใช้สีฟ้าอ่อนทำเป็นวงคลื่นลงไป

sample8d

ใช้สีขาวแต้มตามยอดวงคลื่นเป็นไฮไลท์

sample8e

 

ทำ selection มือ ส่วนที่อยู่ใต้น้ำ ปรับสีให้ออกโทนฟ้า

 

 

 

sample8f

เสร็จแล้ว ง่ายจุง <3

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