RPG Maker MV Javascript MV - Touch Input Triggers

[DanTheLion]

Javascript MV
Touch Input Triggers​

Olá a todos, como vão? Neste tópico estarei ensinando sobre os comandos de Input Triggers usados para recursos Android/iOS (jogos para Smartphones) e o uso do mouse do PC/Mac dentro do RPG Maker MV.



Assim como as funções de Input Triggers (se você não viu ainda sobre eles, eu recomendo você dar uma olhada no tópico dele clicando AQUI) eles servem para definir os comandos que aparecem na tela do seu jogo quando apertamos uma tecla do Keyboard (teclado) do jogador, e como todos já sabem, o RPG Maker MV também está adaptado para criar jogos para telefones-celular, de preferência Smartphones Android e iOS, como apertar uma vez em algum lugar do mapa do jogo para fazer o jogador andar até ela, ou apertar com os dois dedos para abrir o menu, etc. Ambos os comandos possuem essa função de Input Trigger baseado em tocar na tela dentro dos códigos do seu projeto ou utilizar os cliques do mouse, por isso vamos conhecê-las (ou reforçar o conhecimento delas).

Na tabela abaixo mostra os comandos disponíveis:

Descrição​	Comando​
Quando a tela for tocada/clicada​	TouchInput.isTriggered()​
Quando manter a tela tocada/clicada​	TouchInput.isPressed()​
Quando manter a tela tocada/clicada por 1/2 segundo​	TouchInput.isLongPressed()​
Quando soltar o toque/clique da tela.​	TouchInput.isReleased()​
Quando tocar/clicar na tela repetidamente​	TouchInput.isRepeated()​
Quando deslocar/arrastar o toque/clique em qualquer direção​	TouchInput.isMoved()​
Quando o toque/clique na tela for interrompido ou cancelado​	TouchInput.isCancelled()​

Diferente do Input Trigger normal, este não precisa de um botão específico, já que utiliza apenas do toque na tela (ou os cliques do mouse) como comando principal.

Dessa vez o tópico ficou pequeno, pois é o complemento do último tópico que fiz sobre Input Triggers (que você pode clicar AQUI para poder acessá-lo). Então não se assuste. Teremos mais tutoriais de Javascript MV em breve.



Por hoje é só, algumas dúvidas? Deixe um post abaixo que te responderei assim que possível. Até mais!

 

[fabrizio]

Como faço pra isso funcionar com uma janela? Eu clicar nela e ativar alguma coisa (trecho do script)?

 

[DanTheLion]

Como faço pra isso funcionar com uma janela? Eu clicar nela e ativar alguma coisa (trecho do script)?

Na verdade o RMMV já tem esse sistema de você tocar na janela (no caso o botão) e selecionar. Porém parece que com janelas ainda não é possível, mas se você quiser fazer isso acontecer, tente fazer o seguinte:

Pegue a coordenada das duas pontas da sua janela e cria uma condição, seguindo a lógica de baixo:

Se eu tocar na numa área em que estiver dentro das coordenadas x1, y1 e x2 e y2, você fará assim, assim e assado.

Como mostra a ilustração abaixo:

(A imagem é grande, por isso coloquei em Spoiler)

Spoiler

Pra facilitar, você pode usar o If para fazer isso:

if(TouchInput.x >= x1 && TouchInput.x <= x2 && TouchInput.y >= y1 && TouchInput.y <= y2) {
  // Insira os comandos aqui
};

A ideia do comando acima é que se a posição do clique/toque do seu mouse/dedo estiver dentro da área das coordenadas (de um ponto à outro: entre x1, x2 e y1, y2), alguma ação vai ser realizada.

Espero que tenho ajudado.

 

[fabrizio]

Eu já estava pensando exatamente nisso e consegui fazer funcionar. Aproveitei o valores da Janela que criei e fiz o sistema da seguinte forma:

x1 = Posição X da janela
x2 = Posicão X + Largura da Janela
(mesma lógica com Y)

Muito obrigado por responder! Aguardo mais aulas suas e de preferência com Sprite se possível. Me falaram que é melhor do que eu ficar desenhando umas Windows... HAHAHA

Abraço!

 

[JulioRPGCriator]

como usa o comando TouchInput.isTriggered() para funcionar no titulo do jogo, fiz meu titulo por script mais ao enta acessar so funciona pelo
teclado, poderia me dar uma dica de como fazer?

 

[DanTheLion]

como usa o comando TouchInput.isTriggered() para funcionar no titulo do jogo, fiz meu titulo por script mais ao enta acessar so funciona pelo
teclado, poderia me dar uma dica de como fazer?

Eae [member=1205]JulioRPGCriator[/member].

Então, algumas dicas que dou são os seguintes:

Para um Press Start você pode utilizar apenas o TouchInput.isTriggered() para que ele passe para a próxima cena que seria a dos botões de Novo Jogo, Carregar Progresso, Opções de Jogo, Créditos, etc.

