Big Trouble In Little Blender – 1.2 Initial UV Unwrapping Notes

blender-socket

Notes made during my first attempt a UV Editing on Blender.

blender-uvunwrap-alt

Select UV editing from the Screen Layout pulldown at the top of the window – This will show uv window on left & edit window on the right.

 

Setup Environment:

In edit window
Select Limit Selection To Visible icon in bottom left (right of faces icon, two squares with squares for corners).
Select & drag the add window lines in the top right of the user perspective window – & pull left – this will create a new sub window…
…In this window, select the Editor Type pull-down (bottom left – cube with up & down arrow) & select Outliner.
Resize windows as required.
Ensure – show texture is active – click Viewport Shading pulldown at bottom thee window (circle icon) & select Texture.

In UV window:
On the right hand side of the window – select & drag the Grease Pencil window to the right (until it is removed from the screen).
On the left hand side – select & pull the plus tab – This will initially just show grease pencil again, however once faces have UV settings applied, it will display translate/rotate/scale buttons.
Click the UV Selection and display mode: Island icon – this is an icon with two rectangles – right one is orange – may need to resize window to make this visible.

 

Edit UV’s:

In edit window:
Change to edit mode – Using the Mode Select pull down menu at the bottom of the screen
Select the Selection Type – Face (icon of cube with one face selected).
Select everything (press A).
From the menu’s at the bottom of the edit window: Mesh->UV Unwrap->[select unwrap method here] – unwraps model for UV painting.

In UV window:
ALT-O – Opens file explorer to add texture.
Add texture – this will apply the same texture to all faces – Otherwise the texture will need to be reapplied for each group.

In edit window – For individual faces/groups of faces:
Change to edit mode – from Mode Select pull down menu at the bottom of the screen
Choose Selection Type – Face (icon of cube with one face selected).
Use right mouse button to select individual faces – ctrl + right mouse button multiple faces
From the menu’s at the bottom of the edit window: Mesh->UV Unwrap->[select unwrap method here] – this will unwrap the selected faces.

In UV window:
Select everything (press A) or right mouse click for individual faces.
Use translate/rotate/scale in the Mesh Tools column to move and position faces on texture
right mouse button to select faces.
– pressing translate/rotate/scale will select their faces (e.g. after pressing scale, moving the mouse will rescale the selected faces without needing to press the left or right mouse button)
– once complete click left mouse button to place/apply.

 


 

Next post: 1.3 Initial Animation Notes

Last post: 1.1 Initial Modeling Notes

Contents page.

 


 

Big Trouble In Little Blender – 1.1 Initial Modeling Notes

blender-socket

 

My last attempts at 3D modelling were for the XNA games I wrote – 2-3 years ago.
Back then I was using the cut-down version of SoftImage that was offered free to XNA subscribers.

I was never that skilled & what I remember is pretty patchy – So moving onto Blender has provided a steep learning curve. Fortunately the models I’m putting together a pretty simple; allowing me to learn as I build.

I’ve made some notes from my first attempt (which I’ve copied below).
These probably won’t be useful for anyone other than myself. I’m planning on building models as required, rather than in one lump – Which means I’ll probably forget everything in the mean time – To avoid that as much as possible, I’m hoping to use this as a reference point – Allowing me to learn new tools & features of blender; rather than constantly relearning the same tools.

Apologies for any obvious mistakes or omissions – These notes were made as I was learning, and not necessarily as I had learnt.

 

blender-edit

 

Useful site: Blender Reference Manual

Use default view.

Currently using the ‘Blender Game‘ rendering engine.

Mesh Create – On the left, create tab to add meshes
Mesh Tools – On the left, Tools tab to manipulate – translate, rotate, scale etc…

Outlier
On the top of the right column
This is the scene tree – showing models, animations, etc.

Mesh Values
To the left of the outlier, there should be a ‘+‘ tab
Pull this out to show specific values for mesh translation, rotation, scale, etc..
These values are only visible in ‘Edit Mode‘ (see below)
In the main modeling window:

Mouse Buttons
Left mouse button moves the 3D cursor – try not to use the left mouse button
Middle mouse button (pressed & move) – rotates the scene
Middle mouse button (scroll wheel) – zoom in/out
Right mouse button selects (e.g click on a mesh to pick up and move the mesh)

