Introduction to UDK Prepared by Sai-Keung Wong National Chiao Tung University Department of Computer Science Reference: Mastering Unreal Technology Date: 28 Feb. 2010

Contents Show demos based on UDK Use UDK to build a game level

Demo Show demos to students

Introduction to UDK Introduction A Walkthrough to Build a Game Level using UDK – Building the first room – Building the second room – Connecting rooms – Turning on lights – Try out game levels – Assigning materials to geometry – Placing static meshes – Placing more static meshes – Placing light sources

Introduction to UDK – Building an emitter – Adding extra properties to Emitter – Adding particle system in rooms – Placing InterpActor （ Mover ） and a trigger – Build a Kismet sequence – Using Matinee to setup InterpActor – Physics objects – Building a Physics material – Fog

A Walkthrough to Build a Game Level using UDK Excited to use Unreal Engine to design games Use your imagination to design interesting and stunning games Be very happy and full of energy to work on your games Difficult at the beginning, but happy at the end Correct attitude Need different techniques to work out an excellent game

Skin of UDK Perspective Top Front Side Brushes CSG Special Brushes & Volumes File

Building the First Room using Brush(es) Run UnrealEd (editor) File -> New -> Subtractive (Geometry style) You will see a red-dotted brush There are four viewports (by default) Right click on “Cube” – Make the appropriate settings for defining the dimension of the cube – X : length, Y : width, Z : height – Example: X = 1024, Y = 1024, Z = 512 Click BUILD and CLOSE

Building the First Room

Save your work – File->Save->… – Package Name: MyFirstGameLevel Open your work – File->Open Package – or – File->Open Recent Package

Tool Bar Show Flags: Toggle the visibility of some items Viewport Mode. It’s Perspective (P) now. Real time mode Etc. UnLit Lit

Building the First Room Select the red dotted Brush (red Cube) Click CSG Substract icon Click Unlit on the lower left viewport You Left Click (Press Left Mouse Button) to select a plane. The plane is highlighted as blue color. The bottom plane is selected.

Building the Second Room In Brushes, select “Cylinder” （圓柱體） Properties: – Z : 1024 – Outer Radius 512 – Inner Radius 384 – Sides : 8 Click Build and Close the dialogue. Use Translation Widget ( 平移控件 ) Make sure SHOW items are set properly

Building the Second Room

Zoom: Press Left Mouse Button and Right Mouse Button at the same time – Move up or down so as to ZOOM out or ZOOM in Pan : Press Left or Right Mouse Button and move

Top View

Move the Cylinder to the appropriate position

Building the Second Room Use Drag Grid ( 拖曳網格設置 ), set as 16 – Using Drag Grid is a GOOD habbit! – Why? You can’t put something exactly near to other if Drag Grid is not used. Place the Cylinder near to the first room You need to work on Top View, Side View and Front View.

Building the Second Room Make sure the Cylinder Brush is selected Press CSG Subtract Before Pressing CSG Subtract Note: the Cylinder Brush is not selected. Make sure that you select it. After Pressing CSG Subtract

Building the Second Room Save your work and close the file. Make sure you enter a good name: MyFirstGameLevel

Connecting Two Rooms Open your saved file Right Click Cube Brush – X: 32 – Y: 256 – Z: 256 Build and close the property dialogue. Move this red brush to connect the two rooms

Connecting Two Rooms Place the new Red Brush in the correct position Click CSG: Subtract Now, we have created a corridor!

Connecting Two Rooms While you are moving the brush, the geometry is not updated. Don’t be panic. Press Build Geometry to solve the problem. Do you see the problem?

Connecting Two Rooms Press Build Geometry after you are done. Now, save your work and close file. Why do we have to save our work frequently?

What’s next? Don’t be disappointed at this moment. Everything seems to be quite “ugly”?! You are going to work on some great thing!

Adding Lights to Rooms Open your work Make sure the mouse cursor is inside a room. Add Light: Press L key press and then Press Left Mouse Button. We can’t see the effect of light until we turn on Lit （點亮） mode. To check properties of a light source, select a light source and press F4

Select the light source and press F4 Property dialogue Is shown.

Duplicating a light source How to duplicate an object? Select the object and press Alt key and drag the object away Now, we have two light sources. Place the new light source to another room Note: You can see the translation Widget: X : Red, Y : Green, Z: Blue

Adding Lights to Rooms Save current level

Playing the Game Level Open your work Build All: build geometry, build light maps and build paths. Using lightmass may slow down everything. So disabled it. Inside a viewport, right click and select “Play From Here” to try out our new level! Another way to try out the new level: – Place a playerStart actor: right click and select playerStart Press ESC to quit the play mode

