Cocos Creator - Tutorial evento de toque em tela - Touch

Por Celso Rodrigo de M F


Postado em: domingo, 05 de março de 2017 as 18:42 PM    282 views

Vamos falar um pouco de Eventos com o Touch, já que temos que quase por obrigação (quando desenvolvemos jogos para dispositivos móveis) implementa-los, para que nossos jogos fiquem mais portáveis (quando exportamos para vários dispositivos diferente



cocos_creator_tutorial_evento_de_toque

Vamos falar um pouco de Eventos com o Touch, já que temos que quase por obrigação (quando desenvolvemos jogos para dispositivos móveis) implementa-los, para que nossos jogos fiquem mais portáveis (quando exportamos para vários dispositivos diferentes) .

Sistema interno de eventos 

O cc.Node tem um conjunto de mecanismos completos de escuta e envio de eventos, aqui vamos ver como usar alguns desses eventos.

Vamos criar um novo projeto na IDE Cocos Creator, como na imagem abaixo, e vamos nomear nosso projeto como 'EventoTouch'.

Após o projeto criado na aba 'assets' vamos abrir a nossa Scene (Cena do jogo), pelo caminho 'Scene > helloworld'.

 

Ao abrir o Script 'HelloWorld' na pasta 'Script > HelloWorld.js" você vera o scrit responsável por exibir o "Hello World" no momento da execução.

Um evento no cocos creator assumisse que em multi-plataforma o evento é gerado pelo toque, e em pc o evento sera gerado com o arrastar do mouse e o clique.

ao inserir o código e salvar o arquivo, automaticamente irá atualizar as propriedades adicionadas ao Canvas. Então vamos ver como ficou ao selecionar o 'Canvas', em nossa árvore de nodos (Node Tree).

agora iremos arrastar o Nodo 'Canvas' para a nova propriedade 'Canvas'.

faremos a mesma coisa com o Nodo 'cocos' que é a logo da cocos2d-x, para a propriedade 'Follower'.

para este tutorial não iremos precisar do Nodo 'label' então podemos deleta-lo da nossa árvore de nodos.

ao executarmos o jogo temos o seguinte... 

Explicando o código

Em propriedades nas linhas de 4 até 10, declaramos 3 objetos que precisamos para criar nosso evento.

Canvas: que é a área disponível para movimentação.

Follower: é a imagem que ira se mover.

Followspeed: é a velocidade que a imagem percorre até o ponto que pressionamos na tela.

Na função 'onLoad' na linha 14, criamos a sequência de comando que serão executados assim que rodamos nosso tutorial. 

Nas primeiras linhas da função (linas 15 até 17) 'onLoad', criamos uma variável 'self' para receber todas as propriedades e parametros do script. Posteriormente criamos duas variáveis a 'moveToPos' e 'isMoving'; a 'moveToPos' guarda a posição do centro da telas e a variável 'isMoving' verifica se a imagem que atribuimos ao 'Follower' está se movendo. 

Após criarmos as variáveis locais, criamos os eventos que utilizamos no tutorial, os eventos 'touchstart' e 'touchmove' sao identicos execultam o mesmo trabalho, porém quando o usuário execulta ações diferentes. Vou explicar o evento 'touchstart'. Na linha 21 pegamos o evento de toque na tela, independente que seja de toutch ou com o mouse, o evento será o mesmo, como este evento retorna um array de informações pegamos o que realmente interessa na linha 22, onde identificamos o array e colocamos e a localização do toque na variável 'touchLoc'. Na linha 23 setamos a variável 'isMoving' como true, e na linha 24 nós convertemos as cordenadas do toque (touchLoc) em uma posição com relação ao ponto de âncora da imagem dentro canvas(isso é um pouco complexo e não vou me aprofundar aqui).

Se você prestou bem atenção, no evento 'touchmove', não tem a linha de edição 'isMoving' porque ela já editada quando apertamos a primeira vez na tela pelo 'touchstart', não havendo a necessidade muda-la novamente.

No evento 'toutchend' apenas editamos a variável 'isMoving' para false.

Na função 'update' que é executada a cada frame, temos a explicação linha a linha na imagem abaixo.

Conclusão

Concluimos que criar eventos com o cocos creator não é tão difícil, quando se sabe a estrutura para a execução dos comandos. Mostrei um tutorial com uma ação básica, em três ações de toque diferentes, mostrando a diferença de uma para outra (que n é muita). Espero que este Artigo tenha ajudado a vocês, e qualquer dúvida ou sugestão não deixe de comentar.

 



Autor:

Celso Rodrigo de M F

Pós-Graduado em Desenvolvimento de Aplicações Web Baseadas na Tecnologia JAVA (2014), bacharel em sistemas de informação (2007), trabalhei como tutor orientador do curso de tecnologia em analise e desenvolvimento de sistemas.