Backglass Tutorial First Draft

Author: Scottacus64

VisualPinball.Unity/Documentation~/creators-guide/toc.yml

@@ -49,7 +49,7 @@
           href: xref:tutorial_playfield_3b
         - name: Import Into Unity
           href: xref:tutorial_playfield_4
-  
+
     - name: Create Realistic Looking Plastics
       href: xref:tutorial_plastics
       items:
@@ -62,6 +62,17 @@
         - name: Import Into Unity
           href: xref:tutorial_plastics_4
 
+    - name: Create a Backglass
+      href: xref:tutorial_backglass
+      items:
+        - name: Prepare Artwork
+          href: xref:tutorial_backglass_1
+        - name: Create Mesh
+          href: xref:tutorial_backglass_2
+        - name: Import into Unity
+          href: xref:tutorial_backglass_3
+
+
 - name: Manual
   href: manual/manual.md
   items:

VisualPinball.Unity/Documentation~/creators-guide/tutorials/index.md

@@ -7,4 +7,5 @@ description: Visual Pinball for Unity - Tutorials
 # Tutorials
 
 - [Create a Playfield](xref:tutorial_playfield)
-- [Create Realistic Looking Plastics](xref:tutorial_plastics)
+- [Create Realistic Looking Plastics](xref:tutorial_plastics)
+- [Create a Backglass](xref:tutorial_backglass)

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

@@ -0,0 +1,23 @@
+---
+uid: tutorial_backglass_1
+title: Realistic Looking Backglass - Create Artwork
+description: How to edit art in Photoshop
+---
+
+# Finding Artwork
+
+Perhaps the most challenging aspect to making a working backglass is finding good artwork.  The best possible art is a direct scan of the backglass but that is not always possible.  There are backglass images that can be found online but it takes a fair amount of time to clean these up and remove any artifact from them.
+
+# Editing the Color Layer
+
+Once you have your artwork secured save the color layer as a png file with the areas for the score reels and credit reel set as transparent.  Be sure to size the backglass image to the size of the original backlgass.
+
+![Color Edit](FullColorBG.jpg)
+
+# Editing the Thickness Mask layer
+
+To block the passage of light through the backglass we need to make a thickness map layer.  This layer consists of pure white (255,255,255) for the areas that are opaque and pure black (0,0,0) for the areas that are transparent.  If you have a scan of the backglass this is easy to set up.  If you don't have a scan then you'll have to find a font that matches the original and layout all of the mask artwork.  Once you are done, save this as a png as well
+
+![Thickness Mask Edit](ThicknessMap.jpg)
+
+You're now ready to [create the meshes](xref:tutorial_backglass_2).

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

@@ -0,0 +1,41 @@
+---
+uid: tutorial_backglass_2
+title: Realistic Looking Backglass - Create Mesh
+description: How to create a Backglass mesh in Blender
+---
+
+# Create Mesh
+
+We're now going to import edit a cube and unwrap it to fit the backglass artwork.
+
+## Step 1: Edit the Cube
+
+Open Blender, choose File/New/General and select the cube that is native to this scene while in Object Mode.  Under the Scene setting in the lower right change the units to "Imperial" and set the length to "Inches".  At the upper right of the window pull out the menu there and type in the exact dimensions of your backglass.
+
+![Editing the Cube](BlenderObject.jpg)
+
+## Step 2: Scale the Backglass
+
+Once you've set the dimensions of the backglass zoom in on it and while still in "Object Mode" select Object/Apply/Scale.  This will set the scale to 1:1:1 which will lock in your edit of the backglass.
+
+![Set the Scale](BlenderScale.jpg)
+
+## Step 3: Import the artwork
+
+To start the process of unwrapping the object that we just made we first must bring in the artwork that we created in "Prepare Artwork".  To do that select "UV Editing" and in the left screen choose Image/Open and navigate to the Color Artwork that you made in Step 1.
+
+![Bring in the Artwork](BlenderBringInImage.jpg)
+
+## Step 4: Unwrap the Front surface
+
+To be able to use the object that you've just created we need to create a UV map for it.  For this to work we only need to "unwrap" the front face of the backglass and make sure that it fits the artwork that we created earlier. In the "Edit Mode" window on the right, press Number Pad 5 and Number Pad 7 to switch to an orthographic top-down view of the backglass.  Choose the "faces" option at the top right of this screen and select the front face of the backglass.  In the top Menu of the right screen choose UV/Project From View (Bounds).  You should see an unwrapped face appear in the left screen that lines up with the artwork that you made.  If the edges don't line up, choose "edges" in the left screen, click on the edge that needs to be moved and hit "G" while hovering over that edge.  This will select the edge and allow you to move it to the correct location.  Note that you do not need to "click" to move the edge.
+
+![Unwrap the Backglass Front Face](ProjectFromView.jpg)
+
+## Step 5: Export from Blender
+
+The hard work is now done!  Choose File/Export and save the file as an fbx.
+
+![Export the Backglass](BlenderExportfbx.jpg)
+
+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

@@ -0,0 +1,46 @@
+---
+uid: tutorial_backglass_3
+title: Realistic backglass - Import Into Unity
+description: How setup your backglass in Unity
+---
+
+# Import Into Unity
+
+## Step 1: Import the FBX
+
+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"
+
+> [!note]
+> 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.
+
+![Navigate to Table Folders](BringMeshAndpngsIntoUnity.jpg)
+
+## Step 2: Add a Mesh Filter
+
+In the Hierarchy window add a new element by right clicking and choosing "create empty". In this case we named it "Backglass".  Right click in the "Inspector" window and search for "Mesh Filter" and add this to the inspector window.  With the Mesh Filter highlighted search for the Blender backglass mesh that you made.  Grab the "cube" mesh from this and drag-drop it into the "mesh" slot in the mesh filter.   If the cube cannot be moved, select the top level (in this case TropicFun BG), right click and select "unpack".
+
+![Add Mesh Filter](ChooseCubeFromtfAsMesh.jpg)
+
+## Step 2: Add a Mesh Renderer
+
+Next right click in the "Inspector" window, search for "Mesh Renderer" and add this to the inspector window.
+
+![Add Mesh Renderer](AddMeshFilterAndMeshRenderer.jpg)
+
+## Step 4: Add a Translite Material
+
+Navigate to the "Translite" material and drag and drop this into the "Materials Element" box of the Mesh Renderer.
+
+![Add Translite Material](ChooseTranslightAsTheMaterial.jpg)
+
+## Step 5: Set up the Masks
+
+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.
+
+## Step 6: Hooray You are Done!
+
+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.
+
+![Finished Backglass](SetUpMasks.jpg)
+
+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)).