MegaPost de códigos de Javascript

[Geraldo de Rívia]

MEGA POST DE
JAVASCRIPT
PARA RPG MAKER MV

Este tópico não é para pedir scripts prontos 

Saudações, pessoal!
Este será um tópico com códigos e códigos-base para criar seus scripts. Em teoria, todas informações que precisamos para criar ou modificar algum plugin - provavelmente vou me referir a eles muito como scripts pelo costume - já existem nos códigos do RPG Maker, mas para quem não entende muito de programação, torna-se uma tarefa impossível retirar o que realmente precisa daquela montoeira de palavras e números.
Por exemplo, algo bem comum é querer colocar o tempo de jogo na tela de menu. Mas como fazer isso? Onde procurar? Onde colocar? Para isto que servira este tópico. Aqui você encontrará códigos para fazer as coisas, dicas e códigos-base prontos para criar os seus, como janelas, por exemplo.

Vale ressaltar que, bom... eu não sou programador, então vou evitar escrever teoria. Os códigos postados serão da forma como eu utilizo, mas aqueles que tiverem modos melhores, sintam-se à vontade para postar. Caso tenha alguma dúvida, pode postar também que posso procurar auxiliá-lo a encontrar o código que precisa.

LINKS ÚTEIS:
• W3schools
   Site com um banco de dados de funções em javascript, explicação de cada código, exemplos e tutoriais (em inglês).
• Notepad++
   Programa para editar códigos.

[box2 class=red title=Informações]

SISTEMA

Nome de uma variável Este código retorna um valor em texto.

$dataSystem.variables[n]

n = id da variável.

Valor de uma variável Este código retorna um valor numérico.

$gameVariables.value(n)

n = id da variável.

Nome de uma switch Este código retorna um valor em texto.

$dataSystem.switches[n]

n = id da switch.

Valor de uma switch Este código retorna um valor booleano.

$gameSwitches.value(n)

n = id da switch.

PERSONAGEM

Para obter uma informação de algum personagem do grupo ou do banco de dados precisamos definir, primeiramente qual será o personagem. Podemos fazer isso de duas formas: a primeira, como o programa faz, que é definindo uma variável para o personagem do qual vamos extrair as informações (geralmente essa variável é nomeada como actor); a segunda é pulando o uso dessa variável e utilizando o código que indica qual personagem será diretamente junto com a função que extrai a informação.

var actor = $gameParty.members(0); //este código define actor como sendo o primeiro personagem do grupo.
var actor = $dataActors[0];        //este código define actor como sendo o primeiro personagem do banco de dados.

actor.name();                  //este código retorna o nome do personagem definido acima. 1ª forma.
$gameParty.members(0).name()   //este código retorna o nome do primeiro personagem do grupo. 2ª forma.

Nome de um personagem Este código retorna um valor em texto.

actor.name()

Apelido de um personagem Este código retorna um valor em texto.

actor.nickname()

Classe atual de um personagem Este código retorna um valor em texto.

actor.currentClass().name()

[/box2]

[box2 class=red title=Windows]

Criar uma window com posição fixa

Window, ou janela, é a estrutura base das scenes. É nelas que você vai escrever a maioria das informações como dados dos personagens, textos, imagens como faces e barras. Enfim, é muito importante saber como criar uma para poder exibir o dado que você quiser.
Abaixo existe um código-base que você pode usar para criar uma Window.

IMPORTANTE: Esse código base é para windows que herdem propriedades da Window_Base. Sendo assim, não utilizem esta base para criar janelas de seleção, como a Window_ItemList ou Window_MenuCommand.

//=============================================================================
// Window_NomeDaWindow
//-----------------------------------------------------------------------------
// Aqui você escreve uma descrição da window. É bom para se organizar.
//=============================================================================
function Window_NomeDaWindow() {
  this.initialize.apply(this, arguments);
}

Window_NomeDaWindow.prototype = Object.create(Window_Base.prototype);
Window_NomeDaWindow.prototype.constructor = Window_NomeDaWindow;

Window_NomeDaWindow.prototype.initialize = function() {
  Window_Base.prototype.initialize.call(this, x, y, largura, altura);
};

Window_NomeDaWindow = nome da window/janela.
x = coordenada x de onde a window será criada. Este valor deverá ser um número.
y = coordenada y de onde a window será criada.
largura = largura da window. Este valor também deverá ser um número.
altura = altura da window.

Desenhar um texto em uma window

this.drawText(texto, x, y, largura, alinhamento);

