{{htmlmetatags>metatag-robots=() 
metatag-media-og:image=(:developer_center:developer_editor:Nền_UI_loading.png?)}}
====== ★ Thanh tiến trình tải trò chơi ======
=== Trigger hoạt động ===
{{ :developer_center:developer_editor:UI_load (1).mp4?direct&600 |}}

----
**0. Tạo UI với thành phần cần thiết**
  * Hình ảnh: Thanh tiến trình, chú ý xác định vị trí trung tâm bên trái, hhi nhớ độ rộng tối đa của thanh, mặc định sẽ chuyển thanh tiến trình có độ rộng là 0 ( đối với bản đồ sử dụng thanh tiến trình 1 lần )
  * Văn bản: hiện giá trị tiến trình 
{{ :developer_center:developer_editor:UI_load (2).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (3).png?direct&600 |}}

  * Tạo biến riêng trị số, giá trị mặc định là 0 ( đối với bản đồ sử dụng thanh tiến trình 1 lần )
{{ :developer_center:developer_editor:UI_load (4).png?direct&600 |}}

**1. Tạo sự kiện để mở thanh tiến trình, với thanh tiến trình dùng 1 lần sử dụng sự kiện người chơi đăng nhập vào trò chơi ( hoặc sự kiện khác phù hợp)**
{{ :developer_center:developer_editor:UI_load (5).png?direct&600 |}}

**2. Tạo trigger đặt lại để tái sử dụng thanh tiến trình ( đối với bản đồ sử dụng thanh tiến trình 1 lần hãy bỏ qua bước này)**
  * Thêm hành động giảm độ rộng 'Thanh tiến trình' xuống 0
{{ :developer_center:developer_editor:UI_load (6).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (7).png?direct&600 |}}

  * Đặt nội dung văn bản 'Giá trị tiến trình' thành "0%"
{{ :developer_center:developer_editor:UI_load (8).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (9).png?direct&600 |}}

  * Đặt biến riêng: "G.trị tiến trình" thành 0
{{ :developer_center:developer_editor:UI_load (10).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (11).png?direct&600 |}}

**3. Mở UI** 
{{ :developer_center:developer_editor:UI_load (12).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (13).png?direct&600 |}}

**4. Thiết lập giá trị thanh tiến trình**
  * Tạo trigger lặp lại cho đến khi giá trị biến riêng: "G.trị tiến trình" bằng 100
{{ :developer_center:developer_editor:UI_load (14).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (15).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (16).png?direct&600 |}}

  * Đặt giá trị biến riêng: "G.trị tiến trình" cộng thêm số ngẫu nhiên phù hợp
{{ :developer_center:developer_editor:UI_load (17).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (18).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (19).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (20).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (21).png?direct&600 |}}

  * Tạo điều kiện nếu giá trị biến riêng: "G.trị tiến trình" lớn hơn 100 sẽ đặt giá trị biến riêng thành 100
{{ :developer_center:developer_editor:UI_load (22).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (23).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (24).png?direct&600 |}}

**5. Cập nhập thông tin UI**
  * Đặt nội dung văn bản 'Giá trị tiến trình' thành giá trị biến riêng: "G.trị tiến trình" ghép với chuỗi "%"
{{ :developer_center:developer_editor:UI_load (25).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (26).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (27).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (28).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (29).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (30).png?direct&600 |}}

  * Thiết lập độ rộng hình ảnh 'Thanh tiến trình' thay đổi đến (giá trị biến riêng: "G.trị tiến trình") nhân (giá trị độ rộng tối đa của hình ảnh chia 100)
{{ :developer_center:developer_editor:UI_load (31).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (32).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (33).png?direct&600 |}}
{{ :developer_center:developer_editor:UI_load (34).png?direct&600 |}}

=== Hoàn Thành ===
{{ :developer_center:developer_editor:UI_load (35).png?direct&600 |}}

----
Nếu bạn có bất kỳ câu hỏi nào về Chế Độ DEV Nâng Cao, vui lòng tham gia\\
 **[[https://www.facebook.com/groups/miniworldvn.developer|Mini World Developer Việt Nam]]** chính thức của chúng tôi