{"id":975,"date":"2025-02-24T08:00:00","date_gmt":"2025-02-24T07:00:00","guid":{"rendered":"https:\/\/jorgeturiel.es\/?p=975"},"modified":"2025-02-17T10:10:42","modified_gmt":"2025-02-17T09:10:42","slug":"castle-engine-game-en-un-formulario","status":"publish","type":"post","link":"https:\/\/jorgeturiel.es\/?p=975","title":{"rendered":"Castle Engine Game en un formulario"},"content":{"rendered":"\n<p>Hasta ahora hemos visto como crear juegos en Castle Engine Game, de manera que se creaba un archivo ejecutable, el cual ya se encargaba de crear la ventana d\u00f3nde  se mostraba la escena o escena que hab\u00edamos creados en el editor. Pero existe la opci\u00f3n de crear la escena en el editor, y mostrarla en un formulario de una aplicaci\u00f3n \u00abconvencional\u00bb. <\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Componentes en Lazarus<\/h2>\n\n\n\n<p>El componente que debemos a\u00f1adir en el formulario de la aplicaci\u00f3n se llama TCastleControl<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"261\" height=\"64\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-17-094813.png\" alt=\"\" class=\"wp-image-1005\"\/><\/figure>\n<\/div>\n\n\n<p>Deber\u00edas tenerlo en la paleta de componentes, si has seguido correctamente el proceso de instalaci\u00f3n de Castle Game Engine.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Preparar la escena<\/h2>\n\n\n\n<p>Vamos a crear una escena muy simple. Para ello creamos un proyecto nuevo vac\u00edo en CGE<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"922\" height=\"627\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/09\/Captura-de-pantalla-2024-09-15-155628.png\" alt=\"\" class=\"wp-image-861\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/09\/Captura-de-pantalla-2024-09-15-155628.png 922w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/09\/Captura-de-pantalla-2024-09-15-155628-300x204.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/09\/Captura-de-pantalla-2024-09-15-155628-768x522.png 768w\" sizes=\"auto, (max-width: 922px) 100vw, 922px\" \/><\/figure>\n\n\n\n<p>Ahora, haz doble <em>click <\/em>en la vista <em>main<\/em>, para empezar.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"742\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/09\/Captura-de-pantalla-2024-09-15-160412-1024x742.png\" alt=\"\" class=\"wp-image-862\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/09\/Captura-de-pantalla-2024-09-15-160412-1024x742.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/09\/Captura-de-pantalla-2024-09-15-160412-300x217.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/09\/Captura-de-pantalla-2024-09-15-160412-768x556.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2024\/09\/Captura-de-pantalla-2024-09-15-160412.png 1237w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>En el dise\u00f1o crea una vista 3D.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"692\" height=\"635\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-17-093426.png\" alt=\"\" class=\"wp-image-999\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-17-093426.png 692w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-17-093426-300x275.png 300w\" sizes=\"auto, (max-width: 692px) 100vw, 692px\" \/><\/figure>\n<\/div>\n\n\n<p>Ahora le a\u00f1adiremos navegaci\u00f3n, para poder examinar el dise\u00f1o.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"661\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-17-093738-1024x661.png\" alt=\"\" class=\"wp-image-1001\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-17-093738-1024x661.png 1024w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-17-093738-300x194.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-17-093738-768x495.png 768w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-17-093738.png 1079w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Para terminar guarda el dise\u00f1o.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Preparar la aplicaci\u00f3n en Lazarus<\/h2>\n\n\n\n<p>Abrir Lazarus, y crear una aplicaci\u00f3n usando le men\u00fa Proyecto.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"338\" height=\"416\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2023\/03\/LazarusCrearProyecto.jpg\" alt=\"\" class=\"wp-image-386\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2023\/03\/LazarusCrearProyecto.jpg 338w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2023\/03\/LazarusCrearProyecto-244x300.jpg 244w\" sizes=\"auto, (max-width: 338px) 100vw, 338px\" \/><figcaption class=\"wp-element-caption\">Nuevo proyecto<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"330\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-17-092335.png\" alt=\"\" class=\"wp-image-992\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-17-092335.png 560w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-17-092335-300x177.png 300w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><figcaption class=\"wp-element-caption\">Crear una aplicaci\u00f3n gr\u00e1fica<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Guardamos el proyecto de Lazarus en el misma carpeta, d\u00f3nde creamos el proyecto del editor con el nombre <em>CastleOnForm.<\/em><\/p>\n\n\n\n<p>En el directorio d\u00f3nde guardaste el proyecto hay un archivo llamado CastleEngineManifest. Abre el archivo con un editor de texto, borra su contenido y escribe lo siguiente.<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:xhtml decode:true \">&lt;project name=\"model_3d_viewer\"\n  lazarus_project=\"CastleOnForm.lpi\"\n  build_using_lazbuild=\"true\"\n  qualified_name=\"io.castleengine.Castle.form\"&gt;&gt;\n  &lt;data exists=\"true\"\/&gt;\n&lt;\/project&gt;<\/pre><\/div>\n\n\n\n<p>El formulario deber\u00eda tener un aspecto similar a este.<\/p>\n\n\n\n<p>A\u00f1ade el componente <em>TPanel <\/em>alineado a la parte superior del formulario. Dentro de este, a\u00f1ade un componente <em>Tbutton<\/em>. Y en el espacio restante a\u00f1ade el componente  el componente <em>TCastleControl<\/em>. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"446\" height=\"440\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-12-164444.png\" alt=\"\" class=\"wp-image-986\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-12-164444.png 446w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-12-164444-300x296.png 300w\" sizes=\"auto, (max-width: 446px) 100vw, 446px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Escribiendo c\u00f3digo<\/h3>\n\n\n\n<p>Vamos a\u00f1adir algo de c\u00f3digo a nuestra aplicaci\u00f3n en Lazarus. Lo primero es a\u00f1adir la unidades que necesitamos en la clausula <em>Uses<\/em>. A\u00f1ade las siguientes unidades:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>CastleControl<\/em><\/li>\n\n\n\n<li><em>CastleViewport<\/em><\/li>\n\n\n\n<li><em>CastleScene<\/em><\/li>\n\n\n\n<li><em>CastleUIControls<\/em><\/li>\n\n\n\n<li><em>CastleVectors<\/em>;<\/li>\n<\/ul>\n\n\n\n<p>Deber\u00edas tener algo as\u00ed<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true \">uses\n  Classes, SysUtils, Forms, Controls, Graphics, Dialogs, ExtCtrls, StdCtrls,\n  CastleControl, CastleViewport, CastleScene, CastleUIControls,\n  CastleVectors;       <\/pre><\/div>\n\n\n\n<p>En la secci\u00f3n privada del formulario declara las variables siguientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>View <\/em>del tipo <em>TCastleViewPort<\/em><\/li>\n\n\n\n<li><em>ViewPort <\/em>del tipo <em>TCastleViewPort<\/em><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true \">  TForm1 = class(TForm)\n    Button1: TButton;\n    CastleControl1: TCastleControl;\n    Panel1: TPanel;\n    procedure Button1Click(Sender: TObject);\n    procedure FormCreate(Sender: TObject);\n    procedure FormDestroy(Sender: TObject);\n    procedure FormResize(Sender: TObject);\n  private\n    View: TCastleView;\n    ViewPort: TCastleViewport;\n  public            <\/pre><\/div>\n\n\n\n<p>En evento <em>OnCreate <\/em>del formulario a\u00f1ade el c\u00f3digo siguiente:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true \">procedure TForm1.FormCreate(Sender: TObject);\nbegin\n  View := TCastleView.Create(Self);\n  View.DesignUrl := 'castle-data:\/gameviewmain.castle-user-interface';\n  CastleControl1.Container.View := View;\n  ViewPort := View.DesignedComponent('ViewPort1') as TCastleViewport;\nend;<\/pre><\/div>\n\n\n\n<p>Este c\u00f3digo se ejecuta cuando se crear el formulario. Lo primero que hace es crear un la variable <em>View<\/em>, que se encargar\u00e1 de cargar el dise\u00f1o que hemos creado anteriormente. La carga se realiza asignando el dise\u00f1o a su propiedad <em>DesignUrl<\/em>. Este dise\u00f1o est\u00e1 guardado en el directorio data, por eso usamos <em>castle-data<\/em> en al indicar el nombre, y es que hemos creado en el punto anterior.<\/p>\n\n\n\n<p>Una vez creado el componente <em>View<\/em> y cargado el interface, se lo asignamos al control <em>CastleControl1<\/em>, que es el control que hemos colocado en nuestro formulario. Y por \u00faltimo obtenemos el componente <em>ViewPort <\/em>que est\u00e1 en el dise\u00f1o, ya que lo necesitaremos m\u00e1s adelante.<\/p>\n\n\n\n<p>En el evento <em>FormResize<\/em> del formulario escribe lo siguiente:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true \">procedure TForm1.FormResize(Sender: TObject);\nbegin\n  CastleControl1.Width := Form1.ClientWidth;\n  CastleControl1.Height := Form1.ClientHeight;\nend; <\/pre><\/div>\n\n\n\n<p>Este evento se ejecuta siempre siempre que el formulario cambie de tama\u00f1o. Por tanto, dentro de \u00e9l, asignamos el tama\u00f1o del area cliente del formulario (que est\u00e1 disponible debajo del control <em>TPanel<\/em>) al control <em>CastleControl1<\/em>.<\/p>\n\n\n\n<p>En este punto, ya puedes compilar tu aplicaci\u00f3n y probarla. Ver\u00e1s que aparece dise\u00f1o que hab\u00edamos creado, y se puede navegar por \u00e9l, al igual que se hace en el editor de <em>Castle Game Engine<\/em>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"676\" height=\"639\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-12-165500.png\" alt=\"\" class=\"wp-image-989\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-12-165500.png 676w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-12-165500-300x284.png 300w\" sizes=\"auto, (max-width: 676px) 100vw, 676px\" \/><figcaption class=\"wp-element-caption\">Castle <\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">A\u00f1adir un elemento desde c\u00f3digo<\/h3>\n\n\n\n<p>En el evento <em>OnClick<\/em> del bot\u00f3n vamos a a\u00f1adir un cubo. <\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true \">procedure TForm1.Button1Click(Sender: TObject);\nvar\n  Box: TCastleBox;\nbegin\n  Box := TCastleBox.Create(Self);\n  Box.Size := Vector3(10, 10, 10);\n  ViewPort.Items.Add(Box);\nend;     <\/pre><\/div>\n\n\n\n<p>Con este c\u00f3digo, en la primera l\u00ednea creamos un cubo. En la segunda l\u00ednea le asignamos un tama\u00f1o, en este caso 10x10x10. Por \u00faltimo a\u00f1adimos el cubo al componente <em>ViewPort<\/em>. Este componente est\u00e1 dentro del dise\u00f1o que hemos creado anteriormente. Por eso, en el evento <em>OnCreate<\/em>, lo hemos creado.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"437\" height=\"436\" src=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-12-173014.png\" alt=\"\" class=\"wp-image-990\" srcset=\"https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-12-173014.png 437w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-12-173014-300x300.png 300w, https:\/\/jorgeturiel.es\/wp-content\/uploads\/2025\/02\/Captura-de-pantalla-2025-02-12-173014-150x150.png 150w\" sizes=\"auto, (max-width: 437px) 100vw, 437px\" \/><figcaption class=\"wp-element-caption\">Cubo creado por c\u00f3digo.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Puedes probar a navegar con rat\u00f3n y a usar las teclas W,A,S,D.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusiones<\/h2>\n\n\n\n<p>En esta entrada hemos visto como cargar un dise\u00f1o en formulario. As\u00ed como a\u00f1adir un elemento en dise\u00f1o. Puedes cargar nuevos dise\u00f1os, o tener varios controles en el mismo formulario, o en diferentes formularios, integrados con controles nativos.<\/p>\n\n\n\n<p>Puedes consultar el manual de CGE para <a href=\"https:\/\/castle-engine.io\/control_on_form#_loading_user_interface_and_view\">m\u00e1s informaci\u00f3n.<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hasta ahora hemos visto como crear juegos en Castle Engine Game, de manera que se creaba un archivo ejecutable, el cual ya se encargaba de crear la ventana d\u00f3nde se mostraba la escena o escena que hab\u00edamos creados en el editor. Pero existe la opci\u00f3n de crear la escena en el editor, y mostrarla en [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1009,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57,56,61,27,26],"tags":[49,23,21,24],"class_list":["post-975","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-castle-game-engine","category-cge","category-free-pascal","category-lazarus","category-programacion","tag-castle-game-engine","tag-lazarus","tag-pascal","tag-programacion"],"_links":{"self":[{"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts\/975","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=975"}],"version-history":[{"count":21,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts\/975\/revisions"}],"predecessor-version":[{"id":1010,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts\/975\/revisions\/1010"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/media\/1009"}],"wp:attachment":[{"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}