texto = texto que deseja escrever. Este valor deve ser uma string/texto.
x = coordenada x de onde o texto será criado no conteúdo da janela. Este valor deverá ser um número.
y = coordenada y de onde o texto será criado no conteúdo da janela.
largura = largura que o texto poderá ocupar.
alinhamento = alinhamento do texto ('left', 'center' ou 'right').

Desenhar um ícone em uma window

this.drawIcon(idDoIcone, x, y);

idDoIcone = id do ícone a ser desenhado. Este valor deverá ser um número.
x = coordenada x de onde o ícone será criado no conteúdo da janela. Este valor deverá ser um número.
y = coordenada y de onde o ícone será criado no conteúdo da janela.

[/box2]

[box2 class=red title=Scenes]

Mostrar uma window com posição fixa

IMPORTANTE: Esse código base é uma função. Para fazer efeito você deve chamá-la dentro de uma outra função na scene escolhida (na função initialize por exemplo).

Scene_NomeDaScene.prototype.createNomeDaWindow = function() {
  this.nomeDaWindow = new Window_NomeDaWindow();
  this.addChild(this.nomeDaWindow);
};

  this.createNomeDaWindow(); //código que chama a função.

Scene_NomeDaScene = scene em que você irá exibir a window.
createNomeDaWindow = nome da função que cria a window.
nomeDaWindow = variável em que será guardada a window a ser criada.
Window_NomeDaWindow = window que será criada.

[/box2]

[ErickNeves]

Meu sofrimento para tentar entender foi sua inspiração?

Bom, brincadeiras (ou não) a parte, achei uma iniciativa muito boa, para pessoas que demoram um pouco mais para entender isso é realmente de muita ajuda.

Eu mesmo já vou deixar essa pagina salva e ficar dando uns F5 nela as vezes para ver se tem coisas novas.

Já tem coisa ai que eu não sabia que só estou esperando dar a hora do almoço para ir para casa testar 

Apoio total 

[Geraldo de Rívia]

Heuhaue na verdade também foi. Mais alguns amigos pediram tipo um tutorial ou explicasse como fiz
alguns sistemas recentemente. Não sei tanto, mas acho que já daria pra passar algo pra mexer um
pouco.
Vou tentar fazer uns videos também, de como usar esses códigos aqui.

Ah, é bom salvar mesmo. À medida que o tempo for dando eu vou acrescentando mais coisas. 

[ErickNeves]

Bom né, deixa eu começar então minhas perguntas

Fui fazer aqui e saiu isso:

Spoiler

 

    var winTeste = Scene_Map.prototype.update;
	Scene_Map.prototype.update = function() {
		
	winTeste.call(this);

	//=============================================================================
		// Window_Teste
		//-----------------------------------------------------------------------------
		// Aqui você escreve uma descrição da window. É bom para se organizar.
		//=============================================================================
		function Window_Teste() {
		this.initialize.apply(this, arguments);
		}		

		Window_Teste.prototype = Object.create(Window_Base.prototype);
		Window_Teste.prototype.constructor = Window_Teste;

		Window_Teste.prototype.initialize = function() {
		Window_Base.prototype.initialize.call(this, 100, 100, 250, 50);
		};
	
		winTeste.prototype.createTestWin= function() {
		this.Janela = new Window_Teste();
		this.addChild(this.Janela);
};

		if ($gameSwitches.value(1) == true)
		{
		this.Janela(); //código que chama a função.
	
		}
	}
	

 

[close]

E isso está errado, certeza, porque está dando erro. Falando:
TypeError: undefined is not a function.

Tá, onde está o erro?
Eu sinto, só sinto que é algo muito feio que errei ai, mas o que? 
Criei em lugar errado? Nomei em lugares errados?
Ou tá tudo errado 

[Geraldo de Rívia]

Vixe, tem um bocado de coisa errada uehauhe
Bom, primeiro seria interessante tu ver o debug quando acontecer erros. Digo, tu aperta F8
quando ocorrer, daí abre o log mostrando qual plugin bugou, em qual linha e o quê bugou.

No seu caso, tu literalmente criou a window dentro da Scene, e não é bem por aí. A window
e todas suas funções são criadas fora da scene e dentro da scene tu somente cria a função
que vai mostrar a window. Depois coloca a linha que chama a função que cria a window,
dentro de alguma função da scene. Não aconselho colocar na update porque ela é lida sempre.

[ErickNeves]

No caso seria assim então?
Mas chamar ela fora do update.

