#2 Import assets, 3D models and textures. Skybox

IMPORTANT UPDATE

I WILL PUBLISH THE FILES OF THIS PROJECT WHEN THE CHANNEL REACHES 1000 SUBSCRIBERS

…

I LEAVE AN UPDATED BUILD FOR YOU TO TRY, IT MAY TAKE A LITTLE WHILE TO LOAD
ūüĒĽ

MOVEMENT: WASD CAMERA LOOK: MOUSE

FROM HERE THE ORIGINAL ARTICLE CONTINUES

Introduction

In this arti¬≠cle we are going to import assets, i.e. 3D mod¬≠els and tex¬≠tures, add them to the Uni¬≠ty engine and con¬≠fig¬≠ure them so that they are ready to start work¬≠ing on stage. We are going to cre¬≠ate GameOb¬≠jects pre¬≠fab¬≠ri¬≠cat¬≠ed that we can then reuse and we are going to mod¬≠i¬≠fy the sky that comes by default, replac¬≠ing it with a Sky¬≠box where we will apply the tex¬≠tures that were down¬≠loaded from Asset Store in the pre¬≠vi¬≠ous video.

Go to the project's Main Page

Before we begin, I invite you to watch video 2 of the series My First Game on Unity.

CHECK OUT THIS CRAZY EXPERIMENT

Import files

The first thing we are going to do is to down¬≠load the nec¬≠es¬≠sary files for the project. You can do it in the fol¬≠low¬≠ing link.


3D Models and Textures

With­in these files we will find 3D mod­els for the labyrinth walls, a pedestal, a sword and a clock. Each mod­el has its own textures.

una ventana de windows donde se muestran las texturas y modelos 3d descargados para poder seguir los tutoriales.
Fig. 1: Dis­play of the down­loaded files.

Select the fold¬≠ers and drag them to the appro¬≠pri¬≠ate fold¬≠er in Unity. 

I do this first by select¬≠ing the files, then click¬≠ing to drag them (a ghost icon appears indi¬≠cat¬≠ing the amount of files being dragged) and then press¬≠ing the ALT-TAB com¬≠bi¬≠na¬≠tion to change the win¬≠dow, this does not make the selec¬≠tion lose, that's why we can drop the files into the Uni¬≠ty folder. 

If there are prob­lems to do this you can min­i­mize the Uni­ty win­dow or use the Uni­ty import options.

programa Unity3D, los archivos descargados en este artículo se han agregado a Unity y son visibles en la ventana del proyecto.
Fig. 2: The tex¬≠tures have been import¬≠ed and are in the project folder. 

Then we do the same with 3D mod­els. You have to take into account the fold­ers we cre­at­ed in the pre­vi­ous video in order to orga­nize ourselves.

programa unity3d, los modelos 3D descargados en este artículo se han agregado a unity y se visualizan en la ventana del proyecto, se ven las miniaturas de los modelos 3d.
Fig. 3: The tex¬≠tures have been import¬≠ed and are in the project folder. 



Modify scenario

Now let's put all the 3D mod­els on the stage to start shap­ing the labyrinth.

First we remove all the ele­ments of the sce­nario except the floor. In the pre­vi­ous video we had placed them all as chil­dren of an Emp­ty GameOb­ject called Scenario.

programa unity3d, se han seleccionado los elementos del escenario para eliminarlos. modelos 3d de escalera, cubo y cilindros.
Fig. 4: All sce¬≠nario objects are select¬≠ed except the floor.

The next step is to take the 3D mod¬≠el called Sce¬≠nar¬≠i¬≠oEle¬≠ments that we import and drag it into the scene or hier¬≠ar¬≠chy. This will place all the pieces of the labyrinth on the stage.

se coloca en el escenario el modelo 3d importado con las piezas del laberinto, programa unity3d desarrollo de videojuegos.
Fig. 5: We place the 3D Sce¬≠nario Ele¬≠ments Mod¬≠el that comes in the down¬≠load of this page.

In the pre¬≠vi¬≠ous video we had made the floor brown. Now we are going to apply tex¬≠tures so we make it white again, oth¬≠er¬≠wise our tex¬≠ture will have a brown tint.

se elige un color blanco para el suelo. programa unity3d desarrollo de videojuegos.
Fig. 6: Mod¬≠i¬≠fy the colour of the floor mate¬≠r¬≠i¬≠al so that it turns white again.

Apply textures to the floor

Now we are going to use the tex­tures that come inside the zip that can be down­loaded at the begin­ning of the article.

We start with the floor, inside the fold­er we have three textures.

