Làm thế nào tôi có thể nhanh chóng kiểm tra nếu gạch sprite của tôi tốt?


47

Tôi đang cố gắng tạo ra các họa tiết tilemap độc đáo, nhưng kiểm tra xem chúng thực sự tốt đến mức nào.

Lý tưởng nhất là tôi muốn có một trình chỉnh sửa hình ảnh hiển thị bố cục như thế này, vì vậy tôi có thể xem liệu nó có xếp gạch tốt hay không mà không cần kiểm tra thủ công:

     [img]
[img][img][img]
     [img]

Những chương trình nào có thể làm điều này, hoặc làm thế nào tôi có thể làm điều này dễ dàng hơn?


Tôi nghĩ rằng bạn đang nói về việc kiểm tra xem ốp lát kết cấu có hoạt động trơn tru không. Và ít nhất kiến ​​thức của tôi có một kết xuất-> bản đồ hoặc một chức năng nào đó thực hiện điều đó. nhưng không phải trong khi chỉnh sửa. Mặt khác, wally có tính năng này, nhưng nó cũ chết tiệt. (trình chỉnh sửa kết cấu nửa đời)
v.oddou

1
amnoid.de/ddsview hỗ trợ xem trước lát gạch của nhiều định dạng hình ảnh. Và bạn đang sử dụng trình chỉnh sửa hình ảnh nào? Tôi chắc chắn rằng nó có một số cách ốp lát một hình ảnh.
rắn5

1
Bạn đang sử dụng trình soạn thảo nào? Có thể hack một cái gì đó cùng nhau bằng cách sử dụng các đối tượng thông minh Photoshops
PlasmaHH

4
Đặt nó làm nền màn hình của bạn và chọn tùy chọn "Ngói".
dùng14146

"Những chương trình nào có thể làm được điều này" Krita có thể làm điều này và thậm chí nó còn cho phép bạn thở hổn hển trong khi quấn (xem câu trả lời bên dưới)
darkflame

Câu trả lời:


67

Đây là một bản hack nhanh hoạt động với bất kỳ trình chỉnh sửa hình ảnh nào.

Nếu hình ảnh gạch của bạn được gọi tile.png, hãy tạo một hình index.htmlnhư thế này:

<body style="background:url(tile.png) repeat 0 0"></body>

(Cảm ơn @Deryllium vì sự thay thế đơn giản hơn!)

Mở nó trong một trình duyệt web.

Bất cứ khi nào bạn cần kiểm tra các ô hình ảnh tốt như thế nào, hãy lưu nó và làm mới trình duyệt web.

quy trình làm việc

Phím tắt xuất của GIMPCtrlevà phím tắt làm mới của Chromium là . Các và liền kề trên một phím QWERTY, vì vậy đây là khá nhanh để làm.Ctrlrer


10
Rất sáng tạo! Bạn cũng có thể làm cho HTML đơn giản hơn bằng cách sử dụng<body style="background: url(tile.jpg) repeat 0 0;">
Driima

15
Bạn cũng có thể thêm <tiêu đề> <meta http-Equiv = "Làm mới" nội dung = "2"> </ tiêu đề> ngay trước <body> để làm cho trang tự động tải mỗi 2 giây.
Shivan Dragon

7
Hoặc, nếu bạn rất có khuynh hướng, bạn có thể tìm hiểu sâu hơn và thiết lập một công cụ như grunt hoặc gulp để theo dõi các thay đổi và tải lại trực tiếp trình duyệt khi bạn thực hiện chúng.
Seiyria

1
@Kroltan ddsview được báo cáo có một "chế độ xem gạch" chuyên dụng. Công cụ lấp đầy của GIMP có thể đọc từ bảng ghi tạm, cũng rất nhanh để kiểm tra.
Anko

2
@Anko Đúng, nhưng quan điểm của tôi là về một góc nhìn thực tế, có thể chỉnh sửa và đầy đủ chức năng. Những công cụ này làm cho nó nhanh hơn, nhưng không phải là một quá trình liền mạch (chơi chữ không chủ ý).
Kroltan

18

