Javascript e script per rpg maker Mv ed Mz 1

[Ischenderun]

Introduzione.
Da tempo volevo fare una guida javascript utile anche per gli script di rpg maker, ma non volevo fare il solito tutorial dove devi necessariamente avere delle basi di programmazione.
Quindi ho pensato di sviscerare tutto con degli esempi sulla versione lunga (spoiler) e andare al sodo nella versione corta.
La guida vuole essere rivolta proprio a chi non mastica programmazione ma è comunque in grado di usare rpg maker.
Potrebbe risultare lenta e noiosa per chi già conosce anche solo le basi di programmazione.
Fatemi sapere se è chiara oppure non si capisce.
Guida in pillole che prevede :
- (opzionale) esempi ad azioni di vita comuni
-(opzionale) Analisi del codice con accostamenti dei termini tecnici a termini più semplici da comprendere.
- Trasposizione del codice javascript in script nativi(già esistenti) del tool.
- Esempi sul tool.

Variabili.
Possiamo associare le variabili a delle scatole che contengono una sola cosa. Queste scatole hanno :
- Tipologia di scatola.
- Un nome.
- Un contenuto.
- Una chiusura.
Quindi immaginiamo di dover traslocare.
Abbiamo una scatola di cartone con su scritto "libro" e al suo interno un solo libro. Chiudiamo la nostra scatola con del nastro isolante.
Questa potrebbe essere la rappresentazione di una variabile.
Come si traduce tutto questo in codice?

var libro = "Il mago di Oz";

Analisi del codice :

Spoiler

var : parola chiave.
tipologia di variabile che serve ad uno scopo.
Come dire che la nostra scatola è di cartone o comunque fatta di un materiale specifico per lo scopo per cui la usiamo.
libro : il nome che (quasi) liberamente possiamo dare alla nostra variabile.
Il nome di una variabile possiamo sceglierlo liberamente ma è giusto tenere a mente che dobbiamo seguire delle convenzioni.
Regole per la scrittura che dovrebbero essere, il più possibile, rispettate.
Immaginate di dover scrivere un libro.
Non mettereste mai il numero delle pagine in un posto diverso dal piè di pagina.
Nel caso del nome per la variabile tenete a mente che Il nome deve essere breve ma allo stesso tempo intuitivo. Deve indicare il contenuto della variabile senza essere troppo prolisso.
NON POTETE : scrivere il nome di una variabile usando degli spazi.
Vedremo in seguito come scrivere nomi più complessi senza inserire degli spazi.

= : operatore di assegnamento.
Potrebbe venirvi naturale leggere questo simbolo nella classica modalità di "uguale a".
Io vi esorto invece a leggerlo come un "assegno alla variabile il seguente valore".
Perché questa differenziazione?
Perché questa modalità di pensiero vi aiuterà a comprendere meglio lo step relativo ai confronti.
"Il mago di Oz" : tipo di valore della variabile.
Non fatevi trarre in inganno dalla lunghezza di questo valore. Anche se il testo presente potrebbe, potenzialmente, essere lungo quanto il capitolo di un libro, resta sempre un unico elemento di un determinato tipo. Per capire meglio questa cosa sarà necessario spiegare i tipi di variabili.
; : fine istruzione.
Come nel caso della nostra scatola, questo simbolo segna la fine della nostra parte di codice.
In quasi tutte le nostre parti di codice troveremo questa istruzione di chiusura, questa ci permette di "sezionare" il codice in tanti pezzi componibili. Un posizionamento sbagliato o assente potrebbe generare errori o, peggio, strani funzionamenti.

Tipi di variabili.
Il valore della variabile che ho usato è di un solo tipo.
Tutto ciò che è inteso come testo o comunque destinato ad uno scopo simile al testo viene racchiuso tra doppi apici(o singoli apici).
Questi simboli, posti ad inizio e fine del nostro testo, definiscono una stringa (string in inglese).
Non fatevi trarre in inganno.
Stringa non significa che nel testo non possiamo inserire dei numeri, significa che questo tipo di variabile non si occupa di operazioni matematiche e che è invece adatta più ad un riscontro visivo realizzato sotto forma di testo.
I tipi di variabili sono sempre incentrati e differenziati in base allo scopo per cui vengono usate.
Per adesso vi dico che possiamo distinguere tra i tipi :
stringa(string) e numero (number).
Ovviamente non esistono solo questi tipi.
La variabile di tipo numero è indicata per operazioni matematiche che coinvolgono i numeri.
A differenza del tipo stringa non hanno bisogno di apici di alcun tipo.
Un esempio di variabile di tipo number potrebbe essere questa :