The Base Col­or tex­ture is used to give col­or to the mate­r­i­al. Metal­lic deter­mines the behav­ior of the mate­r­i­al in front of light and the nor­mal tex­ture also deter­mines how the light bounces off the mate­r­i­al, but it is used to add geo­met­ric details that appear to have a high den­si­ty of poly­gons in 3D models.

en la ventana del proyecto se observan tres texturas, que conformar√°n el material del suelo, textura albedo, metallic y normal. programa unity3d desarrollo de videojuegos.
Fig. 7: Three tex­tures cor­re­spond­ing to the soil togeth­er will define the material.



Place textures in the slots of the material

We add the tex­tures in the inspec­tor, to see the mate­r­i­al in the inspec­tor we have two options: we can select the mate­r­i­al direct­ly from the project fold­er or select­ing a 3D mod­el of the world that has it assigned.

se agregan las texturas albedo, metallic y normal al material en el inspector. programa unity3d desarrollo de videojuegos.
Fig. 8: Dis­play of the para­me­ters of a stan­dard mate­r­i­al in the inspector.

Fig­ure 8 shows that the tex­tures are assigned in the slots of the material.

Albe¬≠do slot deter¬≠mines the col¬≠or of the mate¬≠r¬≠i¬≠al, there we place the tex¬≠ture Base Col¬≠or. The metal¬≠lic tex¬≠ture in the slot metal¬≠lic and the nor¬≠mal tex¬≠ture in the slot Nor¬≠mal map. For the lat¬≠ter we must define that tex¬≠ture as a nor¬≠mal map, there are two ways to do this, but Uni¬≠ty gives us the option in the same place, as shown in Fig¬≠ure 8 appears a sign that says that this tex¬≠ture is not defined as a nor¬≠mal map and we have a but¬≠ton to fix it. We click on Fix Now.

Tiling of textures

The upper left cor­ner of Fig­ure 8 shows a por­tion of the soil. Notice that the floor looks blur­ry unlike what it should look like (a lawn floor with daisies).

This hap¬≠pens because the tex¬≠ture is expand¬≠ed to occu¬≠py the entire plane, to change this we must make it repeat more times in the geom¬≠e¬≠try. This is done with the Tiling para¬≠me¬≠ter of the mate¬≠r¬≠i¬≠al, in my case (because of the size of the plane) the val¬≠ues 100 for X and 100 for Y work.

configuraci√≥n del tama√Īo del mosaico en el material. ventana inspector del programa unity3d desarrollo de videojuegos.
Fig. 9: Tiling. This will cause the tex­tures to be dis­trib­uted on a larg­er or small­er scale with­in the geometry.

What is going to hap­pen is that the same tex­ture is made small­er and placed one after the oth­er. In fig­ure 10 you can see the lawn with daisies. Notice how in the low­er part of the image the ground looks good, but as we move away the pat­tern of the tex­ture becomes more evi­dent, it is obvi­ous that it is the same tex­ture that repeats itself.

We are using a "Seam¬≠less" tex¬≠ture, that is to say a tex¬≠ture that when you put it one after the oth¬≠er (in the four sides) fit per¬≠fect¬≠ly and you don't notice a line of rup¬≠ture. Even though the tex¬≠ture is very good, we can't avoid the rep¬≠e¬≠ti¬≠tion pat¬≠tern from a dis¬≠tance. To avoid this we have to use more tex¬≠tures, place objects that inter¬≠rupt the pat¬≠tern and so on.

un plano con una textura de cesped con margaritas. modelos 3d sin texturizar. programa unity3d desarrollo de videojuegos. el suelo parece brillar.
Fig. 10: The floor mate­r­i­al has a suit­able mosa­ic size. At a dis­tance, the tex­ture is repeated.

Fig¬≠ure 10 also shows that the floor reflects a lot of light, as if it were made of glass or some¬≠thing sim¬≠i¬≠lar. To cor¬≠rect this we decrease the Smooth¬≠ness val¬≠ue, mak¬≠ing the mate¬≠r¬≠i¬≠al reflect less light.

configuracion del valor de smoothness (suavidad) de un material en la ventana inspector del programa unity3d desarrollo de videojuegos.
Fig. 11: Decrease of the Smooth¬≠ness para¬≠me¬≠ter of the mate¬≠r¬≠i¬≠al so that it reflects less light.



un plano con una textura de cesped con margaritas. modelos 3d sin texturizar. programa unity3d desarrollo de videojuegos. el suelo parece brillar.
Fig. 12: Final con¬≠fig¬≠u¬≠ra¬≠tion of the material. 

