Nuestro objetivo, en este tutorial, es construir un juego sencillo, aunque completo.
La idea básica es la del clásico juego mata marcianos: una nave, en la parte inferior de la pantalla, que podemos mover a izquierda y derecha con el teclado. Pulsando otra tecla disparamos contra los "marcianos". Éstos están en la parte superior de la pantalla y se mueven lateralmente, en formación, con pasos rítmicos.
Los marcianos dejan caer bombas que pueden matar a la nave protagonista (llamémosle prota). El juego acaba cuando muere el prota. Si acabamos con todos los marcianos comienza una pantalla nueva.
El movimiento en formación de los marcianos lo conseguiremos mediante un personaje invisible, el guía, que es el que se mueve con pasos rítmicos, mientras que los marcianos se limitan a seguir unos puntos relativos a él. Eso nos permitirá fácilmente, en el futuro, hacer que los marcianos ataquen y vuelvan a la formación después del ataque.
Los procedimientos usados en este tutorial no son necesariamente la forma mejor o más simple de hacer las cosas, sólo muestran una forma de hacerla que ejemplifican ciertas funcionalidades.
En este tutorial, introducimos algunos editores nuevos. En la parte central superior usaremos:
Stage
ActorEn la zona inferior usaremos:
MachineCon el botón 
cambia el área ocupada por la ventana entre máxima o el último tamaño usado. El botón adyacente 
la oculta completamente.
En el área lateral usaremos nuevos tipos de ventanas que activaremos con el botón del extremo izquierdo de la barra de nombre. Serán estos:
Class Browser
Class Inspector
Symbol BrowserCon el botón 
se intercambia el contenido de la ventana con el previo.
Crearemos un nuevo proyecto con el menu File/New o de la forma en que lo hicimos en el primer tutorial. Esta vez podemos llamar al proyecto plaga1. Por ejemplo.
Para ahorrarnos la creación de imágenes y efectos de sonido descarguemos un archivo con algo de material desde el siguiente enlace:
Descomprimamos el contenido en el directorio del proyecto y, desde el editor, importemos todas las imágenes. Estos son los pasos:
de su barra de herramientas, abrimos el selector de clases para crear una carpeta (FOLDER, categoría Structural) que renombramos (haciendo doble click sobre el nombre), por ejemplo, como Imágenes.Así obtendremos un conjunto de objetos nuevos en esta rama que representan cada imagen importada. Las imágenes de tipo bitmap pueden ser recortadas a su tamaño justo, para que ocupen menos memoria. La operación se realiza en el editor ajustando el origen de cada imagen para que en las secuencias no se altere la posición relativa entre ellas. Inicialmente, el origen se situa en la esquina superior izquierda, pero la práctica nos indica que es más manejable e intuitivo que el origen esté en el centro.
El editor de atributos (Object Inspector) de las imágenes y de las carpetas que contienen imágenes disponen de un botón que sirve para centrar el origen (Centre). Y las de tipo bitmap pueden ser recortadas con el botón Optimize. (Si aún no se muestran estas opciones pulsa el botón 
del Object Inspector). Así pues, haremos estas operaciones en bloque usando, primero, el botón Centre y luego el botón Optimize en el editor de atributos de la rama Imágenes. (Atención: el orden es importante).
Vamos a crear un primer personaje: la bomba. Para ello añadimos un objeto de la clase BodyCharacter (categoría Character)) a la carpeta Personajes que crearemos previamente. Llamémosle bomba (Una vez creado un objeto, se puede editar su nombre haciendo doble click sobre él). Dejamos el valor de los atributos tal como vienen por defecto.
A este personaje le faltan tres cosas muy importantes: su apariencia visual, su forma física y su comportamiento. Obsérvese que se ha creado un objeto (clase Shape) hijo del personaje. Éste objeto almacenará su forma física.
Para conseguir lo primero añadamos una imagen (bomba.png) al atributo movies del personaje.
Para darle la forma física abrimos el editor de actores (Actor) pulsando el botón Actor de la hilera de botones bajo la barra de herramientas. Seleccionemos el personaje bomba en el Object Browser para cargarlo en dicho editor. Usamos los botones de zoom (
, 
o la rueda del ratón) para ajustar la escala de la vista a nuestro gusto.
Con la herramienta Rectángulo (
) creamos un rectángulo y lo movemos y adaptamos para que cubra la imagen de la bomba. Éste rectángulo va a definir los límites físicos del personaje. Podríamos dibujar un polígono que se adapte mejor al contorno, pero en este caso no es necesario, basta un rectángulo para detectar el choque con la nave protagonista. A esta forma así creada hay que darle masa. Esto es muy importante, ya que si no lo hacemos sería inamovible. En la sección current shape del editor de atributos del personaje, cuando la forma está seleccionada, debemos asignar Solid al atributo rol y asignaremos un valor mayor que 0 al atributo density de la forma. Nos vale con el valor sugerido, 1.
Necesitamos, al menos, un escenario donde desarrollar la acción del juego. Para ello creamos la carpeta Escenarios (nombre arbitrario) y en ella creamos un objeto de la clase Stage, que está en la categoría World. Se creará, automáticamente, un archivo que contenga este recurso. Los escenarios, como las imágenes, las animaciones, los sonidos y las tipografías, son recursos que se mantienen como archivos individuales.
Los escenarios se construyen a base de capas que son objetos hijos del escenario. (Recordemos, se crean con Add New Object del menú contextual). Por el momento crearemos las siguientes capas:
Se carga el escenario en el editor de escenarios (activado con el botón Stage) eleccionando una cualquiera de sus capas en el Object Browser. Seleccionamos la capa ActorLayer y arrastramos el personaje bomba a la parte superior de la capa.
Probaremos su dinámica pulsando el botón 
del editor de escenarios. La bomba debería caer hasta perderse en la parte de abajo. Se detiene la prueba con el botón 
.
Cuando la bomba desaparece de la pantalla no quiere decir que deje de existir en el programa y por ello, sigue usando memoria y recursos, por lo que en un caso como éste, en el que se crearán bombas continuamente, es necesario que se vayan destruyendo a medida que dejen de tener valor. Esa es la primera función que vamos a conseguir con una máquina de estados.
Primero vamos a preparar un método para detectar el momento en que debe de destruirse la bomba: En el editor de escenarios, activamos la capa de física (clase ShapeLayer) y añadimos un rectángulo en la parte de abajo que cubra el escenario de izquierda a derecha (Herramienta ). Cuando probemos el escenario veremos que la bomba se queda apoyada en dicho rectágulo. Haremos que la máquina de estados destruya la bomba cuando detecte esa colisión.
Crearemos un objeto de clase Machine en la carpeta Personajes. Llamémosle, por ejemplo, bomba-machine. Iremos al editor de máquinas (Machine, botón Machine en la parte de abajo de la pantalla) y seleccionamos el objeto recién creado para su edición.
Con el cursor del ratón aproximadamante en el centro del área en blanco pulsamos el botón derecho para desplegar el menú contextual. Agregaremos un estado de clase State (categoría Structural States) con la opción Add State. Un click adicional sobre el área y aparecerá centrado un globo de color verde que representa el primer estado de la máquina de estados.
De la misma forma agregaremos una acción de clase ActorDeadAction (categoría Actor Control). La acción aparece como un globo amarillo. La diferencia esencial entre un estado y una acción es que ésta es instantánea. Se ejecuta sin abandonar el estado actual, mientras que el estado tiene una duración determinada hasta que se produzca una transición a otro estado.
Renombremos estos objetos como inicio y final respectivamente.
Situamos los globos en las posiciones que nos gusten y los conectamos trazando una línea desde el borde del globo del estado al borde del globo del la acción. Esta conexión está implementada por un objeto hijo del estado del que parte. Es de la clase Trigger. Aparece como una línea discontinua para indicar que no es una transición de estados sino la activación de una acción.
Para especificar cuándo se ejecuta la acción se añade, en el Object Browser, una o más condiciones a la conexión. En este caso añadiremos una CollideWorldCondition (categoría Actor Collision).
Editamos ahora el personaje bomba, asignamos al atributo machine la máquina de estados así definida. Cuando editamos un atributo de tipo referencia se nos ofrece una ventana para seleccionar el objeto deseado. En caso de que sólo haya uno posible, se inserta automáticamente.
Probamos el escenario. La bomba debería desaparecer al chocar con el rectángulo anteriormente añadido a la capa de física.
Para que el proyecto pueda considerarse un juego completo, aunque mínimo, se necesitan algunos objetos esenciales: tenemos que definir un tipo de empaquetado del juego, una máquina de estados que controle el juego globalmente, y una o más pantallas que representan los diferentes estados globales del juego.
Ahora podemos probar con el botón RUN y exportarlo con el menú File/Make Pakage o el botón correspondiente (
) de la barra de herramientas general. (Antes debemos guardar en disco nuestro trabajo).
El programa generado se podrá ejecutar independientemente del Xitai Editor.