var numero = 2;

Questo tipo di variabile è molto comune in rpg maker.

Esempio di uso sul tool.
Per questo esperimento creeremo un npc che ci restituisce un testo scelto da voi e salvato dentro una variabile javascript.
Per fare questo ci servirà il metodo che ci permette di richiamare il box messaggi via script.
Inserite sull'evento npc la chiamata allo script.
Inserite sullo script il seguente codice :

var testo = "mio testo";
$gameMessage.add(testo);

La seconda riga dello script si occupa di visualizzare il contenuto della nostra variabile richiamandola tramite il suo nome. Verrà creata una box messaggio con posizione inferiore e al suo interno il nostro testo.
Cenni sulla seconda riga di codice

Spoiler

Per adesso non preoccupatevi di comprendere la seconda riga di codice, la vedremo più avanti.
La cosa importante è capire cosa fa e quando potrebbe essere più utile usare uno script invece che un comando evento.
Questa riga di codice ha le stesse funzionalità del comando evento mostra testo, ma tramite script possiamo costruire codice o avere dei comportamenti più complessi.

Arrivati a questo punto non possiamo ancora vedere l'utilità dello script.
Per vedere somiglianze con i comandi del tool dobbiamo introdurre altre righe di codice che ci permettono di manipolare una variabile di gioco (la classica variabile che usate sul tool).
Qui faremo una differenziazione tra :
- prendere il valore di una variabile
- impostare il valore di una variabile.
Premessa, cosa è l'id in rpg maker.

Spoiler

Il tool lavora e comunica con voi tramite tutti gli elementi che andate a creare ed inserire dentro il database.
Per fare questo occorre assegnare ad ogni elemento una sorta di codice univoco.
Un esempio di vita quotidiana è il codice fiscale che vi individua come persona unica ed evita omonimie.
I numeri che potete vedere dentro ogni database non sono dunque un modo per identificare delle liste, sono dei veri e propri indirizzi unici.
Indirizzi che il programma usa per comprendere e selezionare gli argomenti che state trattando.

$gameVariables.setValue(1, "mio testo");

La prima parte indica a cosa ci stiamo riferendo (una variabile di gioco).
La parte dopo il punto ci descrive l'azione che vogliamo intraprendere.
In questo caso abbiamo :
setValue : imposta valore
(1, : della variabile con id 1
" mio testo"); : il valore che abbiamo deciso di dare e chiusura dell'istruzione.
Uguaglianze

var variabile = "mio testo";
E
$gameVariables.setValue(1, "mio testo");

Possiedono le stesse funzionalità, anche se non sono la stessa cosa.

Una volta che abbiamo deciso il contenuto della variabile non ci resta che mostrarla

$gameMessage.add($gameVariables.value(1));

Notate come il codice per la variabile sia cambiato.
In questo caso non ci serve più impostare il valore (lo abbiamo già fatto in precedenza).
.value : prendi il valore contenuto nella variabile
(1) : riferimento alla variabile di gioco con ID 1.

Possiamo impostare del testo sul comando di una variabile?
Fatte queste premesse e scritto lo script, possiamo comprendere che le variabili possono contenere anche dei testi.
Aprendo il comando di una variabile basta inserire sullo spazio script la nostra stringa racchiusa tra doppio apice.
Che utilità può avere?
Affidare ad una variabile un testo(una stringa di testo per la precisione) può avere diverse utilità.
Una tra queste, è la possibilità di richiamare un testo che viene ripetuto più volte durante il gioco senza doverlo riscrivere in un dialogo tutte le volte.
Oppure, concatenare anche solo una parte del dialogo.
Esempio.
Abbiamo questo testo di benvenuto che si ripete per ogni città che visitiamo.
" Benvenuto straniero. Ti troverai bene qui a"
Salviamo questa stringa dentro una variabile usando il metodo descritto in precedenza.
Quando ci servirà il dialogo di benvenuto basterà scrivere dentro il box del messaggio il seguente codice.

\V[1] Alessandria

Il risultato sarà :
Benvenuto straniero. Ti troverai bene qui a Alessandria


Per questa prima parte mi fermo qua.
L'argomento è abbastanza vasto e quindi per la prossima volta rivedremo sicuramente il discorso delle variabili.
Intanto mi piacerebbe avere dei pareri per capire se questa guida può essere utile e se devo migliorare qualcosa nella sua esposizione

Modificato da Ischenderun, 23 April 2023 - 10:15 AM.

[Guardian of Irael]

Sìììì, più guide sullo scripting, più guide!!!!

 

