FR EN DE ES IT PT
Naviga nei forum 
Tracker Ankama

[TEMI PERSONALIZZATI] Primi passi per la creazione di un tema

Di [Eloryn] - AMMINISTRATORE - 19 Ottobre 2016 - 16:07:32

Attivare la modalità "dev"


La creazione di un tema di interfaccia può essere effettuata solo nella versione BETA del client.
Per testare facilmente le vostre creazioni senza passare per il sistema di distribuzione classico, dovrete apportare una piccola modifica al client BETA di gioco: dovete attivare la modalità "dev".

Quest'ultima sblocca i seguenti strumenti:

  • Una piccola interfaccia di controllo che visualizza gli FPS e le performance del client, e i collegamenti per aprire le varie console.
  • Visualizzazione della console che permette di eseguire un determinato numero di comandi quali il download di un'interfaccia o il ricarico di un modulo (di base si apre tramite il collegamento CTRL + \).

Per sbloccare la modalità basta aggiungere una linea al file di configurazione di DOFUS secondario di nome config-custom.xml:

Se il file non esiste, bisogna crearlo nella cartella in cui si trova il file "config.xml" (dofus app/ in Windows) e aggiungere al suo interno:

[code]
        true
        true [/code]

Se già esiste, basta aggiungere le seguenti righe:
[code]
        true
        true
[/code]

Cosa posso modificare?


Tramite il sistema dei temi, potrete modificare:

  • Le texture delle interfacce (tranne quelle di tipo icona d'oggetto, incantesimo, etc...)
  • Lo stile dei testi (dimensione, tipo, colore, etc...)

Non potrete modificare (lista NON esaustiva):

  • La posizione degli elementi
  • La dimensione degli elementi quando è fissata nel codice delle interfacce
  • I parametri degli elementi che non usano i file themeData


Creare il tema


La cosa più facile da fare per cominciare è duplicare il tema di base, ad esempio darkStone. Per farlo, andate nella cartella di installazione del gioco, poi nella cartella che contiene i temi (app/content/themes), duplicate e rinominate la cartella (tramite un copia/incolla ad esempio).

Dopo averlo fatto, rinominate il file darkStone.dt con il nuovo nome della cartella. Ora potrete modificare il file per personalizzare le informazioni che saranno visualizzate nell'interfaccia di scelta del tema. Per finire, eliminate il file signature.xmls.


Riassunto

  • Se non l'avete già fatto, attivate il "devMode" (indicazioni più in alto)
  • Duplicate il dossier darkStone
  • Rinominate il file darkStone.dt
  • Modificate il file darkStone.dt
  • Eliminate il file signature.xmls


I vari tipi di file


File DT


[blockquote]Dove si trova: alla radice della cartella del tema.

Scopo: informazioni sul modulo, soprattutto utile per l'interfaccia di scelta del tema. Potrete indicarvi il nome e la descrizione del modulo come visto nell'interfaccia di scelta del tema. Potrete anche mettere un'immagine da usare come previsualizzazione (quest'ultima dovrà trovarsi nel dossier "bitmap")
[/blockquote]


File PNG/JPG


[blockquote]Dove si trova: cartelle bitmap, texture, common, illu

Scopo: sono le immagini usate dal client. Dovrete modificare questi file per personalizzare le interfacce.
[/blockquote]


File CSS


[blockquote]Dove si trova: nella cartella chiamata "css"

Scopo: definire i diversi stili di carattere usati (tipo, colore, dimensione, etc...).

Informazioni: elenco dei caratteri disponibili: Eras, Tahoma, Verdana, Gadugi, Roboto, RobotoCondensed, BebasNeue, Goudy Bookletter.
Al momento non è possibile usare altri caratteri.
[/blockquote]


File colors.xml


[blockquote]Dove si trova: alla radice della cartella del tema.

Scopo: dichiarazione dei colori usati in modo dinamico.

Informazioni: la codifica usa la base 16 e i formati autorizzati sono: 0xRRGGBB e 0xAARRGGBB (A: Alpha, R: Rosso, G: Verde, B: Blu). Esempio di strumento per ottenere i codici colori: Cliccate qui
[/blockquote]


File themeData.JSON


[blockquote]Dove si trova: alla radice della cartella del tema.
Scopo: definire il modo in cui sono utilizzate alcune texture

Informazioni: tutti i file che cominciano con "themeData" e sono di tipo JSON sono caricati automaticamente all'avvio del client. Attenzione: se c'è un errore di formattazione nel file, non verrà caricato e il client non visualizzerà alcun messaggio di errore.

Il file permette di modificare le proprietà dei componenti sui quali verrà applicato lo stile. In generale i componenti che usano queste proprietà sono delle TextureBitmap.

In generale:

[/blockquote]
  • uri: percorso verso la texture
  • scale9Grid: un rettangolo che indica come la texture deve essere ridimensionata (cercate "scale 9 grid" su Google). Esempio: scale9Grid:{x:[margine sinistro], y:[margine alto], width:[dimensioni - margine sinistro - margine destro], height:[altezza - margine alto - margine basso]}
  • colorTransform: applica una trasformazione di colore (cliccate qui - la pagina è in inglese - per vedere i dettagli delle proprietà utilizzabili).
  • align: allineamento della texture (TOPLEFT, TOP, TOPRIGHT, LEFT, CENTER, RIGHT, BOTTOMLEFT, BOTTOM, BOTTOMRIGHT)
  • alpha: valore da 0 a 1 che indica la trasparenza (0 è invisibile, 1 è senza trasparenza)
  • bgColor: valore di tipo 0xRRGGBB o 0xAARRGGBB che permette di definire il colore di fondo del componente
  • bgAlpha: valore da 0 a 1 che indica la trasparenza di fondo del componente (0 è invisibile, 1 è senza trasparenza)


Il comando /uiinspector (tramite la console) permette di vedere il percorso e i css utilizzati da numerosi componenti. È utile se cercate quali sono le risorse utilizzate.

Se state modificando i file CSS, un altro comando utile è /clearcsscache
Usatelo, chiudete e riaprite l'interfaccia sulla quale state lavorando e il client dovrebbe ricaricare i file CSS necessari e sarà aggiornato con le ultime modifiche.
Rispondi a questa discussione