Skip to content

Commit c4e8acc

Browse files
committed
doc: Update part 3.
1 parent 5b37f46 commit c4e8acc

18 files changed

+33
-28
lines changed

VisualPinball.Unity/Documentation~/creators-guide/tutorials/realistic-backglass/1-prepare-artwork.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
uid: tutorial_backglass_1
3-
title: Realistic Looking Backglass - Create Artwork
4-
description: How to edit art in Photoshop
3+
title: Realistic Looking Backglass - Prepare Artwork
4+
description: How to prepare the backglass artwork in Photoshop
55
---
66

77
# Finding Artwork
@@ -10,7 +10,7 @@ Perhaps the most challenging aspect to making a working backglass is finding goo
1010

1111
## Create the Color Map
1212

13-
Once you have your artwork secured save this as a PNG file. We'll name it `albedo.png` since it'll become our diffuse, or color map. Make sure that the areas for the score reels and credit reel set as transparent. Also be sure to size the backglass image to the size of the original backglass, in the case of Volley this is 19 ¾" x 22".
13+
Once you have your artwork secured save this as a PNG file. We'll name it `Backglass Albedo.png` since it'll become our diffuse, or color map. Make sure that the areas for the score reels and credit reel set as transparent. Also be sure to size the backglass image to the size of the original backglass, in the case of Volley this is 19 ¾" x 22".
1414

1515
![Color Edit](ps-albedo.png)
1616

@@ -24,4 +24,4 @@ Elements that aren't visible are often scores that aren't part of the actual art
2424

2525
![Thickness Mask Edit](ps-thickness.png)
2626

27-
Save this as a grayscale PNG file without transparency named `thickness.png`. You're now ready to [create a backglass mesh](xref:tutorial_backglass_2).
27+
Save this as a grayscale PNG file without transparency named `Backglass Thickness.png`. You're now ready to [create a backglass mesh](xref:tutorial_backglass_2).

VisualPinball.Unity/Documentation~/creators-guide/tutorials/realistic-backglass/2-create-mesh.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
uid: tutorial_backglass_2
33
title: Realistic Looking Backglass - Create Mesh
4-
description: How to create a Backglass mesh in Blender
4+
description: How to create a backglass mesh in Blender
55
---
66

77
# Create a Backglass Mesh
@@ -30,8 +30,8 @@ In order to clear the unused faces, hit `CTRL+I`, hover over the left side, hit
3030

3131
## Clean Up and Export
3232

33-
Go back to the *Layout* workspace. Select *Material Properties*, click on *Material* and on the `-` button to remove it.
33+
Go back to the *Layout* workspace. Select *Material Properties*, click on *Material* and on the `-` button to remove it. Hit `F2` and rename the `Cube` to `Backglass`.
3434

35-
Then, with the object still selected, choose *File -> Export -> FBX*. Check *Selected Objects* only, and name it `backglass.fbx`.
35+
Then, with the object still selected, choose *File -> Export -> FBX*. Check *Selected Objects* only, and name it `Backglass.fbx`.
3636

3737
You're now ready to [import into Unity](xref:tutorial_backglass_3).

VisualPinball.Unity/Documentation~/creators-guide/tutorials/realistic-backglass/3-import-into-unity.md

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,43 +6,48 @@ description: How setup your backglass in Unity
66

77
# Import Into Unity
88

9-
## Step 1: Import the FBX
9+
## Import Your Assets
1010

11-
Open your scene in Unity and navigate to where your table stores its Materials, Meshes and textures. Drag and drop your backglass mesh into "Meshes" and your images into "Textures"
11+
Open your scene in Unity and copy the `Backglass.fbx` into your models folder, and `Backglass Albedo.png` as well as `Backglass Thickness.png` into the textures folder. You can do that by dragging the files from the file explorer into Unity's *Project* window.
1212

