{"id":1077,"date":"2025-09-27T08:30:00","date_gmt":"2025-09-27T07:30:00","guid":{"rendered":"https:\/\/jorgeturiel.es\/?p=1077"},"modified":"2025-09-27T12:37:33","modified_gmt":"2025-09-27T11:37:33","slug":"ghosts-n-goblins-y-cge-parte-1","status":"publish","type":"post","link":"https:\/\/jorgeturiel.es\/?p=1077","title":{"rendered":"Ghosts &#8216;n Goblins y CGE. Parte 1"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><br>La principal motivaci\u00f3n de la creaci\u00f3n de este proyecto, es ir descubriendo y aprendiendo sobre el motor de videojuegos <a href=\"https:\/\/castle-engine.io\/\">Castle Game Engine<\/a>, para ello el objetivo es recrear el primer nivel de m\u00edtico arcade de los a\u00f1os 80, <a href=\"https:\/\/es.wikipedia.org\/wiki\/Ghosts_%27n_Goblins\">Ghosts &#8216;n Goblins<\/a> En ning\u00fan caso tiene un objetivo econ\u00f3mico, siendo el objetivo meramente divulgativo sin animo de lucro, por tanto todo el contenido de este proyecto se le aplica la licencia <a href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/4.0\/deed.es\">CC BY-NC-SA 4.0<\/a>, adem\u00e1s, excepto los respectivos gr\u00e1ficos y sonidos del juego, que son propiedad de su creador original <a href=\"https:\/\/www.capcom.com\/\">Capcom<\/a>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Preparaci\u00f3n del entorno<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lo primero es instalar <em>Castle Game Engine<\/em>. Dir\u00edgete a su p\u00e1gina oficial y descarga la versi\u00f3n para tu sistema operativo. En esta entrada tienes las instrucciones como instalarlo.<\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-wp-embed is-provider-trasteando-por-vicio wp-block-embed-trasteando-por-vicio\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"kbSpBrm2nk\"><a href=\"https:\/\/jorgeturiel.es\/?p=440\">Castle Game Engine<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"\u00abCastle Game Engine\u00bb \u2014 Trasteando por vicio\" src=\"https:\/\/jorgeturiel.es\/?p=440&#038;embed=true#?secret=u0OMrBU1SC#?secret=kbSpBrm2nk\" data-secret=\"kbSpBrm2nk\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Lo siguiente es descargar los recursos, sonidos, gr\u00e1ficos, etc. para el juegos. Despu\u00e9s de buscar por internet, encontr\u00e9 todos ellos en esta direcci\u00f3n: <a href=\"https:\/\/github.com\/Blueicaro\/Ghosts_N_Goblins_Remake\">https:\/\/github.com\/Blueicaro\/Ghosts_N_Goblins_Remake<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este repositorio contiene un versi\u00f3n del juego desarrollado para el motor gr\u00e1fico <em>Unity<\/em>. De todas la carpetas que contiene el proyecto nos interesa la carpeta <em>Sprites<\/em> que est\u00e1 dentro de la carpeta Assets. De ah\u00ed iremos cogiendo los archivos <em>png<\/em>, para crear los recursos gr\u00e1ficos. Y tambi\u00e9n usaremos la carpeta Audio, tambi\u00e9n dentro la carpeta <em>Assets<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Empezando.<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Abre el editor de <em>Castle Game Engine<\/em> y crea un nuevo proyecto. Como plantilla escoge un proyecto vac\u00edo. Abre la vista <em>main<\/em>, y a\u00f1ade los siguientes componentes en \u00e1rbol de la izquierda:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Viewport(2D). Este componente crea un vista en dos dimensiones, y a\u00f1ade una c\u00e1mara con los ajustes necesarios para que tenga un aspecto de dos dimensiones. Tambi\u00e9n a\u00f1ade un objeto llamado <em>Plane<\/em>, no te olvides de borrarlo.<\/li>\n\n\n\n<li>A\u00f1ade 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.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Estructura de carpetas.<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Por defecto, Castle Game Engine, espera que los recursos, sonidos, gr\u00e1ficos, etc que se usen en tu proyecto est\u00e9n dentro del directorio Data.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"738\" height=\"357\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image.png\" alt=\"\" class=\"wp-image-1079\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image.png 738w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-300x145.png 300w\" sizes=\"auto, (max-width: 738px) 100vw, 738px\" \/><figcaption class=\"wp-element-caption\">Estructura carpetas<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><br>Por tanto haz doble clic en el directorio Data, y dentro de ella iremos creando una estructura de subdirectorios para tenerlo todo m\u00e1s organizado. Crearemos una carpeta que se llame Fondos, y dentro copiaremos el archivo que usaremos de fondo, el cual se llama <em>stage1_background.png<\/em><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"738\" height=\"357\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-1.png\" alt=\"\" class=\"wp-image-1080\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-1.png 738w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-1-300x145.png 300w\" sizes=\"auto, (max-width: 738px) 100vw, 738px\" \/><figcaption class=\"wp-element-caption\">Fondo a\u00f1adido<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">remos a\u00f1adiendo m\u00e1s im\u00e1genes y directorios seg\u00fan crezca el proyecto.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Colocar el fondo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"461\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-2-1024x461.png\" alt=\"\" class=\"wp-image-1081\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-2-1024x461.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-2-300x135.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-2-768x346.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-2.png 1221w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Fondo centrado<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Puedes hacer zoom con la rueda del rat\u00f3n para alejar o acercar la vista y tener una visi\u00f3n m\u00e1s amplia del escenario. Y con el bot\u00f3n derecho pulsado del rat\u00f3n, si lo mueves te puedes desplazar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Selecciona el componente c\u00e1mara en el \u00e1rbol de la izquierda, podr\u00e1 ver un rect\u00e1ngulo que aparece en la zona de edici\u00f3n, lo que se mostrar\u00e1 en la c\u00e1mara cuando el juego est\u00e9 ejecut\u00e1ndose.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1014\" height=\"601\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-3.png\" alt=\"\" class=\"wp-image-1082\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-3.png 1014w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-3-300x178.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-3-768x455.png 768w\" sizes=\"auto, (max-width: 1014px) 100vw, 1014px\" \/><figcaption class=\"wp-element-caption\">Vista del escenario con la c\u00e1mara seleccionada<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">C\u00f3mo puedes ver, la c\u00e1mara muestra el escenario, y mucho m\u00e1s. As\u00ed que debemos ajustar las propiedades de la c\u00e1mara para que solo se muestre una parte del escenario.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Consejo. Si pulsas sobre el bot\u00f3n que pone pin, en el recuadro de la c\u00e1mara, la imagen permanecer\u00e1 siempre visible, aunque selecciones otro componente. Lo que te permite tener en tiempo real una vista de la imagen.<\/p>\n<\/blockquote>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1014\" height=\"601\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-4.png\" alt=\"\" class=\"wp-image-1083\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-4.png 1014w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-4-300x178.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-4-768x455.png 768w\" sizes=\"auto, (max-width: 1014px) 100vw, 1014px\" \/><figcaption class=\"wp-element-caption\">Ajustar c\u00e1mara<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Ahora llevaremos la c\u00e1mara al inicio del escenario, para ello ajusta un translaci\u00f3n en X. F\u00edjate que en el sentido del sistema de coordenadas, d\u00f3nde los valores positivos del eje de coordenadas X, son positivos hacia la izquierda, y los valores positivos del eje Y, son positivos hacia arriba.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Te dejo esta imagen d\u00f3nde se ven los valores que he puesto yo para que te sirvan de referencia. Cuando tengas la c\u00e1mara m\u00e1s o menos al principio del escenario, pulsa la tecla F9 para ejecutar el juego y tener un vista real de como queda todo.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1014\" height=\"429\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-5.png\" alt=\"\" class=\"wp-image-1084\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-5.png 1014w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-5-300x127.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-5-768x325.png 768w\" sizes=\"auto, (max-width: 1014px) 100vw, 1014px\" \/><figcaption class=\"wp-element-caption\">C\u00e1mara al inicio de la escena<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Primeras l\u00edneas de c\u00f3digo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Abre el editor de texto que hayas configurado, para ello pulsa la tecla F12.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A\u00f1ade la clausula <em>CastleCameras<\/em> que es la biblioteca que contiene la declaraci\u00f3n de los componentes de navegaci\u00f3n, y declara el componente Navigation2D1 en la secci\u00f3n <em>published<\/em> del programa<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"755\" height=\"429\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-6.png\" alt=\"\" class=\"wp-image-1086\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-6.png 755w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/08\/image-6-300x170.png 300w\" sizes=\"auto, (max-width: 755px) 100vw, 755px\" \/><figcaption class=\"wp-element-caption\">A\u00f1adir componentes al inicio del c\u00f3digo<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">De esta manera podremos interactuar con el componente desde el c\u00f3digo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Busca el evento <em>Update<\/em>, este evento se ejecuta cada fotograma (<em>frame<\/em>). As\u00ed que es buen sitio para capturar el teclado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Usaremos el objeto <em>Container<\/em>, que representa la interfaz con el usuario. No es necesario declararlo previamente, ya que <em>Castle Game Engine<\/em> lo a\u00f1ade por nosotros.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Escribe el siguiente c\u00f3digo:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true \">var\n  PosicionCamara: TVector2;  \n(...)\n\n if Container.Pressed[keyArrowRight] then\n  begin\n    PosicionCamara := Navigation2D1.Camera.TranslationXY;\n    PosicionCamara := PosicionCamara + Vector2(150 * SecondsPassed, 0);\n    if PosicionCamara.X &gt; 1615 then\n    begin\n      PosicionCamara := Vector2(1615, 0);\n    end;\n    Navigation2D1.Camera.TranslationXY := PosicionCamara;\n  end\n  else if Container.Pressed[keyArrowLeft] then\n  begin\n    PosicionCamara := Navigation2D1.Camera.TranslationXY;\n    PosicionCamara := PosicionCamara - Vector2(150 * SecondsPassed, 0);\n    if PosicionCamara.X &lt; -1615 then\n    begin\n      PosicionCamara := Vector2(-1615, 0);\n    end;\n    Navigation2D1.Camera.TranslationXY := PosicionCamara;\n  end;  <\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Lo que hace es c\u00f3digo es comprobar si se ha pulsado la tecla cursor derecha por medio la l\u00ednea:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true \">if Container.Pressed[keyArrowRight] then<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Y sino comprueba si se ha pulsado la tecla izquierda, por medio de la instrucci\u00f3n<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true \">if Container.Pressed[keyArrowLeft] then<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">En el caso que se pulse la tecla derecha, se guarda la posici\u00f3n de la c\u00e1mara, y se incrementa su valor en X. El valor es 150, el cual es multiplicado por la variable <em>SecondsPassed<\/em>. Esto es importante ya que contiene el tiempo que ha pasado entre fotogramas (<em>frames<\/em>) de esta manera si el programa en ordenador se ejecuta m\u00e1s r\u00e1pido o lento, el valor ser\u00e1 diferente al que ten\u00eda cuando programaste el juego. Y al multiplicarlo por el valor que usamos para incrementar, el resultado ser\u00e1 siempre el mismo valor, por lo cual el juego se ve igual independientemente del ordenador d\u00f3nde se ejecute.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez obtenida la nueva posici\u00f3n, 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\u00e1mara salga del escenario. Este valor es el mismo que ajustaste al colocar la c\u00e1mara pero con valor positivo. Esto es as\u00ed, ya que la imagen que usamos la colocamos centrada en la vista (posici\u00f3n 0,0), por tanto su posici\u00f3n es sim\u00e9trica.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cuando se pulsa el cursor izquierdo, se hace la misma operaci\u00f3n pero esta vez de comprueba que el l\u00edmite no sea inferior a -1615.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora ejecuta el programa y usa la teclas cursor para moverte por el escenario.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En la siguiente parte a\u00f1adiremos el protagonista, <em>Sir Arthur.<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tienes el c\u00f3digo fuente en mi <a href=\"https:\/\/github.com\/Blueicaro\/GhostAndGoblins_CGE-\">github<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Saludos<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ghosts&#8217;n Goblins (Fantasmas y Duendes) (\u9b54\u754c\u6751 Makaimura?, lit. \u00abEl pueblo del mundo demon\u00edaco\u00bb) es un videojuego de plataformas de arcade creado por Capcom. Lanzado en 1985, fue portado a numerosas plataformas de computadoras personales y seguido por cuatro secuelas oficiales: Ghouls&#8217;n Ghosts, Super Ghouls&#8217;n Ghosts, Ultimate Ghosts&#8217;n Goblins y Ghosts &#8216;n Goblins Resurrection, m\u00e1s algunas historias que incluyen Gargoyle&#8217;s Quest, Maximo y Makaimura for WonderSwan. <\/p>\n","protected":false},"author":2,"featured_media":1089,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57,56,61,25,26,48],"tags":[49,23,21,24],"class_list":["post-1077","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-castle-game-engine","category-cge","category-free-pascal","category-pascal","category-programacion","category-videojuegos","tag-castle-game-engine","tag-lazarus","tag-pascal","tag-programacion"],"_links":{"self":[{"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts\/1077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1077"}],"version-history":[{"count":6,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts\/1077\/revisions"}],"predecessor-version":[{"id":1123,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts\/1077\/revisions\/1123"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/media\/1089"}],"wp:attachment":[{"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}