{"id":623,"date":"2024-01-21T21:08:11","date_gmt":"2024-01-21T20:08:11","guid":{"rendered":"https:\/\/jorgeturiel.es\/?p=623"},"modified":"2024-09-15T15:02:26","modified_gmt":"2024-09-15T14:02:26","slug":"empezando-con-castle-game-engine","status":"publish","type":"post","link":"https:\/\/jorgeturiel.es\/?p=623","title":{"rendered":"Empezando con Castle Game Engine"},"content":{"rendered":"\n

Empezamos a explorar este motor gr\u00e1fico para Free Pascal, del cual puedes encontrar en este mismo blog una entrada explicando como instalarlo. <\/p>\n\n\n\n

En esta entrada aprender\u00e1s a crear un proyecto 3D, a\u00f1adir objetos, moverlos, girarlos, y modificar sus propiedades. <\/p>\n\n\n\n\n\n\n\n

Crear un proyecto 3D<\/h2>\n\n\n\n

Desde la pantalla principal seleccionamos New Project<\/em>.<\/p>\n\n\n

\n
\"\"
Pantalla principal<\/figcaption><\/figure>\n<\/div>\n\n\n

Seleccionamos un proyecto vac\u00edo (Project template Empty)<\/em>, y pulsamos Create Project<\/em>.Si lo deseas puedes seleccionar un directorio d\u00f3nde guardar tu proyecto, as\u00ed como un nombre, y el nombre que aparecer\u00e1 en la ventana. <\/p>\n\n\n

\n
\"\"
Crear nuevo proyecto CGE<\/figcaption><\/figure>\n<\/div>\n\n\n

Se abrir\u00e1 una ventana nueva d\u00f3nde con la estructura del proyecto. En el centro, tenemos las diferentes vistas del proyecto, en este caso est\u00e1 solo Main<\/em>. Haz doble click para que el editor abra esta vista y podamos empezar a trabajar sobre ella.<\/p>\n\n\n

\n
\"\"
Lista de vistas<\/figcaption><\/figure>\n<\/div>\n\n\n

Ya podemos empezar a trabajar en la vista. Por ahora no hay nada, as\u00ed que empezaremos a\u00f1adiendo los componentes b\u00e1sicos para tener un vista 3D.<\/p>\n\n\n

\n
\"\"
Creando la vista 3D<\/figcaption><\/figure>\n<\/div>\n\n\n

Vista 3D<\/h2>\n\n\n\n

Para a\u00f1adir la vista 3D, 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(3D)(TCastleViewPort).<\/em><\/p>\n\n\n

\n
\"\"
Crear ViewPort<\/figcaption><\/figure>\n<\/div>\n\n\n

Ahora ya tenemos el ViewPort<\/a>, configurado para una escena en tres dimensiones <\/p>\n\n\n

\n
\"\"
Escena 3D<\/figcaption><\/figure>\n<\/div>\n\n\n

Observa a la derecha de la ventana, se ha creado un \u00e1rbol con diferentes componentes. Este \u00e1rbol representa los componentes que tenemos en nuestro vista. Adem\u00e1s indicia la jerarqu\u00eda de cada uno, o en otras palabras, quien depende de qui\u00e9n. <\/p>\n\n\n\n

Viewport<\/em>, tiene diversos componentes que depende de \u00e9l, as\u00ed que todos ellos ser\u00e1n visibles, por ejemplo si Viewport<\/em> es visible. De hecho el componente LabelFPS<\/em>, el cual es una etiqueta que muestra el rendimiento en FPS de nuestra aplicaci\u00f3n est\u00e1 fuera de ViewPort. Para que sea visible debes arrastrarlo y ponerlo dependiente de ViewPort<\/em>.<\/span><\/p>\n\n\n

\n
\"\"
LabelFps dentro de Viewport<\/figcaption><\/figure>\n<\/div>\n\n\n

Puedes avanzar por la vista, usando las teclas W,S,A,D, y para rotar la vista, debes mover el rat\u00f3n con el bot\u00f3n derecho pulsado.<\/p>\n\n\n\n

Para ejecutar la aplicaci\u00f3n, puedes pulsar F9 en tu teclado o sobre la bot\u00f3n que tiene un flecha negra, en la barra de herramientas sobre la vista 3D.<\/p>\n\n\n

\n
\"\"
Barra de herramientas<\/figcaption><\/figure>\n<\/div>\n\n\n

Si pones el puntero del rat\u00f3n sobre cualquier bot\u00f3n y esperas un momento ver\u00e1s que se muestra un mensaje descriptivo sobre la funcionalidad del bot\u00f3n.<\/p>\n\n\n\n

Cada elemento o componente que hay el \u00e1rbol, tiene diversas propiedades, las cuales se muestran en la ventana que tienes al derecha. En la parte superior existen diversas pesta\u00f1as, para filtrar las propiedades. <\/p>\n\n\n

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

Pulsa el componente Camera1.<\/em> Observa que se en la parte inferior de la vista se abre una nueva ventana, d\u00f3nde veremos la escena desde la c\u00e1mara. <\/p>\n\n\n

\n
\"\"
Ventana de la c\u00e1mara<\/figcaption><\/figure>\n<\/div>\n\n\n

A\u00f1adir un elemento.<\/h2>\n\n\n\n

Vamos a a\u00f1adir un cubo. Para ello selecciona, pulsando con el bot\u00f3n derecho del rat\u00f3n, sobre el componente Items<\/em>. En el men\u00fa, que surge, selecciona Add Transform<\/em>, y despu\u00e9s Box (TCastleBox)<\/em>. Se a\u00f1adir\u00e1 un cubo en el centro. <\/p>\n\n\n

\n
\"\"
A\u00f1adir un cubo<\/figcaption><\/figure>\n<\/div>\n\n
\n
\"\"
Cubo sobre el plano<\/figcaption><\/figure>\n<\/div>\n\n\n

Pulsa sobre Camera1 y podr\u00e1 vez parte del cubo, ya que la c\u00e1mara no apunta directamente al cubo. Antes de continuar pulsa sobre el bot\u00f3n Pin, en la ventana de la c\u00e1mara para que cuando selecciones otro elemento o componente, la vista de la c\u00e1mara no desaparezca.<\/p>\n\n\n

\n
\"\"
Vista de la c\u00e1mara.<\/figcaption><\/figure>\n<\/div>\n\n\n

Selecciona ahora el cubo, haciendo click con el bot\u00f3n izquierdo del rat\u00f3n, bien sobre su nombre en el \u00e1rbol, o seleccion\u00e1ndolo en la vista. Aseg\u00farale que tienes seleccionado el bot\u00f3n move<\/em> en la barra de herramientas. <\/p>\n\n\n\n

Manteniendo el bot\u00f3n izquierdo del rat\u00f3n pulsado del sobre cualquiera de los ejes de coordenadas, puedes desplazar el cubo.<\/p>\n\n\n\n

Tambi\u00e9n puedes rotar el cubo, si para ello seleccionas, en la barra de herramientas el bot\u00f3n de rotaci\u00f3n.<\/p>\n\n\n\n

Duplicar objetos<\/h2>\n\n\n\n

Observa la bombilla que hay en la imagen. Este componente es un punto de luz. Si lo mueves ver\u00e1s como el aspecto del cubo cambia, debido a que la luz incide desde otro \u00e1ngulo.<\/p>\n\n\n\n

Pulsa con el bot\u00f3n derecho, sobre PointLight1<\/em> en el \u00e1rbol, y selecciona Duplicate<\/em>.<\/p>\n\n\n\n

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

Se crear\u00e1 un nuevo elemento, con las mismas propiedades y en el mismo lugar. As\u00ed despl\u00e1zalo al otro lado cubo y observa como va cambiando la iluminaci\u00f3n sobre el cubo.<\/p>\n\n\n\n

Puedes cambiar el color de la luz, usando su propiedad Color<\/em>. Por ejemplo prueba a poner la luz de color verde.<\/p>\n\n\n

\n
\"\"
Propiedad Color<\/figcaption><\/figure>\n<\/div>\n\n\n

Queda un resultado, por lo menos, un tanto curioso.<\/p>\n\n\n

\n
\"\"
Imagen en verde<\/figcaption><\/figure>\n<\/div>\n\n\n

Conclusi\u00f3n<\/h2>\n\n\n\n

En esta entrada henos visto como empezar a crear entorno 3D. C\u00f3mo colocar objetos, duplicarlos, moverlos y ajustar sus propiedades.<\/p>\n\n\n\n

Te animo a que a\u00f1adas m\u00e1s objetos, y explores sus propiedades.<\/p>\n","protected":false},"excerpt":{"rendered":"

Empezamos a explorar este motor gr\u00e1fico para Free Pascal, del cual puedes encontrar en este mismo blog una entrada explicando como instalarlo. <\/p>\n","protected":false},"author":2,"featured_media":645,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57,27,25,26,48],"tags":[49,21],"class_list":["post-623","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-castle-game-engine","category-lazarus","category-pascal","category-programacion","category-videojuegos","tag-castle-game-engine","tag-pascal"],"_links":{"self":[{"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts\/623","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=623"}],"version-history":[{"count":14,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts\/623\/revisions"}],"predecessor-version":[{"id":659,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/posts\/623\/revisions\/659"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=\/wp\/v2\/media\/645"}],"wp:attachment":[{"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jorgeturiel.es\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}