Làm cách nào tôi có thể xử lý các tấm sprite với kích thước sprite không dạng?


14

Đối với một spritesheet có kích thước sprite không đồng nhất , làm thế nào tôi có thể có được các hình chữ nhật giới hạn cho mỗi sprite riêng lẻ (tức là các hộp màu xanh trong hình ảnh sau / Tôi chỉ vẽ một vài ví dụ)?

Những gì tôi muốn xác định là: offset_x, offset_y, width, height

nhập mô tả hình ảnh ở đây

Cho đến nay, tôi chỉ sử dụng spritesheets trên đó tất cả các sprite có kích thước giống hệt nhau . Trong trường hợp đó, người ta chỉ cần xác định bù x và y để có được một sprite cụ thể. Tuy nhiên, đối với các spritesheets kích thước không đồng đều, điều này không hoạt động.

EDIT: Sau khi đọc qua các bình luận và câu trả lời, tôi đã đọc lại câu hỏi của mình để làm cho nó trở nên sâu sắc hơn. quá trình thực tế của việc sử dụng một spritesheet trong một trò chơi. Trước đây, câu hỏi chứa đựng những điểm tại sao mọi người tạo ra các spritesheets có kích thước không đồng nhất và làm thế nào tôi có thể đối phó với điều đó.


1
Theo tôi, tất cả chúng đều có kích thước giống hệt nhau, không gian không được lấp đầy bởi màu sắc chỉ là các pixel với giá trị alpha được đặt thành không.
Derek

Câu trả lời:


8

Hầu hết các tấm sprite có kích thước không giống nhau thường có một số loại dữ liệu meta với vị trí neo của sprite. Có rất nhiều công cụ thực hiện những việc như loại bỏ các pixel alpha đầy đủ và cung cấp cho bạn dữ liệu bạn cần để dữ liệu này không được tạo thủ công.

Nếu bạn không có dữ liệu meta này, bạn phải tự mình tạo ra nó. Cách chính xác nhất là cách bạn nói trong câu hỏi của bạn, đó là chỉ làm bằng tay. Nó có thể mất một lúc, nhưng nó có thể nhanh hơn so với việc tạo ra các họa tiết mới.


Điều này - trong khi các phương pháp dựa trên phát hiện tự động có cách sử dụng, trong thực tế, chúng rất khó và dễ bị lỗi. Bạn đã cần siêu dữ liệu về nguồn gốc của ma (sprites của bạn làm có một nguồn gốc, phải không?), Do đó dữ liệu này hầu như không quá nhiều của một gánh nặng. Các nghệ sĩ nên luôn luôn biết rõ hơn ứng dụng của bạn kích thước của các họa tiết cá nhân là gì.
Steven Stadnicki

+1. Cung cấp siêu dữ liệu với sprites được đảm bảo để giải quyết nó sanely .
Bartek Banachewicz

5

Bạn có thể thực hiện phân tích trên hình ảnh để xác định vị trí các hình chữ nhật giới hạn của mỗi sprite, sắp xếp các hình chữ nhật giới hạn đó (có thể bằng cách tăng tối thiểu X, sau đó là Y) và bạn sẽ có một tập hợp các vùng giới hạn tương ứng với các khung của bảng sprite.

Bởi vì quá trình này có thể tương đối tốn kém, có lẽ bạn sẽ muốn thực hiện ngoại tuyến này, ví dụ như là một phần của quá trình xây dựng cho trò chơi của bạn. Sau đó, bạn có thể tuần tự hóa thông tin vùng giới hạn vào một tệp mà bạn lưu trữ với hình ảnh tấm sprite tương ứng. Trong thời gian chạy, bạn tải cả hình ảnh và tệp định nghĩa ranh giới và bạn có thông tin bạn cần để truy cập từng sprite riêng lẻ.

Điều đó nói dễ hơn làm, mặc dù. Về cơ bản, bạn sẽ muốn thực hiện phát hiện tính năngphát hiện blob cụ thể là các vấn đề về thị giác máy. Bạn cũng có thể ngưỡng hình ảnh (sang đen trắng) và sử dụng kỹ thuật phát hiện cạnh . Toán học có liên quan đằng sau các kỹ thuật đó được giải thích tốt hơn nhiều so với các liên kết đó so với tôi có thể, và trong trường hợp bạn không cảm thấy tự mình thực hiện toán học đó, có một vài thư viện có thể hỗ trợ bạn. Nhóm liên kết sau đây có vẻ hứa hẹn nhất với tôi:


1
+1. Tôi đồng ý rằng nó sẽ yêu cầu một số kỹ năng xử lý hình ảnh / nhận thức máy tính để tìm ra giới hạn chính xác. Đôi khi nó thậm chí có thể là không thể, ví dụ nếu bạn nhìn vào hoạt hình rùa để vỏ. Thật khó để xác định vị trí chính xác cho vị trí đó so với các khung hình động khác. Và về lý do : Rất có thể là do sử dụng tối ưu không gian kết cấu. Và thông thường, một tệp có tọa độ sẽ được cung cấp cùng với một spritesheet như vậy, nhưng nếu bạn chỉ đơn giản lấy nó từ tìm kiếm hình ảnh của Google, nó có thể thiếu thông tin này.
bummzack

