Đang tải... (xem toàn văn)
UI, Canvas, Layout, Image,… chắc mọi người không còn xa lạ gì, mình cũng sẽ không nói lại cách sử dụng các thứ nữa. Mặc định là các bạn đã biết hết rồi nhé :> Mục đích của bài chỉ để trả lời 2 câu hỏi mình vẫn hay thắc mắc khi sử dụng UI, Graphics system vẽ UI như thế nào? Có khác vẽ GameObject (không phải UI) khác không? Nếu hiểu rồi thì có optimized được chỗ nào không?
Canvas hoạt động nào? • • • Phuong November 10, 2019 Graphic, Theory, Unity UI, Canvas, Layout, Image,… người khơng cịn xa lạ gì, khơng nói lại cách sử dụng thứ Mặc định bạn biết hết :> Mục đích để trả lời câu hỏi hay thắc mắc sử dụng UI, Graphics system vẽ UI nào? Có khác vẽ GameObject (không phải UI) khác không? Nếu hiểu có optimized chỗ khơng? Thực câu hỏi Canvas ông họa sỹ Canvas nơi đặt component UI lên, khung hỗ trợ vẽ UI, vùng chứa UI, …, vân vân mây mây Vậy thực chất “nó” gì? Đầu tiên, Canvas tìm child có CanvasRenderer (component hỗ trợ vẽ Image Text) Canvas kết hợp khối hình giống setting material, sprite,… đối tượng vào thành khối gọi batches, sau tạo lệnh “Render Commands” gửi cho Graphics System Unity, bắt Graphics vẽ theo setting batches Ngoài thứ xử lý C++ nên tối ưu Batching Technique “Tại lại có batch/ batches đây?” Khi sử dụng kỹ thuật batching hay chia sẻ settings nhiều objects, Graphics vẽ objects batch lần Ví dụ lão họa sỹ lên màu cho tranh, tay bút màu đỏ, để hồn thành nhanh chóng tranh kỹ thuật batching, tô hết tất vật thể màu đỏ trước, không tô lần lượt: đỏ (vật A) -> xanh (vật B) -> vàng (vật C) -> đỏ (vật D) -> tím ->… et cetera Ở batches “setting màu đỏ”, vật thể (CanvasRenderer) nằm trang giấy (canvas), cịn ơng họa sỹ đóng vai trị Graphics “Vậy khối hình mà Canvas dùng để kết hợp lấy đâu?” Khi thêm component Image, Text,… kèm với component khác, CanvasRenderer đề cập Image component requires Canvas Renderer “Vậy Canvas batching lại (rebatch hay batch build)?” Khi khối hình cung cấp CanvasRenderer (child component) có thay đổi, có nghĩa là, cần thay đổi nhỏ đối tượng đồng nghĩa với việc Canvas bị đánh dấu DIRTY (dirty flag) phải rebatch lại toàn Để tối ưu (optimize) vấn đề này, người ta thường sử dụng thứ gọi Sub-canvas hay nested-canvas, Sub-canvas quái gì? Nếu bạn hứng thú cách mà CPU bảo Graphics vẽ đây: Cách GPU vẽ lên hình Sub-canvas hay Nested-canvas NestedCanvas đơn giản Canvas nằm Canvas khác subCanvas tách child-objects khỏi parentCanvas, thay đổi child objects subCanvas đánh dấu subCanvas DIRTY, không ảnh hưởng tới Canvas cha ngược lại Sub-canvas hay nested canvas Tuy nhiên có số ngoại lệ, việc thay đổi Canvas cha ảnh hưởng tới SubCanvas bị đánh dấu DIRTY, ví dụ thay đổi size Canvas cha làm canvas phải scale theo Mặc dù optimized có đánh đổi (trade-off) nhẹ đây, sử dụng Sub-canvas, số lần rebatch giảm số lượng batches tăng lên, trường hợp sử dụng cách Graphic Class Graphic cung cấp cho Image Text,… khả “được vẽ” Lưu ý từ khóa Graphic khác với Graphics public class Image : MaskableGraphic, ISerializationCallbackReceiver, ILayoutElement, I public class Text : MaskableGraphic, ILayoutElement public abstract class MaskableGraphic : Graphic, IClippable, IMaskable, IMaterialModifi Ở đây, class Image, Text kế thừa MaskableGraphic, MaskableGraphic lại kế thừa Graphic Đa phần UI Graphics Unity implemented từ MaskableGraphic, nhiều bạn sử dụng RectMask2D hay Mask biết chức mask nên khơng nói thêm 4 Layout Vertical/ Horizontal/ Grid Layout Group… thành phần UI không hỗ trợ vẽ, không kế thừa MaskableGraphic, Graphic Image hay Text Nhưng chúng sở hữu sức mạnh quan trọng thiết kế UI khả điều khiển kích thước (size), vị trí (position) child-RectTransform theo trật tự, logic mong muốn xếp theo cột, theo bảng, theo hàng… Ảnh minh họa Layout CanvasUpdateRegistry Cả lớp Graphic Layout phụ thuộc vào lớp CanvasUpdateRegistry, Unity Editor không thấy lớp CanvasUpdateRegistry theo dõi Layout components Graphic components cần phải cập nhật hay tính tốn lại Sau thực việc cập nhật Canvas quản lý components thực thi kiện (event) willRenderCanvases để vẽ lại, event gọi vào frame Đồng thời, trình cập nhật hay rebuild lại component Graphic Layout khác nhau, giai đoạn rebuild khác nhau, bạn xem thêm class CanvasUpdateRegistry phần Quy trình rebuild Quy trình Batch (Canvases) Batching Process trình Canvas lấy meshes cung cấp CanvasRendener (khơng tính subCanvas), kết hợp meshes có cấu hình giống thành batch, sau tạo Rendering Commands (lệnh render) gửi tới phận Graphics Kết trình frame lưu trữ (cached) sử dụng cho frames Canvas bị đánh cờ DIRTY (dirty flag), bị đánh cờ DIRTY meshes cung cấp CanvasRenderer có thay đổi, kích thước, sprite, vị trí, scale, rotation,… Batching Process thường thực thi threads khác (multithreading), performance có khác biệt tùy theo số lượng core processor máy multicore processor, multi-processors Quy trình Rebuild (Graphics) Rebuild Process trình tính tốn lại layout meshes thành phần Graphic (Text, Image,…), Layout (Grid, HorizontalLayoutGroup, VerticalLayoutGroup…) Việc tính toán thực class singleton CanvasUpdateRegistry mà đề cập phần Thơng qua hàm CanvasUpdateRegistry.PerformUpdate() gọi từ event Canvas.willRenderCanvases (event gọi vào frame) “Class Singleton gì?” Các bạn tham khảo Có nên sử dụng Singleton Pattern? public class CanvasUpdateRegistry { protected CanvasUpdateRegistry() { Canvas.willRenderCanvases += PerformUpdate; } private void PerformUpdate() { } } 10 11 “Làm CanvasUpdateRegistry biết thành phần Graphic hay Layout cần rebuild?” CanvasUpdateRegistry có queues bao gồm: queue “các layouts cần rebuild” queue “các graphics cần rebuild”, dirty-layout dirty-graphic đăng ký vào queues thông qua ICanvasElement.Rebuild 10 11 12 13 14 15 16 17 18 public class CanvasUpdateRegistry { private readonly IndexedSet m_LayoutRebuildQueue = new IndexedSet< private readonly IndexedSet m_GraphicRebuildQueue = new IndexedSet private bool InternalRegisterCanvasElementForLayoutRebuild(ICanvasElement element) { if (m_LayoutRebuildQueue.Contains(element)) return false; return m_LayoutRebuildQueue.AddUnique(element); } private bool InternalRegisterCanvasElementForGraphicRebuild(ICanvasElement element { if (m_PerformingGraphicUpdate) return false; } } return m_GraphicRebuildQueue.AddUnique(element); 19 20 Tạm kết Cũng viết khác, viết viết theo văn phong cách hiểu mình, có sai sót hay muốn biết thơng tin thêm để lại comment contact Nguồn tham khảo https://learn.unity.com/tutorial/optimizing-unity-ui ... vẽ lên hình Sub -canvas hay Nested -canvas NestedCanvas đơn giản Canvas nằm Canvas khác subCanvas tách child-objects khỏi parentCanvas, thay đổi child objects subCanvas đánh dấu subCanvas DIRTY,... hưởng tới Canvas cha ngược lại Sub -canvas hay nested canvas Tuy nhiên có số ngoại lệ, việc thay đổi Canvas cha ảnh hưởng tới SubCanvas bị đánh dấu DIRTY, ví dụ thay đổi size Canvas cha làm canvas. .. nhau, bạn xem thêm class CanvasUpdateRegistry phần Quy trình rebuild Quy trình Batch (Canvases) Batching Process trình Canvas lấy meshes cung cấp CanvasRendener (khơng tính subCanvas), kết hợp meshes