Rpg²S Forum uses cookies. Read the Privacy Policy for more info. To remove this message, please click the button to the right:    I accept the use of cookies

Vai al contenuto

Rpg²S Forum uses cookies. Read the Privacy Policy for more info. To remove this message, please click the button to the right:    I accept the use of cookies

Screen Contest #90

Kamikun






  • Si prega di effettuare il log in prima di rispondere
Mettere Finestre ovunque :)

    Lomax_Iced
  • Elfo di Babbo Natale

  • Utenti
  • Rens: 28
  • 3
  • StellettaStellettaStelletta
  • 221 messaggi
  • Sesso:Maschio
  • Provenienza:Palermo
  • Abilità:Adepto

#1 Inviato 08 April 2019 - 05:36 AM

Ciao Gente!! Il vostro buon Lomax di Quartiere è passato per farvi un saluto e non potevo certo presentarmi a mani vuote :)
Si avvicina l'estate e con le belle giornate fate entrare più luce pertantoo occorrono sempre più finestre !!

 

In sostanza questo "Script tutorial" è rivolto a tutti coloro che desiderano aggiungere delle finestre nelle proprie scene. 
Per chi non lo sapesse e vorrebbe imparare a crearle ecco il procedimento base.
:force_spoiler_open:
          +- Alla fine ho scelto di creare un plug completo in modo che vi sarà estremamente più facile collocare

          +- la vostra finestra in qualsiasi scena voi vogliate e per farlo basterà cambiare una sola parola. 

:force_spoiler_close:

                                                                    ::Ecco a voi la risorsa completa::

Spoiler

Com'è stato possibile? Ve lo spiego qui giù vv

1. Mi hanno commissionato un progetto in cui l'ideatore aveva in mente di inserire in uno scene title un'altra finestra oltre a

    quella di base. Modifica che non avevo mai fatto in Javascript. Così mi son detto JS...Linguaggio ad oggetti...tutti sono

    oggetti e allora anche questa nuova window!
 

 

                                  ::Pertanto il primo passo da fare è proprio quello di realizzare l'oggetto nuovo::
 

function Esempio_Window() {
		 this.initialize.apply(this, arguments);
	 }

Qualsiasi oggetto ha sempre sicuramente delle caratteristiche/delle proprietà/degli attributi. Sono tutti sinonimi dello stesso concetto che 
in javascript viene inteso con il costrutto function . Per permetterci l'intesa possiamo tradurlo volgarmente con il termine Funzione .
Ma come ho già descritto si riferisce a quanto letto prima. 

Ma che acciderbolina è un Oggetto, senza andare troppo per le lunghe, generalizziamo il tutto il più possibile e immaginiamo di voler creare una base musicale / una canzone. Quindi ecco noi siamo aspiranti cantanti e vogliamo creare una Canzone. 

Quindi quello che vogliamo creare/realizzare è una Canzone || Quindi il nostro oggetto in questo caso è una canzone
Ora abbiamo già pensato ad un titolo? Come vogliamo chiamarla questa canzone? 
Il Definire un nome ad un oggetto equivale a conferirne un attributo/una proprietà/caratteristica/Funzione!
Esattamente uguale come ho fatto nella creazione della nostra finestra. Le ho dato un nome. Nel caso di questo tutorial l'ho chiamata
                                                                 

                                                                                 Esempio_Window
 

Il conferire un Nome (sott'inteso: l'attributo Nome) equivale ad identificare l'oggetto. Ma in realtà "Esempio_Window" ci da un'altra informazione aggiuntiva. In quanto il nostro nome di fantasia che abbiamo (ho) scelto di dare a questo oggetto è solo ed unicamente
il costrutto "Esempio". L'underscore serve per associare due costrutti che specificano due caratteristiche diverse. In questo caso:

                                                                    L'attributo Nome _ L'attributo Classe

