Game Studio
Liên kế mạng xã hội

Game Studio


Hướng dẫn sử dụng Image Sheet để truy xuất hình ảnh trong Corona

Trong việc thiết kế ứng dụng cho nền tảng di động, không như PC, các thiết bị di động của chúng ta có bộ nhớ khá giới hạn, bạn có thể tiết kiệm bộ nhớ bằng cách sử dụng Image Sheets. Trong hầu hết trong các trường hợp, để hiệu quả hơn, thì bạn có thể gộp một số hình ảnh nhỏ vào một tấm lớn hơn và "chạy" một chuổi hình ảnh cụ thể từ trong tấm ảnh lớn đó khi bạn muốn hiển thị nó trên màn hình.

Corona hiện nay đã hỗ trợ đầy đủ cho phép bạn làm việc này cho một tấm ảnh (Image Sheets) đôi khi được gọi là Sprite Sheets hoặc Texture Atlases. Điều này cho phép bạn load nhiều hình ảnh / khung hình từ một tập tin hình ảnh lớn duy nhất. Image sheets có thể được sử dụng cho cả hình ảnh tĩnh và Animated Sprites.

Image sheets một tính năng tiện lợi, nếu bạn sử dụng các công cụ của bên thứ 3 phổ biến hiện nay như TexturePacker, bạn có thể thiết kế những hình ảnh riêng lẽ sau đó tổng hợp các hình ảnh vào một tấm ảnh lớn. Về vấn đề tại sao Image sheets lại tối ưu với bộ nhớ hơn so với sử dụng nhiều ảnh nhỏ thì mình sẽ không nói trong bài viết này.

Cài đặt Image Sheets

Cú pháp của một Image Sheets đòi hỏi tối thiểu là tên của tập tin và một bảng các tùy chọn để Corona biết về những hình ảnh có trong Image Sheets. Tùy thuộc vào nhu cầu của bạn, các tùy chọn này có thể định dạng "đơn giản" hoặc "phức tạp". Nếu bạn đang sử dụng tiện ích đóng gói texture như đã đề cập ở trên, công việc này sẽ được phần mềm xử lý luôn cho bạn.

Khởi tạo các Image Sheets được thực hiện bằng hàm graphics.newImageSheet ():

Mã (Lua):
graphics.newImageSheet( filename, [baseDir, ] options )

- filename - đây là tên của tập tin hình ảnh.
- baseDir - xác định thư mục cơ sở, nơi đặt filename.
- options - một bảng với các keys hoặc phụ bảng đại diện cho các lựa chọn cụ thể liên quan đến tấm ảnh.

Với một Image Sheets đơn giản

Cấu hình này giả định rằng tất cả các khung ảnh nhỏ nằm trong Image Sheets có kích thước giống hệt nhau (chiều rộng và chiều cao).

Mã (Lua):
local options =

{
    width = 50,
    height = 50,
    numFrames = 3
}
local sheet = graphics.newImageSheet( "mySheet.png", options )
 

Với một Image Sheets phức tạp

Cấu hình này chỉ cần thiết nếu dùng các hình ảnh trong Image Sheets có khung kích thước khác nhau. Trong cấu hình này, option bao gồm một mảng table trong một frames table chính. Mỗi bảng trong mảng đại diện cho một khung hình duy nhất trong Image Sheets. Đối với mỗi khung hình, bạn phải xác định tọa độ bắt đầu x và y (góc trên bên trái) cùng với chiều rộng và chiều cao của khung. Tóm lại, có bốn thông số giới hạn hình chữ nhật của khung.

Ví dụ, hãy xem các tấm ảnh sau đây (mySheet.png) với hai khung khác nhau về chiều rộng:

[​IMG]

Thiết lập Image Sheets sẽ trông như thế này:

Mã (Lua):
local options =