Nota: Editei pelo pc do trabalho mega bom, win xp e sem notepad++  :¬¬:

Spoiler

 

//=============================================================================
		// Window_Teste
		//-----------------------------------------------------------------------------
		// Aqui você escreve uma descrição da window. É bom para se organizar.
		//=============================================================================
		function Window_Teste() {
		this.initialize.apply(this, arguments);
		}		

		Window_Teste.prototype = Object.create(Window_Base.prototype);
		Window_Teste.prototype.constructor = Window_Teste;

		Window_Teste.prototype.initialize = function() {
		Window_Base.prototype.initialize.call(this, 100, 100, 250, 50);
		};

    var winTeste = Scene_Map.prototype.update;
	Scene_Map.prototype.update = function() {
		
	winTeste.call(this);

	
	
		winTeste.prototype.createTestWin= function() {
		this.Janela = new Window_Teste();
		this.addChild(this.Janela);
};

		if ($gameSwitches.value(1) == true)
		{
		this.Janela(); //código que chama a função.
	
		}
	}
	

 

[close]

Se eu tivesse criado um arquivo separado e nele criar todas as janelas eu conseguiria abrir elas por um outro arquivo?

Eu tenho tipo: creationWin.JS onde eu crio elas
e tenho um openWin.JS que seria os momentos em que eu chamarei elas.
Isso funciona?

[Sotelie]

Que ótimo. Tava estudando ruby ao mesmo tempo que JS e tava sentindo falta de uma lista dessas rs'
Fixando aqui pra acesso rápido.

[ErickNeves]

Olha quem voltou !
Estava com problemas no trabalho e em semanas de prova na facul, dai nem fui no MV esses dias D:

Agora eu to de volta, ainda com minhas janelas dando erro 

Eu tenho feito igual tá ali para criar a janela.

E sempre me da esse erro:  Cannot read property 'apply' of undefined.

Falando que não pode ler o apply por ser indefinido?

Dai ele sempre me aponta para essa parte do código:

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

Dai eu fiquei pensando, será que o erro é o que eu coloco alo no arguments?
Mudei e testei varias coisas e fail e mais fail.

O que eu devo colocar ali para funcionar de boa?

[iJackBoy]

(Não é obrigado a ler isso)...
Sabe, quando eu fui tirar a minha carteira de motorista eu passei por 10 aulas e moto e mais 10 de carro, só que no dia eu não sabia como funcionava bem a embreagem de um carro ou moto, tive duvidas por que precisava um pouco de pratica a mais! Não tem nada haver com a iniciativa aqui só um pensamento meu sobre o que estou refletindo na aprendizagem com javaScript. Só que as vezes um exemplo pratico ajuda a entender melhor que ficar girando em palavras e mais palavras, não digo que essencial um exemplo pratico e você liga o automático e sabe tudo não, claro quem sou eu pra dizer como se deve aprender ou ensinar, mas enfim eu aprendo melhor assim...

(Pra entender leia isto)...

Quando eu abri a pasta de JS no MV me veio uma grande duvida como cada coisa funcionam nele. Dai estudei javaScript e comecei a compreender melhor o que é uma função e tal, como as fluem dentro de todo aqueles códigos. Vou mostrar de uma forma pratica de como até então eu entendi o funcionamento de cada arquivos de JS. claro que eu não vou mostrar onde você deve mexer ou que pode usar e como, não, é só para ter uma ideia e você tentar imaginar como isso tudo funciona, até mesmo nem tudo nele é visual...



A parti desta parte de eu estiver errado me ajudem a concertar e aprender um pouco mais.


RPG CORE
     São métodos adicionais que foram incluídos ao RPG maker, através do javaScript; exemplo: Uma função que me ajuda a calcular sem eu ter que criar uma nova função para aquilo "somar 5 * 7 através de uma função, então no CORE ela já existe!. Funções já prontas para você utilizar com apoio aos Plugin/Script's.

RPG MANAGERS
     Existem funções e onde é manipulados os dados do DataBase e diretórios do RTP(Até onde eu vi...).

RPG SCENES
     São as cenas que movem o jogo, quando você entra no titulo, quando você vai ao mapa, quando você abre o menu ou entra em uma batalha, cada local desses é uma Scene, como um filme, então já deve ter uma uma ideia, como na imagem essa Scene_Map.

RPG SPRITES
     São as Imagens do jogo, o personagem que você anda, os tile que você usa, as fotos no menu são sprintes. Tudo você vai encontrar neste arquivo relacionado a imagens e como ele funciona dentro do maker.
