Guida RPG Maker XP Script #8 – Approfondimenti Window & Input


Nelle 2 parti precedenti abbiamo visto Eventi e Database, una marea di informazioni, possono sembrare parti puramente teoriche ma non lo sono affatto, gran parte delle informazioni date serviranno prima o poi… almeno se siete come me che si divertono a creare sistemi di giochi tutti diversi tra loro; ora però torniamo allo scripting puro, andando ad approfindire gli argomenti principali, Window e Input, cioè le “finestre” e comandi di gioco.

– WINDOW –

Prima di aggiungere informazioni rivediamo ciò che abbiamo visto nelle parti precedenti:

Var = Window_Base.new(X, Y, W, H) è il codice strandard per creare una finestra, dove “Var” è il nome della finestra nonchè una variabile, consigliabile farla di istanza (aggiungendo @ all’inizio del nome) o in alcuni casi adirittura globale (aggiungendo $ all’inizio del nome), in questo caso l’ho fatta locale perchè è solo d’esempio, funzionerebbe lo stesso ma solo nel Def dove viene creata; “X” e “Y” indicano la posizione dove inserire la finestra, più precisamente l’angolo alto sinistro della finestra, se X e Y 0 verrà inserita nell’angolo alto sinistro della schermata, più in basso deve aumentare Y, più a destra X; “W” e “H” sono Width e Height, ovvero Larghezza e Altezza, per specificare la grandezza della finestra, ricordando che le schemata è grande 640×480 e che 32 verrà automaticamente, non evitabile, dato al bordo della finestra, dove quindi non verrà mostrato alcun contenuto se non il bordo.

Var.contents = Bitmap.new(W, H) creata la finestra, bisogna preparla a ricevere contenuto utilizzando questo codice, dove “W” e “H” anche in questo caso vanno a specificare la grandezza, nel dubbio fate direttamente una cosa tipo (Var.width-32, Var.height-32) per dire di volere disponibile il massimo possibile, evitate di fare l’errore che facevo io, cioè pensando che per ogni contenuto andava aggiunto un “Bitmap” nuovo, non è affatto così, tutto il contenuto potrà essere mostrato sullo stesso Bitmap.

Var.dispose quando la finestra non vi serivirà più, con questo codice la si eliminerà e per il programma è come se non fosse mai esistita, se invece fate Var.contents.dispose si eliminerà solo il contenuto o meglio la Bitmap, la finestra ci sarà ancora e se volete aggiungere nuovamente contenuto va ripetuto il codice Var.contents = Bitmap.new(W, H) ma se siete interessati a svuotare una finestra non è necessario tutto ciò, basta usare il codice Var.contents.clear, con quest’ultimo il Bitmap rimarrà ma verrà svuotato da ogni contenuto.

Ora che abbiamo visto cose già spiegate, aggiungendo qualche dettaglio, andiamo a vedere cose nuove e capirete perchè ho preferito saltare altre cose già spiegate:

Var.contents.draw_text(X, Y, W, H, TXT, A) questo pure lo abbiamo già visto, X e Y per decidere dove posizionarlo nella finestra, dove con X e Y 0 si andrà a inserire nell’angolo alto sinistro della finestra e non schermata a meno che non siano 0 anche l’X e Y della finestra; W e H pure hanno lo stesso significato, andando a specificare in quanto spazio il testo si dovrà inserire, per esempio se il testo è molto lungo ma W non è abbastanza, il testo verrà schiacciato, con un certo limite di grandezza minima, per stare nello spazio specificato, mentre H non andrà a schiacciare mai il testo, nel caso orizzontalmente, se il testo è troppo grande si vedrà solo in parte; TXT è il testo da visualizzare, dovrà o essere rinchiuso tra virgolette, “TXT”, o essere una variabile “string”, se non lo è o si fa TXT.to_s o “#{TXT}”, virgolette comprese; in fine A sta per Aling (Allineamento), cioè se 0 il testo si allinea a sinistra, se 1 centrato oppure 2 per allinearlo a destra, se non viene specificato verrà considerato 0.

– RPG::Cache –

“draw_text” aggiunge un testo ma se volessimo aggiungere un immagine? Il codice dovrà essere una cosa tipo Var.contents.blt(X, Y, IMG, RECT), X e Y identici a draw_text, mentre per capire IMG bisogna capire “RPG::Cache”.

