Design Post Update: game creation

Showing posts with label game creation. Show all posts

Thursday, October 6, 2016

Read Importing and Applying a Decal Texture in UE4 Now

Importing Textures Into UE4

Welcome to this tutorial, today we are going to work on bringing textures into your game. We are going to cover three different types of textures and how they can be imported into your game, along with how to apply them.

Sample Decal Texture

Step 1: Importing a texture

The first thing we need to do is source a texture.

I’m going to use a rust texture made in an earlier tutorial and import that into my game. The first thing we need to do is import the texture into Unreal. To do this open your game. Then in the context browser select the Starter Content folder and in the textures folder we are going to select import.

We click the import button beside new.

The file type for the decal should ideally be a .TGA (Targa File). Once you click import you will be asked to select the file, locate your file and click open, but make sure you select the TARGA file type and not the .PSD file.

Step 2: Creating the decal material

My texture has been imported into the game. Now we need to add a material.

The texture is imported but the star symbol means it is unsaved.

To add the new material scroll down to the bottom of the textures folder and right click in an empty space, from the pop up menu select the material option. Then name your material decal rust.

Here we can see the blank material that I have created.

If you then double click on the newly made material, it will open the material editor which should look like this.

Our texture is not in the material editor yet, that is why the ball is black.

Now the problem here is that we have no actual image to create our decal from, so what we need to do is take the imported decal from our content browser on the left and drag it into the grid on our material editor.

The decal has been brought into the material editor.

The next thing we need to do is connect the decal to the info panel.

Here we connect the detail to the info panel.

Once this is connected click on the info panel. The options on the left will change.

What I've done below is selected the info panel and changed the blend mode from opaque to translucent. This is one step closer to eliminating the background so the decal goes on without a pure white background.

The details on the left hand side have changed.

We connect the bottom most channel on the texture to the opacity option on the info panel.

We also need to change the material from a ‘Surface’ to ‘Deferred Decal’. The result is we now have a decal texture. Hit save at this point.

All I did here was click the black triangle beside surface and select deferred decal.

Step 3: Applying the decal material

Now that we have this done let’s get a surface prepared to apply the decal to.

What I have done in the below picture is I’ve opened the starter content folder and I dragged a copper material from the materials folder directly onto the wall.

Note: the material came from the materials folder, not the textures.

Now that this is done we need to take in a deferred decal from the place section under the visual option scroll down to find deferred decal. Once you drag this into the game this is how it will look.

The material we created with the decal needs to be applied to this.

Now that we have entered the deferred decal we need to actually connect our decal to this decal.

To do this drag the material you created in the textures folder and drag it over to the materials box on the left hand side.

We drag and drop the material into one of the empty boxes and this will apply it.

Now to get this decal to actually work is going to take some manipulation, because of the way the deferred decal is positioned, so with it selected, hit the space bar in order to bring up the rotate widget, then click and drag along the blue and red arcs to the decal to rotate into a position that you are happy with.

The purple arrow tells us the direction in which the decal is facing.

Now I'm happy with the location but not the scale. So if you hit space again you will get this widget (below) this is used for scaling and I'm going to scale mine till I am happy with how it looks.

Clicking on the green arrow and dragging up or down will scale the decal.

I'm happy with the scale of this decal. Now we are finished applying the decal we can save the progress and move on to the next texture.

Read How To Create A Tileable Texture Now

SmartGirl 3D Game , 3d games

This image shows a finished texture that can be used in a game.

Steps To Create The "Diffuse" Texture

1. Search for an image that will be suitable for your game and an image that you want to be your tileable texture. the best website is http://www.textures.com/

2. Put an image that you want to be your texture in to Photoshop software.

This image shows the brick wall.

3. Crop the image, removing any potentially troublesome areas.

This image shows Crop tool has taken away part of the image.

4. Then resize image to be power of 2.

This image shows the Image size setting in power of 2.

5. Press filter on top software tool bar than select other option and then select offset.

This image shows the right setting for offset.

This image shows an image that is divided into two parts the better one in on top and the bad one is on bottom of the picture. The bottom part will be covered with clone tool.

6. We will use clone tool to copy good parts of image.

This image shows that the clone tool created a copy of the top part of the image.

7. Use Sharpen tool to get rid of the blur but do not over use Sharpen tool because we get bad effect.

8. Use dodge tool to make shadows lighter and burn tool to make highlights darker.

This image shows how you can make image brighter by using Dodge Tool.

This image shows how you can make image darker by using Burn Tool.