L'unione di questi due attributi permette di identificare il cosa sarà quest'oggetto ossia una finestra di esempio.
Quindi noi stiamo creando una Finestra di Esempio. Attenzione però! perché per il momento l'abbiamo soltanto idealizzata nella nostra testa.  E' un po come quando programmiamo di voler fare un viaggio in Giappone o chissà dove magari una meta un po fuori dalla nostra portata perché ancora siamo a scuola o a lavoro e l'estate difatti ancora è lontana. Intanto però con la mente / con la nostra testa immaginiamo e fantastichiamo sul nostro itinerario. 

Ecco cosa stiamo facendo, giunti a scrivere questo.. Stiamo ancora fantasticando su ciò che dovrà essere il nostro oggetto. 
Però conosciamo già la sua appartenenza. Ovvero lo abbiamo identificato come una Finestra. Non ha ancora associate le proprietà di una finestra ma sappiamo già che dovremmo conferirgliene alcune, come ad esempio la posizione spaziale all'interno del nostro diagramma cartesiano ossia difatti l'area che costituisce la scena. Un'altra caratteristica che sono solite avere le finestre è la dimenzione, ossia definirne una larghezza, un'altezza. E poi ne esistono tantissime altre. Queste che vi ho citato sono le essenziali e generiche proprie a tutte le finestre. 

Quindi riepilogando:

function Esempio_Window() {
		 this.initialize.apply(this, arguments);
	 }

Il Primo Passo è stato quello di conferirgli un Nome e associarlo ad una Tipologia
La tipologia non è altro che un oggetto più grosso che comprende dentro se stesso tanti piccoli oggettini che sono regolati dalle stesse caratteristiche e quindi il vantaggio di specificare a che tipo di tipologia appartiene quello specifico oggetto ne richiama le regole e la condivisione degli stessi costrutti e questa cosa semplifica molto il lavoro del programmatore. 

Ad ogni modo possiamo confermare la nostra idea e battezzare /inizializzare nel concreto la nostra nuova finestra. 
E per farlo si scrive quanto è scritto sopra. Ossia si apre e chiude una parentesi, atto ad indicare che questo oggetto difatti sarà un involucro come una scatola con dentro delle cose.

E allora aprendo una parentesi graffa e andando a capo si specifica che l'oggetto idealizzato dovrà essere initialize cioé letteralmente inizializzato /conferito /nato / ossia preso in considerazione. Ora non solo lui stesso / this  ma anche le caratteristiche che allogerà al suo interno / arguments

 
Adesso che abbiamo messo tutto in chiaro. Abbiamo definito che esiste qualcosa che ha la parvenza di appartenere al mondo delle finestre (ma ancora queste sono delle Rumors) ma intanto qualcosa di sicuro c'è!
 

 

2. Non sono più delle semplici notizie da corridoio le nostre. Adesso è venuto il momento di associare per davvero il nostro oggetto "Finestra di Esempio" alla categoria Finestre. Ed ecco il come..::

Esempio_Window.prototype = Object.create(Window_Base.prototype);

function così come prototype sono due costrutti essenziali in javascript poiché sono dei veri e propri comandi. Una volta citati essi innescheranno dei Metodi ossia delle modalità con cui si potranno concretizzare dei concetti. Come ad esempio lo è stato il costrutto
function che ci è servito per conferire all'idea degli attributi moniti a trasformare quell'idea in un oggetto.

prototype invece associato al nostro oggetto tramite quel '.' permette di specificare che esso apparterrà alla categoria (in questo caso) Window_ e nello specifico a "Window_Base" (tradotto Finestre di Default) Dove dentro questa macro-classe /oggetto più grande ci saranno tante altre funzioni e metodi che potranno essere associati anche al nostro nuovo oggetto Esempio_Window.

Volendo tradurre quella stringa di codice a livello molto letterale si ha che:

Il prototipo dell'oggetto Finestra di Esempio verrà associato ad un qualsiasi oggetto creato come prototipo di Window_Base .

Quindi..

Esempio_Window.prototype.constructor = Esempio_Window;