Si parte con la buona e classica spiegazione delle variabili. Bella l'aggiunta pratica di come inserire una variabile nei messaggi di gioco.

 

Intanto mi piacerebbe avere dei pareri per capire se questa guida può essere utile e se devo migliorare qualcosa nella sua esposizione

Il livello di dettaglio non mi dispiace e mi pare tutto abbastanza comprensibile. Solitamente la difficoltà sta nel rimanere costanti e coprire tutto senza fermarsi mano a mano che si va avanti con la guida; buona fortuna! ^ ^

[Ischenderun]

Grazie Guardian. Cercherò il più possibile di continuare la guida scrivendo parti più o meno lunghe (in base al tempo tiranno).

Continuiamo il discorso variabili.

Ora che abbiamo scoperto le variabili di tipo stringa possiamo metterle da parte, ci ritorneremo quando sarà il momento di parlare dei confronti.
Adesso vi spiegherò le variabili di tipo numero.

Prima di fare questo devo però presentarvi una riga di codice che vi servirà per testare il vostro codice in queste prime battute della guida.

console.log();

Non è ancora giunto il momento di spiegare nel dettaglio la struttura di codici come questo.
L'unica cosa che vi interessa è che questo sarà il vostro migliore amico nella fase di test perché ci fornirà sempre un riscontro visivo immediato.
Per i nostri test iniziali sul javascript ci servirà anche un compilatore.
Uno strumento che ci permette di scrivere codice e ottenere un riscontro immediato.
Anche se per gli script useremo lo stesso rpg maker vi consiglio di usare un compilatore per testare il codice javascript.
Per test veloci può andare bene anche un compilatore online free.
Vi metto il link di uno di questi ma potete usare qualsiasi altro compilatore.

https://www.programi...nline-compiler/

Testiamo subito il codice scritto in precedenza.

var numero = 2;
console.log(numero);

Da queste 2 righe di codice otterremo il riscontro visivo del contenuto della variabile da noi nominata.

Variabili di tipo numero (number)
Questo tipo di variabile è, forse, la più comune in rpg maker.
Il tool ci presenta tutta una serie di operazioni che possiamo fare e, fortunatamente, mantiene gli stessi caratteri che vengono usati in javascript.
Questi caratteri prendono il nome di

Operatori matematici.
Vediamo velocemente cosa fanno.

= : operatore di assegnamento.

Analisi dell'operatore di assegnamento :

Spoiler

lo abbiamo già visto in precedenza e il suo ruolo è assegnare ad una variabile un valore.
Per semplicità potremmo dire che assegna ad una variabile tutto ciò che si trova a destra di questo simbolo.
Torniamo a vedere l'esempio fatto in precedenza.

var numero = 2;

Come abbiamo già visto in precedenza, la nostra variabile ha il compito di conservare un valore.
Questo valore può variare o essere riassegnato durante lo svolgimento del nostro codice, vedremo in seguito come.

Regola fondamentale per gli operatori matematici è aver chiaro le priorità.
Le operazioni non vengono sviluppate in contemporanea ma seguono una gerarchia di priorità.
Tale gerarchia è la stessa che si usa in matematica.
In presenza di una espressione la precedenza verrà data a moltiplicazioni e divisioni.

Esempio

var espressione = 3+4/2;
console.log(espressione);

Risultato = 5
L' operatore di assegnamento possiede la priorità più bassa, questo significa che sarà sempre l'ultimo ad essere processato dal nostro codice.
Come avrete notato, una variabile può contenere il risultato di una espressione.
Continuo la carrellata degli operatori matematici.
+: addizione
-: sottrazione
*: moltiplicazione
/: divisione

%: Resto.
Questo simbolo potrebbe trarre molti in inganno. A dispetto della sua forma non ci fornirà la percentuale di un numero.
Questo simbolo ci restituirà il resto di una divisione.

Esempio

var resto = 4%2;
console.log(resto);

Risultato = 0
In che modo il resto di una divisione potrebbe tornare utile lo vedremo in seguito. Potrei accennarvi che questo potrebbe essere un buon modo per capire se, ad esempio, abbiamo a che fare con un numero pari o dispari.

Tramite gli operatori matematici abbiamo visto che possiamo fare delle operazioni immediate sulle variabili.
Abbiamo anche visto che una variabile conserva un valore e che è possibile vedere questo valore semplicemente scrivendo il nome della variabile (tramite il nostro amico console.log()).
Abbiamo anche visto che le operazioni matematiche vengono processate tramite una gerarchia che segue le regole matematiche.
Adesso vi spiegherò come variare la gerarchia in base alle nostre esigenze.
Questo è più il campo della matematica a dire il vero, infatti anche qui useremo qualcosa che avrete sicuramente già studiato a scuola.

