CREARE L'OGGETTO DIARIO by Lomax_Iced 1

[Lomax_Iced]

Tanto tempo fa avevo chiesto come si potesse creare un oggetto di gioco che fungesse da Diario, ove il quale il giocatore avesse la possibilità oltreché di salvare i propri progressi, anche quella di annotare le proprie considerazioni. in più ho deciso adesso di conferire allo script la possibilità di poter caricare la partita anche da lì, implementando la funzionalità load. 

vi spiego un pò, è facile:

Spoiler

Metodo Initialize:

// buttiamo giù un'idea dell'oggetto Scene_Diario con dentro le voci: pagina, maxNumPag e inserimento
Scene_Diario.prototype.initialize = function(){
  Scene_MenuBase.prototype.initialize.call(this);
  this._pagina = 0; //la singola pagina in cui ci si trova
  this._mxNumPag = 0; //il numero massimo di pagine
  this._inserimento = false; //la facoltà di poter inserire le annotazioni.
}; 

Metodo Create:

//Qua creeremo la sezione destinata al Diario & quella per immettere l'input.
Scene_Diario.prototype.create = function() {
  Scene_MenuBase.prototype.create.call(this);
  this.creaFinestraDiario();
  this.creaFinestraInput();
  this.refreshDiario();
};

Metodo creaFinestraDiario:

//tutto ciò che riguarderà questa sezione:
Scene_Diario.prototype.creaFinestraDiario = function() {
  this._finestraDiario = new Finestra_Diario();
  this._finestraDiario.setHandler('cancel', this.popScene.bind(this));
  this._finestraDiario.setHandler('pagedown', this.nextPage.bind(this));
  this._finestraDiario.setHandler('pageup', this.prevPage.bind(this));
  this.addWindow(this._finestraDiario);
}; 

Metodo creaFinestraInput:

//tutto ciò che lo riguarda:
Scene_Diario.prototype.creaFinestraInput = function() {
  this._finestraInput = new FinestraDiarioInput();
  this._finestraInput.setHandler('ok', this.onInputOk.bind(this));            //conferma input
  this._finestraInput.setHandler('cancel', this.onInputCancel.bind(this));    // annulla input
  this.addWindow(this._finestraInput);
  this._finestraInput.hide();
}; 

Adesso dato che ho desiderio che sia un Diario destinato anche ad essere oggetto per il salvataggio dei progressi di gioco, implementiamo il Metodo corrispettivo, ovvero il Save.

 

Metodo Save: 

//richiamiamo la funzione salvataggio e specifichiamo che la stiamo implementando dentro Scene_Diario
Scene_Diario.prototype.save = function() {
  DataManager.saveGame(1);  //salva il gioco nello slot numero 1
  this.popScene();          //ritorna alla scena precedente
};
 

Ultima chicca fresca fresca... Ho deciso di poter far avere al giocatore la possibilità di poter caricare un altro salvataggio

utilizzando lo strumento Diario. Per farlo, anche in questo caso, si implementa il metodo corrispondente, ovvero Load.

 

Metodo Load:  

//Anche in questo caso richiamiamo e avvisiamo che lo stiamo implementando in Scene_Diario.
Scene_Diario.prototype.load = function() {
  DataManager.loadGame(1); //carica il gioco dal file di salvataggio numero 1.
  this.popScene();         //torna alla scena precedente.
  
  //dopo avere attivato il comando load, si accingerà a caricare la partita selezionata e..
  SceneManager.goto(Scene_Map);  //va alla mappa corrispondente a quel salvataggio.
}; 

 

Risorsa assembrata:

Spoiler

//specifica che la classe Scene_Diario è figlia di Scene_MenuBase
function Scene_Diario() {
  this.initialize.apply(this, arguments);
}

Scene_Diario.prototype = Object.create(Scene_MenuBase.prototype);
Scene_Diario.prototype.constructor = Scene_Diario;

