‫ยินดีต้อนรับกลับ.
‫ในวิดีโอนี้ เราจะมาดูองค์ประกอบ UI โดยเฉพาะอย่างยิ่ง เราจะดูที่ข้อความ
‫ดังนั้นฉันจึงสร้างโครงการใหม่
‫ผมเรียกมันว่าพื้นฐานพงษ์
‫และที่นี่ฉันต้องการสร้างองค์ประกอบ UI
‫ดังนั้นในมุมมองลำดับชั้นที่ฉันสร้าง ฉันคลิกขวาแล้วไปที่ UI
‫ฉันมีหลายตัวเลือกที่นี่
‫ฉันมีข้อความ รูปภาพ ภาพดิบ ปุ่มและอื่น ๆ
‫ตอนนี้ฉันแค่จะใช้ข้อความ
‫และอย่างที่คุณเห็น ข้อความใหม่ปรากฏบนหน้าจอของเราที่นี่ที่ด้านล่างซ้าย
‫ดังนั้นถ้าเราซูมออกไปยังตำแหน่งที่ถูกต้อง เราจะเห็น
‫นี่คือที่ที่ข้อความของเราอยู่ในขณะนี้
‫ที่ด้านล่างซ้าย
‫นี่คือโหมดการเรนเดอร์ที่เรามีสำหรับผืนผ้าใบของเรา ซึ่งเป็นการซ้อนทับพื้นที่หน้าจอ
‫ดังนั้นสิ่งที่ทำ มันจะซ้อนทับสิ่งที่เรากำหนดให้กับเลเยอร์ UI หรือพื้นที่ UI ที่นี่ที่ด้านบนของโหมดเกมหรือมุมมองเกมของเรา
‫ดังนั้น ไม่ว่าเราจะมีวัตถุอะไรอยู่ในนั้น สมมติว่าเราเพิ่มลูกบาศก์ 3 มิติ และจัดตำแหน่งไว้ที่
‫000
‫นี่คือที่ที่มันเป็น
‫และอย่างที่คุณเห็น มันอยู่ที่ไหนสักแห่งแถวๆ นี้
‫ดังนั้นโหมดเกมจึงเล็กมากเมื่อเปรียบเทียบกับหน้าจอขนาดใหญ่ซึ่งเป็นหรือกับเลเยอร์ขนาดใหญ่นี้ ซึ่งเป็นเลเยอร์
‫UI ของเรา ผ้าใบของเราซึ่งวางอยู่ด้านบน
‫นั่นคือสิ่งที่การซ้อนทับพื้นที่หน้าจอทำ
‫มีตัวเลือกอื่นๆ เช่น กล้องพื้นที่หน้าจอ
‫สิ่งที่จะทำคือคุณต้องให้กล้องที่นี่ แสดงกล้อง และจะใช้แนวทางที่แตกต่างออกไป
‫ดังนั้นตอนนี้จึงขึ้นอยู่กับตำแหน่งที่กล้องอยู่ในปัจจุบัน และคุณมีผืนผ้าใบอยู่ระหว่างกล้องและโหมดเล่น
‫และมันเกือบจะเหมือนกับเลเยอร์ที่อยู่ด้านบน แต่ก็ยังมีแนวทางที่แตกต่างออกไปเล็กน้อย
‫จากนั้นคุณมีพื้นที่โลกที่คุณสามารถกำหนดความกว้างและความสูงเฉพาะสำหรับผืนผ้าใบของคุณ และคุณสามารถเปลี่ยนแปลงเลเยอร์เพิ่มเติมได้
‫และอื่นๆ
‫เราจะใช้โหมดการเรนเดอร์ต่างๆ ตลอดทั้งหลักสูตร ไม่ต้องกังวลไป
‫คุณจะเห็นรายละเอียดเหล่านั้นในวิดีโอหน้าหรือในบทต่อไป
‫ฉันแค่อยากจะแสดงโหมดต่างๆ ให้คุณเห็นอย่างรวดเร็ว
‫ขณะนี้ ภายในผืนผ้าใบ เรามีข้อความ และในขณะเดียวกัน เราก็ได้สร้างระบบเหตุการณ์ด้วย
‫ดังนั้นเมื่อใดก็ตามที่เราสร้าง UI และเราไม่มีองค์ประกอบ UI มาก่อน ระบบแคนวาสและเหตุการณ์จะถูกสร้างขึ้นสำหรับเราโดยตรงโดยอัตโนมัติ
‫และฉันได้สร้างข้อความ
‫อย่างที่คุณเห็น มันเป็นลูกของแคนวาสของเรา ดังนั้นมันจึงอยู่ในโฟลเดอร์แคนวาสของเรา และตอนนี้ เราสามารถไปข้างหน้าและเปลี่ยนข้อความได้
‫เป็นต้น
‫ตรงนี้เรามีข้อความใหม่
‫ลองเปลี่ยนเป็นศูนย์ธรรมดากัน
‫และอย่างที่คุณเห็น เราแทบจะมองไม่เห็นศูนย์นั้นเลย
‫ลองเปลี่ยนขนาดฟอนต์เป็น สมมุติว่า 50
‫และตอนนี้คุณอาจพูดว่า โอ้ -- มันหายไปไหน?
‫ฉันไม่เห็นมันแล้ว
‫นั่นเกี่ยวข้องกับความจริงที่ว่าความสูงและความกว้างไม่พอดีกับขนาดตัวอักษรอีกต่อไป
‫ดังนั้นข้อความของเรา
‫องค์ประกอบนั้นเอง
‫องค์ประกอบข้อความ UI ของเรามีความสูงเพียง 30
‫ดังนั้น ถ้าฉันเพิ่มเป็นสี่ เช่น 60 ฉันจะสามารถเห็นหมายเลขของฉันอีกครั้งในข้อความของฉันอีกครั้ง
‫ทีนี้ลองกลับไปที่ 30 แล้วบอกว่าฉันยังต้องการเก็บไว้ที่ 30 แต่ฉันก็ยังต้องการเห็นค่าศูนย์ของตัวเอง แล้วจะแก้มันยังไงดีล่ะ?
‫สิ่งที่คุณสามารถทำได้คือคุณสามารถใช้โอเวอร์โฟลว์ได้
‫ดังนั้นโอเวอร์โฟลว์แนวนอนและโอเวอร์โฟลว์แนวตั้งจะทำอย่างที่คุณเห็น หมายเลขของคุณจะยังคงปรากฏ
‫อย่างไรก็ตามตอนนี้มันถูกตัดออก
‫ฉันจะย้ายศูนย์ของฉันได้อย่างไร
‫คุณสามารถย้ายจากที่นี่
‫ลองซูมออกไปยังจุดที่เราเห็นอะไรบางอย่าง
‫คุณจึงสามารถเคลื่อนย้ายไปมาได้ที่นี่
‫ดังที่คุณเห็นด้วยเครื่องมือแก้ไขการแปลงของเราที่นี่ หรือด้วยเครื่องมือการแปลงของเรา
‫ตอนนี้คุณสามารถลากไปรอบๆ และดูว่าอยู่ที่ไหน
‫อีกวิธีหนึ่งในการเปลี่ยนตำแหน่งของบางสิ่งคือ แน่นอน การเปลี่ยน กำหนด แปลงที่นี่โดยตรง
‫เพื่อให้คุณสามารถเพิ่มค่าได้ที่นี่
‫ดังนั้นคุณสามารถพูดได้ว่าศูนย์ศูนย์คือตำแหน่งที่เหมาะสมสำหรับคุณ
‫ตอนนี้ศูนย์ไม่อยู่ตรงกลาง
‫ทำไมถึงเป็นอย่างนั้น?
‫นั่นเป็นเพราะการจัดแนวข้อความของเราที่นี่ไม่ได้อยู่ตรงกลาง
‫ดังนั้นคุณสามารถจัดตำแหน่งให้อยู่ตรงกลางทั้งสองทิศทาง จากนั้นมันจะอยู่ตรงกลางอย่างสมบูรณ์ และคุณยังสามารถเปลี่ยนแปลงได้โดยเปลี่ยนจุดยึด
‫ตัวอย่างเช่น ที่นี่ ตอนนี้เป็นค่าสมอที่ตั้งไว้ล่วงหน้าที่จุดศูนย์กลาง
‫คุณสามารถยึดมันไว้ที่ด้านซ้ายบนได้ ดังนั้นตอนนี้ ให้ยึดมันไว้ที่ด้านซ้ายบน
‫อย่างที่คุณเห็น ไม่มีอะไรเปลี่ยนแปลงยกเว้นโพสต์ Y และ Pose X
‫ดังนั้นค่าทั้งสองจึงเปลี่ยนไปแล้ว
‫ดังนั้นหากเรานำค่าเหล่านั้นกลับมาเป็นศูนย์และศูนย์ คุณจะเห็นว่าศูนย์ของเราถอยหลังหรือไปที่ขอบมุมบนซ้ายอย่างสมบูรณ์
‫แน่นอน ตอนนี้เราอยากจะขยับมันเล็กน้อยเพื่อให้เรายังคงเห็นศูนย์
‫เลยย้ายมาไว้ในเกมของเรา
‫ตอนนี้สีดำอาจไม่ใช่สีที่เหมาะกับคุณ
‫หากคุณต้องการเปลี่ยนสิ่งนี้ คุณสามารถไปที่คุณสมบัติสีที่นี่และเปลี่ยนสีเป็น เช่น สีแดง
‫สีขาว หรือสีเขียว หรืออะไรก็ได้ที่คุณชอบ
‫ไม่เป็นไร.
‫ลองใช้สีชมพูนี้เพราะมันเข้ากับสีน้ำเงิน
‫เราสามารถมองเห็นมันได้เป็นอย่างดี
‫และสิ่งที่คุณทำได้คือเปลี่ยนระยะห่างบรรทัด
‫สมมุติว่าคุณมีบรรทัดที่สองตรงนี้
‫จากนั้นคุณสามารถเปลี่ยนระยะห่างบรรทัดได้
‫สมมติว่าคุณต้องการให้มีระยะห่างระหว่างบรรทัดมากขึ้น
‫นั่นคือระยะห่างบรรทัด
‫หนึ่งเป็นสิ่งที่ดีโดยสิ้นเชิง
‫และสุดท้าย คุณสามารถเปลี่ยนแบบอักษรได้ทุกเมื่อ
‫ดังนั้นมาตรฐานคือ A และไม่มีแบบอักษรเพิ่มเติม
‫โดยค่าเริ่มต้น.
‫คุณสามารถดาวน์โหลดแบบอักษรจากที่เก็บสินทรัพย์หรือนำเข้าจากทุกที่ที่คุณดาวน์โหลดเป็นต้น
‫ดังนั้นคุณดาวน์โหลดลงในเครื่องของคุณแล้วนำเข้าจากที่นั่นได้
‫แต่ระวังว่าคุณไม่ได้ดาวน์โหลดฟอนต์ที่คุณไม่ได้เป็นเจ้าของ เพราะฟอนต์บางฟอนต์เสียเงินจริงๆ ส่วนใหญ่ไม่ได้
‫ดังนั้นเพียงแค่ค้นหาแบบอักษรฟรีหรือแบบอักษรปลอดค่าลิขสิทธิ์แล้วใช้แบบอักษรเหล่านั้น
‫ไม่เป็นไร.
‫นั่นคือเกี่ยวกับแบบอักษรและข้อความ
‫และตอนนี้เรามาดูกันว่าเราจะเปลี่ยนตัวเลขนั้นแบบเป็นโปรแกรมได้อย่างไรในวิดีโอหน้า