Sử dụng photoshop hoặc GIMP, bạn có thể sử dụng lệnh offset. Nếu bạn đang làm việc để nói một hình ảnh 100x100px, bạn có thể bù nó 50px theo mỗi hướng và đường nối nơi các hình ảnh ghép lại với nhau sẽ được hiển thị ở giữa hình ảnh.

Trang này có ảnh chụp màn hình cho thấy cách thức hoạt động của nó: http://bloss.adobe.com/jkost/2015/01/how-to-create-a-siền-potype-tile-in-photoshop.html


2
Là một phần thưởng bổ sung, bây giờ đường may nằm ngay giữa hình ảnh, để chỉnh sửa nhanh chóng và dễ dàng!
Cort Ammon

17

Krita có một tính năng cho phép bạn chỉnh sửa họa tiết ốp lát và xem cập nhật thay đổi trực tiếp. Bằng cách nhấn phím W, nó cho phép quấn quanh chế độ, điều này giúp điều này trở nên khả thi. Một video youtube của tính năng này hoạt động có sẵn ở đây . (tính năng được bật vào lúc 0 giờ 12 phút)


2
Điều này xứng đáng được nâng cao hơn. Đó là một chút phần mềm thực hiện chính xác những gì được yêu cầu trong một lần nhấn nút. Tốt hơn nữa, nó cũng cho phép bức tranh của bạn cũng được bao bọc - điều gần như chắc chắn sẽ giúp bất cứ ai tạo ra kết cấu liền mạch. Bạn cũng nên chỉ ra Krita là miễn phí và có thể được tải xuống; krita.org/doad/krita-desktop
darkflame

1
+1 Nếu ai đó có cùng câu hỏi, đây là câu trả lời đầu tiên họ nên xem. "Những chương trình có thể làm điều này?" "Krita".
Jibb Smart

6

Làm cho gạch của bạn một hình nền lát gạch trên máy tính để bàn của bạn. Siêu dễ dàng và không có phần mềm mã hóa hoặc ngoại lai.


2
1 này hoạt động ngoạn mục cũng trên Linux với inotifywait -m -e modify --format '%w' tile.png | while read file; do feh --bg-tile "$file"; donechạy. Chỉ cần lưu hình ảnh; thay đổi hình nền ngay lập tức. Cũng hoạt động với nhiều tập tin được chỉ định thêm vào tile.png. Khi tôi không cần toàn màn hình, đá này.
Anko

5

Nếu bạn muốn kiểm tra nhiều hình ảnh, có thể có một ứng dụng web nhỏ dựa trên câu trả lời của Anko. Điều này sẽ cho phép bạn kéo hình ảnh lên trang để cho phép bạn kiểm tra chúng liên tiếp:

window.addEventListener('load', function() {
  document.body.addEventListener('dragover', function(event) {
    // Accept the drag
    event.preventDefault();
  });

  document.body.addEventListener('drop', function(event) {
    // Prevent page redirect
    event.stopPropagation();
    event.preventDefault();

    var reader = new FileReader();

    reader.onload = function(e) {
      // Set background image
      document.body.style.background = 'url(' + e.target.result + ') repeat 0 0';
      document.body.textContent = ''; // Remove instructions
    };

    // Begin reading file
    reader.readAsDataURL(event.dataTransfer.files[0]);
  });
});
html, body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

html {
  border: 2px dashed black;
}

body {
  padding: 10px;
}
<p>Drag an image here</p>


1
Một câu trả lời rất trực quan. Bạn có thể tạo tiện ích mở rộng chrome hoặc tạo ứng dụng máy tính để bàn Node.js / Electron bằng cách này.
Driima

0

Trong GIMP: Bộ lọc -> Bản đồ -> Ngói. Nếu bạn thay đổi đơn vị thành "%" và sau đó nhập 300% x 300% cho kích thước, bạn sẽ nhận được hình ảnh xếp hình 3x3, cho phép bạn nhìn thấy cả bốn cạnh một cách dễ dàng. Sau khi thực hiện một lần, bạn có thể sử dụng Ctrl-F (lặp lại bộ lọc cuối cùng) để thực hiện lại lát gạch sau khi thực hiện sửa đổi, miễn là bạn không sử dụng bất kỳ bộ lọc nào khác.

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.