Si conferisce un Identificativo Concreto. Ovvero questa volta si concretizza in linea definitiva l'attributo Nome associato all'attributo categoria. Nel senso che con questa stringa di codice si comanda che il Nome completo scelto sia finalmente associato per davvero ad un oggetto /un prototipo che appartiene alla categoria delle Finestre. 

Detto in modo semplice. Solo adesso Esempio_Window è per davvero una Finestra. 

 

 

3. Però è vero ancora che è una finestra trasparente e non locata. E quindi il prossimo passo sarà proprio quello di darle una dimensione. 

Esempio_Window.prototype.initialize = function(x, y) {
		 Window_Base.prototype.initialize.call(this, x, y, 100, 100);
	 }

Adesso non abbiamo più bisogno di specificare alcunché. Basterà prendere un metodo prefab nello script rpg_window.js   se vogliamo essere pignoli nella sezione dedicata a Window_Base e lì basterà semplicemente copia e incollare quanto scritto lì di ciò che ci serve. 

Io ad esempio come vi dicevo mi occorreva impostare la grandezza della finestra. E allora ho appioppato al nostro prototipo..
function(x, y) questo perché, prima di definirne una grandezza di norma è giusto dargli all'inizio una locazione di base. E pertanto le coordinate sono settate in maniera standard com'è di default. E così si lasciano (non è qui che potremmo sceglierne un valore).

Qui invece come vi dicevo occorrerà scalare la nostra finestra, modellandone la dimenzione tramite il settaggio dei parametri di larghezza e altezza. E quindi semplicissimo basterà richiamare con il costrutto .call  il metodo in questione direttamente dalla macro-classe Window_Base. Dove vedete scritto 100, 100. Il primo parametro riguarderà il settaggio della Larghezza della finestra; il secondo parametro invece regolerà l'altezza. Qui potete sbizzarrirvi con la vostra fantasia, cambiandone i valori. 

4. Quarto ed ultimo passaggio. Ora che abbiamo creato il nostro oggetto, bisognerà semplicemente scegliere in quale scena farlo apparire e dove collocarlo nella scena stessa, per quanto riguarda appunto la posizione. 

volete un trucco?...............................................................
Recatevi in rpg_scene.js 
scegliete una scena, ossia dove volete che appaia la vostra finestra. 
io per commissione ad esempio ho dovuto selezionare Scene_Title. Ma può essere una scena qualsiasi. 
Dentro la vostra scena scelta, cercate il metodo .start 
Copiate e incollate 
tutto il metodo .start nel vostro script dove state creando la finestra. 
Incollate il tutto qualche riga prima di aver idealizzato il nome del vostro oggetto. Quindi prima della prima funzione asseggata all'oggetto. 
Ecco il mio esempio:

Scene_Title.prototype.start = function() {
    Scene_Base.prototype.start.call(this);
    SceneManager.clearStack();
    this.centerSprite(this._backSprite1);
    this.centerSprite(this._backSprite2);
    this.playTitleMusic();
    this.startFadeIn(this.fadeSpeed(), false);
};

Sottraggo da Scene_Title e lo colloco qui:
 

/*:
 * @plugindesc Aggiunge una Finestra in qualsiasi scena voi vogliate
 * @author Lomax_iced
 * @help
 */
 
 (function() {
	 
	Scene_Title.prototype.start = function() {
             Scene_Base.prototype.start.call(this);
             SceneManager.clearStack();
             this.centerSprite(this._backSprite1);
             this.centerSprite(this._backSprite2);
             this.playTitleMusic();
             this.startFadeIn(this.fadeSpeed(), false);
         };

	 function Esempio_Window() {
		 this.initialize.apply(this, arguments);
	 }
	 
	 Esempio_Window.prototype = Object.create(Window_Base.prototype);
	 Esempio_Window.prototype.constructor = Esempio_Window;
	 
	 Esempio_Window.prototype.initialize = function(x, y) {
		 Window_Base.prototype.initialize.call(this, x, y, 100, 100);
	 }
	 
 })();