La prima cosa da capire è che RPG::Cache fa riferimento alla cartella “Graphics”, del progetto ma anche di RPG Maker XP, così come alle sue sotto cartelle ma per le sottocartelle bisognerà aggiungere il nome della sottocartella ma al singolare e non plurale come la cartella, tipo “RPG::Cache.battler” fa riferimento alla cartella “Battlers”.
Il codice è spesso uguale tra le varie sotto cartelle; “autotile”, “battleback”, “gameover”, “icon”, “picture”, “tileset”, “title” e “widowskin” serve precisare solo il nome del file immagine, inserito tra virgolette o comunque tramite variabile testo, senza nemmeno il formato (png, jpg, ecc… ), più precisamente, sempre come esempio, “RPG::Cache.autotile(“NOME”)”, valerà lo stesso con quelli che seguono, inutile ripeterlo sempre, cambieranno però i dati da inserire tra parentesi; “animation”, “battler”, “character”, “fog” e “panorama” bisognerà fare “(NOME, HUE)”, HUE lo abbiamo visto così tante volte che immagino darebbe fastidio se lo rispiego; poi l’ultimo è “RPG::Cache.tile(NOME, ID, HUE)”, nella parte della guida del database abbiamo visto per bene cos’è un tile, ricapitolando il tile è una porzione 32×32 pixel di un tileset, nella cartella “Tilesets”, dato che il tile non ha un nome bisognerà inserire il nome dell’immagine Tilesets, ID poi parte da 384 per il primo poi aumenta di 1 andando verso destra, chiaramente arrivati al limite destro si andrà accapo, a mò di macchina da scrivere, per far capire bene ecco un immagine, che forse aveva più senso inserire nella parte Database ma c’erano già troppe cose, non volevo appesantire ulteriolmente… ah, ho completato solo la prima riga per far capire, vale la stessa logica con quelle che seguono.



Tornando al codice iniziale, aggiungendo letteralmente cosa abbiamo imparato: Var.contents.blt(X, Y, RPG::Cache.autotile(“NOME”), RECT), volendo non è necessario inserirlo direttamente in codice ma creare una variabile che ha come valore l’immagine, tornando a come era prima: Var.contents.blt(X, Y, IMG, RECT) dove IMG = RPG::Cache.autotile(“NOME”) da inserire prima, durante la scrittura del codice.

– RECT –

Ora vediamo il valore RECT, cioè RETTA, per crearla fare RECT = Rect.new(X, Y, W, H), i valori tra parentesi hanno lo stesso significato di come abbiamo già visto MA stavolta fa caso all’immagine inserita dove ho messo IMG nell’esempio, nel senso ritaglia una zona dell’immagine, se volete l’intera immagine dovrete inserire X e Y 0 mentre W e H pari alle misure dell’immagine, non c’è nemmeno bisogno di andarle a vedere, basta “IMG.width, IMG.height” dove ho messo “W, H”, solo però se create prima una variabile con l’immagine, “IMG.width, IMG.height” non funzionerà se inserite l’immagine direttamente in blt.
Se invece volete visualizzare solo una zona specifica, anche in questo caso X e Y sono entrambi 0 nell’angolo alto sinistro dell’immagine, in base proprio ai pixel dell’immagine inserire i valori di X e Y dell’angolo alto sinistro dell’area desiderata, poi W la larghezza e H l’altezza, se avete fatto tutto bene non si vedrà l’intera immagine ma solo l’area specificata con RECT da non confondere X e Y di blt, quelle fanno riferimento in che punto della finestra visualizzare.
Anche in questo caso si può aggiungere la retta direttamente in codice facendo Var.contents.blt(X, Y, IMG, Rect.new(X, Y, W, H)) oppure col codice iniziale aggiungendo prima RECT = Rect.new(X, Y, W, H).

– OPACITY –

Prima di proseguire va specificato che esiste un ulteriore valore, OPACITY cioè OPACITÁ, non è obbligatorio per questo non l’ho nominato prima ma può comunque servire sapere, nel caso fare Var.contents.blt(X, Y, IMG, RECT, O) dove O è il valore di opacità; opacità è il contrario di trasparenza e va da 0 a 255, il che vuol dire più il valore è basso meno l’immagine si vedrà, infatti a 0 sarà totalmente invisibile ma comunque viene considerata visibile dal programma, poi vedremo a cosa mi riferisco.

– METODI –

Non so se “metodi” sia il termine giusto per definire ciò che sto per spiegare ma non avendo idea che termine generale usare, nella gran parte nel programma viene usato il termine “methods” quindi cerchiamo di avere dei punti di riferimento almeno.
Ma a cosa mi riferisco? Abbiamo già visto alcuni di questi metodi, “Var.contents.clear” e “Var.dipose” che, nello stesso ordine, cancellano l’intero contenuto e eliminano la finestra; ma forse meglio vederli con ordine, non li spiegherò proprio tutti perchè alcuni non li ho mai usati e non è solo questione “non so a cosa servono” ma anche “non avendo mai avuto bisogno di capirli, meglio evitare e concentriamoci su solo una parte”.
Ce ne sono alcuni da usare direttamente con la variabile finestra, tipo “Var.dipose”, mentre altri che vanno a interagire col contenuto (“contents” appunto), tipo “Var.contents.clear”.

