Aseprite: come creare un tema

Ciao e benvenuto nella mia guida su come regolare un tema in aseprite. In Temi Aseprite determina l'aspetto del programma usando questo tutorial sarai in grado di personalizzare aseprite per il tuo stile. I temi non influiscono sui colori utilizzati sulla tela come la scacchiera che indica lo sfondo trasparente e la griglia che possono essere regolati nelle proprie sezioni nel menu Preferenze. Avrai bisogno di un programma come Winrar per creare file Zip. Sono un manichino in qualsiasi tipo di codifica, quindi questo è principalmente solo un "sostituisci questo numero con un numero diverso per questo effetto" sorta di tutorial niente di troppo stravagante.
------------------------

Ad ogni modo, prima di creare il tuo tema faremo semplicemente una copia del tema aseprite predefinito. Il modo più semplice per farlo è navigare nel menu Temi (Modifica->Preferenze->Temi), quindi selezionare "predefinito" e fare clic su Apri cartella.
------------------------

Copia tutti i file, quindi vai in un luogo accessibile come documenti/download/immagini. Lì creerai la tua cartella, puoi nominarla come desideri, quindi ti consiglio di aderire allo schema di denominazione che aseprite sembra avere ("nome del tema-tema").
------------------------

I file sono i seguenti: il file "LICENZA" è un file di testo con cui non hai davvero bisogno di pasticciare a meno che tu non stia pianificando di distribuire/vendere il tuo tema probabilmente. Il file "pacchetto" è una sorta di informazioni sul progetto sul tuo tema. Il file "sheet.aseprite-data" è un file che aseprite genera non è necessario pasticciare con questo credo. Il file "foglio" è un'immagine di tutte le icone/elementi dell'interfaccia utente, tutto qui può essere ricolorato o completamente ridisegnato a tuo piacimento! Infine, il file "tema" è quello che usi per regolare i colori, le dimensioni, i caratteri, la dimensione delle icone/elementi dell'interfaccia utente, la posizione delle icone/elementi dell'interfaccia utente nel file "foglio" e i loro nomi, e sono sicuro che molto di più. Innanzitutto dovremmo concentrarci sul file "pacchetto" per iniziare. Selezionalo, quindi fai clic con il pulsante destro del mouse e Apri con Blocco note o un equivalente. (suggerimento speciale, puoi regolare la dimensione del testo nel Blocco note tenendo premuto Ctrl e scorrendo)
------------------------

Incontrerai del codice, ma non troppo fortunatamente. Quando modifichi il testo, assicurati di non eliminare virgole e virgolette. Fortunatamente stiamo modificando una copia dell'impostazione predefinita, quindi il file predefinito effettivo dovrebbe sempre essere disponibile su cui ripiegare. Ad ogni modo, prima vorrai rinominare "aseprite-theme" con il nome della cartella in cui si trovano questi file. Quindi "Tema predefinito Aseprite" con il nome del tuo tema. Puoi regolare anche il resto delle cose, ma sono per lo più importanti solo se stai distribuendo o condividendo il tuo tema con gli altri. Infine vedrai un "predefinito" accanto alle parole "id" e "percorso", questo è in realtà qualcosa che devi rinominare, cambialo con il nome del tuo tema. Quindi salva il file ed esci.
------------------------

In qualsiasi momento ora puoi comprimere la cartella del tema che hai creato in un file zip usando winrar e aggiungerlo ad aseprite come nuova estensione/tema. Ti consiglio di testare il tuo tema molto spesso mentre lo stai realizzando, il che può essere doloroso. Ma meglio che aggiustare qualcosa di sbagliato e non sapere cosa fosse. Quindi, prima di mostrare come regolare visivamente il tuo tema, ti mostrerò come aggiungere il tuo tema ad aseprite in modo che tu possa vedere come appare mentre lo stai realizzando in seguito. Per prima cosa devi trasformarlo in uno ZIP, per comprimerlo basta fare clic con il tasto destro sulla cartella con winrar installato e fare clic su "Aggiungi all'archivio..." tutto ciò che devi fare è selezionare ZIP in formato archivio. Questo dovrebbe fare una copia ZIP del tuo progetto. Non devi preoccuparti del nome dello ZIP, quindi anche se si chiama mytheme(19645) andrà bene a causa di ciò che abbiamo modificato nel file "pacchetto".
------------------------