1313
> [!note]
14-
> We recommend storing models at `Assets/<Table Name>/Models`, and texture at `Assets/<Table Name>/Textures`. In this example the Tropic Fun backglass is being created in another table for demonstrative purposes.
14+
> We recommend storing models at `Assets/<Table Name>/Models`, textures at `Assets/<Table Name>/Textures`, and materials at `Assets/<Table Name>/Materials`.
1515
16-
![Navigate to Table Folders](BringMeshAndpngsIntoUnity.jpg)
16+
![Copy assets into your Unity project](unity-imported.jpg)
1717

18-
## Step 2: Add a Mesh Filter
18+
## Add the Backglass to the Scene
1919

20-
In the inspector window, click on Add Component and find Mesh Filter. Locate your exported FBX in the Project window, expand it, and drag the Cube mesh into the mesh filter's Mesh slot.
20+
In the *Project* window, select the *Backglass* prefab (your FBX). In the inspector, uncheck *Convert Units* and hit *Apply*.
2121

22-
![Add Mesh Filter](ChooseCubeFromtfAsMesh.jpg)
22+
Drag the backglass it into your scene view.
2323

24-
## Step 2: Add a Mesh Renderer
24+
![In scene, but too large](unity-in-scene-wrong-size.png)
2525

26-
In the inspector window, click on Add Component and find Mesh Renderer and add this to the inspector window.
26+
Ouch, that's too large and not oriented correctly. Let's fix that. In the inspector, set *Rotation* to `-90/180/90` and the scale to `1` on all axes. Then use the *Move Tool* in the scene view to position it correctly.
2727

28-
![Add Mesh Renderer](AddMeshFilterAndMeshRenderer.jpg)
28+
![Correctly positioned in the scene](unity-in-scene-correct-size.png)
2929

30-
## Step 4: Add a Translite Material
30+
## Create the Material
3131

32-
Navigate to the "Translite" material and drag and drop this into the "Materials Element" box of the Mesh Renderer.
32+
In the *Project* window, navigate to your `Materials` folder, right click, select *Create -> Material*, and name the new material `Backglass`. Set the following properties:
3333

34-
![Add Translite Material](ChooseTranslightAsTheMaterial.jpg)
34+
- *Material Type* to *Translucent*
35+
- *Base Map* to `Backglass Albedo` (use the small target icon to search)
36+
- *Smoothness* to something high like `0.97`
37+
- *Thickness Map* to `Backglass Thickness`
38+
- For the *Diffusion Profile*, use the *Project* window and navigate to `Packages/VisualPinball.Unity.Hdrp/Assets/Settings` and drag and drop `Translite` into the slot (it cannot be searched after because it's part of an external package).
3539

36-
## Step 5: Set up the Masks
3740

38-
Under the Surface Inputs of the Translite material drag and drop the color backglass png into the "Base Map" slot and the black & white thickness map png into the "Thickness Map" slot.
41+
![Backglass material](unity-material.png)
3942

40-
![Set Up the Masks](SetUpMasks.jpg)
43+
Then, in the *Project* window, navigate back to your materials, drag and drop the `Backglass` material onto the backglass in your 3D view, and...
4144

42-
## Step 6: Hooray You are Done!
45+
![Material applied](unity-material-applied.png)
4346

44-
Congratulations! You have now made a backglass that will transmit light through the color overlay and block light in any of the masked area. You can test it out by putting a light source behind the backglass and move it around.
47+
To test the thickness mask, place a light source behind the backglass and move it around:
4548

46-
![Finished Backglass](BGDone.jpg)
4749

48-
If you came across an error or have a better way of achieving this, don't hesitate to click on the *Improve this Doc* button on the top right side ([documentation](https://github.com/freezy/VisualPinball.Engine/wiki/Documentation)).
50+
![Moving light](unity-backglass-light-source.webp)
51+
52+
53+
Congratulations! You have now made a backglass that will transmit light through the color overlay and block light in any of the masked area.
-290 KB
Binary file not shown.
-401 KB
Binary file not shown.
-85.9 KB
Binary file not shown.
-138 KB
Binary file not shown.
-167 KB
Binary file not shown.
-476 KB
Binary file not shown.
-29.1 MB
Binary file not shown.

0 commit comments

Comments
 (0)