Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. iOS SDK
Code

Crea un juego multijugador de Buscaminas: creación del lado del cliente

Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Claudia Márquez (you can also view the original English article)

Esta es la segunda entrega de la miniserie del juego Minesweeper.  En este tutorial, aprenderá a implementar completamente el lado del cliente de la aplicación.  Utilizaremos una aplicación nativa de iOS que se conecta a los servidores web, analiza los datos y muestra la interacción de la interfaz de usuario. 


Visión general del proyecto

Minesweeper Flag es un juego de mesa multijugador que se juega entre dos oponentes.  Comúnmente, se asigna azul o rojo a cada jugador.  El tablero está compuesto por 256 cuadrados iguales, y cada tablero tiene 51 minas colocadas en posiciones completamente aleatorias. 

Figure 5: Blue player
Vista previa del efecto Final

Revisión de la Parte 1

Antes de comenzar la segunda parte de la serie, asegúrese de tener la primera parte totalmente probada e implementada.


Paso 1: Instalación Cocos 2D

El primer paso es descargar e instalar el motor de juego 2D Cocos.  Para este tutorial, usamos Cocos2d versión 2.

Una vez descargado, debe instalarlo e integrarlo con Xcode.  Desempaque el archivo descargado anteriormente y verá un archivo llamado install-templates.sh.  Abra una ventana de terminal y ejecute ese archivo usando el siguiente comando 


Paso 2: Crea un nuevo proyecto

Usando Xcode, crea un nuevo proyecto: Archivo -> Nuevo -> Proyecto.

Figure 1: New cocos2d project

Elija Cocos2d v2.x en el menú de la izquierda y Cocos2d iOS en la de la derecha.


Paso 3: Configurar los ajustes del proyecto

Dale a tu proyecto un nombre y un identificador de empresa.  Para este tutorial, utilizamos la opción de familia de dispositivos iPad. 

Figure 2: New cocos2d project

Paso 4: Verificar la configuración

Si todo es correcto, debería ver una ventana similar a la siguiente:

Figure 3: Project files

Paso 5: Agregar nuevas clases

Ahora debería agregar dos nuevas clases de Objective-c. Para hacer esto, acceda a la opción de menú Archivo -> Nuevo -> Archivo.

Agregue las siguientes clases:

  • LoadingScene: Esta clase servirá como una pantalla de carga para el usuario mientras espera que otro jugador se una al juego.
  • GameScene: Esta es la clase principal del juego; es donde está programada la lógica principal.

Paso 6: Agregar archivos de recursos

Para ejecutar correctamente el juego, debe agregar los archivos de recursos a su proyecto.  Aquí puede descargar los archivos de recursos utilizados. Luego, cópielos a la carpeta de recursos.


Paso 7: Crea la clase HelloWorldLayer

Cambie su archivo de encabezado HelloWorldLayer a lo siguiente:

Cambie el archivo de implementación de HelloWorldLayer a lo siguiente: 


Paso 8: Crea la clase LoadingScene

Cambie su archivo de encabezado LoadingScene a lo siguiente: 

Cambie su archivo de implementación de LoadingScene a lo siguiente: 


Paso 9: Crea la clase GameScene

Cambie su archivo de encabezado GameScene a lo siguiente: 

Cambie su archivo de implementación de GameScene a lo siguiente: 


Paso 10: Construye y ejecuta el juego

Después de incluir el código mencionado anteriormente, el siguiente paso es construir y probar la aplicación.  Use el atajo cmd + b. Si todo está bien, deberías ver el simulador de iPad funcionando. 

Figure 4: iPad

Paso 11: Disfruta del juego

En este paso final, el objetivo es disfrutar del juego.  ¡Dado que el juego es para dos jugadores, la mejor manera de jugarlo es con un amigo! 

En las siguientes pantallas podemos ver el tablero de juego final a través de la visión de los dos jugadores (azul y rojo).  La flecha arriba del avatar del jugador indica el turno actual del jugador; el jugador que está jugando actualmente.

Tablero de juego del jugador azul:

Figure 5: Blue player

Tablero de juego del jugador rojo:

Figure 6: Red player

Paso 12: Conclusiones

Esto concluye la Parte II de cómo crear un juego de Flag Minesweeper utilizando tanto el código del lado del servidor como el del lado del cliente.  Por ahora, debes tener suficiente conocimiento para crear un juego Cocos2D simple usando el mismo motor de juego.  Si tiene alguna pregunta o comentario, no dude en dejarlos en la sección de comentarios aquí. 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.