Mesh view Shortcuts
Note – to rotate around a specific object/mesh – press ‘.‘ (full stop on the number pad)
Ensure NUMBLOCK is on.

front/left/top windows are not automatically visible.
To save screen real estate – shortcuts for the main window are:
NUMBLOCK ON &
1 = Front view
7 = Top view
3 = Side view
0 = Camera view

Mode Select
At the bottom of the screen, there is a pull down menu.
When modelling there are two main modes;
Object mode: moves & positions meshes
Edit mode: edit faces/vertices/edges etc…

Selection Type –
With ‘edit mode‘ selected, at the bottom of the screen there are three icons
cube with a small orange dot – select this to edive vertices/nodes
cube with orange line – select this to edit edges
cube with one face orange – select this to edit faces/polygons

Once selected
right click to select specific edge, vertices,face
shift-right click to select multipoles edges, vertices,face, etc.
Useful Shortcuts – Press;
A – Select/Deselect everything
Z – Toggle wireframe on/off
CTRL-I – Inverse selection
K – knife tool, Used to add edges.
(use left mouse button to add nodes)
SPACE to save
GG (G twice) – Reposition a vertex.
E – Extends edge, vertices, face (whichever is selected when E is pressed)
W – With an edge, vertices, face selected this opens the ‘Specials’ menu – subdivides face/bevel, etc…

 


 

Next post: 1.2 Initial UV Unwrapping Notes

Contents page.

 


 

Adventures in Unity – 2.6 Pause & Resume

Official_unity_logo

 

Whenever a bonus is collected a message box is displayed and the game pauses momentarily.

It’s not a function of the game I particularly like; and I probably wouldn’t use it in the final release – But, since the point of this project is to try things out & help me learn Unity, I figured I’d try and replicate it anyway.

 

Bounder3b

 

When displaying the message box, the entire game should pause – including problematic functions like particles/physics/etc.. things controlled by the Unity engine.

Google found me a solution pretty quickly – Time.timeScale

To freeze the game set Time.timeScale = 0 – To resume the game set Time.timeScale = 1.

Time.timeScale is a float variable.
Every loop, Unity multiplies Time.deltaTime against Time.timeScale.
This determines the speed of the game – For anything that references Time.deltaTime – Any update that doesn’t reference Time.deltaTime will be unaffected (Though you really should be using Time.deltaTime).

It’s usually used to pause games & tends to be set with values 0 or 1.
Though it can be used to dynamically slow/speed up gameplay – values higher than 1 may legally require that yakety sax be played at all times.

 


 

With everything paused; the next problem was how to animate the message box – (fade in, display for x seconds, fade out).

I can run the animation without using Time.DeltaTime – But then I won’t receive any of the benefits.

Another quick google search identified the solution – A homebrew Time.deltaTime using replacement using Time.realtimeSinceStartup.

Unity documentation explains ‘realtimeSinceStartup returns the time since startup, not affected by Time.timeScale. realtimeSinceStartup also keeps increasing while the player is paused (in the background). Using realtimeSinceStartup is useful when you want to pause the game by setting Time.timeScale to zero, but still want to be able to measure time somehow.

I use The replacement Time.deltaTime as a timer;

  IEnumerator PauseTimer(float delay)
  {

     float start = Time.realtimeSinceStartup;
     timerComplete = false;

     while (Time.realtimeSinceStartup < start + delay)
     {
          yield return null;
     }

     timerComplete = true;

}

 

Bounder2a.gif

 


 

Last post: 2.5b Palette Shift

Contents page.

 


 

Adventures in Unity – 2.5b Palette Shift

Official_unity_logo

 

For the C64 version of Bounder, the text colour of the start and end tiles bounces between black and white.

Start-2a2

Goal-2a2

 

I wanted to replicate this in my version – But I wasn’t sure how.

I eventually worked through six potential implementations;

  • Colour Lerp.
  • HBSC
  • Palette Swap
  • Quad Cut-Out
  • Shader
  • Texture Sheet Animation.

 