Playing the Game Level Uncheck “Use Lightmass” There are other options. Students should study them.

Playing the Game Level Oh! The screen is black if you forget building all.. Black screen Having built light maps and geometry

Adding Materials to Geometry Objects Open your work View > Browser Windows > Generic ( Content Browser ) There are some packages: ambient sounds, particle effects, materials, meshes Check materials Select a material and drag it to the selected objects or a BSP plane Note: if you just left click on a wall and the color of the wall turns into light blue, then the wall is selected.

Material Browser

Adding Materials to Geometry Objects Select more than one objects: press CTRL key while you left click on other object(s) De-Selection: left click on it again, you de-select it. You can select one wall and press Shift-B to select all the planes that connect with that plane.

Adding Materials to Geometry Objects After assigning materials to some walls, you can try out your game level! You can assign a material of one plane to another by doing the following: Right Click and press Alt Key on a plane. Then, Left Click and press Alt Key on another plane.

Adding Materials to Geometry Objects Build lightmaps! If not, you will see a black screen.

Adding Static Meshes Open your work View > Browser Windows > Generic Select Meshes You will see the images of static meshes in a window

Adding Static Meshes Move the mouse cursor to a place that you want to put the mesh Add Actor > Add StaticMesh StaticMesh: UTGame / S_HU_Deco_Pipes_SM_PipeSetB05

Adding Static Meshes After you put the meshes, you can try out your level. If you do not rebuild light maps, there will be no shadows!

Adding Static Meshes Also, if the shadow resolution is not high enough, the shadow is hardly seen. Shadow is computed surface-by-surface （面 到面）. Press F5 to show Surface Properties. Surface Properties （表面属性） ->Lighting （光照）组 ->Lightmap Resolution （光源影 射分辨率） ->Choose a small value, such as 8.0

Adding Static Meshes The smaller the value of Lightmap resolution ( 光源影射分辨率 ), the sharper the shadow is. Try out different values of Lightmap resolution to see the effects. Save your work.

Adding More Static Meshes Open your work Add some static meshes in the corridor, for examples, a “doorway” mesh and light meshes Right click->add actor->static mesh->… Build all and try out your game level. Save your work.

Adding More Static Meshes

Adding more lights to decorate the rooms Open your work. Add a light source. Place your mouse at the position that you want to put a light source. Press left button and press L key. Put the light source in an appropriate position.

Adding more lights to decorate the rooms Make sure the light source is selected. Press F4 so as to change the properties of the light source. Light->LightComponent: Brightness （亮度） : 0.25 CastDynamicShadows （投放动态阴影） : check it LightColor （光源色彩） : – B: 91 – G: 198 – R: 255 LightingChannels （光照通道） : Check Dynamic LightShadowMode （光源阴影模式） : Check LightShadow_Normal Radius （半径） : 96

Adding more lights to decorate the rooms

Duplicate a light source: Press Alt key and use mouse to drag the light source. Now, you can create as many light sources as you want! Make sure you put them in appropriate positions. You can do multiple selection for all the light sources and move them around: press CTRL key while you select them.

Adding more lights to decorate the rooms Build all and try out your game level. Save your work after you are done.

Building a Particle Emitter Open your work. Generic browser->“ New ParticleSystem ” （新 建粒子系统） ->New Object （新建对象） Note: Right click side the content browser

Building a Particle Emitter Inside the new target dialogue ( 新建对象 ” 对 话框中 ) Package Name( 包名 ): MyFirstGameLevel Group Name ( 组名 ) : Emitters Name ( 名称 ) : first_particle Press OK. You will see UnrealCascade.

Building a Particle Emitter

Unreal Cascade UnrealCascade （ Cascade ） : A particle editor Right click Emitter list Cascade (i.e. Black area)-> New ParticleSpriteEmitter A new particle emitter node appears. After we have edited the emitter, we can set the emitter in our game levels.

Building a Particle Emitter

We need to add material In Cascade window -> “Show Generic Browser” Open Generic browser->select a material Then go back to Cascade Click “required” at emitter node, then click “Use Current Selection in Browser” for Material of the emitter

Building a Particle Emitter Material Required

Building a Particle Emitter We have to set properties of the emitter Show RequiredModule and set as follows: SpawnRate （生成速率） ->Distribution （分布） – Constant （常量） : 25 。 (25 particles per second) InterpolationMethod （插值方法） -> PSUVIM_Linear_Blend 。 Note: blend the textures based on the ordering the textures. SubImages_Horizontal （子图像水平值） : 2 与 SubImages_Vertical （子图像垂直值） :2 Note: texture is formed by 2x2 grid Save your work Note: The actual appearance of the particles are not shown yet.

