Skip to main content

Các nhóm Corona: Làm thế nào để lớp, di chuyển và mang đồ họa đến trước

Top 5 Cảnh Camera Quay Được Thiên Thần Trong Đời Thật (Tháng 2024)

Top 5 Cảnh Camera Quay Được Thiên Thần Trong Đời Thật (Tháng 2024)
Anonim

Thành phần quan trọng của việc tạo, thao tác và quản lý đồ họa trong Corona SDK là đối tượng hiển thị. Không chỉ đối tượng này có thể được sử dụng để hiển thị một hình ảnh từ một tập tin, có lẽ cũng quan trọng, nó cho phép bạn nhóm các hình ảnh của bạn lại với nhau. Điều này cho phép bạn di chuyển toàn bộ bộ đồ họa xung quanh màn hình cùng một lúc và đồ họa lớp trên đầu trang của nhau.

Hướng dẫn này sẽ dạy cho bạn những điều cơ bản về cách sử dụng các nhóm hiển thị để tổ chức các đối tượng đồ họa trong dự án của bạn. Điều này sẽ được chứng minh bằng cách tạo ra hai lớp khác nhau, một biểu diễn cho màn hình bình thường và một lớp khác biểu diễn một lớp phương thức để đặt trên nó. Ngoài việc phân lớp đồ họa, chúng tôi cũng sẽ sử dụng đối tượng chuyển tiếp để di chuyển toàn bộ nhóm phương thức.

Cách tiếp thị ứng dụng của bạn

Chú thích: Để làm theo hướng dẫn này, bạn sẽ cần hai hình ảnh: image1.png và image2.png. Đây có thể là bất kỳ hình ảnh nào bạn chọn, nhưng hướng dẫn sẽ hoạt động tốt nhất nếu bạn có hình ảnh khoảng 100 pixel x 100 pixel. Điều này sẽ cho phép bạn dễ dàng nhìn thấy những gì đang xảy ra với hình ảnh.

Để bắt đầu, chúng tôi sẽ mở một tệp mới có tên main.lua và bắt đầu tạo mã của chúng tôi:

displayMain = display.newGroup (); displayFirst = display.newGroup (); displaySecond = display.newGroup (); global_move_x = display.contentWidth / 5;

Phần mã này thiết lập thư viện ui của chúng tôi và khai báo thông qua các nhóm hiển thị: displayMain, displayFirst và displaySecond. Chúng tôi sẽ sử dụng chúng để lớp đầu tiên đồ họa của chúng tôi và sau đó di chuyển chúng. Biến global_move_x được đặt thành 20% chiều rộng của màn hình để chúng ta có thể thấy chuyển động.

function setupScreen () displayMain: insert (displayFirst); displayMain: insert (displaySecond); displayFirst: toFront (); displaySecond: toFront (); local background = display.newImage ("image1.png", 0,0); displayFirst: chèn (nền); local background = display.newImage ("image2.png", 0,0); displaySecond: chèn (nền); kết thúc

Hàm setupScreen thể hiện cách thêm các nhóm hiển thị vào nhóm hiển thị chính. Chúng tôi cũng sử dụng hàm toFront () để thiết lập các lớp đồ họa khác nhau, với lớp mà chúng tôi muốn trên đầu tất cả thời gian được khai báo cuối cùng.

Trong ví dụ này, nó không thực sự cần thiết để di chuyển displayFirst về phía trước vì nó sẽ mặc định ở bên dưới nhóm displaySecond, nhưng tốt nhất là nên tham gia vào thói quen phân lớp một cách rõ ràng từng nhóm hiển thị. Hầu hết các dự án sẽ kết thúc với hơn hai lớp.

Chúng tôi cũng đã thêm hình ảnh vào từng nhóm. Khi chúng tôi khởi động ứng dụng, hình ảnh thứ hai phải ở trên cùng của hình ảnh đầu tiên.

function screenLayer () displayFirst: toFront (); kết thúc

Chúng tôi đã xếp lớp đồ họa của mình với nhóm displaySecond ở đầu nhóm displayFirst. Hàm này sẽ di chuyển displayFirst về phía trước.

function moveOne () displaySecond.x = displaySecond.x + global_move_x; kết thúc

Hàm moveOne sẽ di chuyển hình ảnh thứ hai sang phải bằng 20% ​​chiều rộng màn hình. Khi chúng ta gọi hàm này, nhóm displaySecond sẽ nằm sau nhóm displayFirst.

function moveTwo () displayMain.x = displayMain.x + global_move_x; kết thúc

Hàm moveTwo sẽ di chuyển cả hai hình ảnh sang phải bằng 20% ​​chiều rộng màn hình. Tuy nhiên, thay vì di chuyển từng nhóm riêng lẻ, chúng tôi sẽ sử dụng nhóm displayMain để di chuyển cả hai cùng một lúc. Đây là một ví dụ tuyệt vời về cách một nhóm hiển thị có chứa nhiều nhóm hiển thị có thể được sử dụng để thao tác nhiều đồ họa cùng một lúc.

setupScreen (); timer.performWithDelay (1000, screenLayer); timer.performWithDelay (2000, moveOne); timer.performWithDelay (3000, moveTwo);

Đoạn mã cuối cùng này thể hiện những gì xảy ra khi chúng ta chạy các hàm này. Chúng tôi sẽ sử dụng chức năng timer.performWithDelay để kích hoạt các chức năng mỗi giây sau khi ứng dụng được khởi chạy. Nếu bạn không quen với hàm này, biến đầu tiên là thời gian trễ được biểu thị bằng mili giây và biến thứ hai là hàm chúng tôi muốn chạy sau thời gian trễ đó.

Khi bạn khởi chạy ứng dụng, bạn nên có image2.png ở trên cùng của image1.png. Chức năng screenLayer sẽ kích hoạt và mang image1.png về phía trước. Hàm moveOne sẽ di chuyển image2.png ra khỏi dưới image1.png và hàm moveTwo sẽ kích hoạt lần cuối, di chuyển cả hai hình ảnh cùng một lúc.

Cách khắc phục iPad chậm

Điều quan trọng cần nhớ là mỗi nhóm trong số này có thể có hàng chục hình ảnh trong đó. Và cũng giống như hàm moveTwo đã di chuyển cả hai hình ảnh bằng một dòng mã, tất cả các hình ảnh trong một nhóm sẽ thực hiện các lệnh được cung cấp cho nhóm.

Về mặt kỹ thuật, nhóm displayMain có thể có cả nhóm hiển thị và hình ảnh chứa trong đó. Tuy nhiên, thực hành tốt là để một số nhóm như displayMain hoạt động như các vùng chứa cho các nhóm khác mà không có bất kỳ hình ảnh nào để tạo ra tổ chức tốt hơn.

Hướng dẫn này sử dụng đối tượng hiển thị. Tìm hiểu thêm về đối tượng hiển thị.

Cách bắt đầu phát triển ứng dụng iPad