47
\$\begingroup\$

I am trying to create tilemap sprites that tile nicely, but checking how well they tile is really cumbersome.

Ideally, I'd like to have an image editor that shows a layout like this, so I could see if it tiles well without a manual check:

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

What programs can do this, or how can I otherwise make this easier?

\$\endgroup\$
  • \$\begingroup\$ I think you're talking about checking if texture tiling works seamlessly. And gimp at least to my knowledge has a render->map or something function that does that. but not while editing. Otherwise, wally has this feature, but its damn old. (half life texture editor) \$\endgroup\$ – v.oddou Oct 16 '15 at 6:19
  • 1
    \$\begingroup\$ amnoid.de/ddsview supports tiled preview of many image formats. And which image editor are you using? I'm sure it has some way of tiling an image. \$\endgroup\$ – snake5 Oct 16 '15 at 10:45
  • 1
    \$\begingroup\$ Which editor are you using? It should be possible to hack something together using Photoshops smart objects \$\endgroup\$ – PlasmaHH Oct 16 '15 at 17:01
  • 4
    \$\begingroup\$ Set it as your desktop background, and choose the "Tile" option. \$\endgroup\$ – user14146 Oct 16 '15 at 18:16
  • \$\begingroup\$ "What programs can do this" Krita can do this and it even lets you pant while wrapped (see answer below) \$\endgroup\$ – darkflame Oct 19 '15 at 13:51
67
\$\begingroup\$

Here's a quick hack that works with any image editor.

If your tile image is called tile.png, create an index.html like this:

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

(Thanks @Deryllium for the simpler alternative!)

Open that in a web browser.

Whenever you need to check how well the image tiles, save it, and refresh the web browser.

the workflow

GIMP's export shortcut is Ctrle and Chromium's refresh shortcut is Ctrlr. The e and r are adjacent on a QWERTY, so this is pretty fast to do.

\$\endgroup\$
  • 10
    \$\begingroup\$ Very inventive! You can also make the HTML simpler by using <body style="background: url(tile.jpg) repeat 0 0;"> \$\endgroup\$ – driima Oct 16 '15 at 11:31
  • 15
    \$\begingroup\$ You can also add <header><meta http-equiv="Refresh" content="2"></header> right before the <body> to make the page auto-load every 2 seconds. \$\endgroup\$ – Shivan Dragon Oct 16 '15 at 13:36
  • 7
    \$\begingroup\$ Or, if you were so inclined, you could go deeper and set up a tool like grunt or gulp to watch for changes and live-reload the browser when you make them. \$\endgroup\$ – Seiyria Oct 16 '15 at 13:52
  • 1
    \$\begingroup\$ @Kroltan ddsview reportedly has a dedicated "tile view". GIMP's flood-fill tool can read from the clipboard, which is also fast to test with with. \$\endgroup\$ – Anko Oct 16 '15 at 22:33
  • 2
    \$\begingroup\$ @Anko True, but my point was for an actual, editable, and fully functional tiled view. These tools make it faster, but not a seamless process (unintentional pun). \$\endgroup\$ – Kroltan Oct 16 '15 at 22:35
18
\$\begingroup\$

Using photoshop or GIMP, you can use the offset command. If you are working for say a 100x100px image, you can offset it 50px in each direction, and the seam where the image tiles together will be displayed in the middle of the image.

This page has screenshots demonstrating how this works: http://blogs.adobe.com/jkost/2015/01/how-to-create-a-seamless-pattern-tile-in-photoshop.html

\$\endgroup\$
  • 2
    \$\begingroup\$ As an added bonus, now the seam is right in the middle of the image, for quick and easy editing! \$\endgroup\$ – Cort Ammon Oct 19 '15 at 6:38
17
\$\begingroup\$

Krita has a feature that allows you to edit tiling textures and see the changes update live. By pressing the W key, it enables wrap around mode, which makes this possible. A youtube video of this feature in action is available here. (feature is enabled at 0:12)

\$\endgroup\$
  • 2
    \$\begingroup\$ This deserves more upvotes. Its a bit of software that does exactly what is asked for in one button press. Better yet, it also lets your painting to wrap around too - which is almost certainly going to help anyone making seamless textures. You should also point out Krita is free and can be downloaded; krita.org/download/krita-desktop \$\endgroup\$ – darkflame Oct 19 '15 at 13:47
  • 1
    \$\begingroup\$ +1 If someone has the same question, this is the first answer they should see. "What programs can do this?" "Krita". \$\endgroup\$ – Jibb Smart Oct 19 '15 at 13:54
6
\$\begingroup\$

Make your tile a tiled wallpaper on you desktop. Super easy and no coding or extraneous software.

\$\endgroup\$
  • 2
    \$\begingroup\$ +1 This works spectacularly well on Linux with inotifywait -m -e modify --format '%w' tile.png | while read file; do feh --bg-tile "$file"; done running. Just save the image; wallpaper changes immediately. Also works with multiple files specified in addition to tile.png. When I don't need fullscreen, this rocks. \$\endgroup\$ – Anko Oct 18 '15 at 22:59
5
\$\begingroup\$

If you want to test multiple images, it may help to have an mini webapp based on Anko's answer. This will let you drag images onto the page to let you test them in quick succession:

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>

\$\endgroup\$
  • 1
    \$\begingroup\$ Another very intuitive answer. You could create a chrome extension or create a Node.js / Electron desktop application using this. \$\endgroup\$ – driima Oct 18 '15 at 13:39
0
\$\begingroup\$

In GIMP: Filters -> Map -> Tile. If you change the unit to "%" and then enter 300% x 300% for the dimensions, you'll get a 3x3 tiling of your image, which lets you see all four edges easily. After doing it once you can use Ctrl-F (repeat last filter) to re-do the tiling after making modifications, as long as you don't use any other filters of course.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.