Design Post Update: Game Development

Showing posts with label Game Development. Show all posts

Thursday, October 6, 2016

Read How to create Pause Screen in UE4 Now

This image shows a finished Paused screen.

Step 1:

Before you open Unreal Engine go to http://www.dafont.com/ for download a font suitable for your game. One you download extract the file and installed ttf file. Copy the ttf file and paste in C:\Program Files(Program Files (x86))\Unreal Engine(Epic Games)\4.5(engine version)\Engine\Content\Slate\Fonts

After when you installed font open Unreal Engine. Content Browser is located in folder “Game” create new folder for User interface screens call it “UI”. In UI folder press right mouse bottom and select “User Interface” option then select “Widget Blueprint” in order to save press right click on widget blueprint and select save. Then double click on the widget blueprint to enter to edit menu.

This image show where you should create folder for User Interface.

This image shows where you should create Widget Blueprint.

Step 2:

On left top corner of the screen there is a folder called “Palette” expand “Common” select “Text Box” hold and drag on canvas or you can hold and drag on canvas under [Root] but make sure that you put on canvas.

This image shows Pause Screen editor.

This image shows canvas for screen.

Steps 3:

If you select text box then on the top right side of User Interface editor you can see “Details” options. Chose “Layout (Canvas Panel Slot) and press on Anchors and choose the middle. You can mess around and change “Style”, “Appearance” and other options. In “Content” option you can type the heading of your title.

This image shows options for Pause Screen.

This image show Text Block applied on canvas.

This image shows Text Block operation.

This image shows text applied on canvas.

This image shows colour options.

This image shows costumer font style. This is spot where you should put the font name that you want use.

Step 4:

You can add image if you want by dragging image box. To select image that you want to use and drag to “UI” folder. When your Pause screen is finished and you are happy of it than press Compile. Save and close the editor. You can find good image on http://www.freeimages.com/ .

This image shows an image box applied on canvas.

The image that I chose is grunge border from http://vyawie.deviantart.com/art/Border-Black-Grunge-187744467 . You can search in Google Image for grunge border.

This image shows an image that I use for Paused Screen.

Step 5:

Select “Blueprints” then select “Open Level Blueprint”. Press right click and search for letter “P” to pause game and “X” to un paused game and add other important objects that will be needed for “Pause Screen” to work. Create new variable and select and then in variable type change to Boolean. Then create new Variable but this time change to Float.

This image show programmer for Paused screen.

This image shows the program for Paused screen.

Step 6:

If you finish coding press compile and save your Pause screen and you can exit programming. The last thing that is left to test if pause screen is working is to “x” out of programming editor and see if it works.

This image shows a finished Game Paused screen.

You can also watch a video tutorial about how to create a Pause Screen.

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 Create A Decal Texture Now

SmartGirl 3d games , adobe photoshop

This image shows a finished decal texture.

Steps for Decal

1. You can look for an image that you want to be your decal or you can create decal by yourself by open new Photoshop file in power of 2 for example 512x512 with transparent background and you can unlock the layer.

This image shows the Photoshop settings for the canvas.

This image shows a finished decal texture.

2. You can download a suitable brush in ABR file format if you want to create your own decal from scratch. If you have downloaded an image you can remove parts from the image that you want use for your texture and place them into your canvas prepared in step one.

3. Press Ctrl and hover over your layer until you see the symbol (Thumbnail) hand with square and just press once on the layer.

4. Then press X and D to change front colour to white and background to black

5. Go to channel section.

This image shows Channel panel in Photoshop.

This image shows Where you can create new channel.

6. Add another channel which is an alpha channel.

This image shows Alpha channel added.

7. Select the area of your image than you want to be visible and with the alpha channel still selected use the paint bucket tool to fill that area white. Don't worry it won't damage your image, just set that area as solid and visible in your alpha while at the same time, masking the rest of the image.

https://youtu.be/2pEpg5Mg9t4

This links to a video tutorial about creating a decal texture.

Read Create An Automatic Door in UE4 Now

SmartGirl 3d games , codes

Automatic Door

In this tutorial we will create an automatic door that opens when the player nears, and closes as they leave the sensor area.

The first thing we need to do is open a level in which we can practice this tutorial. I already have a scene set up to use.

Step 1: Adding the doorway

We first need to add a door way for the frame to sit around. To create the door frame we need to add a box from the BSP section and drag it into our level.

Below is a box that I have dragged in and changed to the measurements seen at the side of the screen. Now that the box is the shape of a door, we need to change it from additive to subtractive.

I already had the door frame in but it is unimportant for this part as we are just adding the doorway. I move the box over to the wall after changing the box to subtractive.

With the box being subtractive it takes away from the wall creating the doorway.

Step 2: Adding the door frame

The next step is to add the door frame. This can be found in the content browser on the bottom left of the screen. Look for starter content, then open the props folder. Look for the door frame file, then click and drag this into the scene.

I've dragged the door frame into the scene and placed it over the subtractive box previously added. The only problem was its too small for what I want. In the picture you see the scale widget. This can be accessed by selecting the door frame, then hit the space bar once, to change to the rotate widget, hit the space bar key again, and we have the scale widget.

I clicked the widget arrow to the right and dragged it once. This is the result.

By using the scale widget we have the option to scale our object in three different directions, ideal for what we want.