dispose – Elimina la finestra o solo il contenuto se si aggiunge “contents” tra variabile e “disposed”, senza dimenticare i punti tra una parola e l’altra; ricordo che così facendo per il programma è come se non fosse mai esistita.
disposed? – Utilizzabile anche con “contents”; chiede al programma se esiste o meno, la risposta sarà “true” se si o “false” se no, vale sia per le finestre create poi eliminate sia con finestre mai create.
update – Serve per le finestre opzioni, altrimenti il cursore non lampeggerà, non è neccessario per il suo funzionamento ma aiuterà il giocatore a capire meglio cosa è selezionato.
active – Per rendere attiva o meno, coi soliti true o false, una finestra, utile se ci sono più finestre opzioni; il codice esatto è, per esempio per attivarla, “Var.active = true”.
visible – Funzionamento simile a “active” ma la sua funzione è rendere visibile o meno la finestra, chiaramente una finestra non visibile c’è ancora.
x, y, width, height – I valori prima descritti con X, Y, W, e H, dopo la creazione della finestra è possibile cambiarli usando uno di questi, se volete cambiare più di 1 dovrete farlo su più righe e giusto per essere sicuro che capite ecco un esempio: “Var.x = 100”. “width” e “height” vanno bene anche con “contents”.
z – Nel caso ci siano più finestre, col metodo “z” decidete quale fare apparire sopra, prospetticamente, in situazioni basiliari quella creata prima sta più sotto.
opacity, back_opacity, contents_opacity – “opacity” per cambiare l’opacità della finestra, contenuto compreso, anche in questo caso va da 0 a 255 e più è basso meno si vede; “back_opacity” per l’opacità solo dello sfondo della finestra, ESCLUSI bordo e contenuto; “contents_opacity” cambia l’opacità del contenuto.
get_pixel(X, Y), set_pixel(X, Y, CLR) – Entrambi utilizzabili solamente con contents, get_pixel darà un array di 4 valori in base al colore presente nelle coordinate citate tra parentesi, coordinate che devono tener conto del bitmap che rappresenta il contenuto della finestra, non della schermata; un array colore ha i valori RGBA, cioè Red (Rosso), Green (Verde), Blue (Blu), Alpha (Opacità), tutti e 4 posso valere da 0 a 255, per creare un’array colore dal nulla bisogna fare “Color.new(R, G, B, A)” sostituendo chiaramente i quattro valori con numeri in base al colore desiderato, dove A è possibile non specificarlo, nel caso è come fosse 255; “set_pixel(X, Y, CLR)” infatti imposta il colore di CLR in X e Y.
hue_change(HUE) – Questo va utilizzato con “contents” e cambia l’hue della bitmap quindi dell’intero contenuto, ricordo che va da 0 a 255.
font – Il font è praticamente la caligrafia, come insomma scrivere il testo ma in questo caso non va solo a cambiare font, appunto, bensì: “name” per cambiare il tipo del font, di base c’è “MS PGothic” poi effettivamente ne sono dispobili pochi altri ma non ho mai approfondito ne sentito il bisogno; “size” è la grandezza, di base è 22, comunque in “draw text” è consigliabile usare un altezza poco superiore, di solito 32; “bold” e “italic” poi sono grassetto e “corsivo”, di base entrambi su “false”; “color” per specificare il colore del testo, come abbiamo già visto per creare un colore si fa “Color.new(R, G, B, A)”, di base è “Color.new(0, 0, 0, 255)”.
Per essere sicuri di capirci, per cambiare il valori del font bisognerà fare una cosa tipo “Var.contents.font.size = 22”.

– CONTENTS –

Ricapitoliamo velocemente i tipi di contenuti inseribili per poi approfondire cose nuove:

draw_text(X, Y, W, H, TXT, A) – Per inserire il testo TXT, X e Y specificano dove, mentre W e H in quanto spazio, infine A per allinearlo a destra, centro o sinistra (0, 1 o 2).
blt(X, Y, IMG, RECT) – Per inserire l’immagine IMG, X e Y la posizione mentre RECT ritaglia l’area dell’immagine grazie al codice “Rect.new(X, Y, W, H)”.
stretch_blt(ZOOM, IMG, RECT) – Anche in questo caso per inserire l’immagine IMG, anche qui RECT ha la stessa funzione… ma cos’è ZOOM che ha sostituito X e Y? Anche qui ci va una retta quindi “Rect.new(X, Y, W, H)”, però chiaramente questa retta non ritaglia l’immagine facendolo già quella alla fine, il termine ZOOM messo nell’esempio non è tanto per perchè questa retta può andar a zoomare l’immagine, più piccola, più grande ma anche le dimensioni normali, così come distorcere le proporzioni tra altezza e largezza, in che modo?
“Rect.new(X, Y, W, H)”, al posto di ZOOM chiaramente, X e Y hanno la stessa funzione dell’X e Y di “blt(X, Y, IMG, RECT)”, mentre W e H per specificare in che area l’immagine deve estendersi, come detto varierà le sue dimensioni se neccessario.
Extra – Se studiate i codici pre inseriti noterete spesso codici del tipo “Var.draw_actor_name(…)”, chiaremente invece dei 3 puntini un numero di valori specifici, di cosa si tratta? Ricordate che per creare una finestra il codice iniziale è “Window_Base.new(X, Y, W, H)”? Bene, ora andate nel script preinserito nominato proprio “Window_Base”, vedrete vari “def”, uno fra tanti proprio quello che ho citato “draw_actor_name”, tornando alla parte della guida dove ho spiegato classi e sotto classi capirete tutto va però approfondito leggermente a questo punto.
Facendo “Var = Window_Base.new(X, Y, W, H)”, la variabile Var praticamente eredita tutto il contenuto della classe Window_Base, può quindi utilizzare i suoi def, facendo “Var.nomedef”, questo può servire per rispiarmiare righe di codice, finchè fate cose semplici va anche bene andare a riscrivere ogni minimo codice ma quando ne fate di più complessi è cosa buona e giusta risparmiare quando è possibile, per evitare di confondervi o quanto meno per fare un codice più pulito; chiaramente lo stesso può funzionare con qualsiasi altra classe, facendo tipo “Var = Classe.new”, ma preferisco approfondire questo più avanti, non tanto lontano però (come tempo però probabilmente si), l’unica cosa che specifico è che la classe deve trovarsi più in alto rispetto alla classe dove si trova la variabile.

– INPUT MOUSE –

Come anticipai oltre agli input da tastiera è possibile anche sfruttare il mouse, per questo però bisogna inserire codici specifici e sapere alcune cose, che chiaramente spiegherò.
Tanto per iniziare i codici che ho trovato sono stati creati da dei certi “Near Fantastica & SephirothSpawn” che però io ho perfezionato sotto vari aspetti; tali codici non li inserirò qui ma saranno presenti nel progetto, subito sopra “Main”, in download in questa pagina (click qui) essendo davvero troppo lunghi, facendo caso alla variabile globale “$mouse” presente in “StartGame”, è impostata su “false” perchè mi crea disturbo mentre testo gli script, mettetela su “true” per provare l’input mouse.
Andiamo comunque a vedere codici aggiuntivi da inserire in classi che i primi codici non prendono in cosiderazione.

Prima cosa, i codici da inserire nelle classi in modo da accettare il mouse sono:

# Get / check mouse position
mouse_x, mouse_y = *Mouse.position
# mouse left
left = *Mouse.trigger?(0)
# mouse right
right = *Mouse.trigger?(1)
# mouse center
center = *Mouse.trigger?(2)
A dir il vero, essendo variabili senza @ ne $, funzioneranno solo nel “def” dove sono inserite, è consigliabile fare così poi spiegherò perchè, chiaramente poi le righe che iniziano con # servono solo come punto di riferimento, ricordo che nel codice vengono saltate le righe che iniziano con tale simbolo.

– La prima riga di codice va a ricavare le coordinate del mouse rispetto la schermata di gioco, mentre le altre 3 i 3 pulsanti del mouse.
– Invece se si vogliono le coordinate del mouse rispetto una specifica finestra, dove è 0, 0 posto nell’angolo alto sinistro del bitmap della finestra, serve fare delle sottrazioni alle coordinate del mouse: “mouse_x -= Var.x+20” e “mouse_y -= Var.y+16”, chiaramente uno sotto l’altro e chiaramente nell’esempio c’è una finestra chiamata “Var”.
– Il prossimo passo è specificare coordinate e input, dove “left”, “right” e “center” sono “true” se si clicca quel pulsante del mouse, altrimenti “false”.

– CONCLUSIONE –

Non mi viene nient’altro da aggiungere, finalmente basta parti lunghe piene solo di informazioni; spero che sia utile anche solo per una persona… oltre me che ogni tanto me le rileggo perchè dimentico un specifico codice… ma vabbè, sono problemi miei, non vostri; grazie e alla prossima.

Lascia un commento