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?
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.
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.
<body style="background: url(tile.jpg) repeat 0 0;">
\$\endgroup\$
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
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)
Make your tile a tiled wallpaper on you desktop. Super easy and no coding or extraneous software.
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\$
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>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.