Extract materials from 3D models

In pre­vi­ous ver­sions, when we import­ed a file with an FBX exten­sion, the mate­ri­als that could be defined auto­mat­i­cal­ly appeared along with the mod­els. This has changed and I think it makes sense that we have to man­u­al­ly extract the mate­ri­als, so we can have bet­ter con­trol and avoid hav­ing many copies of the same material.

There are two ways to extract the mate¬≠r¬≠i¬≠al, at least in the ver¬≠sion at the time of record¬≠ing the video. 

In this case we click on the import­ed mod­el and in the inspec­tor we go to the mate­ri­als tab and click on: "Extract from prefab".

extraer materiales manualmente de los modelos 3d importados. un plano con una textura de cesped con margaritas. modelos 3d sin texturizar. programa unity3d desarrollo de videojuegos.
Fig. 13: Extrac­tion of mate­ri­als from the import­ed file from the inspector.

A win­dow appears to select the loca­tion of the extract­ed mate­ri­als, if you want we can cre­ate a fold­er for the new materials.

ventana para guardar materiales extraidos. programa unity3d desarrollo de videojuegos.
Fig. 14: Select­ing the place for sav­ing the extract­ed materials.

The new mate­ri­als appear in the select­ed folder.

Visualización de los materiales extraídos en la carpeta del proyecto del programa unity3d desarrollo de videojuegos.
Fig. 15: Dis­play of the extract­ed mate­ri­als in the project folder.

Apply textures to new 3D models

The next step is to do the same thing we did with the floor mate¬≠r¬≠i¬≠al, we are going to go mate¬≠r¬≠i¬≠al by mate¬≠r¬≠i¬≠al adding the tex¬≠tures to the respec¬≠tive slots.

There is a prob­lem that aris­es when we have to do this type of tasks and is that when we select some­thing in the hier­ar­chy or fold­er of the project, the inspec­tor shows us infor­ma­tion about that selec­tion. In our case it would be good that the inspec­tor is blocked show­ing the mate­r­i­al we are configuring.

For this there is the small pad­lock that you can see in the upper right cor­ner of the inspec­tor tab. Click­ing on it blocks what the inspec­tor shows and we can nav­i­gate freely through the project fold­ers with­out los­ing sight of our mate­r­i­al. Beware that this can also be a prob­lem, some­times we for­get the locked inspec­tor and we don't know why we can't see infor­ma­tion about what we select.

colocacion de texturas sobre modelos 3d en programa unity3d desarrollo de videojuegos.
Fig. 16: Place¬≠ment of the tex¬≠tors in the mate¬≠ri¬≠als. When you select a part from the hier¬≠ar¬≠chy, its com¬≠po¬≠nents appear in the inspec¬≠tor, includ¬≠ing the mate¬≠r¬≠i¬≠al assigned to it.

Anoth¬≠er alter¬≠na¬≠tive for this type of tasks is to mod¬≠i¬≠fy the Uni¬≠ty lay¬≠out for our ben¬≠e¬≠fit, that is to say to open more tabs of the project and to lock them so that each one shows a thing.

Fig­ure 16 shows that one of my project win­dows shows the mate­ri­als, the oth­er shows the tex­tures and the inspec­tor shows the select­ed mate­r­i­al. This makes the process of adding many tex­tures to the mate­ri­als faster.

colocacion de texturas sobre modelos 3d en programa unity3d desarrollo de videojuegos.
Fig. 17: Tak­ing advan­tage of the flex­i­bil­i­ty of Unity's win­dows and the option of lock­ing them to facil­i­tate the process of con­fig­ur­ing materials.



Creation of Prefabs

Once we have con­fig­ured all the mate­ri­als, the next step is to cre­ate the "Pre­fabs" that is to say GameOb­jects pre­fab­ri­cat­ed that lat­er we will be able to instan­ti­ate dur­ing the design or in time of exe­cu­tion of the game. For exam­ple, lat­er on we will make the clocks appear ran­dom­ly on the stage. In order to achieve that we need to have a GameOb­ject pre­fab­ri­cat­ed from which clones will be created.

creacion de prefabs en programa unity3d desarrollo de videojuegos. se observa una escena con un suelo de cesped con margaritas y modelos 3d de setos que forman un laberinto. programa unity3d desarrollo de videojuegos.
Fig. 18: Process of cre­ation of Pre­fabs. First we select a GameOb­ject from the hierarchy.

