Unity Tutorial: Easy Mesh Combining For Highlights

Guess what devs? After months of head scratching I've put together a quick and dirty way to both
a) Combine meshes of a Unity-build Prefab into a single mesh and
b) Outline the damn thing OnMouseOver like many games in the past have done.

Best part? I did it out of found script pieces and didn't have to ask anyone directly! :D

____________________________________________________________

The Beginner's Problem:

Whether you're in this post for Performance or Graphics, you've probably determined that you've got way too many meshes per-object. Why do we have these problems? Lack of expertise being shared around effectively.

One thing I've noticed is this Mesh issue is something that mostly afflicts beginner to intermediate devs. If you're really hardcore you've been making your models in Blender or Maya from the start and know a bunch of Mesh / Shader / Camera based tricks to optimize both appearance and performance.

When I've seen the beginner Devs ask things like "how do I highlight the whole prefab like in diablo?" the most common answer is "Why don't you just make your whole model in Blender/Maya and import it?"
Sorry guys, but this is NOT REALLY HELPFUL for those of us who have most of our game models worked out in Unity basic shapes and myriad imported meshes.

____________________________________________________________

Mesh Combining

Your Prefab:

• The Parent Object (one everything else is inside) MUST BE EMPTY 
• No mesh
• scripts OK
• Take out all mesh-ed objects you don't want included in the single mesh
• ex: things you want to move separately from the mesh
• Place at (0,0,0) (you can write a compensation so this isn't necessary, but I didn't bother)

The Theory:

What we're doing here follows some basic steps

1. Make an array of all meshes inside your Prefab
2. Make a new Mesh that will be placed on the Parent Object
3. Combine array of meshes into single mesh on Parent Object
4. Save mesh you've created to a folder (this part took extra research)

The Steps:

How to Implement

1. Make sure Line 36 directs to a real folder you have
1. Mine is directed to the folder Experimental under Assets
2. Place Prefab at 0,0,0
3. Place script on empty Parent Object
1. this will add Mesh Filter and Mesh Renderer assets
4. Press Play
5. Pres Play again to stop. The Mesh should be saved in the designated folder
6. At this point you can do whatever you want with the mesh (or make it again by hitting Play again) In a following post I'll be using this Mesh to create a building outline.

____________________________________________________________

The Script

For Copying

using UnityEngine;
using System.Collections;
using UnityEditor;

[RequireComponent(typeof(MeshFilter))]
[RequireComponent(typeof(MeshRenderer))]

public class CombineMeshes : MonoBehaviour {

GameObject highlight;

void Start() {
MeshFilter[] meshFilters = GetComponentsInChildren<MeshFilter>();
CombineInstance[] combine = new CombineInstance[meshFilters.Length];
int i = 0;
while (i < meshFilters.Length) {
Debug.Log (meshFilters[i].gameObject.transform.name);
combine[i].mesh = meshFilters[i].sharedMesh;
combine[i].transform = meshFilters[i].transform.localToWorldMatrix;
//meshFilters[i].gameObject.active = false;
i++;
}



transform.GetComponent<MeshFilter>().mesh = new Mesh();
transform.GetComponent<MeshFilter>().mesh.CombineMeshes(combine);
transform.gameObject.active = true;

saveMesh ();
}

void saveMesh() {
Debug.Log ("Saving Mesh?");
Mesh m1 = transform.GetComponent<MeshFilter>().mesh;
AssetDatabase.CreateAsset(m1, "Assets/Play Assets/Experimental/" + transform.name + ".asset"); // saves to "assets/"
AssetDatabase.SaveAssets();
}
}

____________________________________________________________

Why Not Blender / Maya?

Why not just re-make every asset of your game carefully in the detailed mesh programs? You're more than welcome to but here's my assessment

Blender

• Blender is a huge free complex program that really is great. It's just so complex and great that I don't have time to learn it all.
• To be short: the learning curve is too steep. I'd need more time than I have to make assets I'm not happy with. 
• And to be honest, what little I have learned to make in Blender looks sloppy