Agora, para a cena dos botões, é um pouco complexo devido o fato de detectar cada botão em sua posição, sua largura e altura se for o caso de utilizar imagens, pois o TouchInput.isTriggered() utiliza-se a tela inteira ao invés de uma área configurada apenas, por isso pode se utilizar a ideia na resposta dada por mim para fabrizio logo acima desse post. Porém de uma seguinte lógica:

Se a tela for tocada dentro da área de X1, X2, Y1, Y2 algo vai acontecer. Assim fazendo-se com todos os botões.

Primeiro colocando o comando do TouchInput.isTriggered() e depois detectar as coordenadas do toque/clique, caso esteja fora da área, nada acontecerá, a não ser que esteja dentro da área, podendo assim acontecer algo.

Eu falarei mais amanhã porque agora de madrugues não posso ficar por muito tempo

Até mais...

 

[JulioRPGCriator]

Eu estava tentando mexer e não estou conseguindo, ai tentei fazer algo de maneira diferente mais nao deu kkk

var TouchInput_isTriggered = TouchInput.isTriggered;
TouchInput.isTriggered = function() {
    TouchInput_isTriggered.call(this);
    var x = Graphics.pageToCanvasX(event.pageX); 
    var y = graphics.pageToCanvasY(event.pageY);
    var pictureSprite = SceneManager.commandImages;
    if (TouchInput.isTriggered(this)) {
        this.commandNewGame.bind(this);
    };
    if (TouchInput.isTriggered(this)) {
        this.commandContinue.bind(this);
    };
    if (TouchInput.isTriggered(this)) {
        this.commandExit.bind(this);
    };
};

queria fazer algo nesse sentido, mais nao estou sabendo mexer na posição das imagens, eu usei no inicio o comando de centralizar elas...
o inicio do meu codigo é esse

(function(){
var FundoTitulo = ['Pergaminho'];
var TitulodoJogo = ['TitulodoJogo'];
var commandImages = ['Iniciar', 'Continuar', 'Sair'];
var exitName = ['Sair']

Window_TitleCommand.prototype.makeCommandList = function() {
    this.addCommand(TextManager.newGame,   'newGame');
    this.addCommand(TextManager.continue_, 'continue', this.isContinueEnabled());
    this.addCommand(exitName,   'exit');
};

Scene_Title.prototype.createCommandWindow = function() {
    this._commandWindow = new Window_TitleCommand();
    this._commandWindow.visible = false;
    this._commandWindow.x = Graphics.width * 2;
    this._commandWindow.y = Graphics.height * 2;
    this._commandWindow.setHandler('newGame',  this.commandNewGame.bind(this));
    this._commandWindow.setHandler('continue', this.commandContinue.bind(this));
    this._commandWindow.setHandler('exit',  this.commandExit.bind(this));
    this.addWindow(this._commandWindow);
};

var Julio_start = Scene_Title.prototype.start;
Scene_Title.prototype.start = function() {
    Julio_start.apply(this);
    this.centerSprite(this._backSprite1);
    this.centerSprite(this._backSprite2);
    this.createBackground();
    this.createTitulo();
    this.createcommandImages();
};

Scene_Title.prototype.createBackground = function() {
    this._backSprite1 = new Sprite();
    this._backSprite2 = new Sprite();
    this.addChild(this._backSprite1);
    this.addChild(this._backSprite2);  
};

Scene_Title.prototype.createTitulo = function() {
    this._Titulo = new Sprite();
    this._Titulo.opacity = 190;
    this._Titulo.x = Graphics.width - 690;
    this._Titulo.y = Graphics.height - 500;
    this._Titulo.bitmap = ImageManager.loadSystem(TitulodoJogo);
    this.addChild(this._Titulo);
};
 //aqui o comando que mencionei!
Scene_Title.prototype.createcommandImages = function() {
    this._imageCommands = new Sprite();
    this._imageCommands.opacity = 190;
    this._imageCommands.x = Graphics.width / 2 - 150;
    this._imageCommands.y = Graphics.height / 2 + 15;
    this.addChild(this._imageCommands);
};

Scene_Title.prototype.centerSprite = function(sprite) {
    sprite.x = Graphics.width / 2 - 0;
    sprite.y = Graphics.height / 2 - 0;
    sprite.anchor.x = 0.5;
    sprite.anchor.y = 0.5;
};

var Julio_update = Scene_Title.prototype.update;
Scene_Title.prototype.update = function() {
    Julio_update.apply(this);
    this._imageCommands.bitmap = ImageManager.loadSystem(commandImages[this._commandWindow._index]);
    this._backSprite1.bitmap = ImageManager.loadSystem(FundoTitulo);
};

Scene_Title.prototype.commandExit = function() {
    this._commandWindow.close();
    SceneManager.exit();
};

ele so funciona via windows... por isso queria tentar por o TouchInput.isTriggered()
mais estou apanhando mesmo vendo o exemplo que voce me passou que a pessoa usa o metodo de chamar eventos no mapa...como o do fabrizio!

quero sua ajuda pra entender em qual rumo devo ir em vista da ideia que estou tentando aplicar...
acho que assim acabo descobrindo como chegar a algum lugar!