Dopodiché, per installare un tema in aseprite, vai al menu Estensioni (Modifica-> Preferenze-> Estensioni) e fai clic su Aggiungi estensione. Quindi vai alla cartella facile da individuare in cui hai inserito la cartella zip/progetto e fai doppio clic sul tuo ZIP per aggiungerlo come estensione. Quindi per applicare il tuo tema passa al menu "Tema" e fai doppio clic su di esso dall'elenco (il doppio clic è molto importante se selezioni il tema e premi ok o applicalo non cambierà il tema, questa piccola stranezza mi ha fatto penso che non stavo creando il mio tema correttamente per tipo un'ora). Quindi ricorda di tornare al menu delle estensioni e disinstallare il tema se non è pronto.
------------------------

Ora dovresti essere pronto per cambiare effettivamente le cose per il tuo tema. Torna alla versione decompressa del tuo progetto. Innanzitutto il file "foglio", non aprire questo file in MS paint poiché ms paint non supporta la trasparenza. Ovviamente vorrai modificare questo file in modo asettico! Prima di tutto noterai molte linee che indicano le fette (se non desideri vederle puoi andare su Visualizza->Mostra->Slice). Il creatore di aseprite ha incluso questo per noi e stanno mostrando la dimensione degli sprite per ogni icona/9splice/ect. Cerca di rimanere all'interno delle caselle da loro indicate per semplici temi di ricolorazione. Puoi anche creare il tuo foglio sprite e quando arriviamo al file "tema" puoi reindirizzare le posizioni di ciò che stai sostituendo a quell'immagine anziché a questa. Probabilmente riconoscerai la maggior parte delle icone qui se hai usato molto aseprite, cerca qualsiasi cosa con bordi arrotondati sull'interfaccia utente Se ha bordi arrotondati è probabilmente una giunzione 9 e indicata su questo foglio. Si noti che alcuni colori hanno trasparenza che potrebbero non essere visualizzati bene sulla scacchiera grigia predefinita di aseprite.
------------------------

Ecco alcune immagini incluse per avere un'idea di dove potrebbero trovarsi alcune delle 9 giunzioni sul foglio. C'è un 9splice per i pulsanti in uno stato non premuto, posizionato sopra e premuto, quindi tienilo a mente. Anche le barre di scorrimento, le selezioni nei menu a discesa e le caselle di input hanno i propri colori. A cosa serve esattamente ogni giunzione è nel file "tema" se desideri regolare i colori da una direzione più in stile programmatore.
------------------------

 

Può essere difficile indovinare cosa va dove nel foglio dello sprite, quindi rendere le cose di un colore sbalorditivo può aiutare a risolvere un po' i problemi. Puoi anche guardare la sezione Parti del file "Tema" per trovare i nomi e le coordinate x/y dell'angolo in alto a sinistra di ogni sprite, ma i nomi non sono sempre molto chiari su cosa va dove in aseprite.
------------------------

Il file "tema" viene aperto in modo simile al file "pacchetto". Seleziona e apri nel Blocco note. Questo file è il punto in cui esegui tutte le altre regolazioni e può essere molto opprimente. Farò del mio meglio per abbatterlo. Per prima cosa puoi modificare il nome del tuo tema (per scopi organizzativi) e il ridimensionamento dello schermo e dell'interfaccia utente. Il ridimensionamento dello schermo regola la tela che credo e il ridimensionamento dell'interfaccia utente regola la finestra dell'interfaccia utente. Ciò che hai inserito qui viene memorizzato solo come valori interi e viene quindi moltiplicato per la scala originale... esempio: il ridimensionamento dello schermo 1 si tradurrebbe in un ingrandimento del 100%, il ridimensionamento dello schermo 1.9 si tradurrebbe in un ingrandimento del 100%, il ridimensionamento dello schermo 2 si tradurrebbe in un ingrandimento del 200% . Non eccezionalmente utile per il monitor medio, ma probabilmente utile se stai usando un proiettore mentre sei sdraiato a letto e quant'altro. Quindi un altro posto per inserire il tuo nome come merito per aver creato questo tema.
------------------------

