Comment puis-je vérifier rapidement si mon image de pointage est bien placée?

47

J'essaie de créer des sprites tilemap qui juxtaposent joliment, mais vérifier leur qualité est vraiment compliqué.

Idéalement, j'aimerais avoir un éditeur d'image qui montre une mise en page comme celle-ci, afin de voir s'il est bien affiché sans vérification manuelle:

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

Quels programmes peuvent le faire, ou comment puis-je le rendre plus facile?

sprites tilemap tools workflow utilisateur73424
la source
Je pense que vous parlez de vérifier si le pavage de texture fonctionne de manière transparente. Et Gimp, à ma connaissance au moins, a une fonction render-> map ou quelque chose qui le fait. mais pas pendant l'édition. Sinon, Wally a cette fonctionnalité, mais c'est foutrement vieux. (éditeur de texture de demi-vie)
v.oddou
1
amnoid.de/ddsview prend en charge la prévisualisation en mosaïque de nombreux formats d'image. Et quel éditeur d'images utilisez-vous? Je suis sûr qu'il y a un moyen de paver une image.
snake5
1
Quel éditeur utilisez-vous? Il devrait être possible de pirater quelque chose ensemble à l'aide d'objets intelligents Photoshops
PlasmaHH
4
Définissez-le comme fond d'écran et choisissez l'option "Mosaïque".
user14146
"Quels programmes peuvent faire cela" Krita peut le faire et vous permet même de haleter tout en étant emballé (voir la réponse ci-dessous)
darkflame

Réponses:

67

Voici un petit hack qui fonctionne avec n’importe quel éditeur d’image.

Si votre image de mosaïque est appelée tile.png, créez-en une index.htmlcomme ceci:

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

(Merci @ Deryllium pour l'alternative plus simple!)

Ouvrez cela dans un navigateur Web.

Chaque fois que vous devez vérifier si l’image est mise en mosaïque, enregistrez-la et actualisez le navigateur Web.

le flux de travail

GIMP est l' exportation raccourci est Ctrleet chrome 's rafraîchissement raccourci est Ctrlr. Les eet rsont adjacents sur un clavier QWERTY, c'est donc assez rapide à faire.

Anko
la source
10
Très inventif! Vous pouvez aussi simplifier le code HTML en utilisant<body style="background: url(tile.jpg) repeat 0 0;">
driima
15
Vous pouvez également ajouter <header> <meta http-equiv = "Refresh" content = "2"> </ header> juste avant le <body> pour que la page se charge automatiquement toutes les 2 secondes.
Shivan Dragon
7
Ou, si vous le vouliez, vous pouvez aller plus loin et configurer un outil tel que grunt ou gulp pour surveiller les changements et recharger le navigateur en temps réel lorsque vous les apportez.
Seiyria
1
@Kroltan ddsview aurait une "vue de tuiles" dédiée. L'outil de remplissage de GIMP peut lire dans le presse-papier, qui est également rapide à tester avec.
Anko
2
@ Anko C'est vrai, mais mon point était pour une vue en mosaïque réelle, modifiable et entièrement fonctionnelle. Ces outils accélèrent le processus, mais ne constituent pas un processus transparent (jeu de mots involontaire).
Kroltan
18

En utilisant photoshop ou GIMP, vous pouvez utiliser la commande offset. Si vous travaillez pour une image de 100 x 100 pixels, par exemple, vous pouvez la décaler de 50 pixels dans chaque direction, ainsi que la couture où les mosaïques d’images seront affichées au centre de l’image.

Cette page contient des captures d'écran montrant comment cela fonctionne: http://blogs.adobe.com/jkost/2015/01/how-to-create-a-seamless-pattern-tile-in-photoshop.html

fabspro
la source
2
En prime, la couture est maintenant au centre de l'image pour un montage rapide et facile!
Cort Ammon
17

Krita a une fonctionnalité qui vous permet d’éditer les textures de tuilage et de voir les modifications se mettre à jour en direct. En appuyant sur la touche W, vous activez le mode bouclé, ce qui rend cela possible. Une vidéo youtube de cette fonctionnalité en action est disponible ici . (fonctionnalité activée à 0:12)

KritaUser00402050
la source
2
Cela mérite plus de votes positifs. C'est un peu un logiciel qui fait exactement ce qui est demandé en appuyant sur un bouton. Mieux encore, cela permet également à votre peinture de s’enrouler - ce qui aidera presque certainement toute personne à créer des textures homogènes. Notez également que Krita est gratuit et peut être téléchargé. krita.org/download/krita-desktop
darkflame
1
+1 Si quelqu'un a la même question, c'est la première réponse qu'ils devraient voir. "Quels programmes peuvent faire cela?" "Krita".
Jibb Smart
6

Faites de votre carreau un papier peint en mosaïque sur votre bureau. Super facile et aucun logiciel de codage ou étranger.

Rouleau de confiture
la source
2
+1 Cela fonctionne spectaculairement bien sous Linux en inotifywait -m -e modify --format '%w' tile.png | while read file; do feh --bg-tile "$file"; donecours d' exécution. Il suffit de sauvegarder l'image. Le papier peint change immédiatement. Fonctionne également avec plusieurs fichiers spécifiés en plus de tile.png. Quand je n'ai pas besoin du plein écran, ça bascule.
Anko
5

Si vous souhaitez tester plusieurs images, il peut être utile de disposer d'une mini-application Web basée sur la réponse d'Anko. Cela vous permettra de faire glisser des images sur la page pour vous permettre de les tester rapidement:

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>
Développer l'extrait

Aebabis
la source
1
Une autre réponse très intuitive. Vous pouvez créer une extension chrome ou créer une application de bureau Node.js / Electron en l'utilisant.
driima
0

Dans GIMP: Filtres -> Carte -> Mosaïque. Si vous modifiez l'unité en "%", puis entrez 300% x 300% pour les dimensions, vous obtiendrez une mosaïque 3x3 de votre image, ce qui vous permettra de voir facilement les quatre bords. Après l'avoir fait une fois, vous pouvez utiliser Ctrl-F (répéter le dernier filtre) pour refaire la mosaïque après avoir apporté des modifications, à condition de ne pas utiliser d'autres filtres bien sûr.

Hobbs
la source