{
    frames =
    {
        --frame 1
        {
            x = 0,
            y = 0,
            width = 235,
            height = 276
        },
        --frame 2
        {
            x = 235,
            y = 0,
            width = 277,
            height = 276
        }
    }
}
local sheet = graphics.newImageSheet( "mySheet.png", options )

Dynamically-Selected Image Sheet

Cũng giống như hình ảnh đơn lẻ được hiển thị với display.newImageRect (), tấm ảnh có thể được lựa chọn Dynamic tùy thuộc vào độ phân giải màn hình. Để thực hiện điều này, bạn phải xác định các key-value sau trong bảng lựa chọn:

· sheetContentWidth

· sheetContentHeight

Những giá trị này nói cho Corona biết kích thước của 1 Image Sheet ban đầu. Ví dụ, nếu bạn đang phát triển cho cả iPad và iPad Retina, và bạn thường xuyên sử dụng một tấm hình ảnh 1000 × 1000 cho iPad, bạn nên xác định 1000 cho cả hai giá trị và sau đó thiết kế tấm hình Retina của bạn ở mức 2000 × 2000

Mã (Lua):
local options =

{
    width = 100,
    height = 100,
    numFrames = 10,
    sheetContentWidth = 1000,
    sheetContentHeight = 1000
}
local sheet = graphics.newImageSheet( "mySheet.png", options )


Hiển thị hình ảnh
Để hiển thị một hình ảnh (khung hình) từ một Image Sheet, sử dụng các API hiển thị nhưng phải xác định Image Sheet và số khung hình thay vì chỉ tên hình ảnh:

Mã (Lua):
local sheet = graphics.newImageSheet( "mySheet.png", options )

local frame1 = display.newImage( sheet, 1 )
local frame2 = display.newImage( sheet, 2 )
 

Nếu bạn require dynamically-selected images, sử dụng display.newImageRect () và xác định chiều rộng và chiều cao như thường lệ:

Mã (Lua):
local sheet = graphics.newImageSheet( "mySheet.png", options )

local frame1 = display.newImageRect( sheet, 1, 235, 276 )
local frame2 = display.newImageRect( sheet, 2, 277, 276 )


Chú ý về cắt tỉa hình ảnh
Như đã nói ở trên, chương trình đóng gói hình ảnh phổ biến hiện nay cung cấp các tùy chọn để tối đa hóa (nhỏ gọn) tấm ảnh của bạn. Về cơ bản, điều này có nghĩa rằng những hình ảnh gốc sẽ được cắt tỉa không gian trống (trong suốt) xung quanh trước khi chúng được đóng gói vào tấm ảnh cuối cùng. Các chương trình thông minh này sử dụng các kích thước tấm ảnh tổng thể và tự động sắp xếp các hình ảnh vào, bố trí hiệu quả nhất có thể. Ví dụ, nếu bạn muốn để đóng gói hình ảnh hai chú chim đơn lẻ vào một tấm ảnh bằng cách sử dụng một chương trình đóng gói, kết quả có thể như sau:

[​IMG]

Có thể thấy rằng không gian trong suốt, khu vực các ô caro trắng-xám được cắt đi và những con chim được ghép lại chặt chẽ với nhau để đạt được các tấm ảnh nhỏ nhất có thể. Với tính năng này, các tấm ảnh bây giờ là 450 × 262 thay vì 512 × 276.

Quan trọng
Mặc dù cắt tỉa là việc làm cần thiết để đạt được các tấm ảnh nhỏ nhất có thể, có một lưu ý quan trọng khi sử dụng là bạn phải nắm bắt được nó, đặc biệt là định vị tọa độ. Vì khi bạn đặt những hình ảnh trên màn hình hoặc sử dụng chúng trong một chuổi ảnh động, không gian trống của ảnh đã bị loại bỏ, bạn sẽ rất khó để định vị. Vì thế việc không cắt tỉa hình ảnh đảm bảo rằng những hình ảnh khớp với nhau trong một hình ảnh động.

Nguồn: Coronaviet.com