//Progetta la scena:
Scene_Diario.prototype.initialize = function() {
  Scene_MenuBase.prototype.initialize.call(this);
  this._pagina = 0;
  this._maxNumPag = 0;
  this._inserimento = false;
};

//Organizza la scena:
Scene_Diario.prototype.create = function() {
  Scene_MenuBase.prototype.create.call(this);
  this.creaFinestraDiario();  //sezione in cui leggeremo le nostre annotazioni
  this.creaFinestraInput();   //sezione dove digiteremo i nostri pensieri,intuizioni.
  this.creaFinestraCmd();     //sezione in cui ci saranno i comandi di salvataggio/carica partita
  this.refreshDiario();       //pulisce tutte cose
};

//...........creiamo quelle sezioni in organizza scena uno ad uno........

//Finestra Diario:
Scene_Diario.prototype.creaFinestraDiario = function() {
  this._finestraDiario = new Finestra_Diario();
  this._finestraDiario.setHandler('cancel', this.popScene.bind(this));
  this._finestraDiario.setHandler('pagedown', this.nextPage.bind(this));
  this._finestraDiario.setHandler('pageup', this.prevPage.bind(this));
  this.addWindow(this._finestraDiario);
};

//Finestra Input:
Scene_Diario.prototype.creaFinestraInput = function() {
  this._finestraInput = new FinestraDiarioInput();
  this._finestraInput.setHandler('ok', this.onInputOk.bind(this)); //conferma input
  this._finestraInput.setHandler('cancel', this.onInputCancel.bind(this)); // annulla input
  this.addWindow(this._finestraInput);
  this._finestraInput.hide();
};

//Finestra Comandi Save/Load:
Scene_Diario.prototype.creaFinestraCmd = function() {
  this.finestraCmd.setHandler('save',this.save.bind(this));
  this.finestraCmd.setHandler('load',this.load.bind(this));
  this.finestraCmd.setHandler('cancel',this.popScene.bind(this));
  this.addWindow(this._creaFinestraCmd);
};

//Pulisci tutto:
Scene_Diario.prototype.refreshDiario = function() {
  this._pagina = 0;
  this._maxNumPag = Math.ceil($gameSystem.diario.length / this.finestraDiario.maxLines());
  this.finestraDiario.refresh();
};

Ora...we..tutto molto bello tecnico freddo calcolato come piace a noi programmatori..MA!
Anche l'occhio vuole la sua parte, pertanto lo rendiamo personalizzabile anche graficamente? avanti dai su   

Spoiler

 

Bisogna recarci nella sezione create o come piace definirla a me 'organizza scena' e una volta lì aggiungere l'implementazione. 

//tra la stringa Scene_MenuBase.prototype.create.call(this);
//Inserite queste istruzioni:
                 this.creaSfondo();
                 this.creaCornice();
//e la stringa   this.creaFinestraDiario(); //sezione in cui leggeremo le nostre annotazioni

Una volta chiamate le due funzioni, occorre definirne i due Metodi.


Metodo creaSfondo:

//creiamo la possibilità di inserire un immagine in Background:
Scene_Diario.prototype.creaSfondo = function() {
  this._sfondo = new Sprite();
  this._sfondo.bitmap = ImageManager.loadSystem('img/system/SfondoDiario.png');
  this.addChild(this._sfondo);
}; 

Metodo creaCornice:

//creiamo la possibilità di inserire un immagine in Foreground:
Scene_Diario.prototype.creaCornice = function() {
  this._cornice = new Sprite();
  this._cornice.bitmap = ImageManager.loadSystem('img/system/CorniceDiario.png');
  this.addChild(this._cornice);
}; 

Adesso che abbiamo assegnato lo sfondo e la cornice a tutta la scena Diario, perché non assegnare anche uno sfondo e una cornice alle singole finestre che compongono la scena. Lo facciamo? ..e famo! 

 

Rechiamoci in FInestra DIario:

Scene_Diario.prototype.creaFinestraDiario = function() {
  this._finestraDiario = new Finestra_Diario();

  this._finestraDiario.setBackgrounImage('img/system/sfondoFinestraDiario.png');
  this._finestraDiario.setForegrounImage('img/system/corniceFinestraDiario.png');

  this._finestraDiario.setHandler('cancel', this.popScene.bind(this));
  this._finestraDiario.setHandler('pagedown', this.nextPage.bind(this));
  this._finestraDiario.setHandler('pageup', this.prevPage.bind(this));
  this.addWindow(this._finestraDiario);
};  

Rimaniamo in FInestra Diario. Poiché che ne dite se assegnassimo delle immagini che rappresentano i tre tasti lì hm?

Scene_Diario.prototype.creaFinestraDiario = function() {
  this._finestraDiario = new Finestra_Diario();

  this._finestraDiario.setBackgrounImage('img/system/sfondoFinestraDiario.png');
  this._finestraDiario.setForegrounImage('img/system/corniceFinestraDiario.png');

  this._finestraDiario.setHandler('cancel', this.popScene.bind(this));
  this._finestraDiario.setCancelItemImage('cancel', 'img/system/IconaCancel.png');

  this._finestraDiario.setHandler('pagedown', this.nextPage.bind(this));
  this._finestraDiario.setPagedownItemImage('pagedown', 'img/system/IconaPagedown.png');

  this._finestraDiario.setHandler('pageup', this.prevPage.bind(this));
  this._finestraDiario.setPageupItemImage('pageup', 'img/system/IconaPageup.png');

  this.addWindow(this._finestraDiario);
}; 

Rechiamoci in FInestra Input:

Scene_Diario.prototype.creaFinestraInput = function() {
  this._finestraInput = new FinestraDiarioInput();

  this._finestraInput.setBackgrounImage('img/system/sfondoFinestraInput.png');
  this._finestraInput.setForegrounImage('img/system/corniceFinestraInput.png');

  this._finestraInput.setHandler('ok', this.onInputOk.bind(this)); //conferma input
  this._finestraInput.setOkItemImage('ok', 'img/system/IconaOk.png');

  this._finestraInput.setHandler('cancel', this.onInputCancel.bind(this)); // annulla input
  this._finestraInput.setCancelItemImage('cancel', 'img/system/IconaCancel.png');

  this.addWindow(this._finestraInput);
  this._finestraInput.hide();
}; 

Rechiamoci in Finestra Comandi Save/Load: 

Scene_Diario.prototype.creaFinestraCmd = function() {
  this._finestraCmd = new FinestraCmd();
  this._finestraCmd.setBackgrounImage('img/system/sfondoFinestraCmd.png');
  this._finestraCmd.setForegrounImage('img/system/corniceFinestraCmd.png');  

  this.finestraCmd.setHandler('save',this.save.bind(this));
  this._finestraCmd.setSaveItemImage('save', 'img/system/IconaSave.png');

  this.finestraCmd.setHandler('load',this.load.bind(this));
  this._finestraCmd.setLoadItemImage('load', 'img/system/IconaLoad.png');

  this.finestraCmd.setHandler('cancel',this.popScene.bind(this));
  this._finestraCmd.setCancelItemImage('cancel', 'img/system/IconaCancel.png');

  this.addWindow(this._creaFinestraCmd);
}; 

Per quanto riguarda la grafica rimarrebbe soltanto creare un'animazzioncina inerente il rendere i tasti dinamici e soprattutto mi piace l'idea che il Diario venisse sfogliato, quindi ci sia questa animazione. Ho un po di sonno adesso, però mi piace l'idea e la completerò in giornata stessa. Ho solo un po di sonnolenza e non vorrei fare errori stupidi.  

Un'altra cosa che potrebbe essere carina è inserire all'interno della nostra scena Diario degli elementi sonori e
fondamentalmente si fa così:

Spoiler

Rechiamoci in organizza Scena:

Scene_Diario.prototype.create = function() {
  Scene_MenuBase.prototype.create.call(this);
  this.creaSfondo();          //assegna immagine sfondo  Diario
  this.creaCornice();         //assegna immagine cornice Diario
  this.creaFinestraDiario();  //sezione in cui leggeremo le nostre annotazioni
  this.creaFinestraInput();   //sezione dove digiteremo i nostri pensieri,intuizioni.
  this.creaFinestraCmd();     //sezione in cui ci saranno i comandi di salvataggio/carica partita
  this.refreshDiario();       //pulisce tutte cose
  this.playBgm();             //riproduce musica di sottofondo
  this.playBgs();             //riproduce suoni di sottofondo
  this.playMe();              //riproduce effetti musicali
  this.playSe();              //riproduce effetti sonori
}; 

Adesso dobbiamo implementare i metodi che ci serviranno per riprodurre i file audio.
Quindi iniziamo con il definire il Metodo playBGM:

//musica di sottofondo:
Scene_Diario.prototype.playBgm = function() {
  AudioManager.playBgm({
   name: 'Diario_Bgm',
   volume: 90,
   pitch: 100,
   pan: 0,
   src: 'audio/bgm/Diario_Bgm.mp3'
  });
}; 

Metodo playBGS:

//suono di sottofondo:
Scene_Diario.prototype.playBgs = function() {
  AudioManager.playBgs({
   name: 'Diario_Bgs',
   volume: 90,
   pitch: 100,
   pan: 0,
   src: 'audio/bgs/Diario_Bgs.mp3'
  });
}; 

Metodo playMe:

//effetti musicali:
Scene_Diario.prototype.playMe = function() {
  AudioManager.playMe({
   name: 'Diario_Me',
   volume: 90,
   pitch: 100,
   pan: 0,
   src: 'audio/me/Diario_Me.mp3'
  });
};  

Metodo playSe:

//effetti sonori:
Scene_Diario.prototype.playSe = function() {
  AudioManager.playSe({
   name: 'Diario_Se',
   volume: 90,
   pitch: 100,
   pan: 0,
   src: 'audio/se/Diario_Se.mp3'
  });
};   

per il momento mi fermo qua. ma in giornata implementerò le animazioni dei tasti. 

Modificato da Lomax_Iced, 10 January 2023 - 07:42 AM.

[Ischenderun]

Mi sfugge qualcosa. In che modo il giocatore avrebbe la possibilità di scrivere sue note personali?

[Guardian of Irael]

È bello vedere parti di codice spiegati in questa maniera sia qui che nello scriptino per l'orario. Sono funzioni che possono essere riutilizzate in diversi casi. Se ti è possibile consiglierei di fare qualche esempio di caso d'uso; magari un piccolo progettino che racchiude i vari scriptini presentati, un video o anche solo un esempio supportato da codice/comandi e immagini. Lo dico perché sembrano script rivolti a chi non se ne intende molto, ma che comunque potrebbe trovarne difficile l'applicazione.

^ ^

[Louie]

Una piccola demo con qualche esempio sarebbe fantastica, anche perché viene molto comodo agli utenti per provarla e archiviarla insieme agli altri script da ritirare fuori quando capita l'occasione :)

[Lomax_Iced]

Avete ragione. Provvedo. Aggiorno il primo post e faccio un lavoro certosino.    

[Louie]

Avete ragione. Provvedo. Aggiorno il primo post e faccio un lavoro certosino.    

Super! Ti ho risposto anche nell'altro topic sul QTE a proposito, ma prima di aver letto qui! Pardon! 

[Lomax_Iced]

Super! Ti ho risposto anche nell'altro topic sul QTE a proposito, ma prima di aver letto qui! Pardon! 

Nulla di cui debba perdonarti. Hai fatto benissimo a correggere. Ti spiego scrivo tramite il Cell durante i tragitti, casa lavoro e viceversa, quindi il fatto è che non ho avuto modo di aprire né sublime e né Rpgmaker. Le funzioni sono compatibili lo so per certo, però hai ragione di quanto detto farò una demo. 

 

Grazie mille anche a Ischenderun che mi fa notare ciò che mi dimentico. Darò un'impostazione più chiara anche per quell'aspetto.