Ajuda para entender o drawItem do Window_Selectable

[Virage Detoldev]

Olá pessoas, como vão?
Bom, queria ajuda para entender algo do JavaScript que não consigo entender seu funcionamento.

Quando vamos criar uma lista de comandos em uma janela, geralmente usamos como base o Window_Selectable, que nos permite criar uma janela com opções. Até aí tudo bem, mas o que eu tenho tentado entender é como funciona o drawItem.

Pelo que eu vi funcionando no Window_MenuStatus, é criada uma lista com opções que exibe uma quantidade de comandos (opões para se clicar) que te leva para a scene de equipamentos, skills, habilidades ou formação, com base no personagem escolhido.

Só que esses comandos do Window_MenuStatus são basicamente um bloco de informações. O que seria somente "uma linha" é um bloco de texto, contendo a face, as informações básicas como nome, classe e etc e os status que o herói tem.

Window_MenuStatus.prototype.drawItem = function(index) {
    this.drawItemBackground(index);
    this.drawItemImage(index);
    this.drawItemStatus(index);
};

Eu entendi que o drawItem pega três funções responsáveis para desenhar cada coisa, sendo o desenho do fundo, o ItemImage que é o avatar do personagem, salvo em outra função e o Item Status, que escreve os status do personagem.

Mas, como aplicar isso a outra tipo de lista? Por que quando ele cria a lista no menu, eu não consigo ver onde que ele escreve o personagem pelo tamanho do grupo:

Scene_Menu.prototype.createStatusWindow = function() {
    this._statusWindow = new Window_MenuStatus(this._commandWindow.width, 0);
    this._statusWindow.reserveFaceImages();
    this.addWindow(this._statusWindow);
};

Minha ideia é criar uma lista de conquistas pro jogo e, ao clicar nisso, você pode transitar pela lista. A janela de informações atualiza o texto pelo index da lista de conquistas, o que eu já consegui, mas ainda não consigo entender como gerar os itens das listas.

Eu teria que criar uma função para cada conquista e dentro delas um drawItem? Para depois chamar pela criação de personagens e por um hanlder para cada conquista que eu fizer?

Isso realmente tem me deixado confuso.

Obrigado.

 

[King Gerar]

A mágica da Window_Selectable começa na função makeItemList. As janelas de seleção possuem a array this._data, que armazena cada um dos itens que irá aparecer na janela de seleção. Logo, se a this._data possui 10 índices, 10 itens serão desenhados na janela de seleção. A função makeItemList prepara esta array, melhor dizendo, ela colhe e armazena na array as informações que deverão ser desenhadas. Por exemplo, na Window_ItemList quando no menu de itens, esta função pega os itens no inventário do jogador e guarda na this._data para que ela desenhe os itens que estão no inventário do jogador.

Definidas as informações, em seguida é chamada a função createContents. Não somente nas janelas de seleção, esta função irá limpar a janela, apagando tudo que tava desenhado ali antes e desenhar o espaço de uma janela vazia ali novamente. É fundamental esta função em janelas cujo conteúdo é variável, ou seja, hora x informações estão nela desenhadas, hora y informações.

Preparada e limpinha, em seguida a janela chama a função drawAllItems, que é onde o trabalho sujo começa. Esta função irá chamar a função drawItem uma vez para cada índice da array this._data. Ou seja, se vocês guardou 10 informações na this._data, o loop da função drawAllItems irá rodar 10 vezes e 10 vezes chamar a função drawItem, sendo que, em cada chamada irá enviar para ela o ID da informação, isto para a função drawItem saber qual informação pegar para desenhar.

A função drawItem irá desenhar a informação, lembrando que ela receberá somente o ID da informação atual, não a informação em si. Por exemplo, em uma this._data = [boi, vaca, cavalo, porco, bode], a função drawItem receberá da drawAllItems os valores 0, 1, 2, 3 e 4, cabendo ao programador criar uma variável dentro da drawItem que pegue a informação referente ao ID atual, tipo var a = this._data[index], onde index é o nome do atributo recebido pela drawItem.

A forma de desenho da função drawItem da Window_MenuStatus é exclusiva dela, assim sendo, não a pegue como modelo para afirmar que "o drawItem pega três funções responsáveis para desenhar cada coisa". Cada uma vai pegar as funções que forem-nas conveniente na hora de desenhar as informações, de tal forma que seria mais interessante tu procurar uma janela de seleção que mais se pareça com a que deseja criar na hora de escolher uma como base.

 

[Virage Detoldev]

