No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Definiendo los límites del escenario

7/17
Recursos

¿Cómo crear nuestro escenario en Godot?

Iniciar un proyecto en Godot puede parecer intimidante, pero con una estructura clara y un buen entendimiento de sus herramientas, es pan comido. En esta clase se explica cómo crear el marco de un escenario, estableciendo paredes, arcos y otros elementos fundamentales gracias a la correcta utilización de nodos. ¡Vamos a crear un escenario en 2D y ver cómo darle vida a nuestro juego!

¿Cuál es el primer paso?

Lo primero que debes hacer antes de empezar a construir tu escenario es tener un espacio de trabajo limpio. Esto significa eliminar scripts o elementos de prueba que ya no necesites. Una vez que tu proyecto esté en blanco, puedes comenzar creando una escena raíz. Puedes elegir trabajar en una escena 2D si tus requerimientos están orientados hacia ello.

En Godot, las escenas son fundamentales, pues a partir de ellas se crean y organizan los elementos del juego. Para esta ocasión, empezaremos con una escena 2D que nos servirá para desarrollar un juego de este tipo.

¿Qué es importante al agregar nodos?

Cuando trabajes en Godot, es recomendable nombrar cada nodo que agregues. Esto te facilitará identificar y organizar los diferentes elementos de tu escenario. Por ejemplo, puedes denominar a un nodo principal como "Level", ya que contendrá todo el nivel del juego. Este tipo de práctica es esencial para mantener un desarrollo ordenado y estructurado.

A continuación, comenzaremos a crear los distintos componentes del escenario:

  1. Paredes: Necesitamos una pared superior e inferior para que el balón rebote adecuadamente.
  2. Arcos: Representarán los goles tanto del jugador como del oponente.

¿Cómo se crean las paredes?

  1. Pared Superior:
    • Agrega un nodo hijo desde el nodo principal utilizando un nodo de tipo StaticBody.
    • Este nodo, al estar basado en colisión estática, define elementos inamovibles como paredes.
    • Después, añade un CollisionShape2D y elige una forma rectangular (RectangleShape).
    • Configura su tamaño y posición para ocupar la parte superior del escenario.
# Ejemplo de cómo definir la extensión del CollisionShape
extension_x = 1920 / 2
extension_y = 50

El truco aquí es tomar ventaja de la habilidad de Godot para calcular automáticamente tamaños usando expresiones matemáticas.

  1. Pared Inferior:
    • Duplica la pared superior.
    • Cambia su posición vertical para que se sitúe en el borde inferior del escenario.

¿Cómo se crean los arcos?

Los arcos se diferencian de las paredes porque su objetivo es detectar cuándo pasan otros objetos a través de ellos. Utiliza nodos de tipo Area2D para esto:

  1. Arco del jugador:

    • Añade un Area2D y un CollisionShape2D también con forma rectangular.
    • Ajusta su extensión: para que sea vertical, el eje X debe ser 50 y el eje Y, 1080/2.
    • Define su posición para que quede en el lateral del escenario.
  2. Arco del oponente:

    • Duplica el arco del jugador.
    • Ajusta su posición para que se sitúe al lado opuesto.

¿Cómo probar la escena?

Antes de poder ejecutar tu juego, asegúrate de guardar la escena y seleccionarla como la escena principal. Al hacerlo, podrás visualizar el marco del escenario que acabas de crear en la ventana de juego de Godot. Esto te permitirá seguir trabajando y añadiendo elementos sobre una base sólida.

¡Ahora ya tienes todo listo para comenzar a crear más elementos y funcionalidades para tu juego! No olvides compartir tus avances y seguir explorando las distintas opciones que Godot ofrece. Cada nodo añadido es un paso hacia la creación de un juego completo y funcional.

Aportes 43

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Así va mi escena. Le puse 1080 + 50 = 1130 al CollisionShape2D de la ParedInferior para que quedara por fuera de la pantalla.
.

