{"id":1091,"date":"2025-10-13T08:00:00","date_gmt":"2025-10-13T07:00:00","guid":{"rendered":"https:\/\/jorgeturiel.es\/?p=1091"},"modified":"2025-09-27T12:38:08","modified_gmt":"2025-09-27T11:38:08","slug":"ghosts-n-goblins-y-cge-parte-2","status":"publish","type":"post","link":"https:\/\/jorgeturiel.es\/?p=1091","title":{"rendered":"Ghosts ‘n Goblins y CGE. Parte 2"},"content":{"rendered":"\n

Continuamos con la segunda parte de la creaci\u00f3n de Ghost ‘n Goblins usando el motor gr\u00e1fico Castle Game Engine. En este parte veremos como crear un sprite e insertarlo en la escena.<\/p>\n\n\n\n\n\n\n\n

Creando el personaje.<\/h2>\n\n\n\n

Continuamos esta nueva parte, introduciendo los sprites<\/em> del protagonista. Para ello, lo primero, vamos a crear una nueva carpeta dentro del directorio data, que la llamaremos sprites<\/em>. Y dentro de ella copiaremos el archivo spritesheet_player.png<\/em>.<\/p>\n\n\n

\n
\"\"
Archivo atlas<\/figcaption><\/figure>\n<\/div>\n\n\n

Si abrimos el archivo veremos que es una imagen d\u00f3nde est\u00e1 nuestro personaje en m\u00faltiples situaciones.<\/p>\n\n\n

\n
\"\"
Contenido del archivo atlas<\/figcaption><\/figure>\n<\/div>\n\n\n

Esto es lo que se conoce como atlas de im\u00e1genes, en una misma imagen que funciona a modo de lienzo, se pintan im\u00e1genes m\u00e1s peque\u00f1as. De esta manera se carga la imagen entera en memoria, y se \u201cextrae\u201d cada peque\u00f1a imagen y se van dibujando en pantalla secuencialmente a una velocidad determinada, con lo que se consigue una animaci\u00f3n.<\/p>\n\n\n\n


En Castle Game Engine<\/em>, para usar esta t\u00e9cnica, debemos crear hoja de sprites<\/em>. Esta hoja nos permitir\u00e1 extraer las im\u00e1genes Para ello hacemos click<\/em> con el bot\u00f3n derecho en la carpeta d\u00f3nde hemos copiado la imagen, y creamos la hoja de sprites<\/em>.<\/p>\n\n\n

\n
\"\"
Crear nueva hoja de sprites<\/figcaption><\/figure>\n<\/div>\n\n\n


Esto nos abrir\u00e1 una nueva venta, que ser\u00e1 d\u00f3nde crearemos las animaciones a partir del atlas. Para ellos selecciona en el men\u00fa frame<\/em>, import atlas<\/em>.<\/p>\n\n\n

\n
\"\"
Men\u00fa importar atlas<\/figcaption><\/figure>\n<\/div>\n\n\n


Ahora navega hasta el directorio data,sprites<\/em>, y selecciona el archivo atlas.<\/p>\n\n\n

\n
\"\"
Seleccionar el archivo atlas<\/figcaption><\/figure>\n<\/div>\n\n\n


Al pulsar Abrir, se muestra una nueva ventana.<\/p>\n\n\n

\n
\"\"
Opciones Importar Atlas<\/figcaption><\/figure>\n<\/div>\n\n\n

En esta ventana indicamos como se llamar\u00e1 la animaci\u00f3n, y tambi\u00e9n nos pide que indiquemos cuantas columnas y filas tiene el atlas. En esta caso, f\u00edjate en la imagen m\u00e1s arriba, hay 8 columnas y 10 filas. Para terminar pulsa Import.<\/em><\/p>\n\n\n\n


Ver\u00e1s que se ha creado una nueva animaci\u00f3n que contiene todos los sprites<\/em>. En la parte derecha ver\u00e1s como van pasando todos los sprites<\/em>. Para verlos de uno en uno, selecciona Frame<\/em>.<\/p>\n\n\n

\n
\"\"
Atlas cargado en una nueva animaci\u00f3n<\/figcaption><\/figure>\n<\/div>\n\n\n


Para crear la animaci\u00f3n del personaje caminando selecciona los sprites 2,3, y 5. Pulsa sobre el bot\u00f3n derecho y selecciona la opci\u00f3n: Create new animation from <\/em>selecction en el men\u00fa emergente.<\/p>\n\n\n

\n
\"\"
Crear nueva animaci\u00f3n desde selecci\u00f3n<\/figcaption><\/figure>\n<\/div>\n\n\n


Aparecer\u00e1 una nueva animaci\u00f3n llamada NewAnim1, pulsa sobre ella con el bot\u00f3n derecho y selecciona Remane<\/em> (F2) en el men\u00fa emergente. Pon de nombre: walk<\/em>, selecciona Animati\u00f3n<\/em> y observa en la parte derecha como se mueve el personaje.<\/p>\n\n\n

\n
\"\"
Animaci\u00f3n walk<\/figcaption><\/figure>\n<\/div>\n\n\n


Pulsa en cerrar, y como hay cambios y no le hemos dado un nombre a nuestra hoja de sprites<\/em>, nos pedir\u00e1 que le demos un nombre. Pon el nombre player<\/em> y gu\u00e1rdalo en la misma carpeta d\u00f3nde est\u00e1 la imagen del atlas que hemos usado.<\/p>\n\n\n

\n
\"\"
Guardar hoja de animaciones<\/figcaption><\/figure>\n<\/div>\n\n\n


Ahora, de vuelta en la escena que estamos creando, arrastra el fichero player.castle-sprite-sheet<\/em> sobre el escenario.<\/p>\n\n\n

\n
\"\"
Sprites player<\/figcaption><\/figure>\n<\/div>\n\n\n


Al hacer esto, se crear\u00e1 un componente nuevo en el \u00e1rbol, llamado ScenePlayer1. <\/em>Selecci\u00f3nalo y en sus propiedades, despliega Autoanimation, <\/em>se mostrar\u00e1n todas la animaciones que hay en esta hoja, por ahora solo hay newanin y walk<\/em>. Selecciona walk<\/em>.<\/p>\n\n\n

\n
\"\"
Propiedades del ScenePlayer1<\/figcaption><\/figure>\n<\/div>\n\n\n


Pulsa F9 para compilar el programa, y ver\u00e1s el juego funcionando. Si te desplazas con la c\u00e1mara el jugador no se mover\u00e1. As\u00ed que el siguiente paso es mover la c\u00e1mara y el jugador a la vez.<\/p>\n\n\n\n

Lo veremos en la siguiente parte.<\/p>\n\n\n\n

Tienes el c\u00f3digo fuente en mi github<\/a>.<\/p>\n\n\n\n

Saludos<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Continuamos con la segunda parte de la creaci\u00f3n de Ghost ‘n Goblins usando el motor gr\u00e1fico Castle Game Engine. En este parte veremos como crear un sprite e insertarlo en la escena.<\/p>\n","protected":false},"author":2,"featured_media":1104,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57,56,61,25,48],"tags":[49,23,21,24],"class_list":["post-1091","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-castle-game-engine","category-cge","category-free-pascal","category-pascal","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\/1091","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=1091"}],"version-history":[{"count":4,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts\/1091\/revisions"}],"predecessor-version":[{"id":1125,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts\/1091\/revisions\/1125"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/media\/1104"}],"wp:attachment":[{"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}