Як я можу швидко перевірити, чи добре спрацьовує плитка спрайт?

Я намагаюся створити спрацьовані кахельні карти, які добре плитку, але перевіряю, наскільки вони плитки справді громіздкі.

В ідеалі я хотів би мати редактор зображень, який показує такий макет, щоб я міг бачити, чи добре він плитки без ручної перевірки:

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

Які програми можуть це зробити, або як мені інакше зробити це простіше?

Ось швидкий злом, який працює з будь-яким редактором зображень.

Якщо ваше зображення плитки називається tile.png, створіть index.htmlтакий:

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

^{(Дякую @Deryllium за більш просту альтернативу!)}

Відкрийте це у веб-браузері.

Щоразу, коли вам потрібно перевірити, наскільки добре плитка зображення, збережіть її та оновіть веб-браузер.

GIMP «s експорт ярлик Ctrleі Chromium » s Оновити ярлик Ctrlr. eІ rпримикають на QWERTY, так що це досить швидко зробити.

За допомогою Photoshop або GIMP можна використовувати команду offset. Якщо ви працюєте над скажімо зображення розміром 100x100px, ви можете змістити його 50px у кожному напрямку, а шов, у якому плитки зображень разом, відображатиметься посередині зображення.

На цій сторінці є скріншоти, що демонструють, як це працює: http://blogs.adobe.com/jkost/2015/01/how-to-create-a-seamless-pattern-tile-in-photoshop.html

У Krita є функція, яка дозволяє редагувати текстури плитки та бачити оновлення змін у прямому ефірі. Натискаючи клавішу W, вона дозволяє обертати режим, що робить це можливим. YouTube відео цієї функції в дії можна тут . (функція ввімкнена о 0:12)

Зробіть плитку плиткою шпалер на робочому столі. Супер легко і без кодування або стороннього програмного забезпечення.

Якщо ви хочете протестувати декілька зображень, може допомогти створити міні-веб-перелік, заснований на відповіді Анко. Це дозволить вам перетягувати зображення на сторінку, щоб вони швидко перевіряли їх:

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>

У GIMP: Фільтри -> Карта -> Плитка. Якщо ви зміните одиницю на "%", а потім введіть 300% x 300% для розмірів, ви отримаєте 3x3 плитку вашого зображення, яка дозволяє легко бачити всі чотири ребра. Зробивши це один раз, ви можете використовувати Ctrl-F (повторити останній фільтр), щоб повторно виконати плитку після внесення змін, якщо ви, звичайно, не використовуєте жодних інших фільтрів.