{"id":1126,"date":"2025-10-27T08:00:00","date_gmt":"2025-10-27T07:00:00","guid":{"rendered":"https:\/\/jorgeturiel.es\/?p=1126"},"modified":"2025-09-28T20:48:43","modified_gmt":"2025-09-28T19:48:43","slug":"ghosts-n-goblins-y-cge-parte-3","status":"publish","type":"post","link":"https:\/\/jorgeturiel.es\/?p=1126","title":{"rendered":"Ghosts \u2018n Goblins y CGE. Parte 3"},"content":{"rendered":"\n
En esta tercera entrega, vamos a ver como mover el personaje por el escenario, as\u00ed como hacer que la c\u00e1mara lo siga, y que ninguno de los dos se salga del escenario.<\/p>\n\n\n\n\n\n\n\n
Para que la c\u00e1mara siga el personaje, debemos cambiar el enfoque en nuestro c\u00f3digo.Cuando se pulse una tecla, se desplazar\u00e1 el personaje, y despu\u00e9s situaremos la c\u00e1mara d\u00f3nde est\u00e9 el personaje.<\/p>\n\n\n\n
Organizando el c\u00f3digo (Refactoring)<\/h2>\n\n\n\n
C\u00f3mo el c\u00f3digo empieza a ser cada vez m\u00e1s grande, y con el objetivo de hacerlo m\u00e1s legible, antes de continuar vamos a hacer algunos cambios en el c\u00f3digo.<\/p>\n\n\n\n
En la parte privada de TViewMain declara las siguientes funciones para mover el personaje:<\/p>\n\n\n\n
function MoveLeft: boolean;\n function MoveRight: boolean;\n function MoveDown: boolean;\n function Jump: boolean;\n function PlayerOnGround: boolean;\n function FireWeapon: boolean; <\/pre><\/div>\n\n\n\n
Tras declararlas, si pulsas shift+c <\/em>sobre cada una de ellas, el IDE Lazarus, c<\/em>rear\u00e1 el c\u00f3digo correspondiente. Cada una de estas funciones se ocupar\u00e1 de realizar una acci\u00f3n sobre el personaje. En cada una de ellas, se evaluar\u00e1 si se ha pulsado la tecla correspondiente a la acci\u00f3n, en tal caso devolver\u00e1 TRUE, sino devolver\u00e1 <\/em>FALSE. Adem\u00e1s cuando la tecla es pulsada, se realizar\u00e1n ciertas operaciones sobre el personaje.<\/p>\n\n\n\n
Veamos el c\u00f3digo de las funciones que se encargan de mover el personaje hacia la derecha y la izquierda.<\/p>\n\n\n\n
\/\/Personaje hacia la izquierda\nfunction TViewMain.MoveLeft: boolean;\nbegin\n Result := False;\n if Container.Pressed[keyArrowLeft] then\n begin\n if Arthur.Rotation.W = 0 then\n begin\n Arthur.Rotation := Vector4(0, 1, 0, Deg(180));\n end;\n Result := True;\n end;\nend;\n\n\/\/Personaje hacia la derecha\nfunction TViewMain.MoveRight: boolean;\nbegin\n Result := False;\n if Container.Pressed[keyArrowRight] then\n begin\n if Arthur.Rotation.W <> 0 then\n begin\n Arthur.Rotation := Vector4(0, 1, 0, 0);\n end;\n Result := True;\n end;\nend; \n<\/pre><\/div>\n\n\n\n
En estas funciones, en el caso que se pulse la tecla correspondiente, aparte de retornar TRUE<\/em>, se comprobar\u00e1 si el personaje se le ha aplicado alguna rotaci\u00f3n. Por defecto el personaje, tal como creamos el sprite, est\u00e1 mirando a la izquierda.<\/p>\n\n\n
\nPersonaje a 0\u00ba<\/figcaption><\/figure>\n<\/div>\n\n\n
Observa que su \u00e1ngulo de rotaci\u00f3n \u201cAngle(W)\u201d<\/em> es cero, esto indica que el sprite del personaje \u201cest\u00e1 tal cual\u201d. Ya adem\u00e1s no se aplica sobre ning\u00fan eje (aunque se aplicara, al ser el \u00e1ngulo igual a cero no se producir\u00eda ninguna rotaci\u00f3n).<\/p>\n\n\n\n
Si, cambiamos el valor del \u00e1ngulo a 180 grados, e indicamos que la rotaci\u00f3n sea sobre el eje Y, cambiando su valor de cero a uno, el personaje rotar\u00e1 180 grados sobre su eje Y.<\/p>\n\n\n\nPersonaje rotada 180\u00ba<\/figcaption><\/figure>\n\n\n\n
Es operaci\u00f3n que hemos hecho sobre las propiedades del personaje, es lo que se realiza por c\u00f3digo en estas funciones.<\/p>\n\n\n\n
Ten en cuenta que los \u00e1ngulos, en CGE, son en radianes. Por eso se usa la funci\u00f3n Deg<\/em> para convertir un valor en grados a radianes. Esta funci\u00f3n est\u00e1 la unidad CastleUtils<\/em>, por lo cual debemos a\u00f1adirla para poder usarla.<\/p>\n\n\n\n
As\u00ed que justo al empezar la implementaci\u00f3n a\u00f1ade esta unidad a la clausula uses<\/em>.<\/p>\n\n\n
\nUnidades a\u00f1adidas en la secci\u00f3n implementaci\u00f3n<\/figcaption><\/figure>\n<\/div>\n\n\n
La funci\u00f3n PlayerOnGround<\/em>, devuelve el estado de la variable OnGround<\/em>. Define esta variable en la parte privada de TViewMain<\/em>.<\/p>\n\n\n\n
function TViewMain.PlayerOnGround: boolean;\nbegin\n Result := OnGround;\nend;<\/pre><\/div>\n\n\n\n
Las funciones restantes, simplemente devolver\u00e1n si la tecla correspondiente ha sido pulsada.<\/p>\n\n\n\n
function TViewMain.MoveDown: boolean;\nbegin\n Result := False;\n if Container.Pressed[keyDown] then\n begin\n Result := True;\n end;\nend;\n\nfunction TViewMain.Jump: boolean;\nbegin\n Result := False;\n if Container.Pressed[keyCtrl] then\n begin\n Result := True;\n end;\nend;\n\nfunction TViewMain.PlayerOnGround: boolean;\nbegin\n Result := OnGround;\nend;\n\nfunction TViewMain.FireWeapon: boolean;\nbegin\n Result := False;\n if Container.Pressed[keySpace] then\n begin\n Result := True;\n end;\nend;<\/pre><\/div>\n\n\n\n
La variable OnGround<\/em>, indicar\u00e1 si el personaje est\u00e1 sobre el suelo o no. Necesitamos saber d\u00f3nde est\u00e1 para activar o desactivar ciertas acciones. Su estado depender\u00e1 si el personaje colisiona con el suelo, o deja de colisionar con este. As\u00ed que definiremos dos eventos para el suelo, OnCollisionEnter<\/em>, y OnColisionExit,<\/em> esto lo haremos evento Start<\/em>.<\/p>\n\n\n\n
Para definir autom\u00e1ticamente los procedimientos asignados a cada evento, puedes pulsar CLTR+C<\/em>, sobre cada uno de ellos, para que se genere la c\u00f3digo correspondiste.<\/p>\n\n\n\n
Recuerda que debes definir en la secci\u00f3n Published<\/em> de TmainView<\/em>, los elementos que usemos en el c\u00f3digo.<\/p>\n\n\n\n
published\n { Components designed using CGE editor.\n These fields will be automatically initialized at Start. }\n LabelFps: TCastleLabel;\n Navigation2D1: TCastle2DNavigation;\n Arthur: TCastleScene;\n Suelo1: TCastleBox; <\/pre><\/div>\n\n\n\n
Cuando entre en colisi\u00f3n alg\u00fan objeto con el suelo, se ejecutar\u00e1 Suelo1CollisionEnter<\/em>, as\u00ed que dentro de este evento, comprobaremos si el objeto que ha colisionado es nuestro personaje, en tal caso pondremos la variable OnGround<\/em> a TRUE<\/em>.<\/p>\n\n\n\n
De la misma manera, cuando un objeto deje de colisionar con el suelo, se ejecutar\u00e1 Suelo1CollisionExit<\/em>, si el objeto que sale de la colisi\u00f3n es el personaje, pondremos la variable OnGround<\/em> a False<\/em>.<\/p>\n\n\n\n
El objetivo de los cambios que vamos a realizar es simplificar el evento Update.<\/p>\n\n\n\n
Lo primero que hacemos en guardar en una variable la velocidad actual del personaje.<\/p>\n\n\n\n
vel := Arthur.RigidBody.LinearVelocity;<\/pre><\/div>\n\n\n\n
Luego comprobar si se ha pulsado si el personaje debe ir a la izquierda o la derecha, y si est\u00e1 en el suelo. De esta manera si el personaje no estuviera en el suelo, no se le aplicar\u00eda ninguna velocidad en el X, ya que queremos que se desplaza solamente cuando est\u00e9 en el suelo.<\/p>\n\n\n\n
if MoveRight and PlayerOnGround then\n begin\n vel.x := 1500 * SecondsPassed;\n end;\n if MoveLeft and PlayerOnGround then\n begin\n vel.X := -1500 * SecondsPassed;\n end;<\/pre><\/div>\n\n\n\n
Lo siguiente, es comprobar si se ha pulsado la tecla saltar( jump<\/em>), y si est\u00e1 en el suelo, se aplica una velocidad en eje Y, que es el eje vertical.<\/p>\n\n\n\n
if Jump and PlayerOnGround then\n begin\n vel.y := 1500 * SecondsPassed;\n end;<\/pre><\/div>\n\n\n\n
Por \u00faltimo comprobamos que sino se ha pulsado ninguna tecla , y el personaje est\u00e1 en el suelo, ajustamos la velocidad del eje X a cero.<\/p>\n\n\n\n
if (MoveLeft = False) and (MoveRight = False) and (PlayerOnGround = True) then\n begin\n vel.x := 0;\n end;<\/pre><\/div>\n\n\n\n
Para terminar, aplicamos la velocidad al personaje.<\/p>\n\n\n\n
Ahora debemos actualizar la animaci\u00f3n del personaje, en funci\u00f3n de su velocidad y si est\u00e1 en el suelo o no.<\/p>\n\n\n\n
if (Arthur.RigidBody.LinearVelocity.X = 0) or (not PlayerOnGround) then\n begin\n Arthur.StopAnimation();\n end\n else\n begin\n if Arthur.CurrentAnimation = nil then\n Arthur.PlayAnimation('walk', True);\n end;<\/pre><\/div>\n\n\n\n
Por \u00faltimo, guardamos en la variable llamada PosicionCamara<\/em>, un vector que contiene en el eje X la posici\u00f3n del personaje, y en la coordenada Y, la posici\u00f3n de la c\u00e1mara. Y eso ser\u00e1 posici\u00f3n de la c\u00e1mara.<\/p>\n\n\n\n
Si probamos el juego ahora, veremos que, tanto,el jugador como la c\u00e1mara se salen del escenario. Para ello, vamos a limitar el movimiento de ambos. Definimos al inicio de la unidad, una clase llamada TLevelBounds.<\/p>\n\n\n\n
Esta nos contendr\u00e1 4 propiedades, las cuales representaran los l\u00edmites del escenario.<\/p>\n\n\n\n
En su constructor definimos los l\u00edmites.<\/p>\n\n\n\n
constructor TLevelBounds.Create(AOwner: TComponent);\nbegin\n inherited Create(AOwner);\n Left := -1780;\n Right := 1780;\n Top := 104;\n Down := -104; \nend; \n<\/pre><\/div>\n\n\n\n
Y en el evento OnStart<\/em>, creamos el objeto.<\/p>\n\n\n\n
Para conocer d\u00f3nde est\u00e1 el jugador en cualquier momento, y as\u00ed conocer los l\u00edmites del escenario, use la t\u00e9cnica del logging. Esto es que el juego muestre informaci\u00f3n en cualquier momento.<\/p>\n\n\n
\nVentana de salida<\/figcaption><\/figure>\n<\/div>\n\n\n
En la parte de abajo del editor, existe la pesta\u00f1a Output<\/em>, est\u00e1 muestra informaci\u00f3n cuando el juego se inicia. Y tambi\u00e9n puede mostrar informaci\u00f3n que nuestro programa quiera.<\/p>\n\n\n\n
A\u00f1ade la unidad castlelog, justo debajo de la implementaci\u00f3n.<\/p>\n\n\n
\nClausula uses en la secci\u00f3n de implementaci\u00f3n.<\/figcaption><\/figure>\n<\/div>\n\n\n
Ahora en el evento Press,<\/em> escribe lo siguiente<\/p>\n\n\n\n
if Event.IsKey(keyEnter) then\n\nbegin\n\nWritelnLog(Arthur.TranslationXY.ToString);\n\nExit(true);\n\nend;<\/pre><\/div>\n\n\n\n
Este c\u00f3digo mostrar\u00e1 por la ventana output<\/em> la posici\u00f3n de Arthur.<\/p>\n\n\n\n
Ahora, podemos limitar la posici\u00f3n del personaje con las siguiente instrucciones, de nuevo en el evento Update<\/em>.<\/p>\n\n\n\n
if Arthur.TranslationXY.X < LevelBounds.Left then\n begin\n \/\/Detener el movimiento\n Arthur.RigidBody.LinearVelocity := Vector3(0, 0, 0);\n Arthur.TranslationXY := Vector2(LevelBounds.Left, Arthur.TranslationXY.Y);\n end;\n\n if Arthur.TranslationXY.X > LevelBounds.Right then\n begin\n \/\/Detener el movimiento\n Arthur.RigidBody.LinearVelocity := Vector3(0, 0, 0);\n Arthur.TranslationXY := Vector2(LevelBounds.Right, Arthur.TranslationXY.Y);\n end;<\/pre><\/div>\n\n\n\n
Ahora, el personaje no se sale de escenario, pero la c\u00e1mara si, ya que siempre lo mantiene en el centro. Para evitar este efecto, vamos limitar el movimiento de la c\u00e1mara, de manera que si su centro, m\u00e1s la mitad de su ancho del campo de visi\u00f3n, es menor o mayor a los l\u00edmites, corregiremos su posici\u00f3n.<\/p>\n\n\n
\nCampo de visi\u00f3n de la c\u00e1mara.<\/figcaption><\/figure>\n<\/div>\n\n\n
Debemos obtener el ancho del campo de visi\u00f3n de esta manera:<\/p>\n\n\n\n
Recuerda definir es la parte published<\/em> de la unidad la variable ViewPort1<\/em> para acceder al componente ViewPort1<\/em> del editor.<\/p>\n\n\n\n
published\n { Components designed using CGE editor.\n These fields will be automatically initialized at Start. }\n LabelFps: TCastleLabel;\n Navigation2D1: TCastle2DNavigation;\n Arthur: TCastleScene;\n Suelo1: TCastleBox;\n ViewPort1: TCastleViewport; \/\/Define esta variable <\/pre><\/div>\n\n\n\n
Obtenemos la posici\u00f3n de la c\u00e1mara, centrada en el eje X, con respecto al personaje.<\/p>\n\n\n\n
Y antes de asignar la nueva posici\u00f3n a la c\u00e1mara hacemos unas comprobaciones. Si la posici\u00f3n en el eje X, menos la mitad del ancho es menor del l\u00edmite izquierdo, cargamos la posici\u00f3n del l\u00edmite m\u00e1s la mitad del ancho del campo de visi\u00f3n. Hacemos lo mismo para el l\u00edmite izquierdo.<\/p>\n\n\n\n
![\"\"](\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/09\/image.png\")
![\"\"](\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/09\/image-1.png\")
![\"\"](\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/09\/image-2.png\")
![\"\"](\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/09\/image-3.png\")
![\"\"](\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/09\/image-4.png\")
![\"\"](\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/09\/image-5.png\")