Pantallas táctiles y un truco para detectar el método de entrada.

Favourite 265 favourites
Tutorial written by AshleyOriginally published on 22nd, December 2011 - 5 revisions

Translation Team:

1 revision

Actualmente es ingenuo asumir que todo el mundo en la web tiene un ratón y un teclado. En la web moderna, mucha gente está navegando con dispositivos de pantalla táctil como iPhone, iPad y los teléfonos Android phones. Si tu juego solo se puede controlar con ratón y/o teclado, los usuarios con estos dispositivos serán incapaces de jugar a tu juego!

Sin embargo, es fácil tener controles de pantalla táctil, y además hay un truco ingenioso y simple para detectar si el usuario tiene un dispositivo de pantalla táctil.

Entrada de ratón para pantalla táctil

Lo primero de todo, si estás diseñando un juego específicamente para dispositivos de pantalla táctil o si el juego solo usa clics de ratón, use el objeto Touch. Fije su propiedad Use mouse input en Yes (por defecto, es No). Ahora los clics de ratón producirán eventos de toque como On touch start y Is in touch. Obviamente, con clics de ratón solo puedes simular entrada de un solo toque (presionar el botón izquierdo representa tocar, y soltarlo no tocar). Así que un clic-y-arrastrar representa un toque de barrido.

Eso permite fácilmente la compatibilidad con ratón y pantalla táctil, lo que para juegos simples debería bastar.

Botones de toque en pantalla

Para muchos otros juegos, son necesarios botones en pantalla para los controles. Pueden hacerse con objetos Sprite.

Lo primero, haz una capa (layer) fija (sin scroll) si no tienes ya una (¡no querrás que los botones se muevan fuera de la pantalla según te mueves por el nivel!). Añade una nueva capa (layer) con Parallax de 0, 0. Eso impide que los objetos en esa capa se desplacen: siempre aparecerán en el mismo lugar de la pantalla.

Después, asegúrate de que seleccionas esa capa. El marco de línea punteada arriba a la izquierda de la vista de capas muestra el tamaño de la ventana. Añade algunos Sprites que representen tus controles en pantalla en alguna parte del área de la ventana. Abajo se muestra un ejemplo de flechas de dirección en pantalla en la esquina inferior derecha de la ventana.

Touch controls
Recuerda, ¡los botones grandes son más fáciles de tocar! Puede que también desees afinar los polígonos de colisión (collision polygons) en el editor de imágenes para hacer que su área sea un poco más grande y por tanto más fácil de tocar.

Ahora, puedes usar las acciones is touching object ("está tocando el objeto") del objeto Touch para ejecutar una conducta (behaviour) Simulate control, como abajo:

Touch control event
Ahora tiene unos controles en pantalla que siempre permanecen en el mismo lugar de la ventana y pueden controlar el juego.

Si tu juego usa controles simples izquierda-derecha, puedes usar variaciones, como
sprites invisibles de gran tamaño para detectar si el usuario está tocando el lado izquierdo o el lado derecho de la pantalla.-Recuerda: cuanto más grande sea el área que pueden tocar, más fácil será controlar el juego.

Controles de toque alternativos

Hay montones de maneras diferentes de controlar juegos en pantallas táctiles. No necesitas tener controles en pantalla, y a veces las alternativas son más fáciles y divertidas de usar. Aquí van dos sugerencias:

1. Toca alrededor del jugador para moverlo, en lugar de tener flechas de dirección en la pantalla. Por ejemplo, en Space Blaster, la nave espacial podría mover a donde estés tocando. Otros botones en la pantalla podrían dar acciones alternativas, como disparar cohetes.

2. Usa el acelerómetro del dispositivo para controlar el movimiento. En el objeto Touch puede obtener estos valores como las expresiones Alpha, Beta y Gamma. Eso te permite detectar la inclinación del dispositivo a lo largo de distintos ejes, que pueden dirigir algún movimiento.

Finalmente, puede que desees adaptar los controles para que sean más fáciles para los dispositivos de toque. Los controles de toque son más difíciles de usar que un ratón y un teclado, así que simplificar los controles puede hacer que el juego sea más divertido. Por ejemplo, el jugador debe mantener pulsada la barra espaciadora para disparar el laser en Space Blaster. Cambiando el laser para que dispare automáticamente mientras los enemigos están en pantalla hace el juego más divertido que tener que presionar un botón de disparo separado. También lo hace un poquito más fácil, pero seguro que el objetivo principal es hacerlo divertido y no frustrante.

Detectar el control de entrada

Así que ahora tiene botones táctiles en la pantalla. ¿Qué pasa si el usuario está en un ordenador de sobremesa con un ratón y un teclado? En ese caso, no hay motivo para mostrar enormes botones en la pantalla.
Afortunadamente, hay una manera realmente simple de detectar si el usuario usa entrada táctil: tener una pantalla de título.

Es realmente así de simple. En la pantalla de título, pon un mensaje como Pulse cualquier cosa para continuar. Entonces si los eventos On any key pressed (objeto Keyboard) o On any click (objeto Mouse) se disparan en la pantalla de título, sabes que el usuario está en un ordenador de sobremesa. Si se dispara el evento On touch start (objeto Touch), sabes que el usuario está en un dispositivo de pantalla táctil. Entonces puedes fijar una variable global indicando si el usuario está en un dispositivo táctil y pasar al primer nivel. Si la variable global está fijada, muestra los botones para pantalla táctil; en caso contrario, hazlos invisibles. ¡Estarás usando automáticamente el sistema de control correcto, y el usuario no habrá tenido que hacer nada!
¡Esto es todo!

Para saber más

Los dispositivos de pantalla táctil suelen tener distintos tamaños de pantalla, así que quizá quieras leer Soportar múltiples tamaños de pantalla as well.

Probar en móviles y tabletas es más fácil con Previsualización en una red local.

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.