To cre¬≠ate a pre¬≠fab¬≠ri¬≠cat¬≠ed GameOb¬≠ject we sim¬≠ply take it from the hier¬≠ar¬≠chy and drag it to any fold¬≠er in our project, as shown in fig¬≠ures 18 and 19.

creacion de prefabs en programa unity3d desarrollo de videojuegos. se observa una escena con un suelo de cesped con margaritas y modelos 3d de setos que forman un laberinto. programa unity3d desarrollo de videojuegos.
Fig. 19: Process of cre­at­ing a pre­fab. Sec­ond: we take the GameOb­ject and drag it to some fold­er of the project.

After that the Pre¬≠fab appears in the fold¬≠er, as a thumb¬≠nail that shows its appear¬≠ance and name. From there we can take it and drag it to the scene to cre¬≠ate all the copies we need, as can be seen in fig¬≠ure 20.

creacion de prefabs en programa unity3d desarrollo de videojuegos. se observa una escena con un suelo de cesped con margaritas y modelos 3d de setos que forman un laberinto. varios relojes de péndulo flotando en el escenario. programa unity3d desarrollo de videojuegos.
Fig. 20: The pre­fab is in the project fold­er and can be reused.

We repeat this process for each indi­vid­ual piece of the labyrinth, pedestal and portals.

creacion de prefabs en programa unity3d desarrollo de videojuegos. distintas piezas que forman un laberinto. un portal, un pedestal con una espada incrustada y un reloj de péndulo.
Fig. 21: Pre­fabs have been cre­at­ed for all import­ed mod­els. In this way we can build the labyrinth and place the objects.

Define a new Skybox

Now let's mod­i­fy the stan­dard sky of the scene. We will use the files down­loaded from the Asset Store of the pre­vi­ous video, doing this was an option­al step, so if you have the files no prob­lem, we can keep mov­ing forward.

First we cre­ate a new Mate­r­i­al, we call it "Sky" and we select it to visu­al­ize its prop­er­ties in the inspector.

definición de un shader como skybox de 6 lados en programa unity3d desarrollo de videojuegos.
Fig. 22: Mod­i­fi­ca­tion of the Shad­er to define it as a six-sided Skybox.

Then we click on the Shad¬≠er drop-down menu that by default has "Stan¬≠dard Shad¬≠er" select¬≠ed, instead we choose the Shad¬≠er "6 Sided Sky¬≠box". This will com¬≠plete¬≠ly change the prop¬≠er¬≠ties of the mate¬≠r¬≠i¬≠al in the inspec¬≠tor, now you see an inspec¬≠tor like the one in fig¬≠ure 23.

definición de un shader como skybox de 6 lados en programa unity3d desarrollo de videojuegos. slots para colocar texturas.
Fig. 23: Six-sided sky­box type shad­er dis­played on the inspector.

We will assign the tex¬≠tures of the Sky¬≠box pack¬≠age down¬≠loaded from the Asset Store to the cor¬≠re¬≠spond¬≠ing Sky¬≠box slot.

definición de un shader como skybox de 6 lados en programa unity3d desarrollo de videojuegos. colocación de texturas en los slots.
Fig. 24: The tex­tures down­loaded in the pre­vi­ous video are assigned to the slots of the mate­r­i­al in the inspector.

Then go to the menu Win­dow > Light­ing > Set­tings to open the light­ing configuration.

acceso a la configuración de iluminación en programa unity3d desarrollo de videojuegos.
Fig. 25: The light¬≠ing con¬≠fig¬≠u¬≠ra¬≠tion win¬≠dow opens.



A win­dow opens like the one shown in fig­ure 26, which I place next to the inspec­tor so that he is not floating.

configuración de iluminación en programa unity3d desarrollo de videojuegos.
Fig. 26: Dis­play of the light­ing con­fig­u­ra­tion parameters.

Click on the icon of the cir¬≠cle with the "Sky¬≠box Mate¬≠r¬≠i¬≠al" point (on which the cur¬≠sor is in fig¬≠ure 26) and in the win¬≠dow that appears we choose the Sky¬≠box that we have just con¬≠fig¬≠ured (fig¬≠ure 27). 

selección del skybox de la escena en programa unity3d desarrollo de videojuegos.
Fig. 27: Selec­tion win­dow for Sky­box mate­r­i­al. The pre­vi­ous­ly cre­at­ed mate­r­i­al is selected.

Imme­di­ate­ly we see how the default heav­en is replaced by a new sky of a cloudy sun­set. With the appro­pri­ate images we can cre­ate a per­son­al­ized sky for our project.