Bạn nêu lên một điểm tốt: câu trả lời của tôi không đề cập đến vấn đề nguồn gốc sprite; nó sẽ chỉ dẫn đến việc tìm các hình chữ nhật giới hạn phù hợp chặt chẽ, và đối với một tấm có các họa tiết không hình thành, việc biết nguồn gốc của mỗi khung là khá quan trọng. Điều này sẽ khó thực hiện tự động trừ khi bạn đưa ra một số giả định (có thể là tên miền cụ thể), ví dụ: nguồn gốc sẽ luôn là (chiều rộng / 2, tối đa Y) hoặc một cái gì đó.

4

Tôi đã tạo ra công cụ của riêng mình cho loại spritesheet không đồng nhất đó. Nó cho phép chỉnh sửa offset, et cetera. Đây là một ảnh chụp màn hình để cung cấp cho bạn một ý tưởng:

nhập mô tả hình ảnh ở đây


Trông giống như bạn tạo ra một spritesheet thống nhất chỉ chứa một hình ảnh động từ cái không đồng nhất? Hay tôi đang hiểu sai điều này?
Ben

không, tôi mở một spritesheet không đồng nhất và vẽ một hình chữ nhật xung quanh các họa tiết (tự động thu nhỏ lại với kích thước chính xác). Khi tôi đã tạo một hình ảnh động bằng cách lặp lại rằng tôi có thể phát từng hình ảnh động và điều chỉnh bù theo nhu cầu của tôi.
Ẩn danh

Có vẻ như một công cụ rất gọn gàng bạn đã thực hiện ở đó. Tâm trí để chia sẻ công cụ?
eckyputrady

@eckyputrady, tôi xin lỗi nhưng chưa hoàn thành nhưng tôi đề xuất một công cụ khác (về cơ bản đã truyền cảm hứng cho tôi). Bạn có thể tìm thấy nó ở đây: colourclash.com/sprite_buddy/sprite_buddy.html
Ẩn danh

0

Kiểm tra texturepacker

http://www.texturepacker.com/

Nó xuất ra một tệp như thế này (tùy thuộc vào cài đặt được đặt trước của bạn)

    {
    "filename": "image_front_1",
    "frame": {"x":1,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":2,"w":36,"h":40},
    "sourceSize": {"w":36,"h":40}
},
{
    "filename": "image_front_2.png",
    "frame": {"x":36,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":36,"h":42},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_3.png",
    "frame": {"x":71,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_4.png",
    "frame": {"x":106,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
}

Sử dụng dữ liệu này, bạn có thể dễ dàng lấy các hình chữ nhật riêng biệt từ hình ảnh.


Đây không phải là một công nghệ để sử dụng câu hỏi. Theo tôi, chỉ cần trả lời bằng một liên kết đến một công cụ và một ví dụ về đầu ra của nó là không đủ.
MichaelHouse

-1

spritebuddy.com đã làm việc rất tốt cho tôi. Không thể tìm thấy bất kỳ trợ giúp nào trên trang web, nhưng bài đăng trên Google Groups này giải thích điều đó thực sự tốt. Nó tự động đoán giới hạn cho các họa tiết của bạn, cho phép bạn điều chỉnh nó và cho phép bạn sắp xếp chúng thành các chuỗi hoạt hình. Sau đó, nó tạo ra một tệp siêu dữ liệu cho tất cả điều này trong JSON hoặc XML. Sau đó, tất cả những gì bạn phải làm là phân tích tệp dữ liệu đó trong trò chơi của bạn để có được hình chữ nhật giới hạn chính xác.


1
Đây không phải là một công nghệ để sử dụng câu hỏi. Hơn nữa, công cụ này đã được đề xuất trong một trong những ý kiến.
MichaelHouse

Tôi đã cập nhật câu trả lời của mình, nhưng tôi không đồng ý rằng nó không trả lời câu hỏi của OP: "Điều tôi muốn xác định là: offset_x, offset_y, chiều rộng, chiều cao." Việc này có phải xảy ra vào thời gian chạy trò chơi hay không (sẽ không được thực hiện một cách khủng khiếp) hoặc trước đó không được chỉ định. Đối với "EDIT: [...] Tôi đã viết lại câu hỏi của mình để làm cho nó trở nên sâu sắc hơn. Quá trình thực sự sử dụng một spritesheet trong một trò chơi", đây là quá trình của tôi. Tôi tạo tệp JSON thích hợp bằng cách sử dụng spritebuddy sau đó phân tích cú pháp trong trò chơi của mình để lấy dữ liệu tôi cần.
CletusW

1
@CletusW: câu trả lời tốt sẽ giải thích lý do tại sao công cụ đó hoạt động tốt cho quy trình của bạn, nó hoạt động như thế nào và nó giúp ích như thế nào, v.v. Tôi sẽ có thể đọc câu trả lời của bạn và sau đó biết cách chọn công cụ hoặc tự viết. Nếu bạn liên kết đến ví dụ yêu thích của bạn, đó chỉ là phần thưởng, không phải là câu trả lời.
Sean Middleditch
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.