Building a basic emitter Open your work. Open the particle that you just built. Generic browser->MyFirstGameLevel- >Emitters->first_particle Emitter List->Lifetime->Distribution （分布） – Min （最小） 至 1.25 – Max （最大） 至 2.0

Building a basic emitter Back to Emitter List Initial Size （初始大小）模块 – Max （最大） X ， Y 和 Z 至 – Min （最小） X ， Y 和 Z 至 75.0 You can see particles now in the browser window.

Building a basic emitter “Initial Velocity” （初速度） – 最大 X 和最大 Y: 40 – 最大 Z: 200 – 最小 X 和最小 Y: -40 – 最小 Z: 175 Save your work.

Adding extra properties to emitters Open your work. Emitter -> 列表中， Right click the empty area below the list Select SubUV > SubImage Index 。 Add SubImage Index to the list Right click here

Adding extra properties to emitters 在 Properties 区域，设置如 下属性： Distribution->Create A new Object （新建对象） Select DistributionFloatConstantCurve Create a curve. The particle system reads the curve for controlling the particles and rendering them.

Adding extra properties to emitters You can change the shape of the curve by adding or deleting points of the curve. Constant Curve->points 边上 的省略号（ “…” ）。 “ Add New Item ” （新建 项）. Click twice That will add two points, namely, [0] and [1] to the curve. Set InVal as 1.0 for [1] ， and set OutVal as 3.0 。

Adding extra properties to emitters Back to Emitter Right click the area below SubImage Index Select Size > Size By Life – A new Size By Life is created The particles may disappear! This is due to that the size of particles are not set yet.

Adding extra properties to emitters Same as what we have done to SubImage Index. Click Distribution -> “Create A new Object” （新建对象） 按钮 。 Select DistributionVectorConstant Curve 。 This will control the size of particles over life.

Adding extra properties to emitters Select Distribution and set the values as follows: Open ConstantCurve : Click Points (“…” 记号）。 Click “Add New Item” （添加新 项） four times to create four points, namely, [0], [1], [2], and [3]. In point[0] 。 Set OutVal X, Y, and Z as 0.2 。 In point[1]. Set InVal as 0.6 。 Set OutVal X, Y, and Z as 1.5 。 In point[2]. Set InVal as 0.85 。 Set OutVal X, Y, and Z as 0.75 。 In point[3]. Set InVal as 1.0 。 Set OutVal X, Y, and Z as 0.0

Adding extra properties to emitters Save your work.

将发射器置于关卡中 Open your work Generic browser->MyFirstGameLevel->Emitters- >first_particle Make sure you select the particle system that you create Right click on a plane inside the room Add Actor > Add Emitter: first_particle Turn on Real Time mode (Left side of the bar) Save your work and try out your level. Note, you can change materials if you like.

Adding an InterpActor （ Mover ） and a Trigger Open your work. We are going to add “Interpolation actor” （ or called as “mover” ）。 Then we use Matinee to animate the object(s)in 3D space. First we select a mesh from generic browser – Generic browser->meshes – Select a mesh in generic browser

Now, you will see an “InterpActor” Add Actor > Add InterpActor ： StaticMesh… Select the door (mover), press F4 DynamicSMActor -> StaticMeshComponent Lighting-> bCastDynamicShadow set as false （未点 选）. Avoid casting shadow Close DynamicSMActor dialogue Click Collision CollisionTyper set as COLLIDE_BlockAll 。 – The player cannot pass the door. Close the property dialogue

We need to open the “door” by activating a trigger add Actor > Add Trigger, a trigger is shown! Select the Trigger ， press F4 Properties Window: – Inside the properties window, click trigger – Set CylinderComponent: Set CollisionHeight （碰撞高度） and CollisionRadius （碰撞半径） as 96.0 。

Press C key to see the collision geometry Place the trigger in the correct position. Note: to see the collision geometry in a viewport, you need to set SHOW flags. Press C key to toggle the visibility of the collision geometry Save your work.

Press C key to show collision geometry

What next? We have placed InterpActor and a trigger We need another two items to activate the animation of the InterpActor: a Kismet sequence and a Matinee sequence. Matinee is used to check the status of the trigger. Then, Matinee tells InterpActor to animate. We need Kismet to “glue” things together.

Kismet A visual programming system Enable designers to organizing events as a logic work flow that satisfies certain logical requirements.

A Kismet Sequence Open your work. Click UnrealEd->“Open Kismet” （打开 Kismet ） Open UnrealKismet （简称为 Kismet ）

A Kismet Sequence Make sure you select the trigger In the empty area inside the Kismet Browser Right click – New Event Using Trigger_0 > Touch 。 – This creates a Touch sequence associated with the Trigger_0

Kismet Node

Kismet and Matinee Move the Touch sequence in Kismet workspace to the left hand side On the right hand side, in the empty area, right click to create a Matinee – New Matinee 。

Kismet and Matinee

Connecting the trigger to animation sequences Move the mouse cursor near to the “touched” connector of “Touch” Kistmet node. The color of the connector changes to yellow. Drag the output “Touched” to “play” of Matinee Node. – It means that if the trigger is touched, Matinee sequence will start to play its corresponding sequence. Connect “Untouched” of “Touch” Kistmet node to “Reverse” of Matinee Node.

Connecting the trigger to animation sequences

MaxTriggerCount Select Trigger_0 Touch sequence – Set MaxTriggerCount as 0. Zero means infinite. If not, if the number of triggers exceeds this counter value, you cannot trigger the event anymore. Save your work.

Using Matinee to animate InterpActor Recall that we have setup InterpActor Kismet sequence is set Now, we need to animate the object “door” by using Matinee. In Matinee, we set the animation for the InterpActor

Using Matinee to animate InterpActor Open your work. In Kismet editor, double-click Matinee Open Matinee editor Matinee editor looks like a non-linear visual editing environment Make sure you select the mover before you enter Matinee editor

Using Matinee to animate InterpActor Right click “Group” (inside Matinee window, left hand side, gray area) 。从 “ Add New Group ” （新建组 ) name the group as MyFirstDoor-> Right click MyFirstDoor->Add New Movement Track ” （新建移动轨迹）。 Inside Matinee window, select the Movement track (the ones just created). Then, drag a time line to 0.0 (grey area).

