{"id":723,"date":"2024-06-24T15:57:49","date_gmt":"2024-06-24T14:57:49","guid":{"rendered":"https:\/\/jorgeturiel.es\/?p=723"},"modified":"2024-08-25T10:24:24","modified_gmt":"2024-08-25T09:24:24","slug":"la-forma-incorrecta-de-jugar-al-ajedrez-diversion-en-fisica-3d-usando-castle-game-engine-parte-1","status":"publish","type":"post","link":"https:\/\/jorgeturiel.es\/?p=723","title":{"rendered":"La forma incorrecta de jugar al ajedrez: Diversi\u00f3n en f\u00edsica 3D usando Castle Game Engine (Parte 1)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Traducci\u00f3n del <a href=\"https:\/\/castle-engine.io\/bad-chess\/castle_game_engine_bad_chess_1.html\">art\u00edculo original<\/a> Michalis Kamburelis.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Introducci\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Recuerdo mi primer libro sobre ajedrez cuando era ni\u00f1o. Era un libro que ense\u00f1aba a los j\u00f3venes a jugar ajedrez. El primer cap\u00edtulo comenzaba con un cuento sobre ni\u00f1os que jugaban ajedrez de manera incorrecta: no conoc\u00edan las reglas, as\u00ed que colocaban las piezas aleatoriamente en el tablero y las lanzaban con los dedos hacia el otro lado. Las piezas de ajedrez de madera volaban por el aire, chocando unas con otras. Eventualmente, la mayor\u00eda de las piezas de ajedrez ca\u00edan del tablero al suelo. La persona que quedaba con la \u00faltima pieza de ajedrez en el tablero era la ganadora.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Naturalmente, esa era una forma muy mala de jugar ajedrez. En el segundo cap\u00edtulo del libro, un adulto llegaba, les dec\u00eda a los ni\u00f1os que estaban jugando mal y les ense\u00f1aba la manera correcta: c\u00f3mo se mueve cada figura, por qu\u00e9 el rey es especial, qu\u00e9 significa hacer jaque y luego mate a tu oponente. En general, el libro fue excelente y es probable que sea responsable de mi amor por el ajedrez (la versi\u00f3n correcta del juego, con reglas en lugar de lanzar objetos) hasta el d\u00eda de hoy.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dicho esto\u2026 \u00bfNo te gustar\u00eda jugar alg\u00fan d\u00eda esa versi\u00f3n \u00abincorrecta\u00bb del ajedrez, la versi\u00f3n de los ni\u00f1os, donde nada m\u00e1s importa excepto enviar cada pieza de ajedrez volando hacia el otro lado?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En esta serie de art\u00edculos vamos a retroceder en el tiempo, olvidar nuestro conocimiento adquirido sobre c\u00f3mo jugar realmente al ajedrez, e implementar una aplicaci\u00f3n sencilla de f\u00edsica en 3D donde puedes lanzar piezas de ajedrez usando f\u00edsica. Puedes tratarlo como un juego para dos personas: simplemente ju\u00e9galo en la computadora y deja que cada jugador use el rat\u00f3n y el teclado por turnos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">La Verdadera Introducci\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El prop\u00f3sito real de este art\u00edculo es ser una introducci\u00f3n entretenida pero tambi\u00e9n \u00fatil al uso de Castle Game Engine.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Castle Game Engine es un motor de juego 3D y 2D multiplataforma (escritorio, m\u00f3vil, consolas). Aprenderemos c\u00f3mo crear un juego para escritorio (Linux, Windows, macOS, FreeBSD).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En la primera parte del art\u00edculo mostraremos c\u00f3mo dise\u00f1ar un tablero de ajedrez en 3D y piezas de ajedrez usando el editor de Castle Game Engine y c\u00f3mo utilizar la f\u00edsica. En la siguiente parte, realizaremos algo de programaci\u00f3n en Pascal para implementar la l\u00f3gica del juego. En futuros art\u00edculos tambi\u00e9n nos gustar\u00eda mostrar el desarrollo para otras plataformas (como Android e iOS) y los planes futuros (como la plataforma web).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Puedes utilizar FPC o Delphi para desarrollar la aplicaci\u00f3n presentada aqu\u00ed. En nuestro motor, estamos comprometidos con un soporte perfecto para ambos compiladores Pascal. Sin embargo, ten en cuenta que con Delphi, por el momento, solo puedes apuntar a Windows y Linux (con FPC, todas las plataformas est\u00e1n disponibles).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Castle Game Engine cuenta con un potente editor visual para dise\u00f1ar tus juegos, en 2D o 3D. Al igual que las bibliotecas visuales de Delphi y Lazarus, todo se basa en un concepto RAD simple: puedes dise\u00f1ar una aplicaci\u00f3n funcional f\u00e1cilmente de forma visual, pero al mismo tiempo todo lo que haces realmente utiliza clases y propiedades en Pascal. As\u00ed que todo el conocimiento que adquieras al usar el editor tambi\u00e9n ser\u00e1 \u00fatil cuando necesites escribir algo de c\u00f3digo Pascal. Utilizar\u00e1s las mismas clases y propiedades en Pascal que has visto en el editor visual.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El motor es gratuito y de c\u00f3digo abierto. \u00dasalo para desarrollar aplicaciones de c\u00f3digo abierto o propietarias. Puedes distribuirlas entre amigos de cualquier manera, puedes publicarlas en Steam, Itch.io, Google Play (Android), AppStore (iOS), tu propio sitio web, en todas partes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Descarga e instala el motor<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Empieza descargando el motor desde nuestro sitio web: <a href=\"https:\/\/castle-engine.io\/download\">https:\/\/castle-engine.io\/download<\/a>. Elige la versi\u00f3n adecuada para tu sistema operativo.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>En Windows, la descarga recomendada es un instalador sencillo. Simplemente ejec\u00fatalo.<\/li>\n\n\n\n<li>En Linux, descomprime el archivo zip descargado en cualquier directorio que prefieras.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Consulta nuestro sitio web para obtener instrucciones m\u00e1s detalladas y para otras plataformas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez instalado, ejecuta el editor de Castle Game Engine.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Si usaste el instalador en Windows, el acceso directo para ejecutar Castle Game Engine ya estar\u00e1 creado para ti.<\/li>\n\n\n\n<li>Si descomprimiste el motor desde un archivo zip, ejecuta el ejecutable castle-editor desde el subdirectorio bin donde descomprimiste el motor.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"956\" height=\"736\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/initial_editor.png\" alt=\"\" class=\"wp-image-726\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/initial_editor.png 956w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/initial_editor-300x231.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/initial_editor-768x591.png 768w\" sizes=\"auto, (max-width: 956px) 100vw, 956px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Si encuentras alg\u00fan problema, consulta nuestro manual en <a href=\"https:\/\/castle-engine.io\/install\">https:\/\/castle-engine.io\/install<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Crea tu primer proyecto<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos a crear un proyecto nuevo. Haz clic en el bot\u00f3n \u00abNuevo Proyecto\u00bb, elige la plantilla de proyecto \u00abVac\u00edo\u00bb, configura el nombre y directorio del proyecto seg\u00fan tu preferencia, y haz clic en \u00abCrear Proyecto\u00bb.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"756\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/new_project.png\" alt=\"\" class=\"wp-image-729\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/new_project.png 970w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/new_project-300x234.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/new_project-768x599.png 768w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Como respuesta, crearemos un nuevo directorio con algunos archivos de proyecto que definir\u00e1n los datos de tu proyecto y el c\u00f3digo Pascal inicial.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"635\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/project_view-1024x635.png\" alt=\"\" class=\"wp-image-731\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/project_view-1024x635.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/project_view-300x186.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/project_view-768x476.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/project_view.png 1341w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Puedes explorar los archivos de tu proyecto usando el panel inferior del editor. Tambi\u00e9n puedes explorarlos usando tu administrador de archivos habitual; no hay nada especial acerca de este directorio, son archivos y directorios normales.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Los archivos y directorios m\u00e1s importantes son:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>code<\/strong>: es un subdirectorio donde recomendamos colocar todo el c\u00f3digo fuente Pascal (unidades) de tu aplicaci\u00f3n. Inicialmente contiene solo 2 unidades: GameInitialize y GameViewMain.<\/li>\n\n\n\n<li><strong>data<\/strong>: es un subdirectorio donde debes colocar todos los datos que deben cargarse en tiempo de ejecuci\u00f3n por tu aplicaci\u00f3n. Todos los modelos 3D y 2D, texturas y dise\u00f1os deben colocarse aqu\u00ed si deseas usarlos en tu juego. Inicialmente contiene el dise\u00f1o llamado gameviewmain.castle-user-interface (y, menos importante, los archivos CastleSettings.xml y README.txt).<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">La idea general es que la aplicaci\u00f3n inicial (creada a partir de la plantilla \u00abEmpty\u00bb) contiene solo una vista llamada Main. Una vista es un concepto de Castle Game Engine que representa algo que puede mostrarse en una aplicaci\u00f3n de Castle Game Engine. Normalmente la usas de manera similar a un formulario en Delphi o Lazarus. Es una forma b\u00e1sica de organizar tu aplicaci\u00f3n.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cada vista se puede dise\u00f1ar visualmente. Simplemente haz doble clic en ella, ya sea en el panel \u00abAbrir vista existente\u00bb o en el panel \u00abArchivos\u00bb (cuando est\u00e1s explorando el subdirectorio data).<\/li>\n\n\n\n<li>Esto permite dise\u00f1ar visualmente el contenido del archivo gameviewmain.castle-user-interface. El archivo tiene la extensi\u00f3n .castle-user-interface porque una vista es un caso especial de interfaz de usuario en Castle Game Engine.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">En aplicaciones m\u00e1s grandes, puedes tener m\u00faltiples vistas. Adem\u00e1s, en aplicaciones m\u00e1s grandes, puedes dise\u00f1ar visualmente algunos elementos de la interfaz de usuario que no son vistas, sino simplemente piezas reutilizables de una interfaz de usuario. Todos estos archivos tienen la extensi\u00f3n .castle-user-interface y se pueden dise\u00f1ar visualmente usando el editor. Las vistas tienen, por convenci\u00f3n, un nombre como gameview*.castle-user-interface.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cada vista tiene tambi\u00e9n una unidad Pascal asociada. La unidad se llama como la vista, pero sin la extensi\u00f3n .castle-user-interface. As\u00ed que en nuestro caso, la unidad se llama gameviewmain.pas. La unidad contiene el c\u00f3digo Pascal que se debe ejecutar cuando se muestra la vista. Define una clase que tiene m\u00e9todos virtuales para reaccionar a varios eventos \u00fatiles (como iniciar la vista, o el usuario presionando una tecla o un bot\u00f3n del mouse). A menudo agregar\u00e1s m\u00e1s m\u00e9todos para implementar la l\u00f3gica de tu aplicaci\u00f3n.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Consulta <a href=\"https:\/\/castle-engine.io\/view_events\">https:\/\/castle-engine.io\/view_events<\/a> y <a href=\"https:\/\/castle-engine.io\/views\">https:\/\/castle-engine.io\/views<\/a> para aprender m\u00e1s sobre las vistas en nuestro motor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para aclarar la terminolog\u00eda utilizada en todo nuestro motor:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Un dise\u00f1o es un nombre para un archivo que puedes dise\u00f1ar visualmente usando nuestro editor. Un dise\u00f1o puede ser un archivo con extensi\u00f3n:<\/li>\n\n\n\n<li>.castle-user-interface (interfaz de usuario, puede cargarse en una clase que descienda de TCastleUserInterface)<\/li>\n\n\n\n<li>.castle-transform (transformaci\u00f3n 3D o 2D, puede cargarse en una clase que descienda de TCastleTransform)<\/li>\n\n\n\n<li>.castle-component (cualquier otro componente; puede cargarse en una clase que descienda de TComponent)<\/li>\n\n\n\n<li>Un dise\u00f1o de interfaz de usuario es un caso espec\u00edfico de un archivo de dise\u00f1o. Es un archivo con extensi\u00f3n .castle-user-interface.<\/li>\n\n\n\n<li>Una vista es un caso espec\u00edfico de un dise\u00f1o de interfaz de usuario. Por convenci\u00f3n se llama gameview*.castle-user-interface.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Probablemente est\u00e1s ansioso por comenzar a hacer algo despu\u00e9s de esta larga introducci\u00f3n. Vamos a ello.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Como primera tarea, aseg\u00farate de que todo funcione. Usa el gran bot\u00f3n \u00abCompilar y Ejecutar\u00bb (atajo de teclado F9) y observa c\u00f3mo se compila y ejecuta el proyecto. El resultado ser\u00e1 aburrido: una ventana oscura con un contador de FPS (frames por segundo) en la esquina superior derecha. Los FPS son una forma est\u00e1ndar de medir el rendimiento de tu aplicaci\u00f3n.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/first_run-1024x579.png\" alt=\"\" class=\"wp-image-732\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/first_run-1024x579.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/first_run-300x170.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/first_run-768x434.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/first_run-1536x868.png 1536w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/first_run.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Opcionalmente ajusta las preferencias del editor<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez que todo funcione, es posible que desees ajustar las preferencias yendo a \u00abPreferencias\u00bb del editor. En particular:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Por defecto, el editor utiliza una versi\u00f3n integrada del compilador FPC (Free Pascal Compiler) estable m\u00e1s reciente. Si prefieres utilizar tu propia instalaci\u00f3n de FPC o Delphi, config\u00faralo en las preferencias.<\/li>\n\n\n\n<li>Para editar los archivos Pascal, por defecto el editor intenta detectar autom\u00e1ticamente varios IDEs y editores capaces de manejar Pascal, como Lazarus, Delphi, Visual Studio Code. Si prefieres configurar un editor espec\u00edfico, elige uno en las preferencias.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Puedes encontrar m\u00e1s detalles sobre la configuraci\u00f3n del editor en nuestro manual en <a href=\"https:\/\/castle-engine.io\/install\">https:\/\/castle-engine.io\/install<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El editor puede utilizar cualquier compilador Pascal y cualquier editor de texto. Deliberadamente no imponemos requisitos especiales sobre lo que puedes usar, aunque nos aseguramos de dar soporte perfecto a las opciones m\u00e1s populares. En particular, tenemos soporte dedicado para usar Visual Studio Code con Pascal (y Castle Game Engine en particular), consulta <a href=\"https:\/\/castle-engine.io\/vscode\">https:\/\/castle-engine.io\/vscode<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Aprendiendo a dise\u00f1ar elementos 3D en una vista<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si a\u00fan no lo has hecho, abre la vista principal en el editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Puedes hacer doble clic en ella en el panel \u00abAbrir vista existente\u00bb o en el panel \u00abArchivos\u00bb (cuando est\u00e1s explorando el subdirectorio data).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La vista inicial est\u00e1 mayormente vac\u00eda.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tiene un componente ra\u00edz llamado Group1, que es una instancia de TCastleUserInterface. Este componente contendr\u00e1 todo lo dem\u00e1s que dise\u00f1emos.<\/li>\n\n\n\n<li>Tambi\u00e9n tiene una etiqueta llamada LabelFps (una instancia de la clase TCastleLabel). En tiempo de ejecuci\u00f3n, esta etiqueta mostrar\u00e1 el contador de FPS.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_empty-1024x579.png\" alt=\"\" class=\"wp-image-735\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_empty-1024x579.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_empty-300x170.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_empty-768x434.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_empty-1536x868.png 1536w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_empty.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">A\u00f1adamos m\u00e1s contenido a la vista. Primero que todo, para mostrar cualquier cosa en 3D, necesitas un viewport. Un viewport es una manera de mostrar contenido 3D o 2D. Es una instancia de la clase TCastleViewport. Agr\u00e9galo al dise\u00f1o haciendo clic derecho sobre el componente Group1 y seleccionando \u00abAgregar Interfaz de Usuario \u2192 Viewport (3D)\u00bb en el men\u00fa que aparece.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/add_viewport-1024x579.png\" alt=\"\" class=\"wp-image-736\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/add_viewport-1024x579.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/add_viewport-300x170.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/add_viewport-768x434.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/add_viewport-1536x868.png 1536w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/add_viewport.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">El resultado se deber\u00eda parecer a este:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_viewport-1024x579.png\" alt=\"\" class=\"wp-image-737\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_viewport-1024x579.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_viewport-300x170.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_viewport-768x434.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_viewport-1536x868.png 1536w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_viewport.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Despu\u00e9s de esto, arrastra el nuevo componente Viewport1 arriba de LabelFps en el panel de Jerarqu\u00eda (a la izquierda). De esta manera, el contador de FPS se mostrar\u00e1 delante del viewport.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_viewport_fps_front-1-1024x579.png\" alt=\"\" class=\"wp-image-739\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_viewport_fps_front-1-1024x579.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_viewport_fps_front-1-300x170.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_viewport_fps_front-1-768x434.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_viewport_fps_front-1-1536x868.png 1536w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_viewport_fps_front-1.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Ahora juega un poco en la vista 3D. Hay 3 objetos en el mundo 3D:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>La c\u00e1mara, llamada simplemente Camera1, determina lo que el usuario ver\u00e1 una vez que se ejecute el juego.<\/li>\n\n\n\n<li>La fuente de luz ilumina las cosas (las hace brillar). La fuente de luz inicial se llama PointLight1 y es una instancia de TCastlePointLight, que es una luz simple que brilla en todas direcciones desde una posici\u00f3n 3D dada.<\/li>\n\n\n\n<li>Un rect\u00e1ngulo que representa un suelo llamado Plane1. Matem\u00e1ticamente hablando, no es un plano, es un rect\u00e1ngulo, aunque llamarlo \u00abplano\u00bb es una convenci\u00f3n utilizada por muchos software 3D.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Haz clic y mant\u00e9n presionado el bot\u00f3n derecho del rat\u00f3n sobre el viewport para moverte alrededor. Usa las teclas AWSD para moverte. Utiliza la rueda del rat\u00f3n (mientras mantienes presionado el bot\u00f3n derecho) para aumentar o disminuir la velocidad de movimiento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Juega con mover los objetos. Arrastra los ejes 3D para mover cualquier objeto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Experimenta a\u00f1adiendo nuevos elementos 3D. Haz clic derecho sobre el componente Items dentro de Viewport1 y desde el men\u00fa contextual a\u00f1ade primitivas como \u00abBox\u00bb (caja), \u00abSphere\u00bb (esfera), \u00abCylinder\u00bb (cilindro). Mu\u00e9velos, elim\u00ednalos (con la tecla Supr), duplica (con Ctrl+D).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cambia algunas propiedades. En el lado derecho, puedes ver un inspector de objetos, familiar para cualquier usuario de Lazarus y Delphi. Ajusta las propiedades, por ejemplo cambia el tama\u00f1o de Plane1 para que sea mucho m\u00e1s grande. Haz clic en el bot\u00f3n \u00ab\u2026\u00bb (tres puntos) en la propiedad \u00abColor\u00bb de cualquier primitiva (como un plano, una caja, una esfera) para cambiar el color.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/viewport_fun-1024x579.png\" alt=\"\" class=\"wp-image-740\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/viewport_fun-1024x579.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/viewport_fun-300x170.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/viewport_fun-768x434.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/viewport_fun-1536x868.png 1536w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/viewport_fun.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Dise\u00f1a un tablero de ajedrez en 3D con piezas de ajedrez<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Anteriormente aprendimos a dise\u00f1ar un mundo 3D compuesto por primitivas simples, como cajas y esferas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pero esta no es una manera de crear gr\u00e1ficos 3D realistas. En la mayor\u00eda de las aplicaciones gr\u00e1ficas 3D, el contenido se crea utilizando una herramienta especializada de autor\u00eda 3D, como Blender. El artista 3D crea una malla (un conjunto de v\u00e9rtices conectados para formar aristas y pol\u00edgonos), asigna materiales y texturas, y exporta el objeto resultante a un archivo que puede ser le\u00eddo por un motor de juegos, como un archivo glTF.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">glTF es un formato de modelo 3D completo desarrollado por Khronos. Castle Game Engine tiene un excelente soporte para glTF, consulta <a href=\"https:\/\/castle-engine.io\/gltf\">https:\/\/castle-engine.io\/gltf<\/a> para m\u00e1s detalles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En el lado de Castle Game Engine, nuestro componente m\u00e1s importante para mostrar un modelo 3D es TCastleScene. Es un componente grande que desempe\u00f1a un papel central en nuestro motor (de una forma u otra, es responsable de toda la renderizaci\u00f3n 3D y 2D en nuestro viewport). Usarlo es sencillo: creas una instancia de TCastleScene y estableces su propiedad URL para que apunte al modelo que deseas mostrar (como un archivo glTF). La clase TCastleScene desciende de la clase TCastleTransform, por lo que puedes mover, rotar y escalar las instancias de TCastleScene. Alternativamente, tambi\u00e9n puedes arrastrar y soltar el archivo glTF desde el panel \u00abArchivos\u00bb al viewport, y el editor crear\u00e1 autom\u00e1ticamente una instancia de TCastleScene que carga el modelo dado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adem\u00e1s de glTF, ofrecemos soporte para varios formatos de modelos 3D y 2D, que est\u00e1n listados en <a href=\"https:\/\/castle-engine.io\/creating_data_model_formats.php\">https:\/\/castle-engine.io\/creating_data_model_formats.php<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si tienes la capacidad de crear tus propios modelos 3D, por ejemplo en Blender, ahora puedes hacer un desv\u00edo: dise\u00f1a un modelo 3D en Blender y exportalo a glTF siguiendo nuestras instrucciones en <a href=\"https:\/\/castle-engine.io\/blender\">https:\/\/castle-engine.io\/blender<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O puedes usar algunos recursos listos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hay una variedad de contenido 3D de alta calidad en Internet, disponible tambi\u00e9n de forma gratuita y bajo licencias compatibles con c\u00f3digo abierto. Recopilamos enlaces \u00fatiles en <a href=\"https:\/\/castle-engine.io\/assets.php.\">https:\/\/castle-engine.io\/assets.php.<\/a><\/li>\n\n\n\n<li>Nuestro motor tambi\u00e9n cuenta con integraci\u00f3n con Sketchfab, lo que te permite buscar y descargar desde un vasto repositorio de modelos 3D gratuitos sin salir de nuestro editor. Consulta la documentaci\u00f3n en <a href=\"https:\/\/castle-engine.io\/sketchfab\">https:\/\/castle-engine.io\/sketchfab<\/a>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes un ejemplo: un modelo de gato experimentado en batalla, desde Sketchfab, directamente dentro de nuestro editor:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignright size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/cat_sketchfab-1024x579.png\" alt=\"\" class=\"wp-image-741\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/cat_sketchfab-1024x579.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/cat_sketchfab-300x170.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/cat_sketchfab-768x434.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/cat_sketchfab-1536x868.png 1536w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/cat_sketchfab.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/sketchfab_cat_larger-1-1024x576.png\" alt=\"\" class=\"wp-image-743\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/sketchfab_cat_larger-1-1024x576.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/sketchfab_cat_larger-1-300x169.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/sketchfab_cat_larger-1-768x432.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/sketchfab_cat_larger-1-1536x864.png 1536w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/sketchfab_cat_larger-1-1280x720.png 1280w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/sketchfab_cat_larger-1.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Cr\u00e9ditos: El modelo 3D del \u00abGato\u00bb fue creado por Muru (https:\/\/sketchfab.com\/muru) y est\u00e1 disponible en Sketchfab (<a href=\"https:\/\/sketchfab.com\/3d-models\/cat-16c3444c8d1440fc97fdf10f60ec58b0\">https:\/\/sketchfab.com\/3d-models\/cat-16c3444c8d1440fc97fdf10f60ec58b0<\/a>) bajo la licencia CC-BY-4.0.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Finalmente, tenemos un conjunto de modelos 3D listos para el tablero de ajedrez y todas las piezas de ajedrez, que puedes usar para esta demostraci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para usar la \u00faltima opci\u00f3n, descarga los modelos 3D desde <a href=\"https:\/\/github.com\/castle-engine\/bad-chess\/releases\/download\/chess-models\/chess-models.zip\">https:\/\/github.com\/castle-engine\/bad-chess\/releases\/download\/chess-models\/chess-models.zip<\/a>. Estos modelos se basaron en un modelo de Blender de c\u00f3digo abierto publicado en <a href=\"https:\/\/blendswap.com\/blend\/29244\">https:\/\/blendswap.com\/blend\/29244<\/a> por Phuong2647.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Descomprime el archivo resultante en cualquier lugar dentro del subdirectorio &#8216;data&#8217; de tu proyecto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Luego, simplemente arrastra y suelta los archivos *.gltf en el viewport. Mueve y duplica seg\u00fan sea necesario, para organizarlos en una posici\u00f3n inicial de ajedrez.<br>Nota:<br>Para nuestro juego de f\u00edsica gracioso, en realidad no importa c\u00f3mo los organices. Tampoco necesitas posicionar y rotarlos perfectamente. \u00a1Divi\u00e9rtete \ud83d\ude42<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este es un ejemplo del resultado:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_chess-1-1024x579.png\" alt=\"\" class=\"wp-image-746\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_chess-1-1024x579.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_chess-1-300x170.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_chess-1-768x434.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_chess-1-1536x868.png 1536w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/view_chess-1.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Una vez que hayas dise\u00f1ado el tablero de ajedrez y colocado las piezas, aseg\u00farate tambi\u00e9n de ajustar las luces para que todo se vea bien iluminado (pero no demasiado brillante).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Finalmente, ajusta la c\u00e1mara para que el usuario vea una vista agradable del tablero al iniciar la aplicaci\u00f3n. Cuando seleccionas un componente de c\u00e1mara (como Camera1, si no has cambiado el nombre de la c\u00e1mara predeterminada), el editor muestra una peque\u00f1a ventana con una vista previa de la c\u00e1mara. Puedes hacer clic en \u00abPin\u00bb en esta ventana para seguir observando el mundo desde esta c\u00e1mara. B\u00e1sicamente hay 2 maneras de manipular la c\u00e1mara:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mueve y rota la c\u00e1mara como cualquier otro objeto 3D. Observa la vista previa de la c\u00e1mara para juzgar si la vista de la c\u00e1mara se ve bien.<\/li>\n\n\n\n<li>O, alternativamente, navega en el editor y luego usa el elemento de men\u00fa \u00abViewport \u2192 Align Camera To View\u00bb (atajo de teclado Ctrl + Numpad 0) para hacer que la vista de la c\u00e1mara coincida con la vista actual en el editor.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/camera-1024x579.png\" alt=\"\" class=\"wp-image-747\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/camera-1024x579.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/camera-300x170.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/camera-768x434.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/camera-1536x868.png 1536w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/camera.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Una vez que tengas una vista agradable, aseg\u00farate de que todo funcione: compila y ejecuta la aplicaci\u00f3n nuevamente.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/camera_game_running-1024x579.png\" alt=\"\" class=\"wp-image-749\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/camera_game_running-1024x579.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/camera_game_running-300x170.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/camera_game_running-768x434.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/camera_game_running-1536x868.png 1536w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/camera_game_running.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Ahora que hemos dise\u00f1ado correctamente el tablero de ajedrez con las piezas, vamos a utilizar la f\u00edsica para hacer las cosas m\u00e1s locas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Castle Game Engine tiene soporte para f\u00edsica de cuerpos r\u00edgidos. Esto significa que:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Los objetos pueden ser afectados por fuerzas.<\/li>\n\n\n\n<li>La fuerza que funciona autom\u00e1ticamente es la gravedad, que atrae los objetos hacia abajo (en la direcci\u00f3n del eje Y negativo, por defecto).<\/li>\n\n\n\n<li>Tambi\u00e9n puedes definir fuerzas adicionales desde el c\u00f3digo, por ejemplo, para empujar cosas a lo largo de una direcci\u00f3n arbitraria. Tus propias fuerzas pueden realizar una variedad de efectos de la vida real, como viento, explosiones, tornados giratorios, etc.<\/li>\n\n\n\n<li>Las colisiones entre objetos se detectan autom\u00e1ticamente y se resuelven. Es decir, por defecto los objetos rebotar\u00e1n entre s\u00ed.<\/li>\n\n\n\n<li>Tambi\u00e9n es posible detectar colisiones en el c\u00f3digo y reaccionar a ellas de cualquier manera (por ejemplo, un enemigo puede explotar cuando colisiona con un cohete).<\/li>\n\n\n\n<li>Tambi\u00e9n puedes conectar ciertos objetos usando articulaciones.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">No exploraremos todas estas caracter\u00edsticas en nuestro art\u00edculo, pero te mostraremos c\u00f3mo disfrutar de lo b\u00e1sico. Para aprender m\u00e1s sobre las posibilidades, consulta nuestro manual en <a href=\"https:\/\/castle-engine.io\/physics\">https:\/\/castle-engine.io\/physics<\/a> y prueba las demostraciones en el subdirectorio examples\/physics\/ del motor. Aqu\u00ed tienes una captura de pantalla de una de las demostraciones, mostrando la aplicaci\u00f3n expl\u00edcita de fuerzas f\u00edsicas:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"609\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_forces-1024x609.png\" alt=\"\" class=\"wp-image-750\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_forces-1024x609.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_forces-300x178.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_forces-768x457.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_forces-1536x913.png 1536w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_forces.png 1564w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Castle Game Engine utiliza internamente Kraft, un motor de f\u00edsica desarrollado en Pascal por Benjamin &#8216;BeRo&#8217; Rosseaux.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cualquier componente descendiente de TCastleTransform, incluyendo primitivas (como TCastleBox) o escenas cargadas desde modelos (TCastleScene), o un grupo de otros objetos (TCastleTransform con hijos), puede ser un cuerpo r\u00edgido para el motor de f\u00edsica que participa en la detecci\u00f3n de colisiones y en el movimiento resultante. El objeto necesita tener dos comportamientos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Comportamiento TCastleRigidBody<\/strong>: hace que el componente sea un cuerpo r\u00edgido. Define propiedades f\u00edsicas comunes, como si el objeto es afectado por la gravedad y la velocidad inicial de movimiento.<\/li>\n\n\n\n<li><strong>Un colisionador (Collider)<\/strong>, que representa cualquier componente descendiente de la clase abstracta TCastleCollider. Muchas formas de colisionadores son posibles, como TCastleSphereCollider, TCastleBoxCollider y TCastleMeshCollider.<\/li>\n\n\n\n<li>Usar el TCastleMeshCollider resulta en colisiones m\u00e1s precisas, pero el objeto colisionador debe ser est\u00e1tico, lo que significa que otros objetos rebotar\u00e1n en este objeto, pero el objeto con TCastleMeshCollider no se mover\u00e1 por s\u00ed mismo.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">El t\u00e9rmino \u00abcomportamiento\u00bb que usamos anteriormente es un mecanismo especial en Castle Game Engine para adjuntar funcionalidad adicional a un TCastleTransform. Los comportamientos son una excelente manera de definir varias funcionalidades que mejoran un objeto de juego dado. Hay varios comportamientos integrados y tambi\u00e9n puedes definir los tuyos propios. Consulta https:\/\/castle-engine.io\/behaviors para obtener m\u00e1s informaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Despu\u00e9s de esta visi\u00f3n general, est\u00e1s listo para utilizar la f\u00edsica en nuestro juego de ajedrez.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Haz clic derecho en el componente que representa el tablero de ajedrez. En el men\u00fa contextual elige \u00abAdd Behavior (Extends Parent Transform) \u2192 Physics \u2192 Collider \u2192 Mesh\u00bb. Como respuesta, notar\u00e1s que han aparecido 2 componentes en el \u00e1rbol de componentes: MeshCollider1 y RigidBody1. Esto es una caracter\u00edstica conveniente del editor: agregar un colisionador tambi\u00e9n agrega autom\u00e1ticamente un componente de cuerpo r\u00edgido.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chessboard-1024x579.png\" alt=\"\" class=\"wp-image-751\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chessboard-1024x579.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chessboard-300x170.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chessboard-768x434.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chessboard-1536x868.png 1536w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chessboard.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Castle Game Engine utiliza internamente Kraft, un motor de f\u00edsica desarrollado en Pascal por Benjamin &#8216;BeRo&#8217; Rosseaux.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cualquier componente descendiente de TCastleTransform, incluyendo primitivas (como TCastleBox) o escenas cargadas desde modelos (TCastleScene), o un grupo de otros objetos (TCastleTransform con hijos), puede ser un cuerpo r\u00edgido para el motor de f\u00edsica que participa en la detecci\u00f3n de colisiones y en el movimiento resultante. El objeto necesita tener dos comportamientos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Comportamiento TCastleRigidBody<\/strong>: hace que el componente sea un cuerpo r\u00edgido. Define propiedades f\u00edsicas comunes, como si el objeto es afectado por la gravedad y la velocidad inicial de movimiento.<\/li>\n\n\n\n<li><strong>Un colisionador (Collider)<\/strong>, que representa cualquier componente descendiente de la clase abstracta TCastleCollider. Muchas formas de colisionadores son posibles, como TCastleSphereCollider, TCastleBoxCollider y TCastleMeshCollider.<\/li>\n\n\n\n<li>Usar el TCastleMeshCollider resulta en colisiones m\u00e1s precisas, pero el objeto colisionador debe ser est\u00e1tico, lo que significa que otros objetos rebotar\u00e1n en este objeto, pero el objeto con TCastleMeshCollider no se mover\u00e1 por s\u00ed mismo.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">El t\u00e9rmino \u00abcomportamiento\u00bb que usamos anteriormente es un mecanismo especial en Castle Game Engine para adjuntar funcionalidad adicional a un TCastleTransform. Los comportamientos son una excelente manera de definir varias funcionalidades que mejoran un objeto de juego dado. Hay varios comportamientos integrados y tambi\u00e9n puedes definir los tuyos propios. Consulta <a href=\"https:\/\/castle-engine.io\/behaviors \">https:\/\/castle-engine.io\/behaviors <\/a>para obtener m\u00e1s informaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Despu\u00e9s de esta visi\u00f3n general, est\u00e1s listo para utilizar la f\u00edsica en nuestro juego de ajedrez.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Haz clic derecho en el componente que representa el tablero de ajedrez. En el men\u00fa contextual elige \u00abAdd Behavior (Extends Parent Transform) \u2192 Physics \u2192 Collider \u2192 Mesh\u00bb. Como respuesta, notar\u00e1s que han aparecido 2 componentes en el \u00e1rbol de componentes: MeshCollider1 y RigidBody1. Esto es una caracter\u00edstica conveniente del editor: agregar un colisionador tambi\u00e9n agrega autom\u00e1ticamente un componente de cuerpo r\u00edgido.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chessboard-1-1024x579.png\" alt=\"\" class=\"wp-image-753\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chessboard-1-1024x579.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chessboard-1-300x170.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chessboard-1-768x434.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chessboard-1-1536x868.png 1536w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chessboard-1.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">A continuaci\u00f3n, elige cualquier pieza de ajedrez. Haz clic derecho sobre ella y en el men\u00fa contextual elige \u00abAdd Behavior (Extends Parent Transform) \u2192 Physics \u2192 Collider \u2192 Box\u00bb. Observa que estamos usando un colisionador m\u00e1s simple para la pieza de ajedrez, que tambi\u00e9n es din\u00e1mico. Esto permitir\u00e1 que la pieza de ajedrez caiga realmente sobre el tablero.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Finalmente, mueve la pieza de ajedrez a una posici\u00f3n m\u00e1s dram\u00e1tica, por encima del tablero, de manera que caiga cuando se inicie la f\u00edsica.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_above-1024x579.png\" alt=\"\" class=\"wp-image-754\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_above-1024x579.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_above-300x170.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_above-768x434.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_above-1536x868.png 1536w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_above.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Estamos listos para ejecutar la f\u00edsica. Una forma ser\u00eda simplemente ejecutar la aplicaci\u00f3n, utilizando \u00abCompilar y ejecutar\u00bb como lo has hecho antes. Pero hay una manera m\u00e1s r\u00e1pida de experimentar con la f\u00edsica: ejecutar la simulaci\u00f3n de f\u00edsica utilizando el icono de reproducci\u00f3n verde en la cabecera del editor (o el elemento de men\u00fa \u00abPhysics \u2192 Play Simulation\u00bb, atajo de teclado Ctrl+P).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Haz esto y observa con asombro c\u00f3mo el pe\u00f3n cae sobre el tablero.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Recuerda finalizar la simulaci\u00f3n de f\u00edsica cuando hayas terminado (presiona el bot\u00f3n de parada verde, o de nuevo el elemento de men\u00fa \u00abPhysics \u2192 Play Simulation\u00bb, atajo de teclado Ctrl+P). Se permite editar el dise\u00f1o durante la simulaci\u00f3n de f\u00edsica (y es una excelente manera de experimentar con diferentes configuraciones de f\u00edsica), pero los cambios no se guardan cuando la simulaci\u00f3n de f\u00edsica est\u00e1 en ejecuci\u00f3n. Esto se debe a que la f\u00edsica t\u00edpicamente mueve los objetos, y no deseas guardar esta posici\u00f3n resultante de las interacciones f\u00edsicas. As\u00ed que aseg\u00farate de detener la simulaci\u00f3n de f\u00edsica antes de hacer cambios persistentes en el dise\u00f1o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para obtener resultados m\u00e1s espectaculares:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Agrega colisionadores de f\u00edsica a m\u00e1s piezas de ajedrez.<\/li>\n\n\n\n<li>Mueve las piezas de ajedrez a posiciones m\u00e1s interesantes, de modo que varias piezas caigan desde arriba sobre m\u00faltiples otras piezas de ajedrez.<\/li>\n\n\n\n<li>Tambi\u00e9n puedes duplicar (atajo de teclado Ctrl+D) las piezas de ajedrez (se duplicar\u00e1 todo el objeto seleccionado, incluidos los comportamientos de f\u00edsica si los hay). Es una manera f\u00e1cil de tener muchos objetos f\u00edsicos que reboten entre s\u00ed.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Despu\u00e9s de cada cambio, simplemente juega y det\u00e9n la simulaci\u00f3n de f\u00edsica nuevamente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aseg\u00farate de que la posici\u00f3n inicial de todos los cuerpos r\u00edgidos no haga que alguna pareja colisione entre s\u00ed justo al inicio. Si dos objetos colisionan al inicio, el motor de f\u00edsica puede (a veces de manera bastante explosiva) moverlos alej\u00e1ndolos el uno del otro.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este es un ejemplo del resultado esperado:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chess_more_dramatic-1-1024x579.png\" alt=\"\" class=\"wp-image-755\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chess_more_dramatic-1-1024x579.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chess_more_dramatic-1-300x170.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chess_more_dramatic-1-768x434.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chess_more_dramatic-1-1536x868.png 1536w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_chess_more_dramatic-1.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Lo \u00faltimo que queda por aprender en esta (primera) parte del art\u00edculo es c\u00f3mo lanzar la pieza de ajedrez.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Desde el c\u00f3digo Pascal, puedes utilizar varios m\u00e9todos para aplicar una fuerza a un cuerpo r\u00edgido. M\u00e1s informaci\u00f3n sobre esto se detallar\u00e1 en la pr\u00f3xima parte del art\u00edculo. Tambi\u00e9n puedes experimentar con la aplicaci\u00f3n de ejemplo <code>examples\/physics\/physics_forces\/<\/code> si est\u00e1s impaciente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O puedes establecer una velocidad lineal espec\u00edfica en un componente de cuerpo r\u00edgido.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos a utilizar este \u00faltimo enfoque, ya que puede hacerse y probarse f\u00e1cilmente en el editor.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Selecciona la pieza de ajedrez que deseas \u00ablanzar\u00bb (lanzar a trav\u00e9s del tablero).<\/li>\n\n\n\n<li>Aseg\u00farate de que tenga componentes de colisionador y cuerpo r\u00edgido (si no los tiene, agr\u00e9galos como se explic\u00f3 anteriormente).<\/li>\n\n\n\n<li>Selecciona el componente <code>TCastleRigidBody<\/code> de la pieza y encuentra la propiedad <code>LinearVelocity<\/code>.<\/li>\n\n\n\n<li>Establece <code>LinearVelocity<\/code> a un vector grande y no nulo, como -100 0 0. Esto significa que tenemos una velocidad de 100 unidades por segundo en la direcci\u00f3n negativa del eje X.<\/li>\n\n\n\n<li>Ejecuta la simulaci\u00f3n de f\u00edsica y observa el caos que se desata.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_flick-1024x579.png\" alt=\"\" class=\"wp-image-757\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_flick-1024x579.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_flick-300x170.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_flick-768x434.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_flick-1536x868.png 1536w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/06\/physics_flick.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Resumen<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hemos dise\u00f1ado una aplicaci\u00f3n en 3D utilizando Castle Game Engine con un poco de f\u00edsica. A\u00fan no hemos escrito ning\u00fan c\u00f3digo Pascal para realizar interacciones; esto se har\u00e1 en la pr\u00f3xima parte del art\u00edculo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si deseas descargar una aplicaci\u00f3n lista, resultado de esto, visita <a href=\"https:\/\/github.com\/castle-engine\/bad-chess\">https:\/\/github.com\/castle-engine\/bad-chess<\/a> . El subdirectorio <code>project<\/code> de ese repositorio contiene la demo final funcional de esto. Ser\u00e1 ampliado en la pr\u00f3xima parte del art\u00edculo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Espero que hayas disfrutado haciendo esta demo y explorando las posibilidades de Castle Game Engine.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si tienes alguna pregunta o comentario sobre el motor, \u00a1no seas t\u00edmido! Expr\u00e9sate, pregunta y comparte tus comentarios en nuestro foro <a href=\"https:\/\/forum.castle-engine.io\">https:\/\/forum.castle-engine.io<\/a> o en Discord <a href=\"https:\/\/castle-engine.io\/talk.php\">https:\/\/castle-engine.io\/talk.php<\/a> .<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En esta serie de art\u00edculos vamos a retroceder en el tiempo, olvidar nuestro conocimiento adquirido sobre c\u00f3mo jugar realmente al ajedrez, e implementar una aplicaci\u00f3n sencilla de f\u00edsica en 3D donde puedes lanzar piezas de ajedrez usando f\u00edsica<\/p>\n","protected":false},"author":2,"featured_media":728,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57,61,27],"tags":[49,22,32,23,21],"class_list":["post-723","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-castle-game-engine","category-free-pascal","category-lazarus","tag-castle-game-engine","tag-delphi","tag-free-pascal","tag-lazarus","tag-pascal"],"_links":{"self":[{"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts\/723","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=723"}],"version-history":[{"count":13,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts\/723\/revisions"}],"predecessor-version":[{"id":857,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts\/723\/revisions\/857"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/media\/728"}],"wp:attachment":[{"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}