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

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

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

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

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

47 голосов | спросил user73424 16 +03002015-10-16T08:54:44+03:00312015bEurope/MoscowFri, 16 Oct 2015 08:54:44 +0300 2015, 08:54:44

6 ответов


67

Вот быстрый хак, который работает с любым редактором изображений.

Если ваше изображение в виде плитки называется tile.png, создайте index.html, как это:

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

(Спасибо @Deryllium для более простой альтернативы!)

Откройте это в веб-браузере.

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

 рабочий процесс

ярлык экспорта GIMP - Ctrl e и ярлык refresh Chromium CTRL т . e и r расположены рядом с QWERTY, поэтому это довольно быстро сделать.

ответил Anko 16 +03002015-10-16T14:11:51+03:00312015bEurope/MoscowFri, 16 Oct 2015 14:11:51 +0300 2015, 14:11:51
18

Используя Photoshop или GIMP, вы можете использовать команду offset. Если вы работаете, скажем, изображение 100x100px, вы можете компенсировать его 50 пикселей в каждом направлении, а шов, в котором будет отображаться фрагмент изображения, будет отображаться в середине изображения.

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

ответил fabspro 17 +03002015-10-17T07:21:55+03:00312015bEurope/MoscowSat, 17 Oct 2015 07:21:55 +0300 2015, 07:21:55
17

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

ответил KritaUser00402050 17 +03002015-10-17T18:02:47+03:00312015bEurope/MoscowSat, 17 Oct 2015 18:02:47 +0300 2015, 18:02:47
6

Сделайте свою плитку черепичными обоями на рабочем столе. Супер легко и без кодирования или постороннего программного обеспечения.

ответил Jam Roll 18 +03002015-10-18T22:18:39+03:00312015bEurope/MoscowSun, 18 Oct 2015 22:18:39 +0300 2015, 22:18:39
5

Если вы хотите протестировать несколько изображений, это может помочь получить мини-webapp на основе ответа Anko. Это позволит вам перетаскивать изображения на страницу, чтобы вы могли быстро протестировать их:

 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>
ответил acbabis 17 +03002015-10-17T01:19:27+03:00312015bEurope/MoscowSat, 17 Oct 2015 01:19:27 +0300 2015, 01:19:27
0

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

ответил hobbs 18 +03002015-10-18T11:03:37+03:00312015bEurope/MoscowSun, 18 Oct 2015 11:03:37 +0300 2015, 11:03:37

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132