The first three implementations, were covered in the last post.

  • Colour Lerp.
  • HBSC
  • Palette Swap

This post will expand on the second half;

  • Quad Cut-Out
  • Shader
  • Texture Sheet Animation.

 


 

4. Quad Cut-Out

This method uses two textures – One ‘base’ texture displays the standard start/goal tile texture – The other ‘top’ texture; is a copy of the top face of the tile texture; the face showing the start/goal banner image & text – with everything except the letters (start & goal) removed (transparent instead).

 

QuadTexture2a
Left image shows the base tile texture.
Right image shows the quad texture for the same tile.

 

The base texture is used to draw the tile model. The top texture is applied to a quad – a child of the tile – which is positioned just over the top of the base tile.

The colour lerp code is then applied to the the top texture – ensuring only the text changes colour while the background remains the same.

How this works…

First a quad (this will be created locally) and a material holding the quads texture (this will be passed as a reference in the Unity editor) are defined as global variables;

GameObject quad;
public Material material1;

In start, the quad is created & configured.

if (type == Type.Enter || type == Type.Exit)
{

     quad = GameObject.CreatePrimitive(PrimitiveType.Quad);
     rend = quad.GetComponent();
     rend.material = material1;
     quad.transform.parent = transform;
 
      quad.transform.Rotate(90, 0, 0);

}

Since this method uses the colour lerp code, we need somewhere to hold the current colour.

public Color lerpedColor = Color.white;

Then every loop, the position of the quad is updated (to keep up with the tile as it scrolls down the screen). The next colour for the banner flash is calculated and assigned to the quads texture.

quad.transform.position = new Vector3(transform.position.x, transform.position.y + 0.275f, transform.position.z);
lerpedColor = Color.Lerp(Color.white, Color.black, Mathf.PingPong(Time.time, 1));
quad.GetComponent().material.color = lerpedColor;

This works well, but it does require a quad to be created (another draw call per loop), as well as an extra texture (more work & extra complications)  – Neither is a big issue, but it’s more complications than I think should be required.

I think the result looks fine, though I suspect it would look much better if I’d removed the text from the base texture – As it is, the base text seems to interfere – giving a slight glow – behind the flashing letters of the quads texture.

QuadCutout-1b

 


 

5. Shader

The original version of the shader, I  checked the colour of the current _MainTex pixel – & changed any which were white. This worked horribly – It seems that before I got to the texture it has been already modified somewhere along the pipeline.

2016-08-10-1945-00---adaptive2

Instead I take a more long-winded approach.

How this works…

Alongside the auto-generated input variables (_Color, _MainTex, _Glossiness & _Metallic – all generated by Unity when creating the shader).

The custom input variables are added;
_Color1 – Used to set the start colour in the loop (white)
_Color2 – Used to set the start colour in the loop (black)
_CutOutTex – From the Quad Cut-Out method, this is a copy of _MainTex, but with everything except the letters (start & goal) removed (transparent instead).

 

ShaderTexture2a
Left image shows _MainTex.
Right side shows _CutOutTex

In the surf method, after the colour of the _MainTex is sampled, the equivalent colour from _CutOutTex is identified.

If the alpha values of the sampled _CutOutTex colour is > 0 (not transparent) – Then this is a letter (in the start/goal banner) which needs to be colour shifted – The current colour shift colour is calculated and drawn to the screen.

If the alpha values from the _CutOutTex colour is <= 0 (transparent) – Then this is not part of the banner text and the sample from _MainTex (the default banner texture) is drawn..