We can still see the wall in the door frame sticking out so what I am going to do is do the same thing to the subtractive box we added.

Here I have used the scale widget to scale the subtractive box to match the door frame

Step 3: Adding the door

We now have a place to bring in our door. So to add a door we need to access the starter content folder in the bottom left of the screen.

This shows the content browser with no particular folder selected.

From here we have access to a folder called props. Open this folder and look for a door. You can use the search bar if necessary.

These are the options that we have once we have opened the props folder.

We can see the door once we open the props folder. We click and hold on the image of the door so that we can drag it into our scene.

My door has been clicked, and dragged, from the folder straight into the game

The arrowed widget is the tool used to move the door around. Now that the door is in we will use the widget tool to move the door into position in the door frame.

Check all angles to align properly

Before we go any further we need to change the size of the door to fit the frame, the same way that we changed the size of the door frame.

The door was scaled using the scale widget

Step 4: Adding Collision to the door

We need to right click on the door in your game, not in the content browser and select edit sm_door near the top of the pop up menu. This will open up this window.

This window is where we will add a collision

This is where we are going to add a collision so that our player can’t walk straight through the door.

To do this you need to go to collision along the same toll bar line as the 'file' option.. From the drop down here select box collision.

The door is now a solid entity and our character will not be able to pass through it

Step 5: Adding a Box Trigger

Now your door is ready for animation. We need to add a box trigger that will cause the door to open once we get close enough. This can be found in the place section of modes under basic.

The box trigger acts like a sensor on an automatic door

To bring the box trigger in is the same as the door, we click and hold as we drag the image into the door itself.

I've placed my box trigger in the centre of the door

Once this is positioned we can change the size by using the scale widget. To get this up select the box trigger so it’s orange then press the space bare key twice. The first time changes the widget to the rotation widget.

Rotation widget allows us to rotate an object so that it is at a different angle

And a second space bar press gets the scale widget, which is what we need.

Scaling the box trigger

From here we can click any of the coloured arrows and drag it out. This will scale the box in that direction. We need it to be similar to this size.

My trigger boxed scaled up

Now that we have all of the necessary meshes for a working door we get to have some fun with animation. At this point hit save to protect our progress.

Step 6: Adding a Matinee

This section will cover animating the door to open and close. Click on the matinee symbol. Then click add matinee.

The matinee section is where we will create the animation

Once you have clicked this icon this window should appear.

This is the matinee editor

This is where things will become a little more detailed. Hit save and then we can proceed.

First thing we are going to do is select the door outside of the matinee actor window. You can move this window to select the door.

I have moved the matinee editor to the right of the screen in order to select the door

Next thing we do is under the orange word ‘all’ we will right click in the grey space and click add new empty group. Name this door.

If the above step was completed correctly this is how your screen will look

The next step is to right click on the orange area and add a new movement track. This is how the completed step should look.

On the movement track we add a second key frame

We now have our door in the animation sequence and added as a key frame. (The key frame is the red triangle just to the right of the movement track).

For my door sequence I think that having the animation run for 2 seconds is long enough.

In the next step I selected the green triangle below the green rectangles and dragged this upto the two second mark. I then dragged the white line with the red triangle to this point also. Now we need to move the door. We will use the rotate widget to do this.

We have the first key frame inserted already

For this step we need to access the door so if needs be, move the matinee window or minimise it.

Once that is done we need to select the door and have the rotate widget open on it.

At this point we are preparing to rotate the door for the second key frame

Now we open the matinee editor, drag the second green triangle to the two second mark, then we rotate the door 110 degrees. Click on the blue arc and drag the mouse.

The rotate widget will change to yellow when you click and drag on it

Once we get here hit enter in the matinee editor, it will add the second key frame so that we can play the animation.

The second key frame is orange once added

Now when you hit play it will work, as in the door will open and close. In the top right click file and save all. Now we can code the door.

Step 7: Adding Blueprints

We select the green trigger box and then on the same bar as the matinee icon we select the blueprints, then from the drop down select level blueprint.

Once you do click level blueprint a window should pop up.

Blueprints is the coding in UE4 that makes things work, for example a door opening and closing

With the trigger box selected we right click on the grid. From the drop down menu that appears, select add event for trigger box, under that open the collision folder and select begin overlap. Then right click and repeat the process but then select end overlap.

These pieces of coding will be the beginnings of our doors action

Next step is to select the matinee, in the below image it is located on the top right hand corner.

We can use the menu on the top right to select any objects that we have added into our level

With the matinee selected, we need to right click on the grid in the level blueprint and add a reference to the matinee. It is the fourth option on the pop up menu.

At this point, we are just getting ourselves organised to connect all of the necessary coding.

Next step, right click again and type ‘play’ into the search bar, you want to select the play option that is under the cinematic subheading. Then I drag a connection from begin overlap into the play and the same with the matinee reference.

To connect these pieces of code, just select the white arrow or blue dot and drag the mouse

Now we need to make the door close when we go away, for this right click, but this time untick context sensitive on the drop down menu and type in reverse. You need to select the one underneath the cinematic subheading.

Again I have connected all of the coding, you can drag two links from the reference node

Underneath file click compile, this saves you’re coding.

Compile to save the game

Now can hit play on the level and when you walk near our door it will work.

Design Post Update