On the other hand, I highly suggest Blendswap.com where real Blender artists occasionally deign to share their works with us script plebs. If you have the time and love it, please learn Blender and share with the rest of us. :D

Maya

• In shortest terms, it costs money. If you've got it, I've heard it's great but still time consuming.

____________________________________________________________

The Journey

I started this journey in an attempt to take building prefabs (made mostly of textured Unity cubes) and highlight/outlining the entire building on mouse-over for selection and info purposes.

Simple right? Anyone who's done this research knows I'm kidding. You can try to do this a couple ways.

Most Common Suggestion: Outline Shaders

Unlikely Suggestion: Post Processing Effects

Even Less Likely: Eldritch Rituals with Camera Values

My list is also in order of complexity. From my research I figured there are two ways to take clusters of meshed objects and highlight only the outside

1. combine the meshes into one and use an outline shader
2. somehow identify the cluster of objects with camera effects and have the camera try to place an outline on the right lines.

Somehow the first seemed simpler so I looked into combining meshes.

THIS was suggested to be done in a couple of ways

1. Export the whole thing with a bought-in asset thingy to a new file type
2. Use a bought-in ($55) mesh combining package
3. Use mesh.CombineMeshes,

Not buying something combined with THIS excellent resource

http://wiki.unity3d.com/index.php/Shaders

Swayed me toward the solution we chose today.

______________________________________________________________

If you haven't already figured out how I turn this mesh into an outline, stick around for the future post where I explain it. :D

______________________________________________________________

All blog posts by UnityGirl are inspired by my work with Brunelleschi: Age of Architects on the Aesop Games team. Check out our Crowd Funding page(s)!

Desk Maps with Unity Pro and Render Textures

In a previous post we talked about huge desks in unity basic hovering below true game objects pretending to render them on a map. This time we've invested in Unity Pro and are ready to deal with Render Textures.

______________________________________________________________

Major Upsides: 

• No more candelabra floating above your map in the editor.
• All districts about the same shape can share a single desk object set

You can either make a new universal desk or take one of the old ones and use it as a base like I did. 

• Make sure to set it well out of your play-map range to keep it out of the way.
• The size of this desk doesn't matter. It and all it's objects could be huge or tiny because it's relation to the game map is no longer important.

Now all that's left is creating the individual maps that you can turn on and off as you access the Desk Camera. Each desk can even activate it's own accessories on the Unified desk.

Like So

______________________________________________________________

To Create the Map Textures

• Assets -> Create -> Render Texture
• Create a camera and set it above what you want a map of. Orthographic view is great for this
• Set your new Render Texture to the Camera's Target Texture in the Inspector
• Set the Render Texture as the texture for the object you want to hold the map (I used a flat cube)

For for large or irregularly shaped districts, there's a second, larger desk. This also lurks out of sight, visible only through activated cameras.

Viola! Now you have an interchangeable map-desks using Render Textures!

______________________________________________________________

All blog posts by UnityGirl are inspired by my work with Brunelleschi: Age of Architects on the Aesop Games team. Check out our Crowd Funding page(s)!

Draw Pad: Mapping, Proximity and Contours

Recently, the Aesop Games studio has acquired a Wacom Intuos Pen and UnityGirl is in art heaven. Here to share some of the joy and knowledge, we're going to go over the basics of draw pad usage.

______________________________________________________________

Getting Started

First Draw Pad Doodle

Some of the first things I learned were

• You can totally install the drivers from the web site without having to put the CD Drive back into your computer to finish installation
• For at least the first day, you'll be using the pen as your new mouse.
• Don't leave the pen on the tablet, it'll mess up the sensitivity.
• It CAN survive being fumbled
• It can handle multiple monitors

______________________________________________________________

Mapping

Actually, one of the coolest things about the draw pad is that it will map to almost anything. Basically, mapping is the relationship between the surface area of the draw pad and the area you want it to be able to draw in. I have two screens, but prefer very small hand strokes to draw, therefore I leave it mapped to span both screens. If you're doing super detail work, or just don't want the pen to leave your work-area, you can map it to a specific small section of the screen.

It also has advanced settings for multiple display use, but I won't post on it until I've played with those more.

