♫ in the jungle, the mighty jungle, the lion sleeps tonight ♫
Olá a todos, como vão? Eis mais um tutorial de scripting/codificando no RPG Maker MV utilizando o Javascript. Desta vez, vamos aprender a criar janelas. De início, iremos aprender a fazer o básico, para assim prosseguir com outras coisas.
Para começar, crie um arquivo .js para converter o arquivo em linguagem em Javascript. Dentro dele, vamos começar a formar a base principal de uma janela.
No arquivo, crie uma function(); com essa estrutura:
Código:
function Janela() {
this.initialize.apply(this, arguments);
}Substitua o nome da função Janela por um nome de janela que você quiser, na prática. Mas por enquanto vamos usar esse nome, lembre-se que este nome será utilizado em todos os códigos que vou citar neste.
Este código é essencial para a criação de uma janela, alias, é essencial para vários tipos de sistema que você utilizar, como Scene.
O código this.initialize.apply(this, arguments); é a ativação da janela pelo protótipo Initialize que ainda não criamos, enquanto não criarmos este protótipo, o código não vai criar a janela.
Antes de criá-la. Vamos colocar alguns códigos antes:
Código:
Janela.prototype = Object.create(Window_Base.prototype);Esse código dá a ideia ao tipo de janela que queremos criar. Neste caso, vamos usar a Base de uma janela normal, como está definida como Window_Base.prototype.
Código:
Janela.prototype.constructor = Janela;Este código representa o construtor da janela.
Lembre-se! Na prática, sempre coloque o nome da sua janela com o nome que você definiu na function(); nas primeiras linhas de cada protótipo que você criar.
Agora sim, estamos prontos para criar o protótipo Initialize.
O protótipo Initialize tem essa estrutura:
Código:
Janela.prototype.initialize = function(x, y) {
var width = 150;
var height = 150;
Window_Base.prototype.initialize.call(this, x, y, width, height);
}Esse protótipo define a forma da sua janela e a posição dela.
Dentro do comando Window_Base.prototype.initialize.call É definido as coordenadas (x e y) a largura e a altura da janela. Mas dentro deste comando, não definiremos as coordenadas, apenas a largura e altura. Como está no código, coloquei 100 pixels para expandir, um quadrado praticamente.
Já terminamos o básico. E para ter certeza que funcionou, vamos colocá-la no mapa.
Vamos adicionar esse código abaixo no nosso script:
Código:
var map_start = Scene_Map.prototype.start;
Scene_Map.prototype.start = function() {
map_start.call(this);
this._Janela = new Janela(0, 0);
this.addWindow(this._Janela);
};Ela basicamente chama o protótipo padrão Start do Scene_Map para não ocorrer erros e repetições, e em seguida é adicionado a janela por dois comandos:
this._Janela = new Janela(0, 0);
O código citado cria um objeto, que é a nossa janela, e define as coordenadas da posição dela no mapa, neste caso, na ponta superior-esquerdo (x = 0 e y = 0), mas ainda não a colocamos no mapa...
this.addWindow(this._Janela);
... por isso, este comando serve para ativar a janela que criamos dentro do mapa.
O resultado final do script é esse:
Código:
function Janela() {
this.initialize.apply(this, arguments);
}
Janela.prototype = Object.create(Window_Base.prototype);
Janela.prototype.constructor = Janela;
Janela.prototype.initialize = function(x, y) {
var width = 100;
var height = 100;
Window_Base.prototype.initialize.call(this, x, y, width, height);
}
var map_start = Scene_Map.prototype.start;
Scene_Map.prototype.start = function() {
map_start.call(this);
this._Janela = new Janela(0, 0);
this.addWindow(this._Janela);
}A imagem provando que deu certo:
Então é aqui que finalizamos o básico de uma janela.
Por hoje é só, folks! Ainda farei mais tutoriais sobre Janelas no RPG Maker MV como adicionar textos, imagens etc. Então fiquem ligados. Veja outros tutoriais de Javascript MV e de Javascript que estão espalhados no fórum da Academia Tecnológica.
~ Abraços!
Até mais!
