{"id":859,"date":"2024-09-30T00:00:00","date_gmt":"2024-09-29T23:00:00","guid":{"rendered":"https:\/\/jorgeturiel.es\/?p=859"},"modified":"2025-02-17T09:30:18","modified_gmt":"2025-02-17T08:30:18","slug":"telepong-con-castle-game-engine-parte-1","status":"publish","type":"post","link":"https:\/\/jorgeturiel.es\/?p=859","title":{"rendered":"TelePong con Castle Game Engine. Parte 1"},"content":{"rendered":"\n

Pong o TelePong fue un juego creado por Atari. Es considerado el primer juego comercial con \u00e9xito, lanzado el 29 de noviembre de 1972 (fuente wikipedia<\/a>).<\/p>\n\n\n\n

Recuerdo ser un ni\u00f1o que apenas iba al colegio y jugar a este juego en el televisor, con un mandos que ten\u00edan un potenci\u00f3metro el cual giraba para mover la barra, que estaban unidos a una peque\u00f1a caja met\u00e1lica, que a su vez se conectaba a la televisi\u00f3n. Todo ello construido por mi padre<\/a>.<\/p>\n\n\n\n

Este m\u00edtico juego, hoy en d\u00eda puede ser recreado de una manera r\u00e1pida y sencilla usando un motor gr\u00e1fico. En este caso usaremos Castle Game Engine<\/a>, del cual ya he hablado en otras entradas<\/a> de este blog. Para ello haremos uso de su motor de f\u00edsicas.<\/p>\n\n\n\n\n\n\n\n

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

Empieza instalando, sino lo tienes, Castle Game Engine, tal como se explica en esta entrada<\/a>.<\/p>\n\n\n\n

Empieza creando un nuevo proyecto vac\u00edo. Rellena los campos Project Name<\/em> y Project Caption<\/em>, con el nombre que quieras. Te recomiendo usar los mismos que he puesto yo, f\u00edjate en la imagen siguiente.<\/p>\n\n\n

\n
\"\"
Creando TelePong<\/figcaption><\/figure>\n<\/div>\n\n\n

Ahora, haz doble click <\/em>en la vista main<\/em>, para empezar.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Lo primero es a\u00f1adir la vista 2D, tenemos que a\u00f1adir el componente llamado ViewPort<\/em>. Para ello pulsa con el bot\u00f3n izquierdo sobre Group<\/em>, y en el men\u00fa contextual selecciona Add User Interface<\/em>, y por \u00faltimo, dentro de este selecciona Viewport(2D)(TCastleViewPort)<\/em>.<\/p>\n\n\n

\n
\"\"
A\u00f1adir Viewport2D<\/figcaption><\/figure>\n<\/div>\n\n\n

Como en la versi\u00f3n original del juego el fondo es negro, vamos a replicarlo. Selecciona Viewport1<\/em> y en la ventana de propiedades cambia la propiedad BackgroundColor<\/em> al valor 000000. Y borra el elemento Plane1<\/em>.<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Preparando el terreno de juego.<\/h2>\n\n\n\n

Es momento de crear el terreno de juego, que estaba compuesto por dos l\u00edneas o barras, una en la parte superior y otra en la inferior. A\u00f1ade dos elementos TCastleBox. <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Ponles de nombre, LadoSuperior<\/em> y LadoInferior. <\/em>Ajusta su propiedad Material<\/em> al valor pmUntil<\/em>, as\u00ed como el color al valor FFFFF.<\/em> Sit\u00faa cada uno de ellos en su lugar. El lado superior en la parte de arriba y el lado inferior en la parte inferior. <\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\"\"
Aspecto de la pantalla con las paredes laterales.<\/figcaption><\/figure>\n\n\n\n

Ahora crearemos los l\u00edmites lateras. Para ello, tambi\u00e9n, usaremos dos CastleBox,<\/em> con el color blanco. Los llamaremos LadoIzquierdo <\/em>y LadoDerecho<\/em>.<\/p>\n\n\n\n

Estas son las propiedades de estos dos nuevos elementos.<\/p>\n\n\n\n

\n
\n
\"\"
Propiedades lado derecho<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Propiedades lado izquierdo<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Deber\u00eda quedar con un aspecto similar a esta imagen<\/p>\n\n\n\n

\"\"
Aspecto del juego con todos los lados.<\/figcaption><\/figure>\n\n\n\n

Jugadores.<\/h3>\n\n\n\n

Vamos a a\u00f1adir los jugadores. Para ello, nuevamente, vamos a a\u00f1adir dos TCastleBox<\/em>. Se llamar\u00e1n Player1<\/em> y Player2<\/em>. Aseg\u00farate que su propiedad material es igual a pmUntil<\/em>. El tama\u00f1o ser\u00e1 10 en X, 100 en Y. El color ser\u00e1 FFFFFF<\/em>, blanco. Player1 <\/em>lo vamos a situar a la izquierda de la pantalla, por tanto Player2 <\/em>ser\u00e1 a la derecha. <\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Por \u00faltimo vamos a a\u00f1adir la pelota. Para ello a\u00f1ade una elemento TCastleSphere<\/em>, ajusta su radio a 10, por medio de la propiedad Radius<\/em>, y como en los elementos anteriores aseg\u00farate que su propiedad Material<\/em> es igual a pmUntil<\/em>. Ajusta su color a blanco, en la propiedad Color<\/em> pon el valor FFFFFF.<\/em> Para terminar cambia su nombre a Pelota.<\/em><\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div><\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Marcador.<\/h3>\n\n\n\n

Para crear el marcador usaremos el elemento TCastleLabel<\/em><\/p>\n\n\n\n

Al ser un elemento de tipo User Interface<\/em>, este se a\u00f1ade haciendo click con el bot\u00f3n derecho sobre ViewPort<\/em>. A\u00f1ade dos etiquetas y ponles de nombre MarcadorPlayer1 <\/em> y MarcadorPlayer2<\/em>. Ajusta su color a blanco (FFFFFF<\/em>) y ponlas en la parte superior. Ya que el jugador 1 lo hemos situado a la izquierda, coloca arriba a al izquierda la etiqueda MarcadorPlayer1<\/em>. Ajusta el tama\u00f1o de fuente en su propiedad FontSize<\/em> al valor 10 y la propiedad FontScale<\/em> tambi\u00e9n a 10. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

A\u00f1adiendo comportamientos y f\u00edsica.<\/h2>\n\n\n\n

Vamos a a\u00f1adir comportamiento y f\u00edsica a los l\u00edmites del juego. De manera que la pelota pueda rebotar en ellos y tambi\u00e9n gestionar cuando la pelota colisiones con los l\u00edmites laterales, de esta manera sabremos que un jugador consigui\u00f3 un punto.<\/p>\n\n\n\n

Empezamos por los lados, selecciona uno de ellos en el \u00e1rbol, y pulsa el bot\u00f3n derecho para a\u00f1adir un comportamiento. Selecciona Add Behavior<\/em>, Physics<\/em>, Collider 2D<\/em>, Mesh<\/em><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Se crearan dos componentes tal como muestra la imagen siguiente.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Selecciona RigidBody1<\/em>, y en su propiedades desmarca la propiedad Gravity<\/em> para que su valor sea False<\/em>. Con esto conseguimos que no se vea afectada por la gravedad, la cual, en un mundo 2D, es hacia abajo de la pantalla, en la coordenada y negativa. Sino desmarcamos esta opci\u00f3n el lado se caer\u00eda.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Haz los mismo en los 4 lados.<\/p>\n\n\n\n

En el caso de los jugadores, tambi\u00e9n a\u00f1adiremos f\u00edsica y seleccionaremos Mesh<\/em>, y la pelota seleccionaremos Box<\/em>,. Recuerda, que debes desmarcar la opci\u00f3n Gravity<\/em>, en todos ellos.<\/p>\n\n\n\n

Probando la f\u00edsica<\/h3>\n\n\n\n

Modifica las propiedades de la pelota de la siguiente manera. En su RigidBody<\/em>, ajusta su velocidad lineal con el valor 500 500 0, y LinerVelocityDamp <\/em> a 0. Con estos ajustes, estamos indicado que la pelota se mover\u00e1 con una velocidad linea de 500 en el eje X, 500 en el eje Y, y 0 en el eje Z, y con LinerVelocityDamp<\/em> igual a 0, lo que indicamos es que factor de reducci\u00f3n de velocidad es 0, por lo cual la velocidad aplicada no se ver\u00e1 reducida.<\/p>\n\n\n

\n
\"\"
RigidBody<\/em> de la pelota<\/figcaption><\/figure>\n<\/div>\n\n\n

En su SphereCollider<\/em> cambia la propiedad Friction a 0, para que su coeficiente de fricci\u00f3n sea 0. Y ajusta su su propiedad Restitution<\/em> sea 1, lo que indica su capacidad de rebotar o elasticidad. Puedes poner valor en su masa o dejarlo tal como est\u00e1. <\/p>\n\n\n

\n
\"\"
SphereCollider<\/em> de la pelota<\/figcaption><\/figure>\n<\/div>\n\n\n

Ahora pulsa el bot\u00f3n verde en la parte superior del editor. Esto ejecutara, solamente el motor de f\u00edsicas, y podr\u00e1s como afecta a los elementos, sin tener que ejecutar el programa. Aunque tambi\u00e9n puedes ejecutarlo si as\u00ed lo deseas.<\/p>\n\n\n\n

Resumiendo<\/h2>\n\n\n\n

En esta parte, hemos visto como se puede configurar la f\u00edsica de los elementos que hayas a\u00f1adido. <\/p>\n\n\n\n

La diferencia en usar TMeshcollider con otro ajuste, est\u00e1 en que este modo cuando se produce la colisi\u00f3n este no se ve afectado por la f\u00edsica (velocidad, masa, etc.). Si, por ejemplo, los jugadores tuvieran TBoxCollider, al chocar la pelota con ellos, estos de mover\u00edan, rotar\u00edan, etc. en funci\u00f3n de la masa que colisiones con ellos, la velocidad, el \u00e1ngulo, etc. <\/p>\n\n\n\n

En la segunda parte programaremos, usando c\u00f3digo, el juego. Pero como ver\u00e1s como con muy poquito c\u00f3digo tendremos el juego funcionando.<\/p>\n\n\n\n

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

El juego Pong, creado por Atari en 1972, nos sirve como introducci\u00f3n al Castle Game Engine y su motor de f\u00edsicas<\/p>\n","protected":false},"author":2,"featured_media":893,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57,56,61],"tags":[49,23,21,24],"class_list":["post-859","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-castle-game-engine","category-cge","category-free-pascal","tag-castle-game-engine","tag-lazarus","tag-pascal","tag-programacion"],"_links":{"self":[{"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts\/859","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=859"}],"version-history":[{"count":17,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts\/859\/revisions"}],"predecessor-version":[{"id":996,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts\/859\/revisions\/996"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/media\/893"}],"wp:attachment":[{"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}