var espressione = (4+4)/2;
console.log(espressione);

Risultato = 4.
Le parentesi modificano la priorità dell'espressione portando, in questo caso, l'addizione ad una priorità più alta rispetto alla divisione.
Tutto questo non ha ancora un riscontro materiale per rpg maker ma ci serve come base per comprendere l'argomento successivo.
Argomento che è molto legato ad rpg maker, le operazioni tra variabili.

Script.
Abbiamo visto come definire una variabile di tipo numero in javascript e sappiamo già come definire una variabile tramite comandi.
Gli script per definire e leggere una variabile numerica segue la stessa logica vista in precedenza per le variabili di tipo stringa.
Create un evento npc in mappa come abbiamo fatto in precedenza.
Dentro l'evento andate sul comando script e digitate il seguente codice.

$gameVariables.setValue(1, 10);
$gameMessage.add($gameVariables.value(1));

Vi ricordo che "SetValue" serve per impostare una variabile di gioco seguendo come indicazione il suo Id (la sua posizione dentro il database).
Il primo valore dentro le parentesi è sempre l'id della nostra variabile.
Il secondo è il valore che noi vogliamo dare alla variabile (10 in questo caso).
Mentre il solo "value" ci serve per leggere il contenuto della nostra variabile, qui troveremo tra parentesi solo l'indicazione al suo Id.

Prima di addentrarci ancora più in profondità dentro il vasto mondo delle variabili vi voglio presentare un altro migliore amico.

Il commento.
Importante tale da avere un comando dedicato, viene spesso sottovalutato.
Il commento ha molteplici funzioni in effetti.
I commenti possono :
- Ricordarvi(anche dopo molto tempo) la logica che stavate usando per il vostro programma.
- Rendere il vostro codice più comprensibile ad altri
- Dividere del codice molto lungo in sezioni più leggibili.
- Permettervi di scrivere note personali e promemoria su varianti del vostro codice.
Vi invito, non solo ad usare i commenti, ma anche ad abusarne, specie in questa fase di apprendimento e sperimentazione.
Sappiamo già come richiamare un commento da rpg maker, vediamo adesso come usarlo su codice javascript
Commento su singola riga :

// variabile con espressione 
var numero = (4+4)*4;
console.log(numero); //risultato = 32

Come avrete modo di vedere, tutto ciò che si trova dopo le // non viene processato dal codice (in caso contrario avreste un errore).
Commento su righe multiple :

/*
Questo commento si sviluppa su più 
righe. Tutto quello che è contenuto al suo interno verrà ignorato dal codice 
*/

Il commento multilinea potrà tornarvi particolarmente utile nei casi in cui volete disattivare del codice in fase di test.
Esempio

/*
var test = "ciao";
*/
var numero = 2;
console.log(numero);
console.log(test);

Risultato = 2
Risultato = ReferenceError: test is not defined
Giustamente otteniamo un errore.
Questo ci dice che "test" non è stato definito, in pratica per lui non esiste.

Prossimo argomento : operazioni tra variabili

Modificato da Ischenderun, 24 April 2023 - 12:23 PM.

[Ischenderun]

Operazioni tra variabili.
Abbiamo visto che è possibile salvare un valore (che sia stringa o numero) dentro una variabile.
Abbiamo visto anche che è possibile fare operazioni matematiche con i valori contenuti dentro le variabili.
Adesso vi spiegherò le operazioni tra variabili, un argomento scontato che però rivela una pianificazione importante per un codice dinamico (in sostanza un codice che si adatta facilmente a ciò che vogliamo fare).

Esempio javascript :

var numero1 = 2;
var numero2 = 3;
var somma = numero1 + numero2;
console.log(somma);

Risultato = 5.

La differenza tra il codice sopra e una semplice somma tra due numeri sta nella dinamicità del codice.
L'operazione della variabile somma si adegua a qualsiasi valore numerico che le variabili numero1 e numero2 possono avere (vi ricordo che una caratteristica delle variabili è quella di poter cambiare durante l'esecuzione del nostro codice).
Vi svelo che la stessa meccanica può essere attuata con le stringhe.
Ovviamente non avremo una addizione, ciò che avremo sarà una concatenazione.

Codice javascript :

var testo1 = "ciao ";
var testo2 = "rpg maker";
var concatena = testo1 + testo2;
console.log(concatena);

Risultato = ciao rpg maker.