se observa un suelo de cesped con margaritas, varios muros que forman un laberinto y un cielo de atardecer nueblado. programa unity3d desarrollo de videojuegos.
Fig. 28: The sky in the scene changes, now there is a cloudy sunset.

Adjust lighting

Fig­ure 28 shows that the light is too pale, i.e. it does not look like the light you would see in a sun­set. To cor­rect this we select the light source in the hier­ar­chy to see its prop­er­ties in the inspec­tor (an inspec­tor sim­i­lar to the one seen in fig­ure 33 is observed).

In the inspec¬≠tor we select a col¬≠or accord¬≠ing to the tone of the sky and we adjust the inten¬≠si¬≠ty to taste.

Then we mod­i­fy the rota­tion of the light source to match the posi­tion of the sun in the Skybox.

se observa un suelo de cesped con margaritas, varios muros que forman un laberinto y un cielo de atardecer nueblado. en el centro una luz direccional. programa unity3d desarrollo de videojuegos.
Fig. 29: The rota­tion of the direc­tion­al light is mod­i­fied to match the posi­tion of the sun in the Skybox.

At this point of the video I make a fold­er to place the pre­fab­ri­cat­ed ones belong­ing to the stage and oth­ers for the objects. Again I empha­size the orga­ni­za­tion of the project.

Fig. 30: The pre­fabs are placed in fold­ers with sig­nif­i­cant names to improve the organization.

Final¬≠ly it occurs to me to add a sec¬≠ond light source that points direct¬≠ly down and does not pro¬≠duce shad¬≠ows, that way the scene does not look so dark.

se observa un suelo de cesped con margaritas, varios muros que forman un laberinto y un cielo de atardecer nueblado. programa unity3d desarrollo de videojuegos. Un cartel que dice "CTRL+D"
Fig. 31: The col¬≠or of the direc¬≠tion¬≠al light has been changed to match the tone of the Sky¬≠box and dupli¬≠cat¬≠ed to add light in the dark areas.

I select the light source from the hier­ar­chy and press CTRL+D to dupli­cate it, then I ori­ent it per­pen­dic­u­lar to the ground.

se observa un suelo de cesped con margaritas, varios muros que forman un laberinto y un cielo de atardecer nueblado. en el centro una fuente de luz direccional apuntando hacia abajo. programa unity3d desarrollo de videojuegos.
Fig. 32: The new direc­tion­al light is ori­ent­ed per­pen­dic­u­lar to the stage for gen­er­al illumination.

In the inspec¬≠tor I adjust the para¬≠me¬≠ters and in "Shad¬≠ow Type" I select the option "No Shad¬≠ows", as it is observed in the fig¬≠ure 33. With this we fin¬≠ish the video 2 of the series My First Game in Unity.

configuracion de los parametros de la luz direccional en el programa unity3d desarrollo de videojuegos. un men√ļ desplegable con la opci√≥n "No Shadows" seleccionada.
Fig. 33: With the new direc­tion­al light select­ed, in the inspec­tor we make sure that it does not pro­duce shadows.



Conclusion

In this video we have worked quite a bit on the aspect. We added 3D mod¬≠els and tex¬≠tures, so we learned a lit¬≠tle more about the mate¬≠ri¬≠als. In the case of import¬≠ed 3D mod¬≠els, we must man¬≠u¬≠al¬≠ly extract the mate¬≠ri¬≠als that can bring or place new mate¬≠ri¬≠als, this part is very con¬≠nect¬≠ed with the 3D design of the piece, ie the mate¬≠ri¬≠als defined in our 3D design soft¬≠ware will appear in Uni¬≠ty, we may have the oppor¬≠tu¬≠ni¬≠ty to delve deep¬≠er into this issue later.

We saw that we can cre¬≠ate pre¬≠fab¬≠ri¬≠cat¬≠ed GameOb¬≠jects that are in the hier¬≠ar¬≠chy. These pre¬≠fab¬≠ri¬≠cat¬≠ed can be placed in the world eas¬≠i¬≠ly, at the time of edit¬≠ing or at the time of run¬≠ning the game.

We mod¬≠i¬≠fy the sky that comes by default in the scene, instead we cre¬≠ate a Sky¬≠box type mate¬≠r¬≠i¬≠al in which we place tex¬≠tures to rep¬≠re¬≠sent the six sides of the "sky box", this behaves as if we were inside a giant cube whose hori¬≠zon is very far away.

Final­ly, we improved the illu­mi­na­tion of the scene a lit­tle, cor­rect­ing the col­or and adding anoth­er light source that adds inten­si­ty but does not pro­duce shadows.

YouTube
Scroll to Top
Secured By miniOrange