A mágica da Window_Selectable começa na função makeItemList. As janelas de seleção possuem a array this._data, que armazena cada um dos itens que irá aparecer na janela de seleção. Logo, se a this._data possui 10 índices, 10 itens serão desenhados na janela de seleção. A função makeItemList prepara esta array, melhor dizendo, ela colhe e armazena na array as informações que deverão ser desenhadas. Por exemplo, na Window_ItemList quando no menu de itens, esta função pega os itens no inventário do jogador e guarda na this._data para que ela desenhe os itens que estão no inventário do jogador.

Definidas as informações, em seguida é chamada a função createContents. Não somente nas janelas de seleção, esta função irá limpar a janela, apagando tudo que tava desenhado ali antes e desenhar o espaço de uma janela vazia ali novamente. É fundamental esta função em janelas cujo conteúdo é variável, ou seja, hora x informações estão nela desenhadas, hora y informações.

Preparada e limpinha, em seguida a janela chama a função drawAllItems, que é onde o trabalho sujo começa. Esta função irá chamar a função drawItem uma vez para cada índice da array this._data. Ou seja, se vocês guardou 10 informações na this._data, o loop da função drawAllItems irá rodar 10 vezes e 10 vezes chamar a função drawItem, sendo que, em cada chamada irá enviar para ela o ID da informação, isto para a função drawItem saber qual informação pegar para desenhar.

A função drawItem irá desenhar a informação, lembrando que ela receberá somente o ID da informação atual, não a informação em si. Por exemplo, em uma this._data = [boi, vaca, cavalo, porco, bode], a função drawItem receberá da drawAllItems os valores 0, 1, 2, 3 e 4, cabendo ao programador criar uma variável dentro da drawItem que pegue a informação referente ao ID atual, tipo var a = this._data[index], onde index é o nome do atributo recebido pela drawItem.

A forma de desenho da função drawItem da Window_MenuStatus é exclusiva dela, assim sendo, não a pegue como modelo para afirmar que "o drawItem pega três funções responsáveis para desenhar cada coisa". Cada uma vai pegar as funções que forem-nas conveniente na hora de desenhar as informações, de tal forma que seria mais interessante tu procurar uma janela de seleção que mais se pareça com a que deseja criar na hora de escolher uma como base.

Se possível, você poderia exemplificar com um código? Acho que eu tenderia melhor vendo na prática.

 

[King Gerar]

No momento não, mas seguindo a Window_ItemList tu acompanharia todos os passos que mencionei, começando pela função refresh, que é quem atualiza a janela e é chamada ao desenhar as informações na janela pela primeira vez. Partindo da Scene_Item imagino que entenderá como e quando ela colhe as informações do inventário do grupo e a forma que os desenha.

 

[Virage Detoldev]

No momento não, mas seguindo a Window_ItemList tu acompanharia todos os passos que mencionei, começando pela função refresh, que é quem atualiza a janela e é chamada ao desenhar as informações na janela pela primeira vez. Partindo da Scene_Item imagino que entenderá como e quando ela colhe as informações do inventário do grupo e a forma que os desenha.

Então se no this._data eu chamar funções no array e nessas funções eu tiver um drawImage, drawIcon e um drawText ele vai ler todas essas informações e vai gerar para mim e comando com tudo isso dentro?

Tipo:

Window_Conquistas.prototype.conquista1 = function() {
this.drawIcon(12, 0, 0);
this.drawText('Conquista 1', Window_Base._iconWidth + 4, this.lineHeight() * 0, this.janelaLargura(), 'left');
this.drawText('Mate 10x Morcegos', 0, this.lineHeight() * 1, this.janelaLargura(), 'left');
};

E aí depois eu armazeno dentro do this._data:

Window_Conquistas.prototype.drawItem= function() {
    this._data = [conquista1(), conquista2(), ... , conquistaN()];
}

Depois eu uso a função de drawAllItens:

Window_Conquistas.prototype.drawAllItems = function() {
    var indexMaximo = this._data._index.length;
    for (var i = 0; i < indexMaximo; i++) {
            this.drawItem(i);
        }
};

E aí eu faço minha lista:

Window_Conquistas.prototype.makeCommandList = function() {
    this.addCommand('Conquista 1', 'con 1'); //Desenha do this._data._index[0];
    this.addCommand('Conquista 2',  'con 2'); //Desenha do this._data._index[1];
    this.addCommand('Conquista N',  'con N'); //Desenha do this._data._index[N];
};

E cada item desses, com tudo o que eu inseri dentro da função de cada conquista vai ser um comando? Automaticamente?



EDIÇÃO: Na verdade, isso que eu escrevi está "meio errado", mas consegui entender BEM lendo o Window_ItemList. Obrigado king Gerar!

 

[Virage Detoldev]

Desculpe o double post, mas eu consegui entender como funciona a criação lendo melhor a Window_ItemList novamente. Algum moderador poderia fechar tópico?