Aquí va mi pantallazo! 😄
Decidí arriesgarme un poco, asi que empecé a leer la documentación para adicionar un fondo.
Encontré que se puede utilizar un nodo llamado TextureRect, allí adjunte la imagen que quería para el escenario modificando la texture y el stretch mode a scale.
Nota: Si estas aprendiendo y tienes nociones básicas de programación, lo mejor es que esperes hasta el final del curso para hacer estas modificaciones. Yo las hago porque soy bárbaro. 😄

asi va mi escena :]

Acabo de ver el aporte de Sebastian. En mi caso prefiero seguir al pie de la letra los cursos, y corregir solo si yo cometi el inconveniente o si es un proyecto propio. Lo hago asi por que logro notar como hay personas que relizan grandes cambios a lo que se realiza en los cursos y despues abandonan por que no pueden encontrar los fallos y es muy dificil ayudar gracias a esos grandes cambios.

Trabajando con la versión 4.2.2, tratando de replicar lo que se muestra en el video, veo que se cambio un poco la forma de posicionar el CollisionShape. Por lo que veo en esta versión, el objeto tiene como posición cero el centro. Por lo tanto para moverlo hay que poner en Position X o Y la mitad de lo que mide el objeto, a diferencia de lo que se ve en el video que pone la medida total.

Importante verificar las coordenadas de la barda inferior ya que se están poniendo dentro de la escena y no se si esto ya al correr el juego se esta perdiendo valores de las medidas que se están predefiniendo al principio del juego.

Así es como va mi escena con toda la ayuda del profesor.

Así se ve el marco de mi escena

Mi escena, utilice TextureRect para colocarle un fondo inspirado por Van.Hohenheim

La documentación sobre Static Body enlazada en la descripción de esta clase es para físicas en 3d (al menos a la fecha en la que escribo esto), estamos utilizando 2d, así que la documentación correcta es esta https://docs.godotengine.org/es/stable/classes/class_staticbody2d.html


Hola a todos, aquí les comparto mi escena.

Hola, yo tuve un problema al momento de continuar al tutorial debido a que por defecto el proyecto tenia un tamaño de resolucion distinto al 1920x1080. Lo que tuve que hacer para cambiar el tamaño del recuadro azul fue ir a la pestaña arriba a la izquierda “Proyecto”, despues en “configuracion del proyecto”. Nos aparecera una ventana y tendremos que buscar la opcion de Monitor y despues la opcion de ventana. Nos saldran varias opciones entre ellos “Ancho del Viewport” y “Altura del Viewport” a 1920 y 1080 respectivamiente.

Cambia un poco desde Godot 4, el extents aparece como size y mirar que las medidas correspondan con el escenario.

Bueno espero puedan confirmar esto, estoy usando la version 4 , y en ella acepta defrente el valor total es decir 1920 y 1080 respectivamente

Bueno gente, voy asi:

Este es mi avance hasta ahora.

Asi va mi escena

😄

