สอน Unity3D C# ตอน 1 สร้างโปรเจคและทำความเข้าใจ UI หลัก

<h3>สอน Unity3D C&num; ตอน 1 สร้างโปรเจคและทำความเข้าใจ UI หลัก<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>สอน Unity3D C&num; ตอน 1 สร้างโปรเจคและทำความเข้าใจ UI หลัก<&sol;strong><br &sol;>&NewLine;เริ่มต้นให้ดาวน์โหลดและติดตั้งโปรแกรม <a href&equals;"https&colon;&sol;&sol;unity3d&period;com&sol;unity" target&equals;"&lowbar;blank">Unity3D เวอร์ชั่น Personal<&sol;a> ซึ่งเป็นฟรีเวอร์ชั่น สำหรับเวอร์ชั่นนี้จะมีบางฟังก์ชั่นที่นักพัฒนาไม่สามารถใช้งานได้ แต่ในขั้นตอนของการศึกษาเรียนรู้จะไม่เป็นปัญหาใด ๆ ครับ หลังจากติดตั้งเสร็จเรียบร้อยแล้ว ให้เปิดโปรแกรมขึ้นมาและทดลองสร้าง Unity Project ดังนี้<&excl;--more--><&sol;p>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>เริ่มต้นสร้าง Unity Project<&sol;h4>&NewLine;<p>เปิดโปรแกรม Unity และเลือกไปที่เมนู &&num;8220&semi;New&&num;8221&semi;<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;สอน-unity3d-เริ่มต้น-2&period;png" alt&equals;"สอน-unity3d-เริ่มต้น" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;ตั้งชื่อโปรเจค เลือกโฟลเด้อที่จะเก็บไฟล์ของโปรเจคทั้งหมด เลือกรูปแบบโปรเจคเป็นแบบ 2D และคลิก Create Project<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;สอน-unity3d-เริ่มต้น-3&period;png" alt&equals;"สอน-unity3d-เริ่มต้น" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;หลังจากโปรแกรมได้สร้างไฟล์โปรเจคเรียบร้อยแล้ว ในหน้าแรกของโปรแกรมอาจจะมีรูปแบบ Layout ที่แตกต่างกับในรูปด้านล่าง นั่นเพราะผู้เขียนได้ปรับเปรียบ Layout ตามความถนัด แต่โดยหน้าต่างหลัก ๆ ของโปรแกรมแล้วจะมีเหมือนกัน คือ<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;สอน-unity3d-เริ่มต้น-1&period;jpg" alt&equals;"สอน-unity3d-เริ่มต้น" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<ul>&NewLine;<li><strong>1&period; Game<&sol;strong> ในหน้าต่างนี้จะเป็นส่วนของการแสดงผลจริง หรือการ Preview หน้าต่างนี้จะทำการ Render ออกมาแสดงผลทั้ง graphic และการทำงานส่วน programming เมื่อเรากดปุ่ม Play ด้านบนของโปรแกรม ดังรูปด้านล่าง<&sol;li>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>เครื่องมือสำหรับ Preview การทำงานในหน้าต่าง Game<&sol;strong><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;สอน-unity3d-เริ่มต้น-4&period;png" alt&equals;"สอน-unity3d-เริ่มต้น" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<li><strong>2&period; Scene<&sol;strong> จะเป็นหน้าต่างที่ทำงานคล้าย ๆ กับ Game แต่ข้อแตกต่างคือเราจะสามารถจัดการกับ Object ต่าง ๆ อย่าง Panel&comma; Button&comma; Text ได้ เช่นการเปลี่ยนตำแหน่ง x&comma;y&comma;z การปรับขนาดความกว้าง ความสูง โดยอาศัยเครื่องมือ 5 อย่างมุมซ้ายบนของโปรแกรม Unity3D ดังรูปด้านล่าง<&sol;li>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>เครื่องมือสำหรับจัดการ Object ในหน้าต่าง Scene<&sol;strong><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;สอน-unity3d-เริ่มต้น-5&period;png" alt&equals;"สอน-unity3d-เริ่มต้น" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<li><strong>3&period; Hierarchy &lpar; ไฮ-รา-คี &rpar;<&sol;strong> หน้าต่างนี้จะเป็นตัวจัดการลำดับของ Object ทั้งหมดจะทำงานแยกเป็น scene คือไฟล์ &period;unity หากหนึ่งโปรเจคมีหลาย scene เราจะสามารถจัดลำดับของ Object ต่าง ๆ ได้ในหน้าต่าง เช่น ปุ่ม พื้นของปุ่ม ตัวหนังสือที่อยู่บนปุ่ม หน้าต่างนี้จะแสดงลิสต์ของ Object ทั้งหมดที่กำลังทำงานและใช้งานอยู่เมื่อกดปุ่ม preview ดังรูปตัวอย่างด้านล่างจะเห็นว่า ลำดับเริ่มจาก Main Scene -> Canvas -> Button -> และ Text<&sol;li>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>ลำดับเริ่มจาก Main Scene -> Canvas -> Button -> และ Text<&sol;strong><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;สอน-unity3d-เริ่มต้น-6&period;png" alt&equals;"สอน-unity3d-เริ่มต้น" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<li><strong>4&period; Project &sol; 5&period;Assets<&sol;strong> คือส่วนที่เอาไว้เก็บไฟล์ต่าง ๆ ที่ต้องใช้งานในโปรเจค รูปภาพ เสียง prefab plugin เป็นต้น โดยปกติแล้วโปรแกรมจะสร้างโฟลเด้อชื่อว่า Assets ให้เราเองอัตโนมัติเมื่อทำการ Create Project และโดยทั่วไปของการพัฒนา เรามักจะสร้าง subfolder ไว้ในโฟลเด้อ Assets อีกทีหนึ่งเพื่อเก็บไว้ที่แตกต่างกัน เช่น scene ไว้สำหรับเก็บไฟล์ &period;unity &sol; script สำหรับเก็บไฟล์ &period;cs &sol; prefab สำหรับเก็บ Object ต้นแบบของ unity เป็นต้น<&sol;li>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>สร้าง subfolder ไว้ใน Assets เพื่อเก็บไฟล์ที่แตกต่างกัน ให้เป็นระเบียบ<&sol;strong><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;สอน-unity3d-เริ่มต้น-7&period;png" alt&equals;"สอน-unity3d-เริ่มต้น" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<li><strong>6&period; Inspector<&sol;strong> คือส่วนที่จะให้ข้อมูล Property ต่าง ๆ ของ Object ที่เราเลือกในหน้าต่าง Scene และ Hierarchy เมื่อเราคลิกเลือกไปที่ Object ใด ๆ จะปรากฏข้อมูลในหน้าต่าง Inspector เช่น ตำแหน่ง x&comma;y scale&comma; color รวมไปถึง event และ script ที่ Object นี้ใช้งานอยู่ <&sol;li>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>เลือกปุ่มในหน้าต่าง Hierarchy ในหน้าต่าง Inspector ก็จะแสดง ตำแหน่ง และ ขนาดของปุ่ม<&sol;strong><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;สอน-unity3d-เริ่มต้น-8&period;png" alt&equals;"สอน-unity3d-เริ่มต้น" &sol;><br &sol;>&NewLine;<&sol;br>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;