______________________________________________________________

Proximity

This is where you use your draw pen for your mouse the whole first day. Perhaps the coolest thing on that first day is realizing that when you hover your pen at-the-ready, the pad can tell. It's all about proximity.

When the tip of the pen is near the pad, the indicator light lights up and your pen takes over the cursor on your screen. I personally felt like a god of wireless control at the time.When you're ready to draw (or click, or drag) just press the tip of the pen to the pad. 

What it Takes Getting Used To

• The mapping of the draw pad means the location of the pen is absolute, not relative like the mouse.
• The tip of your pen doesn't "roll" like that of a ball point
• Pressure only applies as much as the program and your settings allow - don't push too hard.

______________________________________________________________

Contours

The two major revolutions from mouse-based computer art to draw-pad based are pressure and control. Like most artists who started analog, I find the mouse lacking in finesse for the fine arch of a girl's forearm..... I mean UI elements. However, even for mouse-wizards, the draw pad pen offers the feature of Pressure.

Either way, the extra detail and control offered with the draw pad setup are remarkable. In a matter of days my image work has improved from Frankenstein-ian clip-art creations to pretty nice original art if I do say so myself.

The next time we talk about Draw Pads, we'll combine it with Inkscape and the sculpting tool.

______________________________________________________________

All blog posts by UnityGirl are inspired by my work with Brunelleschi: Age of Architects on the Aesop Games team. Check out our Crowd Funding page(s)!

Unity Script: Building a Small Village with JS / UnityScript

______________________________________________________________

This here's an introduction to instantiating onto multiple lots at the beginning of your scene (or script). We'll start with some good ol' fashioned JS. You'll recognize this structure as a stretched version of BuildHere which we used to instantiate just the one building on the one lot. This is the way to do it if you want to avoid an Array and For-Loop situation. Good for small stuff but not great for generating large towns.

______________________________________________________________

Basically we're just multiplying everything by six.

______________________________________________________________

The Script

#pragma strict

var building : GameObject;

var lot1 : GameObject;
var lot2 : GameObject;
var lot3 : GameObject;
var lot4 : GameObject;
var lot5 : GameObject;
var lot6 : GameObject;

var buildHere : GameObject;

var resourceLoadString1 : String;
var resourceLoadString2 : String;
var resourceLoadString3 : String;
var resourceLoadString4 : String;
var resourceLoadString5 : String;
var resourceLoadString6 : String;

var thisPos1 : Vector3 = new Vector3();
var thisPos2 : Vector3 = new Vector3();
var thisPos3 : Vector3 = new Vector3();
var thisPos4 : Vector3 = new Vector3();
var thisPos5 : Vector3 = new Vector3();
var thisPos6 : Vector3 = new Vector3();

var thisRot1 : Quaternion = new Quaternion();
var thisRot2 : Quaternion = new Quaternion();
var thisRot3 : Quaternion = new Quaternion();
var thisRot4 : Quaternion = new Quaternion();
var thisRot5 : Quaternion = new Quaternion();
var thisRot6 : Quaternion = new Quaternion();