Using Matinee to animate InterpActor

If you cannot see the timing information, zoom in or zoom out (Mouse Wheel) Make sure the time block is set as 0.000/5.000 。

Using Matinee to animate InterpActor After creating the group MyFirstDoor in Matinee, you can connect the InterpActor to Matinee. Proceed to the next step to set animation.

Using Matinee to animate InterpActor At time 0.0, click “Add Key” （添加关键帧） – Create a key frame. At time 1.0, click “Add Key” （添加关键帧 ) – Create the second key frame As at both time instants, the position of the door does not change. Thus, the door does not move. Note: Drag the line with black thick line and press ENTER to ad Key.

Using Matinee to animate InterpActor At movement track time 1.0 click the orange triangle, select the second key, you can see ADJUST KEY 2 Now, in UnrealEd Viewport, move the door upwards by 128 units. – Make sure, you enable Drag Grid mode. – Thus, the door opens in one second.

The motion path of the door ADJUST KEY 2

Using Matinee to animate InterpActor Save your work and try out your game level. Move close to the door area. Save your work.

Physics You are going to add Physics materials to the game level. The physics objects will react to external forces.

Physics Objects Open your work. Generic browser->Meshes, select a static mesh which will be used for physics animation. In an appropriate position in the room, – Add Actor > Add RigidBody: StaticMesh Basic_Room.Meshes – Set the static mesh as rigid body.

Physics Objects

Duplicate the static mesh. Place them in “good” positions Scale them if necessary Save your work.

Physics Material Open your work. Open Generic browser, in emptry area, right click and select “New PhysicalMaterial” （新建 物理材质） -> “New Object” （新建对象） – Package （文件包） : MyFirstGameLevel – Group （组） : Physics – Name （名称） : phy_test

Physics Material Set the followings for the physics material: – Density （密度） : 0.25 – Friction （摩擦） : 0.5 Make sure the physics material is selected in Generic browser Assign the physics material to the rigid meshes. After that, open DynamicSMActor – StaticMeshComponent 。 – Click Physics, click PhysMaterialOverride as “None” 。 – Click Use （使用） (right hand side) ， so that phy_test is assigned to them Save your work.

Physics Material Make sure you select all the rigid meshes

Physics Material Save your work Try out the game level Move to the rigid bodies and interact with them Right click on the rigid meshes You can throw the rigid meshes

Physics Material

Setting Fog Open your work. View > Browser Windows > Actor Classes Open Info-> HeightFog 。 “Add HeightFog Here” （在此添加高度雾）。 Double click HeightFog actor to show properties window: HeightFog-> Component – Set Density as

Setting Fog Move HeightFog actor to the root of the room if you like Note: you can press spacebar to circulate the widgets: translation, scaling and rotation. Save and try out the game level.

Fog

Summary A walkthrough to build a simple game level. It’s simple and intuitive.