[NGUI] สอนการใช้ Anchor by Ziah
Nov0
จากในช่วงแรกที่ค้นคว้าการทำให้ 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 heha
Nov0
เคยไหมที่ 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 akara
Nov0
วิธีทำให้ฉากหลัง ดูมีมิติ มีความลึก แบบง่ายๆ ตามสไตล์มือใหม่หัดวาดฉากครับ
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 Lynne
Nov0
บ่อยครั้งที่ ที่ตัดเส้นใน SAI ก็อยากได้เส้นคมๆ เหมือนเส้น vector เวลาตัดเส้น แต่เส้นแข็งโป๊ก
- ร่างภาพ เตรียมตัดเส้น
- เลือกเปิดเลเยอร์ใหม่ ให้เลือกที่มีรูปปากกา
-เลือก pen tool แล้ว จัดเส้น ตามเส้นร่าง
แต่เส้นมีน้ำหนักเท่ากันหมดเลยดูแข็งๆ เราสามารถปรับน้ำหนักเส้นได้ ด้วยเครื่องมือ pressure
- จิ้มเลือก เครื่องมือ pressure ในกล่องเครื่องมือ
- ไปจิ้มตรงปลายเส้นที่เราอยากจะปรับขนาดแล้ว เลื่อน ซ้าย-ขวา
ปลายเส้นจะเรียวเล็ก หรือ ใหญ่ขึ้น สามารถปรับได้ตามความต้องการ
ค่อยๆ ทำไปทีละเส้น ก็จะได้รูปที่มี เส้นคมชัด และ พริ้วไหวด้วยล่ะ
ลองฝึกกันดูนะค้า
วาดของที่อยู่ใต้น้ำกัน by Tua Poonsurapun
Nov0
เริ่มด้วยของที่อยากเอามาวางก่อน
เติมน้ำให้มันหน่อย
จากนั้นกำหนดตำแหน่งความสูงของผิวน้ำบนมือ ใช้สีฟ้าอ่อนทำเป็นวงคลื่นลงไป
ใช้สีขาวแต้มตามยอดวงคลื่นเป็นไฮไลท์
ทำ selection มือ ส่วนที่อยู่ใต้น้ำ ปรับสีให้ออกโทนฟ้า
เสร็จแล้ว ง่ายจุง <3