ทำแอพ ให้ดูได้ทั้งแนวตั้ง แนวนอน Landscape & Portrait View

<h3>ทำแอพ ให้ดูได้ทั้งแนวตั้ง แนวนอน Landscape &&num;038&semi; Portrait View<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;การพัฒนาโมบายแอพพลิเคชั่นให้สามารถแสดงผลและทำงานได้อย่างมีประสิทธิภาพทั้งแนวตั้ง &lpar; Portrait &rpar; และแนวนอน &lpar; Landscape &rpar; นั้น ไม่ไช่เรื่องที่จำเป็นหรือต้องคิดเป็นอันดับต้น ๆ ประเด็นสำคัญที่ต้องคำนึงให้มากคือการจัดการ UX&sol;UI ให้สามารถทำงานได้อย่างเหมาะสมและเป็นมิตรกับผู้ใช้งานมากที่สุด ซึ่งก็ขึ้นอยู่กับประเภทของแอพพลิเคชั่น ที่มีลักษณะการทำงานที่แตกต่างกันออกไป ในบทความนี้เราจะมาลองทดสอบดูว่าถ้าโจทย์ของงานคือการทำให้ตัวแอพพลิเคชั่นสามารถทำงานได้ในทั้งสอง viewport เราจะสามารถทำได้อย่างไร<&excl;--more--><&sol;p>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>สร้างโปรเจคและ GameObject ใน Unity2D<&sol;h4>&NewLine;<ul>&NewLine;<li>1&period; เปิดโปรแกรม Unity3D และสร้างโปรเจคเป็นแบบ 2D<&sol;li>&NewLine;<p><&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;2016&sol;09&sol;ทำแอพ-แสดงผลแนวตั้งแนวนอน-1&period;png" alt&equals;"ทำแอพ แสดงผลแนวตั้งแนวนอน" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<li>2&period; คลิกขวาที่หน้าต่าง Hierarchy และเลือกไปที่ UI -> Panel เพื่อสร้าง Panel บน 2D Canvas<&sol;li>&NewLine;<p><&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;2016&sol;09&sol;ทำแอพ-แสดงผลแนวตั้งแนวนอน-2&period;png" alt&equals;"ทำแอพ แสดงผลแนวตั้งแนวนอน" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<li>3&period; ที่หน้าต่าง Hierarchy เลือกไปที่ Canvas และกำหนดการตั้งค่าใน Inspector ดังนี้<&sol;li>&NewLine;<p>&&num;8211&semi; <strong>Render Mode<&sol;strong> &equals; Screen Space &&num;8211&semi; Camera<br &sol;>&NewLine;&&num;8211&semi; <strong>Render Camera<&sol;strong> &equals; Main Camera<br &sol;>&NewLine;&&num;8211&semi; <strong>UI Scale Mode<&sol;strong> &equals; Scale With Screen Size<br &sol;>&NewLine;&&num;8211&semi; <strong>Reference Resolution<&sol;strong> &equals; 640&&num;215&semi;1136 &lpar; iPhone 5 &rpar;<br &sol;>&NewLine;&&num;8211&semi; <strong>Screen Match Mode<&sol;strong> &equals; Match Width Or Height<br &sol;>&NewLine;&&num;8211&semi; <strong>Match<&sol;strong> &equals; 0&period;5<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;2016&sol;09&sol;ทำแอพ-แสดงผลแนวตั้งแนวนอน-3&period;png" alt&equals;"ทำแอพ แสดงผลแนวตั้งแนวนอน" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<li>4&period; จากนั้นให้เลือกไปที่ Main Camera และทำการตั้งค่าดังนี้<&sol;li>&NewLine;<p>&&num;8211&semi; <strong>Projection<&sol;strong> &equals; Perspective<br &sol;>&NewLine;&&num;8211&semi; <strong>Far<&sol;strong> &equals; 300<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;2016&sol;09&sol;ทำแอพ-แสดงผลแนวตั้งแนวนอน-5&period;png" alt&equals;"ทำแอพ แสดงผลแนวตั้งแนวนอน" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<li>4&period; ให้ลอง preview ในมุมมอง 3D จะเห็นว่าระยะระหว่าง Panel และ Camera จะบรรจบพอดีกัน<&sol;li>&NewLine;<p><&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;2016&sol;09&sol;ทำแอพ-แสดงผลแนวตั้งแนวนอน-4&period;png" alt&equals;"ทำแอพ แสดงผลแนวตั้งแนวนอน" &sol;><br &sol;>&NewLine;<&sol;br>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>สร้าง UI Object ให้ ยืดหดตามขนาดหน้าจอ<&sol;h4>&NewLine;<p>ให้ท่านทดลองสร้าง UI Button ขึ้นมา 5 ปุ่ม วางไว้ใน 2D Canvas เหนือ Panel โดยให้วางไว้ในตำแหน่งต่าง ๆ ดังนี้<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;2016&sol;09&sol;ทำแอพ-แสดงผลแนวตั้งแนวนอน-6&period;png" alt&equals;"ทำแอพ แสดงผลแนวตั้งแนวนอน" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;UI ทั้งหมดของ Unity เมื่อสร้างขึ้นมาจะมี Pivot และ Position อยู่ในตำแหน่ง Center ทั้งหมดให้ท่านเปลี่ยนเฉพาะ Position ให้ครอบคุมพื้นที่ทั้งหมดของ UI Button ดังตัวอย่างด้านล่าง<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>เปลี่ยนจากแบบนี้<&sol;strong><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;2016&sol;09&sol;ทำแอพ-แสดงผลแนวตั้งแนวนอน-7&period;png" alt&equals;"ทำแอพ แสดงผลแนวตั้งแนวนอน" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>เป็นแบบนี้<&sol;strong><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;2016&sol;09&sol;ทำแอพ-แสดงผลแนวตั้งแนวนอน-8&period;png" alt&equals;"ทำแอพ แสดงผลแนวตั้งแนวนอน" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>วิธีการเปลี่ยนคือให้กด Alt และลากลูกศรทั้ง 4 ด้านไปยังหัวมุมพื้นที่ของ UI Button<&sol;strong><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>ตัวอย่างการทำงาน<&sol;h4>&NewLine;<p>เมื่อทำตามขั้นตอนดังที่ว่ามาทั้งหมดให้ท่านทดลอง export และติดตั้งบน mobile device และทดสอบการทำงาน จะเห็นว่าตัว UI Button ทั้ง 5 จะอยู่ในตำแหน่งที่ถูกต้องและปรับขนาดตัวเองตามขนาดหน้าจอทั้งบน Landscape และ Portrait<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>เมื่ออยู่บน Mobile Device แบบ Landscape<&sol;strong><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;2016&sol;09&sol;ทำแอพ-แสดงผลแนวตั้งแนวนอน-9&period;jpg" alt&equals;"ทำแอพ แสดงผลแนวตั้งแนวนอน" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>เมื่ออยู่บน Mobile Device แบบ Portrait <&sol;strong><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;2016&sol;09&sol;ทำแอพ-แสดงผลแนวตั้งแนวนอน-10&period;jpg" alt&equals;"ทำแอพ แสดงผลแนวตั้งแนวนอน" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;