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

47

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

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

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

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

— 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
источник