Game Dev

Architecture

ArchViz

 User Interface
Unreal 4 Asset Library :: Architectural Vizualisation


A flexible User Interface for Arch Viz projects. There is a tutorial how to use it at the end of this page.

20 images :: Gold Coast :: Unreal 4 :: 2018


image

Features:

  • Static lighting scenarios
  • Colour Schemes (whole unit)
  • Material Swaps (individual objects)
  • Floorplan per level with teleport locations
  • Drone mode
  • Supports game controller and keyboard simultanously
  • Easy to use:

  • Self contained blueprint. Easy to use.
  • Multiple UIs possible in the same unreal project
  • image

    Flexible UI design:

  • Choose from a list of colour variations.
  • Make your own colour variations
  • Turn features on or off
  • image

    Lighting Scenarios

    image

    Colour Schemes

    image

    Individual object materials

    image

    Floor plan with teleport locations

    image

    Quit screen

    image

    Help screen

    image

    Adding the UI to your project

    This tutorial expects basic knowledge of unreal 4.

    In the world settings choose SDot_Gamemode as your game mode.

    Copy the file DefaultInput.ini from the example project into your myproject/Config/ folder. These are the input settings for controller and keyboard. if you cannot move around this file is most likely missing.

    Place the blueprint 'content/sdot/UI/BP_SDot_Locatormap' inside one of your levels. This blueprint contains all settings for the look and features of the UI. I usually place it into a separate sub-level with all the other UI related actors. The level needs to be 'always loaded'.

    image

    UI Settings

    Transform

  • Align and scale the floorplan (see next section) to the world but leave the rotation at 0,0,0. Use "Floorplan Rotation" in the next section instead.

    Floor Plan

  • 'Floorplan Rotation' will rotate the floorplan in the world.
  • 'Floorplan Opacity' can help with the appearance in the editor.

    'Floors': Add one array element per floor.

  • 'Floorplan': a black on white texture showing the layout of the floor (design blueprint).
  • 'Floor Name' is currently not used.
  • 'Height Offset' is the relative z value from the ground floor (array 0)
  • 'Location Groups' help you organize the teleport locations. They can be either floor levels or other group names like apartments or inside / outside.

  • image


    Project settings

  • 'Stream Levels': enter all streaming levels to this array.

    The UI level cannot stream and should not be added to the list. Lighting scenario levels have their own section and should also not be added here.

  • 'Shade Time': this is a delay time (sec.) to hide any visual streaming after changing lighting or colour schemes.
  • 'Screen Messages': when ticked debug messages will be visible at run time.
  • 'Capture Render Targets': weather to recapture render targets (mirrors) after switching lighting or a colour scheme.
  • 'Always Flying': disables walk mode.
  • 'Forward Collision Scale': the (half) size of the box that captures interactive objects in the players view.

    Lighting Scenario

    Lighting scenarios are levels that contain all static lighting and allow you to change for example from day to night in a couple of seconds.

    If you don't use a lighting scenario then the level that contains lighting needs to be added to the streaming list or set to 'always loaded'

  • 'Use Lighting Scenarios': weather to use this feature.
  • 'Lighting Scenario Default': will be loaded at the beginning as the default lighting.

    'Lighting Scenario': add one array element per scenario.

  • 'LS_Preview': a screenshot of your lighting or another texture (display size 400*256px)
  • 'LS_Name': the name displayed for the scenario
  • 'LS_StreamingLevel': the (exact) name of the scenario sub level.

  • image


    Colour Schemes

    A Colour Scheme will change all changeable materials in the world at once while Material Swaps only change the selected object's material.

    Both features use instances of the blueprint 'content/SDot/UI/BP_SDotAssetGroup' where you link the materials that you want to change. Read more about it further down this tutorial.

  • 'Use Colour Schemes': weather to use this feature.
  • 'Use Material Swaps': weather to use this feature.
  • 'Scheme Default: this scheme will load at the beginning.

    'Colour Scheme': add an array element per scheme.

  • 'CS_Preview': add a texture (400*400px display size)
  • 'CS_Name': name of the scheme.

    Project Info

  • 'Project Name': The name of the project displayed in the UI header.
  • 'Project Text': A punch line displayed below the project name.

    UI Logos:

  • 'Logo use': on which screens to use the logo.
  • 'Logo Material': Either modify the existing one or create a new material.

    Best to copy the existing material and then just replace the texture. You can add some features. Only the parameters named 'Colour' and 'Background' will change with the UI colours.

    The Office Logo will be displayed in the footer next to the Client Logo while the Project Logo will be displayed in the header next to the Project Name.

  • image


    UI Design

  • 'UIColour Set Used': the active colour set for the UI.

    'UIColour Set': each array element represents a UI Colour set. You can use an existing one or add new sets. (right click on the array number to copy or paste an array)

  • 'TextColour': foreground colour in the main (center) part of the UI.
  • 'FocusColour': element in game controller focus.
  • 'BackgroundColour': background of the main UI area. Alpha = Transparency.
  • 'FrameTextColour': foreground colour of header and footer.
  • 'FrameColour': background colour in header and footer. Alpha = Transparency.
  • 'BorderColour': line colour between UI elements.

    'Icons': all icons are listed here.

    You can replace an icon with your own design. It needs to be black on white (no alpha) and square. This is purely cosmetic. Do not remove, add or change the order of the icons here.

  • image

    UI Supporting Blueprint Actors

    Place a player start into your persistent level. Place a simple blocking volume under your player start aligning with the floor. This prevents the player falling through the floor when you stream levels.

    The other actors are explained below.

  • BP_SDotPoint: Teleport location
  • BP_SDotAssetGroup: swaps materials
  • BP_SDotLightMarker: turns emissive on or off

  • image

    BP_SDotAssetGroup

    An 'Asset group' is a group of meshes that should swap materials together. Let's say a couch set and the cushions on the couch.

  • 'Asset Group Name': short name for the group.
  • This name will show up in the UI when the individual material swap feature is turned on.

    Asset Material Group: Array

    Add one array element per asset group. Asset groups need to share

  • the same material(s)
  • the same material id

    You can have assets with different materials or material id's in this actor but you need to put them into separate array elements.

  • 'Array Name': note for you only

    'Asset' array:

    Add an array element for each asset. Use the eye-dropper to "pick" the asset from the level. The assets don't have to be in the same level or the same level as the UI actor.

  • 'Material ID': the material id of the material that should swap

    'Material' array:

    the list of materials the user can swap to. If "Colour Schemes" are enabled the first number of arrays will represent the schemes: material [0] will be used for colour scheme [0] and so on.

    Any additional materials will only show up in the "Individual Material Swap" feature. There is a limit of 12 materials you can use per array.

    'Is lit for scenario' array:

    Simply tick the box for each lighting scenario id you want emissive to be on. Your material needs to be set up for this feature (see below).


    Colour Scheme Preview

    Preview Mesh: Choose a mesh to be used as preview. This mesh will use the material from array element [0]. Leave the default cube for tiling materials (like wallpaper or floor boards)

  • 'Preview Rotation': adjust the rotation of the mesh if necessary
  • 'Preview Mesh Angle': adjust the viewing angle between top and front view.

  • image

    BP_SDotLightMarker

    This is a simplified version of the SDotAssetGroup blueprint. It 'turns on' the emissive of lights but doesn't change any materials.

    It requires a specific setup in the material to enable this feature:

    image

    Emissive Material for Lights

    To be able to 'switch' lights on or off with changing materials you need to have this little node setup in the light material.

    Unreal doesn't support static material switches in run time. But you can use this simple work-around using an 'IF' node and a scalar parameter. If the parameter named 'LightIsOn' is set to zero the emissive will be zero. Any positive value will enable the emissive.

    The UI actor (light switcher or asset group) will change the parameter named 'LightIsOn' in the currently used material and set it to '1' or '0' depending on the 'scenario tick box' being ticked or not.

    image

    BP_SDotAssetMarker (legacy)

    This is a legacy actor that has been replaced by the AssetGroup and the LightMarker.

    It can be used to 'overwrite' materials depending on the current active lighting scenario. It is like having only one array of the BP_SDotAssetGroup but it has an overwrite feature for changing materials per lighting scenario.

    You can use this blueprint actor if you have an emissive material that doesn't have the above mentioned 'LightIsOn' parameter node set up.

    Add static meshes and materials the same way as for the asset group actor.

    Material Overwrite array:

  • 'Lighting Scenario ID': the Lighting Scenario that should have overwrite materials

    'Material ID' array:

    The full list of materials. You need to add one material per Colour Scheme even if they are all the same. In the example image the ceiling light needs to have every material twice because there are 2 colour schemes used in the scene.

  • image

    BP_SDotPoint

    the SDot point actor adds a location to the list of teleport locations in the UI. It has only two parameters:

  • 'SDot Location Name': This name will show up in the list
  • 'SDot Loc Group Name': The ID of the group

    Location groups are set up in the SDotLocatorMap blueprint. See above.

  • image

    BP_SDotRenderStage

    This actor will render preview thumbs on the fly for the 'Swap Materials' feature. Place the actor into your level if you are using this feature.

    The render stage has no settings. it will render up to 12 preview images using the render to texture feature.

    Place it somewhere far enough away from the playable area. It contains dynamic lights that would otherwise interfere with your level lighting. Under the scene is a good place.

    Top of page