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

47

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

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

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

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

— user73424
джерело

Я думаю, ви говорите про перевірку того, чи працює безшовна плитка текстури. І gimp, принаймні, наскільки мені відомо, має візуалізацію -> карту або щось, що робить це. але не під час редагування. Інакше у валлі є ця особливість, але її чорт старий. (редактор текстур напівжиття)

— v.oddou

1

amnoid.de/ddsview підтримує попередній перегляд плиток для багатьох форматів зображень. А який редактор зображень ви використовуєте? Я впевнений, що це певний спосіб накладення зображення.

— змія5

1

Який редактор ви використовуєте? Потрібно мати можливість зламати щось разом, використовуючи розумні об’єкти Photoshops

— PlasmaHH

4

Встановіть його як фон робочого столу та виберіть варіант «Плитка».

— користувач14146

"Які програми можуть це зробити" Krita може це зробити, і це навіть дозволяє вам задихатися під час загортання (див. Відповідь нижче)

— darkflame

67

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

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

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

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

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

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

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

— Анко
джерело

10

Дуже винахідливий! Також ви можете зробити HTML простішим, скориставшись<body style="background: url(tile.jpg) repeat 0 0;">

— driima

15

Ви також можете додати <header> <meta http-equiv = "Refresh" content = "2"> </header> перед <body>, щоб зробити сторінку автоматично завантажуватися кожні 2 секунди.

— Дракон Шиван

7

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

— Сейрія

1

@Kroltan ddsview, як повідомляється, має спеціальний "вид плитки". Інструмент заповнення GIMP може читати з буфера обміну, який також швидко перевірити за допомогою.

— Анко

2

@Anko Щоправда, але моя думка стосувалася фактичного, редагованого та повністю функціонального перегляду плитки. Ці інструменти роблять його швидшим, але не безпроблемним процесом (ненавмисне каламбур).

— Кролтан

18

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

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

— fabspro
джерело

2

Як додатковий бонус, тепер шов знаходиться прямо посередині зображення, для швидкого та простого редагування!

— Корт Аммон

17

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

— KritaUser00402050
джерело

2

Це заслуговує більшої кількості результатів. Це трохи програмного забезпечення, яке робить саме те, що вимагається одним натисканням кнопки. А ще краще, вона також дозволяє вашій картині також обернутися - що майже напевно допоможе кожному, хто робить безшовні текстури. Також слід зазначити, що Krita безкоштовна і її можна завантажити; krita.org/download/krita-desktop

— darkflame

1

+1 Якщо хтось має те саме питання, це перша відповідь, яку вони повинні побачити. "Які програми можуть це зробити?" "Кріта".

— Jibb Smart

6

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

— Джем Ролл
джерело

2

+1 Це надзвичайно добре працює в Linux із inotifywait -m -e modify --format '%w' tile.png | while read file; do feh --bg-tile "$file"; doneзапуском. Просто збережіть зображення; шпалери змінюються негайно. Також працює з декількома файлами, вказаними на додаток до tile.png. Коли мені не потрібен повноекранний, цей камінь.

— Анко

5

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

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

Ще одна дуже інтуїтивна відповідь. Ви можете створити хромоване розширення або створити настільний додаток Node.js / Electron за допомогою цього.

— driima

0

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

— варильні панелі
джерело