Le operazioni tra variabili rappresentano un passo importante verso una programmazione più funzionale per i nostri codici, specie se i valori delle nostre variabili dipendono dalle scelte del giocatore.
Fino ad ora non abbiamo potuto giustificare l'uso di script al posto dei comandi di default di rpg maker, ma adesso la scelta può fare la differenza.

Diciamo che per esigenze di gioco ci serve la somma di 3 variabili e una quarta variabile adibita a contenere questa somma.
I comandi del tool ci permettono di aggiungere il valore di una variabile ad un'altra variabile e quindi ci servirebbero più di un passaggio per fare la nostra operazione.
Vediamo che differenza c'è usando uno script.

Script.
Creiamo il solito evento npc, dentro usate i comandi del tool e date dei valori numerici a scelta alle variabili 1,2,3.
Definite la quarta variabile con il nome somma e impostate il valore a zero.

In seguito inserite lo script :

 // salvo le variabili di gioco in variabili javascript 
var uno = $gameVariables.value(1);
var due = $gameVariables.value(2);
var tre = $gameVariables.value(3);
// operazione tra variabili 
var somma = uno + due + tre;
// salvo la mia operazione dentro una variabile di gioco 
$gameVariables.setValue(4, somma);

Infine inserite un mostra testo con dentro il codice di testo :
La somma è \V[4]

Creando questo evento come ibrido tra script e codice del tool abbiamo risparmiato spazio e creato una migliore pianificazione.
Usando i soli comandi del tool vi sareste trovati a fare più di una volta le operazioni tra variabili.
Questo però non è ancora abbastanza per dire che uno script può semplificarci la vita rispetto i comandi del tool.
Le differenze maggiori si vedranno quando parleremo del prossimo argomento, le condizioni.

[Ischenderun]

Le condizioni si occupano di attivare del codice in base a delle circostanze.
L' utilizzo delle condizioni è legato al controllo su variabili o interruttori.
Spesso sul tool si fa il controllo di una variabile ed in base a quella si attiva un pezzo di codice.
Le cose possono complicarsi se abbiamo bisogno di un controllo su più variabili o interruttori.
L' uso di script, in questo caso, ci torna utile per facilitare la lettura del controllo.
Prima di eseguire un controllo condizionale vi spiegherò come gli interruttori globali vengono riportati in script.
Lo script per settare o leggere un'interruttore è molto simile a quello per le variabili.
Impostare il valore

$gameSwitches.setValue(1, true)

- 1) id dell'interruttore
- true) valore acceso per l'interruttore
A differenza delle variabili, gli interruttori possono accettare solo due valori. In rpg maker vengono menzionati come ON e OFF

$gameSwitches.setValue(1, true)
$gameSwitches.setValue(1, false)

Nell'esempio sopra ho impostato l'interruttore globale 1 su On (true)
e poi su Off (false)
Per questo esempio faremo il controllo di due interruttori sfruttando una sola riga di codice, usando i comandi del tool ne servirebbero almeno 2.
Contesto.
Voglio visualizzare un testo solo se gli interruttori 1 e 2 sono su On.
Preparazione test.
Create un npc e, tramite i comandi evento, impostate gli interruttori 1 e 2 su On.

Create una condizione tramite il comando evento, scegliete l'opzione "script".
Sulla riga per il codice inserite :

$gameSwitches.value(1) === true & & $gameSwitches.value(2) === true

Inserite adesso il vostro testo dentro la condizione creata sfruttando il comando testo.

Se provate a parlare con il vostro npc otterrete il testo che avete programmato.
Provate a sperimentare cambiando le impostazioni iniziali dei due interruttori.
Otterrete il testo solo se i due interruttori saranno su On.

Vediamo il codice.
$gameSwitches.value(1)
Ci permette di ottenere lo stato attuale dell'interruttore 1 (on oppure off)
=== true
Ci permette di confrontare il valore dell'interruttore con quello da noi scelto.
&&
Questo è un operatore logico chiamato "and", quindi qui e come se dicessimo al codice che dopo il primo controllo ne verrà un altro.

$gameSwitches.value(2) === true
Il secondo controllo che effettuiamo.

Differenze con le condizioni tramite comandi.
Usando i comandi del tool otterremo lo stesso risultato solo inserendo il controllo per l'interruttore 2 dentro il controllo dell'interruttore 1.

Un ulteriore operatore logico che può tornare utile è l'operatore "or"(||)
$gameSwitches.value(1) === true || $gameSwitches.value(2) === true

In questo caso la condizione viene elaborata se almeno uno dei due interruttori è su On.