!!!Só pra você entender e tirar um pouco a duvida entre, Sprites e Bitmaps. Parecem ser o mesmo porem não, Sprinte é como um quadrado Vazio na tela onde você coloca algo dentro. Como por exemplo uma foto que é um Bitmap deu pra entender? [Sprite(Bitmap)]...

RPG OBJECTS
     Como gostamos de imaginar aqui bastante, os Objetos são qualquer coisa dentro do Maker onde você pode manipular, como os eventos! Eles são objetos, na imagem eu coloque no mesmo local do personagem sim ele é um objeto, ah mas ali não é um Sprinte? Sim também é porém para que o movimento aconteça, é através dos Objetos que sera modificado isto. Aprendendo um pouco de JS você vai entender melhor, neste arquivo de Objetos é onde você manipula informações de Base.

RPG WINDOWS
     São as Janelas do jogo, tudo que você ver como janelas, menu, mensagens e etc... Você vai encontrar neste arquivo de como ela são criadas.

Bom é isso se ajudar a entender melhor... Detalhe eu ainda não criei nada só estou imaginando, to Japis em RPG maker ainda, e só.

[Sotelie]

De fato, tem uma galerinha aí que ainda não entende a diferença entre Sprite e Bitmap, e como elas funcionam dentro do jogo.
O Bitmap é a imagem desenhada na tela, enquanto no Sprite que você pode fazer configurações como ponto de origem, colisão em pixels e outras manipulações que são mais perceptíveis em engines como Unity.
o/

[iJackBoy]

E ai pessoal, retornando com mais algumas dicas. Vou falar um pouco de como funcionam as palavras reservadas, prototype, this, call e apply.

A partir deste exemplo de código, é mais para entender um pouco de como funcionam e no final da explicação vou da um dica simples porém interessante!

Código retirado do Plugin "AltMenuScreen" que vem junto do MV.
###############################################################
var _Scene_Menu_create = Scene_Menu.prototype.create;
    Scene_Menu.prototype.create = function() {
        _Scene_Menu_create.call(this);
        this._statusWindow.x = 0;
        this._statusWindow.y = this._commandWindow.height;
        this._goldWindow.x = Graphics.boxWidth - this._goldWindow.width
    };
###############################################################

:prototype:
          Se você estudou JavaScript essa vai ser uma das funções mais utilizadas para se construir um código, O que ele faz basicamente é:

Parece confuso o que vou dizer agora mas vai fazer um certo sentido. Não entenda como estamos adicionando a Scene_Menu o código acima. Estamos adicionando a um protótipo de Scene_Menu, Não necessária mente estamos indo direto ao Scene_Menu e alterando mas sim a uma copia digamos assim.

:this:
          O this funciona como uma referencia ao objeto que esta sendo utilizado para aquele código.
ex:

Então o this, serve para você referenciar o objeto que esta sendo utilizado, em construtores são essenciais.
Ou seja com um código pequeno de construtor e dentro dele sendo utilizado this. para construir as propriedades daquele objeto eu posso criar vários objetos sem ter que escrever de um em um.

:call:
          Como funciona o Método call, no código acima vemos que é utilizado o this com referencia a Scene_Menu porém para que ele fique com o this direcionado para ele você precisa informar, do contrario o valor padrãp de this fica direcionado a Window;
Observe que:
(A variável recebe um protótipo de Create).
var _Scene_Menu_create = Scene_Menu.prototype.create;
(E aqui vamos ler dessa forma: call/this/Scene_Menu-Create ou Ligue o "this" em Scene_Menu em Create.)
_Scene_Menu_create.call(this);
(Então ele deixa de ser window e passa a ser Scene_Menu.)

:apply:
          o apply funciona da mesma forma que o call porém ele passa mais de um parâmetro.
ex:
this.initialize.apply(this, arguments);


Se errei em algo fique a vontade para me corrigir. :D

