Share
En esta serie de tutoriales, nos centraremos en el desarrollo de juegos multiplataforma para las tabletas iPad y Android utilizando el marco de desarrollo del juego ShiVa3D Suite. Aunque principalmente para juegos en 3D, ShiVa3D Suite también puede usarse para desarrollar juegos en 2D. "Puzzle", el juego descrito en esta serie, es un ejemplo de un juego 2D relativamente simple que se puede crear rápidamente con ShiVa3D.
El objetivo principal del Puzzle es muy simple. Cuando comienza el juego, las piezas de una imagen se colocan aleatoriamente en la pantalla. Para resolver el rompecabezas, el usuario debe colocar esas piezas en sus ubicaciones correctas. Un temporizador muestra el tiempo transcurrido desde el inicio del juego. El temporizador puede pausarse si el usuario necesita tiempo libre del juego. Al presionar el botón "Resolver", el juego se puede resolver automáticamente, una característica que resulta útil si el usuario necesita ayuda para resolver el juego..
Esta serie de tutoriales consta de tres partes. La parte 1 comienza con la siguiente sección, llamada "Descripción del juego", donde brindamos más detalles del rompecabezas y describimos su comportamiento mediante capturas de pantalla. En la siguiente sección, "Imágenes de pantalla en tableta Android y iPad 2", proporcionamos imágenes de pantalla del producto final en una tableta Android con sistema operativo Android 4.0.3 (Ice Cream Sandwich) y iPad 2 con iOS 4.3. A esto le sigue el "Proceso de desarrollo a través de Shiva3D Suite", donde presentamos los componentes principales de ShiVa3D Suite, el Editor de ShiVa y la Herramienta de creación de ShiVa, y luego damos una descripción general del proceso para desarrollar el Rompecabezas en una plataforma independiente. con esos componentes.
Las siguientes secciones están relacionadas con la implementación. La Parte 2 comienza con "Geometría del juego", que se centra en los aspectos geométricos subyacentes del juego y establece el fondo para el desarrollo del código. En "Desarrollando el rompecabezas en el Editor ShiVa", presentamos las principales construcciones de la base de código que implementan la funcionalidad del juego, incluidas las variables, funciones y controladores de eventos. Esta sección también brinda instrucciones paso a paso sobre cómo desarrollar el juego con el Editor ShiVa. Aquí, describimos cómo crear el proyecto y el juego e importar texturas, el modelo de AI y el banco de sonidos del archivo de descarga que acompaña al tutorial. Con esto concluye la parte 2 de la serie..
La parte 3 de la serie continúa la discusión en "Developing The Puzzle In ShiVa Editor". Describimos cómo importar los componentes de HUD y hacemos los ajustes finales en el juego desarrollado hasta el momento. Luego, concluimos "Desarrollando el rompecabezas en el editor de ShiVa" a través de una prueba de unidad. En la sección "Herramienta de creación", mostramos cómo usar la Herramienta de creación ShiVa para convertir el Puzzle en dos aplicaciones diferentes, una para el sistema operativo Android y otra para el iPad. Concluimos el artículo con "Conclusiones", donde se ofrecen varias observaciones finales..
Parte del material de referencia en este artículo ha sido tomado del sitio web oficial del producto ShiVa3D..
Los archivos de sonido utilizados en la aplicación se han tomado del conjunto de muestra que se instala con el Editor ShiVa (Stonetrip \ ShiVa Editor PLE \ Data \ Samples \ Resources \ Sounds)..
La base de código para rotar la ventana gráfica, de modo que la barra de herramientas permanezca en la parte superior a medida que el usuario gira el dispositivo, se basa en otro tutorial de ShiVa 3D.
(http://www.stonetrip.com/developer/1704-rotate-the-viewport-according-to-the-device-rotation).
La base de código para la gestión multitáctil toma ideas de otro tutorial de ShiVa 3D (http://www.stonetrip.com/developer/1046-multitouch-management).
El autor se ha beneficiado enormemente de un libro sobre ShiVa3D, titulado Introducción a la programación en 3D con ShiVa..
Finalmente, los videos en este tutorial han sido producidos utilizando las herramientas de código abierto FreeStudio Video to Flash Converter y CamStudio..
En esta sección, describiremos el juego de rompecabezas. La aplicación se inicia con la siguiente pantalla de bienvenida..
Después de que se muestra la pantalla de inicio, el juego entra en el estado "Inicializado". Este estado comienza con piezas de rompecabezas que se originan en la esquina inferior izquierda de la pantalla y se mueven a ubicaciones aleatorias en el área de juego. A medida que se mueven, la mitad de las piezas giran en el sentido de las agujas del reloj y la otra mitad en el sentido contrario a las agujas del reloj (a continuación se muestra una instantánea).
El siguiente video muestra el juego mientras se está inicializando..
Una vez que todas las piezas han tomado sus posiciones aleatorias, los botones Iniciar y Resolver se habilitan en la barra de herramientas en la parte superior, como se muestra en la siguiente figura. Hay un total de 54 piezas de rompecabezas colocadas en 9 filas y 6 columnas. Como veremos más adelante, el código de la aplicación puede extenderse fácilmente para adaptarse a cualquier número de filas y columnas. El propósito del juego es colocar las piezas para construir la imagen del rompecabezas correctamente en el menor tiempo posible. Si una pieza se coloca en la ubicación correcta, sus bordes se resaltan en verde. Como ejemplo, vea la tercera pieza en la última fila de abajo.
El juego comienza cuando se presiona el botón de inicio. Esto lleva al juego al estado "Iniciado"..
En este estado, el botón Iniciar se convierte en un botón Pausa y los botones Nuevo y Resolver están desactivados. El temporizador comienza a contar. Cuando el usuario mueve una pieza a otra posición, digamos pieza A, la pieza que reemplazó se mueve automáticamente a la posición original de la pieza A. Esto se muestra en la siguiente figura. El usuario ha movido la pieza en la esquina superior izquierda a la esquina inferior derecha (movimiento indicado por una línea verde). La pieza del rompecabezas que reemplazó se mueve hacia la esquina superior izquierda para completar la ubicación vacía (pieza indicada por una flecha roja). El movimiento automático de la pieza tarda aproximadamente 3 segundos en completarse. Aunque no se muestra en las instantáneas anteriores, la pieza que se mueve automáticamente gira hacia la derecha o hacia la izquierda mientras viaja. La decisión en el sentido de las agujas del reloj o en sentido contrario depende del índice de columna y fila de la pieza.
El video a continuación muestra al usuario presionando el botón de Inicio y luego moviendo una pieza de una ubicación a otra, reemplazando otra pieza.
Como se mencionó anteriormente, hay 54 piezas de rompecabezas. Estos se colocan en posiciones fijas que consisten en 9 filas y 6 columnas, como se muestra en la siguiente figura. Los centros de las piezas del puzzle coinciden con las posiciones fijas..
Para mover una pieza, el usuario presiona la pieza con un dedo y la mueve como lo desee. Cuando se alcanza la posición de destino, el usuario suelta su dedo. Si la distancia entre la posición fija más cercana y el centro de la pieza del rompecabezas es menor que una tolerancia preespecificada (un parámetro en el código de la aplicación), la pieza se ajusta automáticamente a la posición fija. De lo contrario, la pieza vuelve a su posición original automáticamente..
Cuando la pieza movida por el usuario encaja en una posición, la pieza que reemplaza se mueve a la posición original de la pieza movida por el usuario. Si la pieza movida por el usuario no encaja en una nueva posición, vuelve a su posición original. En ambos casos, el movimiento se realiza automáticamente por la aplicación. Cuando ese movimiento comienza, el juego entra en un nuevo estado llamado "Reemplazado".
Este es un estado en el que una pieza del rompecabezas se mueve automáticamente, girando en el sentido de las agujas del reloj o en sentido contrario a las agujas del reloj durante el viaje, y finalmente llega a una ubicación de destino. El movimiento de la pieza del rompecabezas es controlado por la aplicación. Cuando se completa el movimiento, en otras palabras, cuando la pieza alcanza su posición, el juego vuelve al estado "Iniciado"..
Si una pieza del rompecabezas se coloca en su posición correcta, sus bordes se resaltarán en verde. En la imagen de la pantalla de muestra a continuación, las piezas que tienen bordes verdes están en las posiciones correctas. Los que no tienen bordes verdes no están en las posiciones correctas..
Si un usuario presiona el botón Pausa, el juego entrará en el estado "Pausado".
En el estado Pausado, el temporizador se suspende. El botón Pausa se convertirá en el botón Inicio y los botones Nuevo y Resolver estarán habilitados, como se muestra a continuación.
En estado Pausado, las piezas del rompecabezas no se pueden mover..
En el estado Pausado, si el usuario presiona el botón Nuevo, esto terminará el juego y la aplicación se reiniciará. El juego entrará en el estado "Inicializado" (ver arriba). Las piezas del rompecabezas se originarán en la esquina inferior izquierda de la pantalla y se moverán a ubicaciones aleatorias en el área de juego.
También en el estado Pausado, si el usuario presiona el botón de Inicio, el juego regresará al estado de Inicio.
En estado Pausado, si el usuario presiona el botón Resolver, esto terminará el juego resolviéndolo automáticamente. Resolver el juego de esta manera es útil si el usuario ha dejado de resolver el juego por su cuenta. Las piezas se moverán de sus ubicaciones actuales a las ubicaciones correctas para construir la imagen del rompecabezas (vea la figura a continuación). El juego entrará en el estado "Resuelto"..
El siguiente video muestra el juego cuando el usuario presiona el botón Resolver.
En el estado Resuelto, la imagen del rompecabezas ha sido construida. En la imagen que se encuentra más a la derecha en la Figura 9 anterior, observe que todas las piezas del rompecabezas tienen bordes verdes porque están todas en las posiciones correctas.
En el estado Resuelto, solo el botón Nuevo está habilitado. El usuario puede presionar el botón Nuevo para reiniciar el juego. Esto traerá el juego al estado Inicializado. Como se describió anteriormente, las piezas del rompecabezas se originarán en la esquina inferior izquierda de la pantalla y comenzarán a moverse a ubicaciones aleatorias.
El siguiente diagrama muestra las transiciones de estado que resumen la discusión anterior..
Las siguientes imágenes muestran el juego de rompecabezas en una tableta Android OS 4.0.3 durante el estado Inicializado. Se está iniciando un nuevo juego, a la izquierda, y justo después de que todas las piezas del rompecabezas hayan alcanzado sus ubicaciones aleatorias, a la derecha.
Las siguientes imágenes muestran el juego de rompecabezas en una tableta con Android OS 4.0.3, justo después de que el usuario presionó el botón Resolver, a la izquierda, y después de que se resuelve el juego, a la derecha.
La siguiente imagen muestra el icono de inicio del juego de rompecabezas en una tableta con Android OS 4.0.3.
Las siguientes imágenes muestran el juego de rompecabezas en el iPad 2 durante el estado Inicializado. Se inicia un nuevo juego, a la izquierda, y luego, justo después de que todas las piezas del rompecabezas hayan alcanzado sus ubicaciones aleatorias, a la derecha.
Las siguientes imágenes muestran el juego de rompecabezas en el iPad 2, justo después de que el usuario presionó el botón Resolver, a la izquierda, y luego una vez que el juego se haya resuelto, a la derecha.
La siguiente imagen muestra el icono de inicio del juego de rompecabezas en iPad 2.
En esta sección, discutiremos varios conceptos del desarrollo de juegos con ShiVa3D. La mayor parte de la discusión aquí está tomada de la documentación original de ShiVa3D. Para obtener más información, visite http://www.stonetrip.com/developer/doc/ y el manual del usuario que viene con el editor ShiVa.
Tenga en cuenta que ShiVa3D es principalmente un marco de desarrollo de juegos 3D. Nuestro juego no tiene características 3D, sin embargo, y es un ejemplo de cómo ShiVa3D podría usarse para desarrollar juegos 2D también..
Juego Representa un juego, la entidad principal de la aplicación. Encapsula todo lo demás en la aplicación, como cámaras, escenas, etc. Un juego es una unidad de implementación independiente.
Aimodel Implica 'inteligencia artificial' y representa comportamiento. Un AIModel puede tener funciones, manejadores, estados y variables. En el Puzzle, usaremos un solo AIModel para definir la funcionalidad del juego..
Guión contiene el código en un AIModel, por ejemplo, el código para una función o un controlador. El lenguaje de scripting en ShiVa3D es Lua.
HUD significa "Head Up Display" y es un término que representa varios widgets de la interfaz de usuario, como botones, etiquetas, listas, controles deslizantes, etc., que permiten al usuario interactuar con el juego.
Para desarrollar el juego de rompecabezas, usaremos la versión gratuita de ShiVa3D Suite (http://www.stonetrip.com/download.html), que incluye ShiVa Editor PLE (edición de aprendizaje personal) y ShiVa Authoring Tool. El diagrama a continuación ofrece una descripción general del proceso de desarrollo que usamos con esas herramientas.
Vamos a discutir los pasos individuales de ese proceso..
El Editor ShiVa tiene varios módulos para desarrollar y probar una aplicación 2D o 3D, generalmente un juego, desde cero. Una característica importante del Editor ShiVa es que una aplicación desarrollada con esa herramienta se puede implementar (después de haber sido creada en ShiVa Authoring Tool) en diferentes dispositivos con diferentes sistemas operativos, por ejemplo. una PC con sistema operativo Windows, un teléfono móvil con sistema operativo Android, iPhone / iPod Touch, iPad, etc. Algunas de las acciones básicas que puede realizar con el Editor ShiVa son las siguientes.
Desarrollar:
Prueba: Puede realizar una prueba inicial de la aplicación 2D o 3D en el entorno de desarrollo antes de implementarla en un dispositivo de destino. Las pruebas se realizan a través de la función Animar o Vista previa del Editor ShiVa. Durante las pruebas, puede cambiar la configuración del tamaño de la pantalla para ver cómo se mostrará la aplicación en el dispositivo de destino real. En el Puzzle, para probar los eventos de los botones, usamos clics del mouse. Para probar eventos táctiles, usamos arrastrar y soltar con el mouse.
Exportar: Una vez finalizada la prueba, exporte la aplicación. Esto generará un archivo con una extensión stk. La aplicación exportada será utilizada por la herramienta de creación ShiVa, que se describe a continuación..
El propósito principal de la herramienta de creación de ShiVa es convertir una aplicación, creada a través del Editor de ShiVa, en una aplicación específica de plataforma que se puede implementar en un dispositivo en particular, por ejemplo. iPad o tableta Android. Se aplican ciertas restricciones con respecto al sistema operativo de la máquina que ejecuta la herramienta de creación ShiVa y el dispositivo de destino para la conversión. Por ejemplo, la herramienta de creación de ShiVa que se ejecuta en una máquina con Windows no puede generar una aplicación de iPad o iPhone. Al desarrollar el rompecabezas, utilizamos una máquina de Windows para el Editor ShiVa. Para crear la aplicación Android Puzzle, también usamos una máquina con Windows para ejecutar la herramienta de creación ShiVa. Por otro lado, para crear la aplicación iOS Puzzle para iPad, usamos una máquina Mac OS para ejecutar la herramienta de creación ShiVa.
Algunas de las acciones básicas que uno puede realizar con la herramienta de creación de ShiVa son las siguientes.
Seleccione la plataforma de autoría: Para los propósitos de esta serie, las opciones de plataforma en las que estamos interesados son iPad y Android. Tenga en cuenta que para iPad debe tener la herramienta de creación de ShiVa ejecutándose en una máquina Mac OS.
Importar: Importe la aplicación (un archivo con extensión stk) que se exportó a través del Editor ShiVa.
Construir: Al crear para Android, configuraremos la Herramienta de creación de ShiVa para generar un archivo apk de Android que se pueda implementar directamente en un dispositivo compatible con Android. Al crear para iPad, configuraremos la Herramienta de creación de ShiVa para generar un proyecto Xcode para el desarrollo de iPad. Luego, uno puede construir el proyecto en Xcode e implementar el ejecutable en un dispositivo conectado (la compilación del proyecto en Xcode y la implementación del ejecutable resultante en un dispositivo conectado no se trata en esta serie).
Para cada plataforma, la herramienta de creación ShiVa ofrece opciones ligeramente diferentes para generar su producto final. Por ejemplo, cuando creas para Android, puedes generar un proyecto de Eclipse en lugar de un ejecutable de Android. Como se mencionó anteriormente, elegimos generar un ejecutable de Android en esta serie.
De manera similar, para iPad, uno podría generar un ejecutable para su distribución en lugar de generar un proyecto Xcode. Como se mencionó anteriormente, elegimos generar un proyecto Xcode en esta serie. Por favor, consulte el manual del usuario de la Herramienta de Autor ShiVa para más detalles..
La siguiente es una lista de las configuraciones que usamos al desarrollar el juego de rompecabezas. Para requisitos adicionales y requisitos previos, consulte la documentación de Shiva3D que se describe en http://www.stonetrip.com/developer/doc/editor/information/hardware y http://www.stonetrip.com/developer/doc/authoringtool/installation.
Sistema operativo de la máquina de desarrollo: Windows 7
En la Parte 1 de este tutorial, presentamos nuestro juego y describimos sus detalles. También resumimos el proceso de desarrollo de juegos multiplataforma a través de Shiva3D Suite. art 2 comenzará con "Geometría del juego", que se centra en los aspectos geométricos subyacentes del juego y establece el fondo para el desarrollo del código. En "Developing The Puzzle In ShiVa Editor", presentaremos las principales construcciones de la base de código que implementan la funcionalidad del juego, incluidas las variables, funciones y controladores de eventos. Esta sección también brindará instrucciones paso a paso sobre cómo desarrollar el juego en el Editor ShiVa. A continuación, describiremos cómo crear el proyecto y el juego, e importar texturas, modelos de IA y el banco de sonidos del archivo de descarga que acompaña al tutorial..
Accentsconagua