Как я могу быстро проверить, хорошо ли работает мой спрайт?

47

Я пытаюсь создать спрайты тайла карты, которые красиво выкладываются, но проверять, насколько хорошо они выкладывают тайлы, действительно сложно.

В идеале я хотел бы иметь графический редактор, который показывает макет, подобный этому, чтобы я мог видеть, хорошо ли он разбивается на листы без ручной проверки:

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

Какие программы могут сделать это, или как я могу сделать это проще?

sprites tilemap tools workflow user73424
источник
Я думаю, что вы говорите о проверке, работает ли мозаика текстуры без проблем. И у gimp по крайней мере, насколько мне известно, есть render-> map или что-то еще, что делает это. но не во время редактирования. В остальном, у Уолли есть эта особенность, но она чертовски старая. (редактор
текстов Half Life
1
amnoid.de/ddsview поддерживает мозаичный предварительный просмотр многих форматов изображений. А какой графический редактор вы используете? Я уверен, что у этого есть некоторый способ мозаичного изображения.
snake5
1
Какой редактор вы используете? Должна быть возможность взломать что-нибудь вместе с помощью смарт-объектов Photoshop
PlasmaHH,
4
Установите его в качестве фона рабочего стола и выберите опцию «Плитка».
user14146
«Какие программы могут делать это?» Крита может делать это, и это даже позволяет вам задыхаться, когда вы завернуты (см. Ответ ниже)
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-equ = "Refresh" content = "2"> </ header> прямо перед <body>, чтобы страница автоматически загружалась каждые 2 секунды.
Шиван Дракон
7
Или, если вы так склонны, вы можете пойти глубже и настроить инструмент, такой как grunt или gulp, чтобы отслеживать изменения и обновлять браузер в реальном времени, когда вы их вносите.
Сейрия
1
@Kroltan ddsview, как сообщается, имеет специальный «вид плитки». Инструмент заливки GIMP может читать из буфера обмена, который также можно быстро проверить с помощью.
Анко
2
@Anko Верно, но моя точка зрения была для фактического, редактируемого и полностью функционального мозаичного представления. Эти инструменты делают это быстрее, но не беспроблемным процессом (непреднамеренное каламбур).
Кролтан
18

Используя photoshop или GIMP, вы можете использовать команду смещения. Если вы работаете, скажем, с изображением 100x100px, вы можете сместить его на 50px в каждом направлении, и в середине изображения будет отображаться шов, где мозаичные изображения вместе.

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

fabspro
источник
2
В качестве дополнительного бонуса, теперь шов находится прямо в середине изображения, для быстрого и удобного редактирования!
Cort Ammon
17

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

KritaUser00402050
источник
2
Это заслуживает большего количества голосов. Это немного программного обеспечения, которое делает именно то, что требуется в одно нажатие кнопки. А еще лучше, это также позволяет вашей картине обернуться вокруг - что почти наверняка поможет любому, создающему бесшовные текстуры. Вы также должны указать, что Krita бесплатна и может быть загружена; krita.org/download/krita-desktop
темное пламя
1
+1 Если у кого-то есть тот же вопрос, это первый ответ, который он должен увидеть. "Какие программы могут сделать это?" "Krita".
Джибб Смарт
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>
Развернуть фрагмент

aebabis
источник
1
Еще один очень интуитивный ответ. Вы можете создать расширение Chrome или создать настольное приложение Node.js / Electron, используя это.
Дрима
0

В GIMP: Фильтры -> Карта -> Плитка. Если вы измените единицу измерения на «%», а затем введете 300% x 300% для размеров, вы получите мозаичное изображение размером 3x3, которое позволит вам легко увидеть все четыре ребра. Сделав это один раз, вы можете использовать Ctrl-F (повторить последний фильтр), чтобы заново выполнить мозаику после внесения изменений, если, конечно, вы не используете другие фильтры.

Hobbs
источник