9. On tap bar go to Image\Adjustment\Hue and Saturation.Add Hue and Saturation adjustment the way that you want to make this texture more interesting. Make sure that there is not any defects.

This image shows settings for Hue and Saturation Adjustment.

10. If everything is good and you are happy of effects save as targa file. You should save your targa with a resolution of 32 bits/pixel.

This image shows a finished texture that can be used in a game.

Steps To Create The "Normal" Texture

1. Search in Google for NVIDIA texture tool the best way to find it is: “NVIDIA Texture Tools for Adobe Photoshop”. If you cannot find there is a link for website where you can download NVIDIA plugging tool.

https://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop

2. Press download and chose version of Windows that you work with either 32 bit or 64 bit.

3. When download is finish just install the program.

4. Open Photoshop and check in NVIDIA installed right be pressing filter and down in list should be NVIDIA Tool.

5. Open your texture targa file.

This image shows the file name and format that is saved.

6. Unlock layer so you can work with NVIDIA Tool.

This image shows layer blocked.

This image shows layer unblocked.

7. Go to filter and select NVIDIA Tool and take “NormalMapFilter” option.

This image shows setting of NVIDIA Tool.

This image shows some effect that we can get from NVIDIA Tool.

8. Duplicate the layer until you get effect that you want.

This image shows Duplicate layer which give better effect.

This image shows last step that you should take after last duplicate layer.

9. If you are happy of yours effect save in targa(tga) file.

This image shows saving mode.

This image shows a finished texture that can be used in a game. The texture is in targa(tga) file.

This image shows right format that you can save your targa format and it shows the resolution that you can chose the best options is 16 bits/pixel and 32 bits/pixel because is the power of 2.

This link shows Video Tutorial about how to install NVIDIA Texture tool and how creating Tillable texture.

The Next Step

Now that you have created the texture the next step is to import and add them to whatever software you need them for.

Read How to create swimmable water in UE4 Now

SmartGirl Engine , game creation

In this tutorial I will show you how to create water that your character can swim in.

Step 1: Adding in BSP Brush

To create water we first need somewhere to put it, so I am going to drag out a box.

BSP box brush.

Step 2: Creating and resizing subtractive brush

Then duplicate that box and change the brush type to subtractive. To duplicate the box you can go to the scene outliner panel, right click on the box and go to edit and select duplicate.

Box brush in scene outliner.

To change the brush type, go to the details panel, under brush setting. Where is says brush type click and select subtractive from the drop down bar.

Brush settings - Additive

Resize this box to create a hole in the first box, this is where we can put the water. You can resize the box in the details panel under transform, just so it’s a bit smaller than the other box.

Transform options.

Step 3: Adding physics volume

Go to the modes panel, in placement mode. Select volumes, scroll down until you see “physics volume”. Drag in a physics volumes, make it a little bigger than the subtractive box.

Physics volume.

On the details panel under character movement tick the box beside water volume, and under volume tick the box beside physics on contact.

Water volume and physics on contact location on details panel.

Step 4: Adding in post process volume

Now duplicate the physics volume, and in the details panel under actor go to convert actor and in the drop down select “PostProcessVolume”.

Convert actor.

In the details panel, under scene colour make sure to tick the first three boxes. Beside scene colour tick that box and then double click the space beside it and you can change the colour to a shade of blue, this just makes it look like you are under water when you are in play mode.

Scene colour options.

Step 5: Creating water surface

To add the water drag out another box, and this time add a material to it. To apply a material to the box, select it. Go to the details panel under brush setting and extend the tab, select create static mesh.

Create static mesh.

When you click this the select path screen opens, you name the static mesh and then click create static mesh.

Name and create static mesh.

Go to the content browser, extend starter content and click materials. Then search water in the search bar. Then choose one of the water materials that comes up and drag it onto the static mesh you just made.

Select material.

Step 6: Adding a water material to the static mesh

Now click onto the viewport, and you will see the material isn't working yet.

You will see this on your static mesh.

Go back over to the details panel under static mesh and double click static mesh.

Static mesh in detail panel.

The editor will open, make sure you have the material selected in the content browser when you are doing this. Click on the little arrow beside the material in the editor, it’s in the upper right hand corner. Then save and close the editor.

Editor.

Material in content browser.

Step 7: Making the water more realistic

Click on your post process volume, using the details panel you can add Depth of field. This gives the impression of blurred vision when under the water. I ticked the first two options under the depth of field tab. Beside method choose Gaussian in the drop down and set focal distance to about 1000.

Depth of field in details panel.

Step 8: Testing the water

Now right click on your view port and select play from here to test your water.

Character on screen.

Design Post Update