La principal motivación de la creación de este proyecto, es ir descubriendo y aprendiendo sobre el motor de videojuegos Castle Game Engine, para ello el objetivo es recrear el primer nivel de mítico arcade de los años 80, Ghosts ‘n Goblins En ningún caso tiene un objetivo económico, siendo el objetivo meramente divulgativo sin animo de lucro, por tanto todo el contenido de este proyecto se le aplica la licencia CC BY-NC-SA 4.0, además, excepto los respectivos gráficos y sonidos del juego, que son propiedad de su creador original Capcom.
Contenido
Preparación del entorno
Lo primero es instalar Castle Game Engine. Dirígete a su página oficial y descarga la versión para tu sistema operativo. En esta entrada tienes las instrucciones como instalarlo.
Lo siguiente es descargar los recursos, sonidos, gráficos, etc. para el juegos. Después de buscar por internet, encontré todos ellos en esta dirección: https://github.com/Blueicaro/Ghosts_N_Goblins_Remake
Este repositorio contiene un versión del juego desarrollado para el motor gráfico Unity. De todas la carpetas que contiene el proyecto nos interesa la carpeta Sprites que está dentro de la carpeta Assets. De ahí iremos cogiendo los archivos png, para crear los recursos gráficos. Y también usaremos la carpeta Audio, también dentro la carpeta Assets.
Empezando.
Abre el editor de Castle Game Engine y crea un nuevo proyecto. Como plantilla escoge un proyecto vacío. Abre la vista main, y añade los siguientes componentes en árbol de la izquierda:
- Viewport(2D). Este componente crea un vista en dos dimensiones, y añade una cámara con los ajustes necesarios para que tenga un aspecto de dos dimensiones. También añade un objeto llamado Plane, no te olvides de borrarlo.
- Añade un componente navigation 2D, el cual lo usaremos para ir avanzando por el escenario. Es componente, al igual que anterior, ya tiene los ajustes necesarios para un juego en dos dimensiones.
Estructura de carpetas.
Por defecto, Castle Game Engine, espera que los recursos, sonidos, gráficos, etc que se usen en tu proyecto estén dentro del directorio Data.
Por tanto haz doble clic en el directorio Data, y dentro de ella iremos creando una estructura de subdirectorios para tenerlo todo más organizado. Crearemos una carpeta que se llame Fondos, y dentro copiaremos el archivo que usaremos de fondo, el cual se llama stage1_background.png
remos añadiendo más imágenes y directorios según crezca el proyecto.
Colocar el fondo
Arrastra el archivo que acabamos de copiar, al centro del editor. Ajusta sus propiedad Translation, al valor 0,0 para que quede centrado en la vista.
Puedes hacer zoom con la rueda del ratón para alejar o acercar la vista y tener una visión más amplia del escenario. Y con el botón derecho pulsado del ratón, si lo mueves te puedes desplazar.
Selecciona el componente cámara en el árbol de la izquierda, podrá ver un rectángulo que aparece en la zona de edición, lo que se mostrará en la cámara cuando el juego esté ejecutándose.
Cómo puedes ver, la cámara muestra el escenario, y mucho más. Así que debemos ajustar las propiedades de la cámara para que solo se muestre una parte del escenario.
Consejo. Si pulsas sobre el botón que pone pin, en el recuadro de la cámara, la imagen permanecerá siempre visible, aunque selecciones otro componente. Lo que te permite tener en tiempo real una vista de la imagen.
Ahora llevaremos la cámara al inicio del escenario, para ello ajusta un translación en X. Fíjate que en el sentido del sistema de coordenadas, dónde los valores positivos del eje de coordenadas X, son positivos hacia la izquierda, y los valores positivos del eje Y, son positivos hacia arriba.
Esto viene indicado por el sistema de coordenadas que ves en el centro, el cual tiene dos flechas, siendo el color verde para el eje Y y el color rojo para el eje X, en sus sentidos positivos.
Te dejo esta imagen dónde se ven los valores que he puesto yo para que te sirvan de referencia. Cuando tengas la cámara más o menos al principio del escenario, pulsa la tecla F9 para ejecutar el juego y tener un vista real de como queda todo.
Primeras líneas de código
Abre el editor de texto que hayas configurado, para ello pulsa la tecla F12.
Añade la clausula CastleCameras que es la biblioteca que contiene la declaración de los componentes de navegación, y declara el componente Navigation2D1 en la sección published del programa
De esta manera podremos interactuar con el componente desde el código.
Busca el evento Update, este evento se ejecuta cada fotograma (frame). Así que es buen sitio para capturar el teclado.
Usaremos el objeto Container, que representa la interfaz con el usuario. No es necesario declararlo previamente, ya que Castle Game Engine lo añade por nosotros.
Escribe el siguiente código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var PosicionCamara: TVector2; (...) if Container.Pressed[keyArrowRight] then begin PosicionCamara := Navigation2D1.Camera.TranslationXY; PosicionCamara := PosicionCamara + Vector2(150 * SecondsPassed, 0); if PosicionCamara.X > 1615 then begin PosicionCamara := Vector2(1615, 0); end; Navigation2D1.Camera.TranslationXY := PosicionCamara; end else if Container.Pressed[keyArrowLeft] then begin PosicionCamara := Navigation2D1.Camera.TranslationXY; PosicionCamara := PosicionCamara - Vector2(150 * SecondsPassed, 0); if PosicionCamara.X < -1615 then begin PosicionCamara := Vector2(-1615, 0); end; Navigation2D1.Camera.TranslationXY := PosicionCamara; end; |
Lo que hace es código es comprobar si se ha pulsado la tecla cursor derecha por medio la línea:
|
1 |
if Container.Pressed[keyArrowRight] then |
Y sino comprueba si se ha pulsado la tecla izquierda, por medio de la instrucción
|
1 |
if Container.Pressed[keyArrowLeft] then |
En el caso que se pulse la tecla derecha, se guarda la posición de la cámara, y se incrementa su valor en X. El valor es 150, el cual es multiplicado por la variable SecondsPassed. Esto es importante ya que contiene el tiempo que ha pasado entre fotogramas (frames) de esta manera si el programa en ordenador se ejecuta más rápido o lento, el valor será diferente al que tenía cuando programaste el juego. Y al multiplicarlo por el valor que usamos para incrementar, el resultado será siempre el mismo valor, por lo cual el juego se ve igual independientemente del ordenador dónde se ejecute.
Una vez obtenida la nueva posición, se comprueba que si valor en el eje X no es mayor de 1615, en tal caso, se cambia por por este valor. Con esto evitamos que la cámara salga del escenario. Este valor es el mismo que ajustaste al colocar la cámara pero con valor positivo. Esto es así, ya que la imagen que usamos la colocamos centrada en la vista (posición 0,0), por tanto su posición es simétrica.
Cuando se pulsa el cursor izquierdo, se hace la misma operación pero esta vez de comprueba que el límite no sea inferior a -1615.
Ahora ejecuta el programa y usa la teclas cursor para moverte por el escenario.
En la siguiente parte añadiremos el protagonista, Sir Arthur.
Tienes el código fuente en mi github.
Saludos