Cancelliamo tutto quello di cui non ci interessa una cippa.

Scene_Title.prototype.start = function() {
		_Scene_Title_Start.call(this);
		this._esempiowindow = new Esempio_Window(30, 100);
		this.addWindow(this._esempiowindow);
		
	};

Questo è il metodo che permette a Scene_Title di avviarsi una volta avviato il gioco.  Che sono quelle modifiche lì? Cosa ho implementato? 

Intanto occorre che venga creata una variabile var utile per richiamare il metodo di Scene_Title attraverso appunto un .call di richiamo da qualsiasi punto si voglia del programma. possiamo attivarlo tramite un, una riga di comando, da qualsiasi punto. 
Per farlo occorrerà inserire questa stringa poco prima:
 

(function() {
    
    var _Scene_Title_Start = Scene_Title.prototype.start
    Scene_Title.prototype.start = function() {
        _Scene_Title_Start.call(this);
        this._esempiowindow = new Esempio_Window(30, 100);
        this.addWindow(this._esempiowindow);
        
    };
var _Scene_Title_Start = Scene_Title.prototype.start

Azione vai col Title......partito!
Quindi la schermata iniziale si sta svolgendo e si svolgerà con tutte le imostazioni di default eccetto che viene specificata e verrà visualizzata la nostra nuova finestra e collocata nella posizione che decidereremo di impostare noi. tramite questa stringa:

this._esempiowindow = new Esempio_Window(30, 100);

Dove 30 corrisponde all'asse delle x       e      100 all'asse delle y. 

Quindi la si colloca ed infine le si da conferma:

this.addWindow(this._esempiowindow);

BANG! Aggiunta! 

E questo è tutto quello che si fa per inserire una finestra dentro una qualsiasi scena si voglia. Sostituire allo script i costrutti Scene_Title con Scene_"ciò che si desidera" senza doppi apici e il gioco è fatto. 


Ovvio che per conoscere cosa far visualizzare all'interno di questa finestra occorrerà andarsi a spulciare lo script rpg_window.js e vedere un po cosa desideriamo immetterle. Ma questo lo lascio a voi!

Sperimentate 
Sperimentate Sperimentate 
Che gli script standard sono degli ottimi maestri
Io vi auguro un buon proseguo con le vostre realizzazioni 
E arrileggerci alla prossima ;)


P.S:  Ciao Guardian :)

 



    Guardian of Irael
  • Coniglietto Rosso

  • Rpg²S Admin
  • Rens: 195
  • 19
  • StellettaStellettaStellettaStellettaStellettaStelletta
  • 58413 messaggi
  • Sesso:Maschio
  • Provenienza:Bagnaia (Viterbo)
  • Abilità:Apprendista


#2 Inviato 08 April 2019 - 11:07 AM

 

P.S:  Ciao Guardian :)

XD Ciao, Lomax! ^ ^

 

Vedo che si passato ai plugin dell'MV. Poter creare liberamente finestre da inserire in ogni luogo del progetto ha di certo la sua grande utilità. Fa piacere anche vedere codice e plugin spiegati riga per riga in maniera dettagliata così da imparare a cosa serve ogni piccola stringa. Ottimo lavoro! ^ ^


(\_/)
(^ ^) <----coniglietto rosso, me!     
(> <)

 
Il mio Tumblr dove seguire i miei progetti, i progetti della Reverie : : Project ^ ^
 
KdUDtQt.png disponibile su Google Play, qui i dettagli! ^ ^
 
FwnGMI3.png completo! Giocabile online, qui i dettagli! ^ ^  
 
REVERIE : : RENDEZVOUS (In allenamento per apprendere le buone arti prima di cominciarlo per bene ^ ^) Trovate i dettagli qui insieme alla mia intervista (non utilizzerò più rpgmaker) ^ ^

Spoiler





  • Feed RSS