DICA
Sim, é a seguinte; como todos devem saber se digitarmos "console.log(x);" sera impresso no console do MV, o que solicitamos.
Então neste caso voltando ao this, se abrimos o editar de script por exemplo nas Scenes, pode ser a Base mesmo e colocarmos no esboço de Scene_Base.prototype.update = function() { para printar o this "console.log(this)", veremos como o maker esta trabalhando nas atualizações do jogo com o this. Achei interessante passar isto. Ahh não é a melhor dica! Claro que não, mas podemos ver as coisas de uma forma diferente do que imaginamos quando lemos um código no rpg maker. era isso :D

[Mister ATS]

ola ñ sei merda nenhuma e ñ entendi nds , mas quero aprender... onde começo?

[Sotelie]

Primeiramente, aqui não é exatamente uma aula de javascript. Portanto cuidado com o flood.
Se quiser aprender javascript, existem muitas fontes na internet. Uma delas é o Codecademy.
Lá você deve aprender algumas coisas para começar. Mas recomendo que teste outras fontes também para expandir seu aprendizado.

[Conspiracy]

Uma boa dica pra também aprender a puxar coisas, é dar uma "traduzida", já que a maioria das coisas no maker tem nomes intuitivos.

Uma diferença pra quem mexia com RGSS3, é que em ruby é comum usar underscores (ou underlines)

como "name_of_function" enquanto no javascript é comum o CamelCase, como "nameOfFunction()".

a propósito, [user]emerson_gin[/user]

citacao

E ai pessoal, retornando com mais algumas dicas. Vou falar um pouco de como funcionam as palavras reservadas, prototype, this, call e apply.

A partir deste exemplo de código, é mais para entender um pouco de como funcionam e no final da explicação vou da um dica simples porém interessante!

Código retirado do Plugin "AltMenuScreen" que vem junto do MV.
###############################################################
var _Scene_Menu_create = Scene_Menu.prototype.create;
    Scene_Menu.prototype.create = function() {
        _Scene_Menu_create.call(this);
        this._statusWindow.x = 0;
        this._statusWindow.y = this._commandWindow.height;
        this._goldWindow.x = Graphics.boxWidth - this._goldWindow.width
    };
###############################################################

:prototype:
          Se você estudou JavaScript essa vai ser uma das funções mais utilizadas para se construir um código, O que ele faz basicamente é:

Parece confuso o que vou dizer agora mas vai fazer um certo sentido. Não entenda como estamos adicionando a Scene_Menu o código acima. Estamos adicionando a um protótipo de Scene_Menu, Não necessária mente estamos indo direto ao Scene_Menu e alterando mas sim a uma copia digamos assim.

:this:
          O this funciona como uma referencia ao objeto que esta sendo utilizado para aquele código.
ex:

Então o this, serve para você referenciar o objeto que esta sendo utilizado, em construtores são essenciais.
Ou seja com um código pequeno de construtor e dentro dele sendo utilizado this. para construir as propriedades daquele objeto eu posso criar vários objetos sem ter que escrever de um em um.

:call:
          Como funciona o Método call, no código acima vemos que é utilizado o this com referencia a Scene_Menu porém para que ele fique com o this direcionado para ele você precisa informar, do contrario o valor padrãp de this fica direcionado a Window;
Observe que:
(A variável recebe um protótipo de Create).
var _Scene_Menu_create = Scene_Menu.prototype.create;
(E aqui vamos ler dessa forma: call/this/Scene_Menu-Create ou Ligue o "this" em Scene_Menu em Create.)
_Scene_Menu_create.call(this);
(Então ele deixa de ser window e passa a ser Scene_Menu.)

:apply:
          o apply funciona da mesma forma que o call porém ele passa mais de um parâmetro.
ex:
this.initialize.apply(this, arguments);


Se errei em algo fique a vontade para me corrigir. :D

DICA
Sim, é a seguinte; como todos devem saber se digitarmos "console.log(x);" sera impresso no console do MV, o que solicitamos.
Então neste caso voltando ao this, se abrimos o editar de script por exemplo nas Scenes, pode ser a Base mesmo e colocarmos no esboço de Scene_Base.prototype.update = function() { para printar o this "console.log(this)", veremos como o maker esta trabalhando nas atualizações do jogo com o this. Achei interessante passar isto. Ahh não é a melhor dica! Claro que não, mas podemos ver as coisas de uma forma diferente do que imaginamos quando lemos um código no rpg maker. era isso :D

[close]

sobre o call, sempre usei para mais argumentos, e funcionou perfeitamente.
Basicamente:
Apply: Permite usar arrays na passagem de parametros.
Call: Você deve listar os argumentos 1 a 1.
Exemplo:

function funcaoProfissao(name, profession) {
    console.log("Meu nome eh: " + name + " e eu trabalho com: " + profession + ".");
}
funcaoProfissao("Joao", "Pedreiro");
funcaoProfissao.apply(undefined, ["BidaCS", "Caster"]);
funcaoProfissao.call(undefined, "Toboco", "Narrador");