Come posso verificare rapidamente se le mie tessere di sprite funzionano bene?

47

Sto cercando di creare gli sprite tilemap che si affiancano bene, ma controllare quanto bene siano davvero ingombranti.

Idealmente, mi piacerebbe avere un editor di immagini che mostri un layout come questo, quindi potrei vedere se si adatta bene senza un controllo manuale:

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

Quali programmi possono fare questo, o come posso altrimenti semplificarlo?

— user73424
fonte

Penso che stai parlando di verificare se la piastrellatura della trama funziona senza problemi. E gimp almeno per quanto ne so ha una render-> map o qualcosa che lo fa. ma non durante la modifica. Altrimenti, Wally ha questa caratteristica, ma è dannatamente vecchia. (editor di texture per la vita a metà vita)

— v.oddou,

1

amnoid.de/ddsview supporta l'anteprima piastrellata di molti formati di immagine. E quale editor di immagini stai usando? Sono sicuro che ha un modo di piastrellare un'immagine.

— snake5,

1

Quale editor stai usando? Dovrebbe essere possibile hackerare qualcosa insieme usando gli oggetti intelligenti di Photoshops

— PlasmaHH,

4

Impostalo come sfondo del desktop e scegli l'opzione "Affianca".

— user14146,

"Quali programmi possono fare questo" Krita può farlo e ti permette persino di ansimare mentre sei avvolto (vedi risposta sotto)

— darkflame

67

Ecco un trucco rapido che funziona con qualsiasi editor di immagini.

Se viene chiamata l'immagine della piastrella tile.png, crearne una index.htmlsimile:

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

^{(Grazie @Deryllium per l'alternativa più semplice!)}

Apri quello in un browser web.

Ogni volta che devi controllare quanto bene i riquadri dell'immagine, salvarli e aggiornare il browser web.

Il collegamento di esportazione di GIMP è Ctrlee il collegamento di aggiornamento di Chromium è . I e sono adiacenti su una QWERTY, quindi è abbastanza veloce da fare.Ctrlrer

— Anko
fonte

10

Molto inventivo! Puoi anche semplificare l'HTML usando<body style="background: url(tile.jpg) repeat 0 0;">

— driima il

15

Puoi anche aggiungere <header> <meta http-equiv = "Aggiorna" content = "2"> </header> subito prima di <body> per fare in modo che la pagina si carichi automaticamente ogni 2 secondi.

— Drago di Shivan,

7

Oppure, se eri così incline, potresti andare più in profondità e impostare uno strumento come grugnito o sorso per guardare le modifiche e ricaricare dal vivo il browser quando le fai.

— Seiyria,

1

Sembra che @Kroltan ddsview abbia una "vista a riquadri " dedicata. Lo strumento di riempimento inondazione di GIMP può leggere dagli appunti, che è anche veloce da testare con.

— Anko,

2

@Anko Vero, ma il mio punto era una vista affiancata reale, modificabile e perfettamente funzionante. Questi strumenti lo rendono più veloce, ma non un processo continuo (gioco di parole involontario).

— Kroltan,

18

Utilizzando Photoshop o GIMP, è possibile utilizzare il comando offset. Se stai lavorando per dire un'immagine 100x100px, puoi sfalsarla di 50px in ogni direzione e la cucitura in cui le tessere dell'immagine saranno visualizzate insieme nel mezzo dell'immagine.

Questa pagina contiene schermate che dimostrano come funziona: http://blogs.adobe.com/jkost/2015/01/how-to-create-a-seamless-pattern-tile-in-photoshop.html

— fabspro
fonte

2

Come bonus aggiuntivo, ora la cucitura si trova proprio nel mezzo dell'immagine, per un editing semplice e veloce!

— Cort Ammon,

17

Krita ha una funzione che ti consente di modificare le trame della piastrellatura e vedere le modifiche aggiornate dal vivo. Premendo il tasto W, abilita la modalità avvolgente, il che lo rende possibile. Un video di YouTube di questa funzione in azione è disponibile qui . (la funzione è abilitata alle 0:12)

— KritaUser00402050
fonte

2

Questo merita più voti. È un po 'di software che fa esattamente ciò che viene richiesto premendo un pulsante. Meglio ancora, consente anche al tuo dipinto di avvolgersi, il che aiuterà quasi sicuramente chiunque a realizzare trame senza soluzione di continuità. Dovresti anche sottolineare che Krita è gratuita e può essere scaricata; krita.org/download/krita-desktop

— darkflame

1

+1 Se qualcuno ha la stessa domanda, questa è la prima risposta che dovrebbero vedere. "Quali programmi possono farlo?" "Krita".

— Jibb Smart,

6

Trasforma la tua piastrella in uno sfondo piastrellato sul desktop. Software super facile e senza codifica o estraneo.

— Rotolo di marmellata
fonte

2

+1 questo funziona spettacolare bene su Linux con inotifywait -m -e modify --format '%w' tile.png | while read file; do feh --bg-tile "$file"; donel'esecuzione. Basta salvare l'immagine; lo sfondo cambia immediatamente. Funziona anche con più file specificati in aggiunta a tile.png. Quando non ho bisogno dello schermo intero, questo è incredibile.

— Anko,

5

Se vuoi testare più immagini, può essere utile avere una mini webapp basata sulla risposta di Anko. Ciò ti consentirà di trascinare le immagini sulla pagina per consentirti di testarle in rapida successione:

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>

Espandi frammento

— aebabis
fonte

1

Un'altra risposta molto intuitiva. È possibile creare un'estensione Chrome o creare un'applicazione desktop Node.js / Electron utilizzando questa.

— driima,

0

In GIMP: Filtri -> Mappa -> Affianca. Se cambi l'unità in "%" e inserisci 300% x 300% per le dimensioni, otterrai una piastrellatura 3x3 dell'immagine, che ti consente di vedere facilmente tutti e quattro i bordi. Dopo averlo fatto una volta, puoi usare Ctrl-F (ripeti l'ultimo filtro) per ripetere la piastrellatura dopo aver apportato modifiche, purché non utilizzi altri filtri, ovviamente.

— Hobbs
fonte