function Start () {
//sets your building's position to the same coordinates as your lot
thisPos1 = lot1.transform.position;
thisPos2 = lot2.transform.position;
thisPos3 = lot3.transform.position;
thisPos4 = lot4.transform.position;
thisPos5 = lot5.transform.position;
thisPos6 = lot6.transform.position;
//this raises your building up a bit above the lot so you don't get z-fighting flickers
thisPos1[1] = thisPos1[1] + 0.45f;
thisPos2[1] = thisPos2[1] + 0.45f;
thisPos3[1] = thisPos3[1] + 0.45f;
thisPos4[1] = thisPos4[1] + 0.45f;
thisPos5[1] = thisPos5[1] + 0.45f;
thisPos6[1] = thisPos6[1] + 0.45f;

thisRot1 = lot1.transform.rotation;
thisRot2 = lot2.transform.rotation;
thisRot3 = lot3.transform.rotation;
thisRot4 = lot4.transform.rotation;
thisRot5 = lot5.transform.rotation;
thisRot6 = lot6.transform.rotation;

//this string should be your path through your Resources folder
resourceLoadString1 = "MoveConst/Construction Frame 1";
resourceLoadString2 = "MoveConst/Construction Frame 2";
resourceLoadString3 = "MoveConst/Construction Frame 3";
resourceLoadString4 = "MoveConst/Construction Frame 4";
resourceLoadString5 = "MoveConst/Construction Frame 5";
resourceLoadString6 = "MoveConst/Construction Frame 6";

buildHere = Instantiate(Resources.Load(resourceLoadString1), thisPos1, thisRot1) as GameObject;
buildHere = Instantiate(Resources.Load(resourceLoadString2), thisPos2, thisRot2) as GameObject;
buildHere = Instantiate(Resources.Load(resourceLoadString3), thisPos3, thisRot3) as GameObject;
buildHere = Instantiate(Resources.Load(resourceLoadString4), thisPos4, thisRot4) as GameObject;
buildHere = Instantiate(Resources.Load(resourceLoadString5), thisPos5, thisRot5) as GameObject;
buildHere = Instantiate(Resources.Load(resourceLoadString6), thisPos6, thisRot6) as GameObject;
}

______________________________________________________________

Reminders

• Make sure to set your Resource.Load() paths correctly and 
• Assign your Lots in the Inspector if you don't GameObject.Find() them.

__________________________________________________________

All blog posts by UnityGirl are inspired by my work with Brunelleschi: Age of Architects on the Aesop Games team. Check out our Crowd Funding page(s)!

Unity Tip : Dense Grass on Really Big Terrains

The challenge of making an open-world city is how very big the map needs to be. There are several ways to do this but I chose to go with about 4 Really Big terrains.

______________________________________________________________

Problem:

Now I can't get my grass close enough together to look realistic

Why?

• Ground cover in Unity terrains is spaced via square terrain units
• it can only have so many instances of a ground cover per square
• Every terrain has the same number of square units

Therefore : When you make a very large terrain, your units and thus ground cover get spread out

______________________________________________________________

Solution:

The terrain can be tricked by using multiple types of ground cover, or copies of your favorite

• Spread your favored grass/bush/flower as thickly as you can
• Create a second grass/bush/flower and spread it over the same area. Twice as dense!

Now just repeat the process until you're satisfied. I like to mix two types and colors of grass for realism, but here's three for the nature enthusiasts.

______________________________________________________________

All blog posts by UnityGirl are inspired by my work with Brunelleschi: Age of Architects on the Aesop Games team. Check out our Crowd Funding page(s)!

Draw Pad: Inkscape Sculpts Your Sketches

Finding Inkscape was great enough. It increased the speed and quality of my graphics work significantly. Combining the detail provided by the draw pad with the Sculpting function of Inkscape makes creating almost any image possible.

______________________________________________________________

Inkscape Sculpt Tool

This is a revolutionary tool for free image software. You can find it third from the top of your left vertical toolbar. It looks like a little gray wave/finger

How To Use It

The basic function is very simple. 

Now just grab an edge and pull!

______________________________________________________________

What It Makes Possible

You don't have to have a draw pad to make this tool work for you. Even starting with standard circles and squares, you can make unique shapes with simple mouse control. 

Check out this piece of concept art for Aesop's future Primian Genesis game, all made with the sculpting tool.

______________________________________________________________

Improving Draw Pad Sketches

The sculpt tool, along with Inkscape's intuitive interface, are great for working with draw pad sketches. You can smooth, lengthen, combine, and shape your lines. You can add shading, paint bucket fills, and hand-craft shadows.

For our example, we'll start with quick Draw-Pad sketch. The first sketch was done in about 5 minutes. For the second image, no lines were added or moved and only the sculpt tool (at displayed settings) was used. The edit took about 30 minutes, playing a lot with line shaping options.

 

Note where it's thickened in some places and thinned in others. Lengthened, smoothed, curved, shortened, joined with other lines or shaped into multiple connected lines as with the neck.

______________________________________________________________

All blog posts by UnityGirl are inspired by my work with Brunelleschi: Age of Architects on the Aesop Games team. Check out our Crowd Funding page(s)!