Quindi l'opzione per cambiare il carattere utilizzato in aseprite. Le opzioni dei caratteri predefiniti da inserire qui sono limitate, se vuoi cambiare il carattere vai alla cartella dei caratteri nella cartella dei dati di aseprite (Aseprite\data\fonts) Lì vedrai 2 immagini che mostrano il carattere predefinito personalizzato di aseprite e un file denominato "caratteri". L'apertura del file "caratteri" con il blocco note ti mostrerà le opzioni predefinite per ciò in cui puoi cambiare il carattere. Se non è in questo elenco non puoi usarlo in aseprite. Se sei pronto a creare il tuo font, probabilmente puoi fare una copia degli spritesheet per il font personalizzato di aseprite e usarli come guida per creare un nuovo font. Non so molto sulla creazione di caratteri personalizzati, mi dispiace. Per aggiungere un font installato esistente a questo elenco, copia e incolla semplicemente la voce Arial e sostituisci "Arial" con il nome del file del font installato nel file "fonts" del tuo sistema operativo, quindi scrivi il nome del font nel file "tema". Assicurati di riavviare aseprite se hai installato il font con aseprite aperto.
------------------------

Poi ci sono le dimensioni per gli elementi dell'interfaccia utente in quelli che credo siano pixel. Gli elementi dell'interfaccia utente sono tutti abbastanza ben etichettati, quindi dovrebbero essere abbastanza facili da distinguere.
------------------------

Dopodiché, Colori. Sarò onesto, è molto difficile dire cosa va dove per me. Probabilmente ci vorrà molto tempo per aggiustarlo. Quello che vedi qui è un elenco di sezioni dell'interfaccia utente a cui viene assegnato un codice colore esadecimale.
------------------------

Fortunatamente puoi facilmente capire i codici colore esadecimali per i colori in aseprite e copiare i codici esadecimali da lì nel tuo file.
------------------------

Ecco un elenco dei colori predefiniti nel file per aiutare a visualizzare quali colori potresti essere in grado di scambiare. Una cosa utile che ho trovato è stata premere ctrl + F per aprire il menu Trova nel blocco note e cercare i colori esadecimali esatti se volevo dire cambia tutte le cose che sono bianche in nere e tutte le cose che sono nere in bianche. Infine c'è ovviamente uno schema di denominazione e le aree dell'interfaccia utente sembrano essere raggruppate insieme. Le facce sono come il colore di sfondo per le sezioni dell'interfaccia utente e le facce calde sono parti cliccabili? Il testo caldo è un testo cliccabile, la radio si riferisce ai menu della radio credo, gli elementi "selezionati" sono ovviamente elementi dell'interfaccia utente selezionati, passa il mouse per il colore quando passa il mouse sopra e così via.
------------------------

Le parti sono tutte le icone/elementi dell'interfaccia utente nel file "foglio". Per prima cosa darà le sue coordinate xey sul foglio sprite dove inizia l'icona, quindi darà un'altezza e una larghezza in pixel per quell'icona. Questo cambieresti se facessi icone più grandi/più piccole. Quelli che hanno più larghezze e altezze sono icone/elementi di giunzione (come 9 giunzioni) sei la lunghezza identificativa di ciascuna sezione.
------------------------

Infine c'è la sezione stile. Questo sta decidendo quali elementi vanno dove da ciò che hai definito in tutte le altre sezioni. Può essere utile per capire dove sta andando un colore o una parte. Puoi anche regolare il riempimento, la lunghezza del margine e l'allineamento del testo qui.