Shader "Custom/NewSurfaceShader" {
     Properties {
          _Color ("Color", Color) = (1,1,1,1)
          _MainTex ("Albedo (RGB)", 2D) = "white" {}
          _Glossiness ("Smoothness", Range(0,1)) = 0.5
          _Metallic ("Metallic", Range(0,1)) = 0.0
          _CutOutTex("CutOut", 2D) = "white" { }
          _Color1("Color1", Color) = (1.0, 0.0, 0.0, 1.0)
          _Color2("Color2", Color) = (0.0, 0.0, 1.0, 1.0)
          _Speed("Speed", float) = 0.2
     }

     SubShader {
          Tags { "RenderType"="Opaque" }
          LOD 200
		
          CGPROGRAM
          // Physically based Standard lighting model, and enable shadows on all light types
          #pragma surface surf Standard fullforwardshadows

          // Use shader model 3.0 target, to get nicer looking lighting
          #pragma target 3.0

          sampler2D _MainTex;

          struct Input {
               float2 uv_MainTex;
          };

          half _Glossiness;
          half _Metallic;
          fixed4 _Color;
          sampler2D _CutOutTex;
          uniform fixed4 _Color1;
          uniform fixed4 _Color2;
          uniform float  _Speed;

          void surf (Input IN, inout SurfaceOutputStandard o) {
          // Albedo comes from a texture tinted by color
          fixed4 c = tex2D (_MainTex, IN.uv_MainTex);
          fixed4 c2 = tex2D(_CutOutTex, IN.uv_MainTex);

          if (c2.a > 0) {
               fixed4 c3 = lerp(_Color1, _Color2, abs(fmod(_Time.a * _Speed, 2.0) - 1.0));

               //if (c.r > 0.99 && c.g > 0.99)
                    c = (c * c3) * _Color;
               }
               else
                    c = c * _Color;

               o.Albedo = c.rgb;
               // Metallic and smoothness come from slider variables
               o.Metallic = _Metallic;
               o.Smoothness = _Glossiness;
               o.Alpha = c.a;
          }
          ENDCG
     }

     FallBack "Diffuse"
}

 

I haven’t written anything for shaders in a number of years – last time was HLSL for XNA. So the learning curve here was for both figuring out nity & figuring out Unity’s shaders. I’m not particularly happy with the code I’ve put together – I’m very confident there ere are far more succinct ways to achieve the same result – But the the animation looks okay.

 

Shader2-1b

 


 

6. Texture Sheet Animation.

This is the method I’ve decided to use – It works almost like a traditional animation/flip book – using a series of images, each slightly different from the next – so when they are swapped a speed they appear to show movement.

In this case, the models texture is split into a grid – Each cell of the grid contains a frame of the animation (in this case 8 frames are used).
The model is drawn referencing one cell of the grid\one frame of the animation (UV mapping is explained badly in my last post).
Code (either a Unity script or shader) is used as a timer – to determine when to change to the next frame.

 

withframesLarge
Animation texture – With individual frames/cells highlighted.

 

For the code, I referenced Unity3D wiki – Animating Tiled texture
The page offers six code examples – one java/five C#

I had the most success using AnimateTiledTexture & AnimateSpriteSheet classes
Setting with the AnimateTiledTexture code because it was the easiest for me to tweak in order for it to animate the way I needed…
The goal/start texture have frames from white to black – I use ping-pong setup to run backwards and forward through the animation frames – from white to black, then in reverse from black to white – halving the final texture size.

 

With the code in place I needed to configure the assets – This was much harder to setup than expected – which, for a modern 3D gaming environment was a little disappointing – setting up was more guess work than design – I found it is far easier to setup an animated texture in (the ten year old) XNA.

With first attempt – I made the mistake of using a non-power or two sized texture – This resulted in animated tiles which were blurry, and jitter – jumping around as it forced through each frame – It looked pretty horrible

2016-08-10-2012-47---adaptive2

The image quality improved after resizing the texture to a power of two
and (in the textures Material settings) defining the ‘Tiling’ values to match the frame size
(8 frames in total – 4 columns, 2 rows – Tiling X = 0.25 Y = 0.5 )

This produced a noticeably sharper – non-jittery texture – but displayed a lot of artifacts.
2016-08-10-2017-57---adaptive2
I tried changing the text import settings to advanced; turning off mipmaps, mapping, etc… anything that could be turned off was turnd off – setting the wrap mode to clamp, filter to point – none of which had any effect.

What ultimatly worked for me was setting the texture type to cursor.
I have no idea why cursor settings resolve the issue – or if the next update will break it & put me back to square one.
But for now I have nice, clean, sharp animated start/goals tiles

2016-08-12-2007-58---2

 


 

Next post: 2.6 Pause & Resume

Last post: 2.4 Edge Padding

Contents page.