Unity Tip: Easy 2D Drag with Touch

This is a quick and incredibly simple way to touch and drag gameobjects in 2D unity space.

______________________________________________________________

The Script!

For Copying

using UnityEngine;
using System.Collections;

public class TouchDrag : MonoBehaviour {

// Update is called once per frame
public float speed = 0.1F;
      void Update() {
            if (Input.touchCount > 0 && Input.GetTouch(0).phase == TouchPhase.Moved) {
                 Vector2 touchDeltaPosition = Input.GetTouch(0).deltaPosition;
                 transform.Translate(touchDeltaPosition.x * speed, touchDeltaPosition.y * speed, 0);
            }
      }
}

     

______________________________________________________________

"Why Post this Tiny Script?"


Simple. A lot of people have asked. Not me personally, but while researching in the forums I found tons of questions about how to drag with touch. Every game has special requirements of its code, but I found a lot of the answers that, while functional, were really complicated. Many didn't have answers at all. Thus, when I discovered that I had a totally simple and functional drag script: Sharing! :D

______________________________________________________________

"How Should I Use It For My Game?"

• Experiment
• I suggest testing out the speed variable, I haven't yet
• Bumpers
• These will keep your object from flying off the screen at flicking-speeds
• 2D colliders on object and bumper-object
• I suggest a 2D Rigidbody set to "is kinematic" on the bumper
• It's Your Game
• Do what you want. If it's really cool, blog about it!

______________________________________________________________

"Where did you find it?"

In the documentation. That's right. It's right there. It's the first example under Input.GetTouch. The only problem? It's not labeled at all! I didn't actually even know I had a great touch-drag script until I realized I WAS touch-dragging an old gameobject that still had this TEST script thrown on as a beginner's try at touch!

______________________________________________________________

Serendipity for All! :)

My happy accident is now everybody's happy accident! Let us rejoice and move things around with our fingers!

______________________________________________________________

All blog posts by UnityGirl are inspired by my work with Brunelleschi: Age of Architects on the Aesop Games team. Check out our Crowd Funding page(s)!

Inkscape: Faster, Better UI Elements

I'm UnityGirl with a special report on why Inkscape kicks ass for quick UI elements.

______________________________________________________________

It's Free
I'm sure I don't have to stress to the indie community the value of free dev programs. I'm thrilled about another great program I don't have to buy or subscribe to.

It Goes Faster

Whether it's concept art or creating your final polished UI assets, you have a few options.

• Paint, the Gimp, Paint and the Gimp, Something Not Free, Things on Mac and Linux I don't know about, and Inkscape

Working with Paint, the Gimp, or even both together (my old standby) isn't bad, but Inkscape is faster.

What Makes Inkscape Faster?

• Intuitive layering of every artistic stroke and shape you make
• Easy border and transparency settings
• The sheer number of shape options!
• Helps re-arrange and alter layers quickly for multiple versions of an image (ex: matching buttons)

______________________________________________________________

It just looks better

With the ease and options of Inkscape, any time you put into polishing your images will show. Here's some personal examples.

This is an example of a loading bar I made mostly in the Gimp. As you can see, it's got a nice metal texture around the edge and a cloth texture in the center. It's rounded at the edges and has a consistent border. On the other hand, it looks flat. It's clearly just two textures stuck together.

Alternately, here's a radial loading dial made in Inkscape. See the simulated dirt? The smooth lines? The mild illusion of depth?

This dial looks better AND was faster and more fun to make than it's bar-shaped older brother. I've found Inkscape a better program for original artwork.

______________________________________________________________

All blog posts by UnityGirl are inspired by my work with Brunelleschi: Age of Architects on the Aesop Games team. Check out our Crowd Funding page(s)!

Unity Tips: Basic Menu JS

In the earliest steps of both learning Unity and making a game, you're going to want a basic menu. There are tons of ways to make menus beautiful and themed later but this is the basic structure. Again, I'm using JS (Unity Script), as that's what I wrote most of my early scripts in.

______________________________________________________________

Function