estoy usando la versión 4.4.1 y me toco ajustar las medida para que quedara igual al ejemplo. ![](https://static.platzi.com/media/user_upload/upload-0605eafa-b472-4e89-ace3-49aede9afde0.png)
![](https://static.platzi.com/media/user_upload/image-32551c96-d614-419f-b5ac-19204116c9dd.jpg)
En la actualización 4.4 me ya no se estira 540 por lado, ahora hay que poner directamente la cantidad de pixeles totales que queres, mas sencillo.
![](https://static.platzi.com/media/user_upload/image-b934fe25-95bb-4388-9956-41ba3863c198.jpg)
Hola! estoy trabajando con Godot 4.3 y al parecer ya no es necesaria la división hecha por el profesor. (o al menos así me funcionó porque cuando puse "x = 1920/2" el collision shape me apareció a la mitad del espacio que quería. quedo atento si alguien le pasó igual ^^ Foto 1: 1920/2 ![](https://static.platzi.com/media/user_upload/image-eec51e59-0ad2-4e6d-b302-3c70d0cb48a5.jpg) Foto 2: 1920 solo ![](https://static.platzi.com/media/user_upload/image-66a15c58-8bdc-4eaa-b007-3ae2b7d22470.jpg)
![](https://static.platzi.com/media/user_upload/image-fb9b975d-24d3-40d2-90b7-a4bfba2da00f.jpg)
Así va mi escena, estoy feliz porque explica muy bien y estoy entendiendo super chévere 😃😃 ![](https://static.platzi.com/media/user_upload/image-c3ab9b33-cebb-4527-84cb-1dd45f024fc4.jpg)![](https://static.platzi.com/media/user_upload/image-35c92619-9699-41d4-8d4a-6827e300748f.jpg)![]()
![](https://static.platzi.com/media/user_upload/image-3725b3c4-731d-45b0-99ba-b576c65a94c6.jpg)
CUrso desactualizado de godot
![](https://static.platzi.com/media/user_upload/image-ee9e1c0a-ed1e-4585-bee4-e558f9b82b4b.jpg) A partir de Godot 4 parece que ahora el tamaño de la collisionShape si tiene que ser tal y como es la resolucion en este caso 1920
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-04-11%20a%20la%28s%29%2022.53.00-489aaa4e-9dd4-499c-9962-21624f77f154.jpg)
Años de acostumbrarme en matematicas a usar los ejes cartesianos de una forma para que los de Godot los den vuelta. Mi TOC explota.
![]()
Así va mi escena. Como algunos aquí también corregí la posición de la pared inferior. En Godot 4.2.1 que es mi versión, los "Extents" no están, entonces para modificar las dimensiones del CollisionShape2D es un poquito diferente. Se debe ir al menú que dice CollisionShape2D, que es donde dice eso mismo que está más arriba a la derecha, seleccionar "Shape" y ahí modificar los parámetros "Size", que además solo hacen la mitad del efecto de los Extents, entonces ahí los valores deben ser el doble de lo que se muestra en el video. Y luego para volver al inspector del CollisionShape2D, solo hay que clickear el nodo en la lista de nodos de la escena. Espero que esto ayude 👍🏽 ![](https://static.platzi.com/media/user_upload/image-59dd2da3-7d97-4d7a-b167-c0aa142b9267.jpg) ![](https://static.platzi.com/media/user_upload/image-ddc183ba-2f46-4782-93e5-827f06635a81.jpg) ![](https://static.platzi.com/media/user_upload/image-6b28ad64-70d6-443d-a975-a5b33defb248.jpg)

Existe una tenue linea celeste que seria el viewport (pantalla), eso ayudara en un futuro a darse cuenta si algo esta dentro de la pantalla o fuera =:3 pequeño tip para los nuevos

![](https://static.platzi.com/media/user_upload/image-c2038e3d-647d-405c-92eb-76807554b9d9.jpg) Hola. Aquí tiene mi captura de pantalla, voy con el avance del primer escenario dl juego, espero que todo salga bien.
Vamaaaaa!!! 🚀 ![](https://static.platzi.com/media/user_upload/image-7bea6fa6-0288-4068-8728-0ea88d6920c8.jpg)
![](https://static.platzi.com/media/user_upload/awdawxdfvdr-92cac1cc-38c3-4266-8f29-c68e0e4bf4bb.jpg)Estoy usando una version mas nueva (4.1.1) asi que pueden haber algunas diferencias en la interfaz pero escencialmente es lo mismo asi que no hubo mucho problema. No se si es lo correcto pero me parecio mas logico anidar las areas y las paredes en 1 solo nodo para cada tipo, quizas para las areas lo tenga que separar despues.

Comparto como va quedando mi juego jiji

Como Tip recomiendo que guarden Level en una carpeta

Yo lo guarde como esta en el video y no me corrio el juego, así que inicié de nuevo

Ahí vamos, entendí rápido el proceso de como ubicar las cosas y con su ancho, genial que nos permitan poner operaciones en los valores 😄