Advertisement
  1. Game Development

Amazon Lumberyard: Creando la Primera Escena 3D

Scroll to top
Read Time: 17 min

() translation by (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

En esta parte del tutorial, le mostraré cómo crear un nivel 3D completo compuesto por activos internos de Lumberyard e importados nuevos.

Luego, aprenderá cómo colocar el reproductor y la cámara, y cómo usar varias entidades, creando prefabricados y texturas. Finalmente, conocerá la iluminación de Lumberyard.

Tenga en cuenta que le recomendamos que lea las dos partes anteriores (Parte 1, Parte 2) para comprender completamente las notaciones de esta parte.

¿Quién debería leer esta serie de tutoriales?

Esta serie de tutoriales está dirigida principalmente a dos grupos de desarrolladores de juegos:

  • aquellos que no están familiarizados con los motores de juegos en absoluto
  • aquellos que están familiarizados con otros motores de juego (como Unity, Unreal Engine o Cry Engine), pero no con Lumberyard

Supongo que tiene algún conocimiento de la notación de gráficos por computadora, por lo que no cubriré exhaustivamente todas las anotaciones.

Crear un nuevo nivel 3D

Inicie Lumberyard y haga clic en New Level. Use los siguientes datos en la New Level interface.

  • Name: CompleteFirstLevel
  • Folder:  Levels/ (valor predeterminado)
  • Use terrain: ¡marcado!
  • Heightmap Resolution: 1024x1024
  • Meters Per Texel: 1

Haga clic en OK.

Tenga en cuenta que todos los niveles se guardan de manera predeterminada en: YourLumbaryardInstallationpath\dev\SamplesProject\Levels.

Para la textura del terreno, usa:

  • Resolution: 4096x4096
  • Terrain Color Multiplier: 3
  • High Quality: ¡marcado!

Haga clic en OK.

Posicionamiento de la cámara

Para poder jugar tu nivel, debes crear y colocar una cámara de juego. Luego debe modificarlo para habilitar el control de caracteres y especificar un punto de inicio. Afortunadamente, Lumberyard proporciona un objeto prefabricado que tiene una cámara de juego con controles de entrada de apoyo.

La cámara se puede encontrar en el Editor de la base de datos Database Editor, en View > Open View Pane.

Database EditorDatabase EditorDatabase Editor

También puede encontrar el Editor de la base de datos Database Editor en la barra de herramientas EditMode Toolbar.

Database Editor in the EditMode ToolbarDatabase Editor in the EditMode ToolbarDatabase Editor in the EditMode Toolbar

Las pestañas de vista de la base de datos database view (rectángulo rojo) proporcionan acceso y configuración para varios tipos de bases de datos. La barra de herramientas del editor editor toolbar (rectángulo verde) le da acceso a herramientas tales como Abrir, Guardar, Agregar o Eliminar elementos de la base de datos.  Finalmente, FileTree View (rectángulo azul) le da acceso a los elementos de la base de datos disponibles.

The FileTree ViewThe FileTree ViewThe FileTree View

En la Vista de la base de datos Database View, abra la Biblioteca de elementos prediseñados Prefabs Library y haga clic en Cargar biblioteca Load Library.

Database View in the Prefabs LibraryDatabase View in the Prefabs LibraryDatabase View in the Prefabs Library

Desde la lista del directorio de prefabricados, seleccione character_controllers.xml y haga clic en OK.

The Character ControllersThe Character ControllersThe Character Controllers

Desde la vista del árbol de archivos Prefab Library de la Biblioteca Prefabricada, arrastre el Sphere_Controller a la Vista Perspectiva Perspective Viewport.

Ahora debe tener un robot acostado en su nivel esperando pruebas. Tenga en cuenta que la ubicación donde lo coloca también determina el punto de inicio del nivel. Guarde su archivo de nivel (File > Save).

RobotRobotRobot

Si hace clic en el Gizmo, puede ver las propiedades prefabricadas completas. Si no puede ver el Gizmo, debe hacer clic en el icono H en la barra de herramientas de perspectiva Perspective Toolbar.

GizmoGizmoGizmo

Debe tener en cuenta que, de forma predeterminada, no puede modificar ninguna propiedad de entidad prefabricada. Sin embargo, si selecciona el Gizmo, y luego hace clic en Abrir todo Open All en la Rollup Bar > Prefab Parameters, ahora tendrá acceso a cada entidad prefabricada y sus propiedades.

Prefab ParametersPrefab ParametersPrefab Parameters

Haga clic en la entidad de la Camera Controller Rig plataforma controladora de la cámara para inspeccionar los parámetros de la cámara Camera Params.

Camera ParamatersCamera ParamatersCamera Paramaters

Ahora es el momento de probar tu nueva cámara de juegos. Haga clic en Game > Switch to Game o presione Control-G.

Añadir una cámara

Hay varios escenarios en los que tiene la intención de tener cámaras personalizadas o incluso cámaras estáticas. Para eso, Lumberyard te brinda acceso a la entidad de la cámara. Hay dos formas principales de agregar una cámara personalizada:

  1. usando el RollupBar 
  2. utilizando la configuración actual de la vista Perspectiva Perspective viewport 

El primero usa la entidad Cámara Camera disponible en Objects > Misc > Object Type > Camera .  Solo tiene que seleccionar la entidad de la Cámara y luego colocarla dentro de su ventana Perspectiva Perspective viewport

Este último usa su posición de vista actual para que la nueva cámara también use esa misma configuración.  Coloque la vista Perspectiva Perspective viewport en el posicionamiento deseado (por ejemplo, mirando el robot).  Haga clic con el botón derecho en la esquina superior izquierda de la barra de herramientas Perspectiva Perspective toolbar y haga clic en Crear cámara desde la vista actual Create Camera from Current View.  La vista actual desde su vista Perspectiva Perspective viewport ahora es una cámara fija desde esa posición.

Camera From ViewCamera From ViewCamera From View

Ahora, navegue y observe la nueva entidad de cámara buscando su última configuración de Perspective Viewport.

Navigate Camera From ViewNavigate Camera From ViewNavigate Camera From View

Objetos

Una forma de colocar objetos es mediante el uso de pinceles (RollUp Bar> Objects> Brush).  Los pinceles normalmente son objetos estáticos colocados dentro de la escena 3D.  Son baratos de renderizar ya que no contienen propiedades adicionales de una entidad o propiedades físicas.

En la barra de resumen a la derecha, seleccione Pincel Brush en la pestaña Objetos Objects.  Debajo del encabezado Browser, abra Objects> StyleTown> Natural> Terrain y seleccione el objeto townbloc.  Arrástrelo a la vista Perspectiva Perspective viewport.

Perspective ViewportPerspective ViewportPerspective Viewport

En la lista Pincel, abra StyleTown > Architecture > Buildings.  Arrastre el edificio b13_h02 a la vista Perspectiva Perspective viewport y colóquelo cerca de una esquina del townbloc.

Another Perspective ViewportAnother Perspective ViewportAnother Perspective Viewport

Ahora sabes cómo colocar los pinceles en tu nivel.

Importación de objetos externos

Para importar objetos externos, Lumberyard le aconseja utilizar el formato de archivo FBX. El importador actual todavía está en versión de vista previa y algunas características como materiales faltan.

La herramienta de importación FBX de Lumberyard incorpora un gráfico de escena, que es una capa de datos basada en árbol entre su modelo .fbx y Lumberyard. Cada vez que procesa un archivo .fbx, se crea un nuevo archivo .scenesettings con el mismo nombre; este nuevo archivo almacena los metadatos del activo.

Si cambia las propiedades de malla del modelo, no necesita volver a importar el archivo .fbx. Lumberyard Asset Processor escucha y detecta cualquier cambio en el archivo .scenesettings y utiliza el compilador de recursos para reprocesar el archivo .fbx.

Vamos a proceder y descargar un archivo FBX externo. Extraiga el archivo comprimido que acaba de descargar y mueva Wooden_House.fbx a YourLumbaryardInstallationpath\dev\SamplesProject.

En Lumberyard Editors, seleccione View > Open View Pane > FBX Importer.

 FBX Importer FBX Importer FBX Importer

Haga clic en el icono de la carpeta en la esquina superior derecha de la ventana de la herramienta.

OpenOpenOpen

Seleccione el archivo Wooden_House.fbx y haga clic en Abrir Open.

ImportImportImport

Cambie la propiedad Name a Imported_Wooden_House y haga clic en Importar Import.

ImportImportImport

Después de unos segundos, debería ver la ventana de mensaje de éxito.

successsuccesssuccess

Se debe realizar un último paso antes de poder usar su nuevo activo. Debajo de RollupBar > Geom Entity, haga clic en Volver a cargar Reload. Entonces una nueva carpeta debería aparecer. Ábralo y debe tener el modelo imported_wooden_house disponible.

Finalmente, arrastre el modelo a la vista Perspectiva Perspective viewport.

Primer desafío

Ahora debería agregar algunos pinceles usted mismo. Su próxima tarea es crear un nivel 3D similar al siguiente:

Image 1Image 1Image 1
Image 2Image 2Image 2

Cuando termine la creación del nivel, pase a la siguiente sección. Tenga en cuenta que no necesita crear un mundo 3D exactamente igual que el anterior. La idea principal es agregar varios pinceles e interactuar con ellos (rotar, traducir y escalar).

Prefabricados

Los prefabricados le permiten crear contenido más rápidamente utilizando una combinación de activos predefinidos. Para usar prefabricados creados previamente, abra la Database View (View > Open View Pane).

En la pestaña Biblioteca de prefabricados Prefabs Library , haga clic en Open. Seleccione styletown.xml y haga clic en OK.

The DatabaseThe DatabaseThe Database

Ahora abra el RollupBar y debajo de Prefab ahora debería ver el prefab NeighborhoodBlock importado.

The NeighborhoodBlock PrefabThe NeighborhoodBlock PrefabThe NeighborhoodBlock Prefab

Seleccione y arrastre los tres activos (StreetSet_A, Block_A y StreetLight_A) en la ventana Perspectiva Perspective Viewport. Deberías tener algo como la siguiente imagen.

A Rendered 3D SceneA Rendered 3D SceneA Rendered 3D Scene

Terrenos

Lumberyard le permite generar, editar y texturizar un terreno en su nivel. Para eso, siempre debes tener en mente tres menús:    

  1. Terrain Texture Layers
  2. Material Editor
  3. Terrain editor (en RollupBar)

Para abrir las capas de textura del relieve, puede usar el menú principal View > Open View Pane > Terrain Texture Layers o el acceso directo disponible en la barra de herramientas del editor Editor Toolbar.

Terrain Texture LayersTerrain Texture LayersTerrain Texture Layers

Abra las capas de textura del terreno Terrain Texture Layers.

Terrain Texture LayersTerrain Texture LayersTerrain Texture Layers

La interfaz Terrain Texture Layers se utiliza para definir los materiales que se utilizarán para pintar su terreno llano. Hay cuatro secciones principales dentro de la interfaz:    

  1. Las tareas de capa Layer Tasks se usa para agregar, eliminar, mover y asignar el material seleccionado a la capa seleccionada.
  2. La información de capa Layer Info contiene información sobre la capa seleccionada, como el tamaño y el tipo de superficie.
  3. Textura de la capa Layer Texture muestra una textura de baja resolución que contiene su información de color.
  4. La lista de capas Layer list contiene una lista de capas creadas para la pintura del terreno.

Debajo de las tareas de capa Layer Tasks, agregue dos capas. Nombre la primera hierba grass y la segunda tierra dirt.

Layer TasksLayer TasksLayer Tasks

Abra el Editor de materiales Material Editor utilizando View > Open View Pane > Material Editor o el acceso directo disponible en la Barra de herramientas del Editor Editor Toolbar.

Material EditorMaterial EditorMaterial Editor

Notará que tendrá dos ventanas (Terrain Texture Layers y Material Editor) o una sola ventana con un separador de pestañas en la parte inferior izquierda.

Material EditorMaterial EditorMaterial Editor

El Editor de materiales Material Editor se compone usando las siguientes áreas:

  1. Editor toolbar para aplicar, eliminar, crear y guardar materiales
  2. Material Preview que muestra el material seleccionado    
  3.  Directorio de carpetas folder directory Material que muestra una estructura de carpetas jerárquica que contiene materiales que pueden elegirse
  4. Propiedades Properties que contienen parámetros que definen la apariencia general del material

Ahora es el momento de asignar dos materiales a las capas creadas anteriormente. Para el primero, seleccione el material gr_grass_01 ubicado en la ruta del directorio: materials > gettingstartedmaterials.

Material EditorMaterial EditorMaterial Editor

Ahora cambie la interfaz a las capas de textura del terreno Terrain Texture Layers y seleccione la capa de hierba grass. Haga clic en Asignar material Assign Material. Esa acción aplicará el material seleccionado a la capa seleccionada. Tenga en cuenta que la ruta del material Material path ha cambiado según el material > gettingstartedmaterials > gr_grass_01.

Grass LayerGrass LayerGrass Layer

Ahora, agreguemos el material molido (gs_ground_01) en la capa de tierra dirt. Este material también se encuentra dentro de la misma carpeta.

  1. Seleccione el material gr_ground_01.
  2. Cambie la interfaz a las capas de textura del terreno Terrain Texture Layers.
  3. Seleccione la capa dirt
  4. Haga clic en Asignar materiales Assign Materials.

Ahora está listo para pintar las texturas de césped y tierra en el terreno.

En la Barra de resumen RollUp Bar, selecciona la pestaña Terreno Terrain tab y luego selecciona el botón Layer Painter.

Layer PainterLayer PainterLayer Painter

Hay varios aspectos que debe considerar al aplicar su textura de terreno: las propiedades de Radius y Hardness; el Color y el Brillo Brightness de la textura; la textura en sí misma; y el tipo de relleno (basado en mouse o basado en Flood). El primero aplicará la textura usando la posición del mouse, mientras que el segundo aplicará la textura a todo el suelo.

Seleccione la textura de la hierba grass y modifique el Color a un tono más verde. Haga clic en OK.

tint Colortint Colortint Color

Con la capa de hierba grass seleccionada, haga clic en el botón Flood. El terreno ahora está cubierto por la textura de la hierba grass y tiene un aspecto similar al siguiente:

FloodFloodFlood

Ahora puede pintar un poco de suciedad en la escena alrededor del perímetro de la calle. Seleccione la textura dirt y modifique el Color a uno marrón. Haga clic en OK. Ahora, usando la vista Perspectiva Perspective viewport, amplíe su escena 3D y con el botón izquierdo del mouse, haga clic para agregar la textura dirt.

Modifique el radio Radius y la dureza Hardness para reducir el tiempo de aplicación de la textura.   Cuando haya terminado, tendrá un nivel 3D similar al siguiente:

DirtDirtDirt

Altura del terreno

También puede modificar la altura de su terreno usando las herramientas Modificar Modify terreno.

ModifyModifyModify

El conjunto de herramientas Modificar Modify terreno tiene las siguientes opciones:

  • Flatten: aplanar el terreno a la configuración de altura designada
  • Smooth: suaviza el terreno hasta una superficie más lisa
  • Rise/Lower: sube o baja el relieve según la configuración del tamaño del pincel
  • Pick Height: Encuentra y establece alturas según la geometría existente del terreno
  • Outside Radius: establece qué tan grande es tu pincel cuando pinta
  • Inside Radius: establezca qué redondeado o plano es el pincel en relación con la configuración del radio exterior
  • Hardness: ablanda o endurece la configuración del pincel externo
  • Height: establece la altura del pincel
  • Scale: fuerza del efecto de ruido; valores más altos producen más ruido
  • Frequency: con qué frecuencia se aplica el efecto

Usemos las opciones antes mencionadas para crear algunas montañas dentro de su nivel 3D. Seleccione el botón Rise/Lower. Tenga en cuenta que el cursor del mouse dentro de la ventana Perspective Perspective Viewport ha cambiado.

En la ventana Perspectiva Perspective Viewport, navega hacia el perímetro exterior del mapa del terreno y haz clic con el botón izquierdo para pintar en el terreno. Construye algunas colinas de diferentes tamaños y formas. Al final, tu escena ahora debería verse más o menos así:

MountainsMountainsMountains

Si lo desea, puede jugar con las propiedades del terreno, es decir, las opciones Flatten, Smooth, y Pick Height. Cuando esté satisfecho con el generador de terreno, guarde su nivel (Control-S).

Iluminación

Ahora que casi ha concluido la escena 3D, es hora de agregarle algo de iluminación. En Lumberyard, puede agregar tres tipos de iluminación:

  • Sondas ambientales
  • Hora del día
  • Luces básicas

Antes de colocar objetos simples en la escena, siempre es bueno comenzar con la sonda de entorno global predeterminada. Las sondas ambientales son excelentes para lograr una iluminación ambiental global porque contribuyen a los reflejos, materiales difusos, materiales de partículas y colores de sombras.

Al construir un nivel, se recomienda colocar múltiples grupos de sondas de entorno para lograr escenas realistas y de alta calidad.

Sondas ambientales

Para crear la sonda de entorno, seleccione EnvironmentProbe en RollUpBar en la opción Misc. Mueva el cursor del mouse hacia la ventana gráfica y coloque la sonda de entorno donde desee.

EnvironmentProbeEnvironmentProbeEnvironmentProbe

Normalmente, desea colocar su sonda en el centro del nivel y luego configurar su BoxSize para llenar el área deseada.

En la sección EnvironmentProbe Properties , desea cambiar BoxSizeX, BoxSizeY y BoxSizeZ a 512, 512 y 250 en consecuencia. Si alejas la escena, deberías tener una caja amarilla que cubra la escena.

Tenga en cuenta que estos valores pueden no producir el mismo resultado en su escena. Por lo tanto, debe ajustarlos para recrear el efecto deseado.

Environment Probe ZoomEnvironment Probe ZoomEnvironment Probe Zoom

En este punto, la escena no ha cambiado realmente en términos de iluminación porque la sonda de iluminación está apagada por defecto.

Activate the Lighting ProbeActivate the Lighting ProbeActivate the Lighting Probe

Para activar la sonda, marque la casilla en las opciones Activas bajo las EnvironmentProbe Properties y luego haga clic en el botón Generate Cubemap debajo de las Probe Functions.

Deberías notar que las sombras serán más suaves.

Puede personalizar aún más la sonda de entorno cambiando el valor Diffuse y DiffuseMultiplier. El primero representa el color de la sonda, mientras que el segundo representa el multiplicador de intensidad entre ese color y las propiedades de los materiales de la escena.

DifuseMultipler DifuseMultipler DifuseMultipler

Hora del día

Puede controlar la hora del día (TOD) e incluso puede animar su escena, teniendo en cuenta los valores de variación en tiempo real del día. Para establecer el TOD, debe abrir el TOD editor. De nuevo, puede abrirlo usando View > Open View Pane > Time of Day o el acceso directo disponible en la barra de herramientas Editors.

TODTODTOD

El TOD editor tiene siete áreas principales:

TODTODTOD
  1. La barra de herramientas del editor Editor toolbar tiene iconos para importar, guardar y configurar horas específicas del día.
  2. Configuraciones HDR HDR Settings para ajustar la iluminación HDR.
  3. Tareas Tasks para configurar las funcionalidades básicas del editor.
  4. El tiempo Time define la hora actual para el nivel. Esto también incluye la hora de inicio y finalización si desea animar la iluminación.
  5. Update Tasks Actualizar tareas te permite reproducir o detener las animaciones.
  6. El editor de línea de tiempo Time line le da control sobre la configuración de la luz durante un período de 24 horas.    
  7. Los parámetros Parameters le brindan más opciones para configurar las propiedades de iluminación.

Importemos un archivo TOD predefinido .xml. Haga clic en Importar archivo Import file y navegue a SamplesProject\Levels\GettingStartedFiles, elija el archivo TimeOfDay y haga clic en Open. La configuración de iluminación cambiará automáticamente.

Time Of Day Time Of Day Time Of Day

Puede personalizar aún más las propiedades TOD como desee. Juega con el color del sol Sun color, el multiplicador del color del sol Sun color multiplier y la intensidad del sol Sun intensity para ver las diferencias.

Time of DayTime of DayTime of Day

Cambie el TOD a las 9:00 PM antes de continuar. Cierre el TOD editor.

 900 PM 900 PM 900 PM

Luces básicas

Tu escena ahora es más oscura. Ahora es el momento de agregar luces básicas. En el RollupBar, en la pestaña Objects, seleccione el botón Entity. Debajo del encabezado Browser, expanda la carpeta Luces Lights y seleccione el objeto Luz Light . Arrástrelo a su escena y colóquelo cerca de uno de los objetos de la farola.

Placing a Street LampPlacing a Street LampPlacing a Street Lamp

Tenga en cuenta que, si encuentra algún problema para alinear con precisión la luz, se recomienda activar la opción Ajustar a la cuadrícula Snap to Grid .

Debido a que la fuente de luz es una farola, debe ser una luz puntual (en lugar de una luz de relleno). Para cambiar la luz del relleno al lugar: debajo del encabezado Entity Properties, encuentre el título Projector. Seleccione Textura, y luego haga clic en el icono de la carpeta.

TextureTextureTexture

Ahora abra el directorio \SamplesProject\textures\lights\generi y abra el archivo spot_075.dds.

Loading a generic texture fileLoading a generic texture fileLoading a generic texture file

La luz cambia a un foco, pero está orientada hacia los lados. Use la herramienta de rotación rotate para seleccionar y girar la luz para que apunte hacia abajo.

Placing the Point LightPlacing the Point LightPlacing the Point Light

Debajo del encabezado Entity Properties, puede modificar una variedad de configuraciones para personalizar la luz.

  • AttenuationBulbSize es el tamaño de la bombilla; este es el punto de partida para donde la luz comienza a caer exponencialmente. Un valor de 1 establece la luz a plena intensidad durante un metro antes de que empiece a caer. Ajuste este tamaño en relación con el multiplicador difuso para administrar el brillo de la fuente de luz sin ingresar números inmanejables.
  • El radio Radius es la distancia desde la fuente a la que la luz afecta el área circundante.
  • Diffuse representa el valor de color RGB de la luz.
  • DiffuseMultiplier es la intensidad del color difuso; equilibre este valor con AttenuationBulbSize para definir el equilibrio de los niveles de luz natural.
  • ProjectorFov representa el campo de visión de la luz de proyección.
  • CastShadows hace que la luz arroje una sombra en función de las especificaciones de configuración mínimas seleccionadas. Para asegurarse de que las sombras siempre se emitan, configúrelo en 'Low Spec'. Tenga en cuenta que la configuración de CastShadows no es una configuración de "calidad" sino más bien una configuración de especificación de rendimiento para el tipo de máquina que ejecuta el nivel.

Para este tutorial, use la siguiente configuración:

  • AttenuationBulbSize = 6
  • Radius = 20
  • Diffuse Color = 228, 224,102
  • DiffuseMultiplier = 20
  • ProjectorFov = 80
  • CastShadows = Low Spec

Experimente con estos ajustes para tener una idea de cómo cambian las diferencias entre el tamaño de la bombilla, el radio y el multiplicador difuso en función de los valores de entrada que utiliza.

Experimenting with Experimenting with Experimenting with

Ejecuta el juego (Control-G) y observa cómo se comporta tu personaje cuando está en contacto con la nueva fuente de luz. Para cada farola, agrega una nueva luz. Puedes hacerlo duplicando la luz actual o agregándola.

Reto

Con el fin de probar el conocimiento adquirido hasta el momento, ahora tiene el desafío de recrear el nivel de inicio-finalizado getting-started-completed-level.

Para eso, tendrás que jugar con los pinceles, la iluminación, los materiales, las texturas y los terrenos. En resumen, vuelva a aplicar todo lo que ha aprendido hasta ahora. Tu nivel final debería verse como el siguiente:

Conclusión

Esto concluye este tutorial sobre Lumberyard. Aprendió cómo configurar la cámara y el posicionamiento del reproductor, y aprendió cómo importar activos externos y colocar varias entidades, creando prefabricados y texturas. Finalmente, te presentaron las propiedades de iluminación.

Si tiene alguna pregunta o comentario, como siempre, siéntase libre de escribir una línea en los comentarios.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Game Development tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.