• Place menu on a clickable game-object
• Creates a 3 option menu in your upper right hand corner 
• edited-out secondary option for centered menu
• Fourth button to close menu
• This particular script changes the game object's material
• assign the materials in the inspector

Your final result should look like this

_______________________________________________________

_______________________________________________________

Check out the Video for the full process

______________________________________________________________

All blog posts by UnityGirl are inspired by my work with Brunelleschi: Age of Architects on the Aesop Games team. Check out our Crowd Funding page(s)!

Unity Tip: More Natural Unity Terrain Texture

______________________________________________________________

Here's a little Unity tidbit I didn't find out about until fairly late in my development process. Fortunately, it's quick and easy to implement.

One of the things you may have noticed is that Unity terrains, though incredibly mold-able, are not very realistic up close. Whatever texture you use, even if you tile it to look right, is still obviously just a picture of grass or rocky dirt. This is because it is completely flat.

What's more, there's a slot for normalmaps in your terrain textures, but they don't do anything! After a bit of googling, I found a trick that isn't mentioned in the Documentation. It turns out that there's a second Shader available for terrains other than plain flat diffuse.

• Make a new material and assign it the Nature/Terrain/Bumped Specular in the drop-down in the Inspector.
• Select your Terrain and click the Gear button in your Terrain script in the Inspector
• Under Base Terrain is a slot for Material. Assign your new Bumped Specular material

Now any textures you add with normal maps will look all bumpy. Downside: now they're really shiny too. 

This looks a lot better texture-wise but you're probably not used to your grass and dirt being this shiny. That's okay. You can turn down the shininess, or if you like, change the shine-color (specular color) in the material's Inspector view.

Here's my new texture with the shininess turned all the way down and the specular color set to black (more like shadow, less like shine). Now your texture doesn't look like a matte painting on a clay ground. Throw some grass on in and a horsey and you've got a lovely field.

There are a lot of less-mentioned and/or completely undocumented tricks already built into Unity. Keep an eye out for more!

______________________________________________________________

All blog posts by UnityGirl are inspired by my work with Brunelleschi: Age of Architects on the Aesop Games team. Check out our Crowd Funding page(s)!

Cool Trick for Desk Maps in Unity Basic

Many of us Unity developers putting off buying Pro have lamented at the UI limitations of Unity 3D basic. Sure, sure, we've got an entire program just to make game development easy, but we want minimaps! Here's a cool way to use layers to create a static (desk) map that displays a portion your current larger play scene.

______________________________________________________________

The Concept

In Brune, players create cities made up of districts. Cool, how to represent that in 3D? Obviously 3D districts made up of terrain, lots, and buildings to go on the lots. 

Great! I've got a district with lots that build buildings when you click on them.

______________________________________________________________

 Now I Want:

1. A map of the district players can look at
2. The map has to show buildings the players just built by running around in the districts

Problem: Still don't want to buy Unity Pro so I don't have Render Texture to simply put  piece of paper on my Desk view that looks represents a current camera view of the district.

Solution: Put a giant desk below the district in question and have a camera look at it from above!

Like So

With and without ability to see other districts and the shared terrain

The final steps make sure players only see a lovely pseudo-mini-map and a candle-free terrain

• Create 2 custom layers per district/desk setup. 
• One for the district and all objects players will interact with outside of the map view
• set all district objects to this layer
• The other is for map view objects like the desk, candles, and paper
• set all desk objects to this layer
• Create a camera that looks at the desk as if you were sitting at it
• Set it's occlusion culling to only the district and desk layers
• make sure it CAN'T see the layers that the rest of your terrain/objects are on

______________________________________________________________

How to Use It

When you want a player to switch from first/third person view to viewing the desk, run a script that switches the active or topmost camera such that your desk is visible, and return to player cam when you're done!

______________________________________________________________

Fun fact: When I did this for my very first district, there was no over-terrain so the player could still run off the edge of the map into "Giant Desk Land"!

______________________________________________________________

All blog posts by UnityGirl are inspired by my work with Brunelleschi: Age of Architects on the Aesop Games team. Check out our Crowd Funding page(s)!