Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
6. September 2013

 

As I mentioned in the prior tutorial section creating a UVMap is basically like wielding a pair of virtual scissors to cut your 3D object up so it can be smushed flat.  As we saw earlier, the default unwrap map is pretty, subpar:

 

Default unwrap:

default

 

Let’s start cutting things up.  First we will default the wings.  In 3D view, make sure you are in Edit mode and Edge selection, then select the edges at the base of the wing, like so:

image

 

Now we want to mark the selected as a seam.  Press CTRL + E to bring up the Edge menu, and select Mark Seam.

image

 

Or you could use the button in the Tools panel of 3D View:

image

 

Both options do exactly the same thing.  Once the seem is marked it will appear as red:

image

 

Now you can see the result of marking a seam.  In 3D view, select all edges ( A ) and take a look at the UV window:

image

 

We now have a completely separate collection of UVs ( called a UV island ).  I still wouldn’t want to paint over these UVs yet, so we have a bit more work to do.  In order to be able to flatten the wing even more, lets mark another set of seams, like below:

image

 

Now look what happened to the UVs

image

 

That is certainly much easier to paint over!  Of course, you could have split the wing top and bottom easy enough but each additional seam makes painting a bit trickier.

 

Remember the textured view of our jet from the previous tutorial:

badUVs

Instead of a checkerboard texture on the wing, you just got a white blotch.  Now that we marked the wing seams, look at the result:

image

 

MUCH better!  Ultimately our goal is to make the entire jet have a checkered texture like that.  The process is exactly the same, just keep marking seems in the model until the UV layout makes sense.  Let’s repeat the same process on the back wing and then the tail.  If you make a mistake, you can simply Clear Seam on the selected seam.  To completely undo your changes, select all edges and do CTRL+E –> Clear Seam and you are back to default.

 

I marked the following seams on the back tail and wing:

image

 

 

Resulting in this UV layout:

image

 

And in our rendered view:

image

 

Next lets cut the jet in half vertically.  Select the continuous loop all the way around the jet, it will meet up with the wing cut:

Front:

image

 

Back:

image

 

Highlighted:

image

 

You want a continous edge around the entire jet that will cut it between top and bottom.  Once selected, mark the seam.

image

 

Now mark the area surrounding the air intake:

image

 

This however results in an unwanted seam, shown below marked in green:

image

 

Select those edges and then select Clear Seam.

 

Now we have:

image

 

And the following UV layout:

image

 

Keep in mind, Blender automatically sets the positions, so yours might be a bit different layout wise.

 

Finally, lets seperate the cockpit away from the fusalage:

image

 

The cockpit:

image

 

And finally, the tail:

image

 

And now our fully UV mapped model:

image

As you can see, the texture pattern flows pretty well over our image.  There are portions where we might get into a bit of trouble but they aren't areas where we are going to need details, so we should be good to go!

 

 

Well, that sucked, there has to be an easier way!

 

Yeah, actually, there is.  Blender has something called a Smart UV Project.  To use it, in 3D View, in edit mode, select all, then press U.  In the resulting menu select Smart UV Project:

 

image

 

Then a dialog will appear:

image

 

As I understand it, Smart UV looks at your model and separates UVs based on the angle between shapes.  So for example, since the wing essentially meets the fusalage at 90 degrees, it will easily be split into it’s own UV group.  Play around with the angle limit until you get a grouping you like.  Here is the result at 66 degrees.

 

image

 

Not ideal, but certainly a hell of a lot easier!

 

 

We only touched on a very small bit of what you can do with UVmaps.  Just keep in mind, if you add another seam ( and thus generate another Unwrap ), the positions will be reset.  Otherwise you can scale, turn, relocated, etc… UV coordinates to your hearts content.  If you don't want them to be scaled again, you can Pin (p) a UV in place.

 

Selection Options

 

You may find that you want to select Polygons from the UV layout screen.  By default it’s setup that what you select in the 3D view will be selected in the UV view, but it’s possible to do the opposite.

You need to click the “Keep UV and edit mode mesh selection in sync” button.

image

 

Now making a selection ( such as using the B)ox select mode ) in the UV window:

image

 

Will select the corresponding polygons in the 3D view:

image


Click here for the Next Part

 

Art


6. September 2013

 

Now we are going to start the process of texturing ( drawing an image on the surface of ) our jet.

 

This first step may not need to be performed.  We need to verify that our model has a material applied.  By default one will be created for you, but if you are following along using my Blend file, for some reason in the past I deleted it. ( I had applied a quicky wireframe material to make a beauty shot earlier )  No matter, its a simple enough process to create a material.

 

In 3D View, make sure your jet is selected.  In the Properties window locate the Materials tab:

image

 

Check to see if there are any materials applied, if there aren't, create one:

image

 

When done, it should look like this:

image

 

If it already looks like that, you don't have to do any of this.

 

Texturing

Before getting too far into this you need to understand the concept of a texture.  Simply put, this is a 2D image that is pasted on a 3D object.  We have many cases of textured object in the real world, such as wallpaper or a globe.  Here for example is the image that would be glued on a sphere to create a globe:

gores

 

This 2D imaged, combined with the 3D sphere would go together to create a globe.  This process can be handled in Blender using something called Spherical Projection.  On the other hand, when you have an arbitrary shape like your model, your mapping gets a great deal more tricky… and a map is required.

 

UV Unwrapping

So what exactly is UV mapping?  It’s actually very simple.  Meshes are 3D objects and textures are 2D images, so how then are you supposed to put a texture on a mesh?  That’s where UV coordinates come in.  There is nothing special to UV values, they are just numeric values describing the position of a texture on a face, just like normal XY values… except of course the values X and Y were taken, thus U and V.

Now that works wonderfully if your mesh is a single flat quad, but obviously that isn’t all that common.  Enter the UV Map, which is exactly what it’s name implies, its a mapping of UV coordinates to positions on a 3D model.  So how exactly do you pull this trick off?  Well simply put, you squash your 3D object into 2D.

Imagine that your 3D model was made out of construction paper and to paint it, you wanted to flatten it.  This is basically exactly what we are about to do.  We tell Blender where you would make scissor cuts in your model to enable it to flatten and Blender takes care of the rest.

You define these cuts ( or in Blender terms “Seams” ) in EDIT mode in 3D View.  Then they show up in the UV/Image panel.  UV coordinates are component based, so you apply them at the vertex/edge/face level.  To see them in the UV window, they need to be selected in the 3D view.

 

I am going to set up my Blender for UV editing.  What I generally do is set up a 3D view on one side of the screen and a UV/Image Editor pane on the other.

 

image

 

Like this:

image

 

Let’s start off creating a texture to help us with UV mapping.  At the bottom of the UV panel, select Image->New Image.  Note the contents of that menu may be slightly different, its dynamically populated based on context.

image

 

In the resulting dialog, give it a name so you can find it later ( we will be deleting this texture later ) and under Generated Type set it to UV Grid, like so:

image

 

Now in your UV panel you should see:

image

 

Congratulations, you’ve just created your first texture!  This grid pattern is handy for seeing if your UV unwrapping job needs work or not, you will understand shortly.

 

Now, let’s set up Blender to show unwrapping Live.  In the 3D View, open the tools (T) panel, locate and select Live Unwrap.

image 

 

Now Blender will automatically unwrap for you as you mark seams.  You need to also enable Live Unwrap in the UV panel.  Select the UV menu and click Live Unwrap.

image

 

You don’t need to do this step, instead you need to manually unwrap ( using U then Unwrap ) with every change you make otherwise.  It’s your call.

 

Now let’s apply the grid texture to your jet.  In 3D View, in edit mode, select All ( A ).  Then in UV view, select the image:

image

 

Now in the UV view, you will see the UV map over the grid texture:

image

If you dont see the wireframe, you probably don’t have anything selected in the 3D UV.  This view updates based on the selections in 3D View.  That is what your model looks like flattened.  Don’t worry, we will make it a bit more logical soon.

 

You will find the UV window uses almost the identical keys as the 3D view.  You can pan and zoom the exact same way, you can use box selection, G to move, R to rotate etc.  So, while Blender may have had a nasty user curve at first, it’s very consistent once you know it.

 

As you can see in the 3D viewport ( as long as you are in textured ), our texture layout isn’t exactly ideal!  With a good layout, the checker pattern will flow much more cleanly across the model.

image

 

If you don’t see the texture mapping, its probably your settings.  You can toggle between showing textures and not in the 3D view using the Viewport Shading selection:

image

 

Set it to Textured.  Rendered mode wont work, as the grid texture hasn’t actually been applied to our model ( this will make sense later when actually apply a texture ).

If your model still isn’t showing up with the grid texture, there is one other setting you have to configure.  In the 3D View, open up the properties ( N ) panel.

image

 

GLSL can show some more details than other modes, but it also has some limitations.  Most of the time I personally have mine set to Multitexture.

 

OK, this got pretty long so I will break it into another section.  Coming up we will start cutting up and laying out or UVmap into something a bit more useful!

 


Click here for the Next Part

 

Art


5. September 2013

 

So I fired up Unity today on my laptop and

 

image

 

Oh dear, this isn’t good.  After some playing around it turns out Unity doesn’t play well with Intel GPUs right now.  Thing is, I don’t have an Intel GPU, I’m running an nVidia GTX765.  Enter Optimus.

 

What’s Optimus?  It’s an Intel technology that allows your computer to pick between using the integrated chipset to save memory or the dedicated GPU for performance.  The fix is pretty simple, set Unity to run on the nVidia GPU.

 

Open the nVidia control panel.

Select Manage 3D Settings

image

 

Select the Program Settings tab and Click the Add button.

image

 

Select Unity then click Add Selected Program

image

 

In the Select the preferred graphics processor for this program dropdown, select High-Performance nVIdia

image

 

Click Apply.

 

Load Unity.  VOILA!  No more crash.

Now, if you happen to have only an Intel GPU, um… sorry.

General


3. September 2013

 

Way back in October of 2012 I mentioned the Platino 2D game engine.  It runs in Appcelerator Titanium a cross platform JavaScript based mobile development system.  Platino appears to have it’s roots in QuickTiGame2D, and open source 2D Titanium game engine.  Anyways, after several months in closed beta Platino is finally available to the public and it’s grown into an entire family of products.

 

image

 

Excerpts from the launch press release:

Over the past several months, we’ve been fine-tuning our Lanica product line and giving some of you early access to new goodies as we roll them out.  During that warm-up phase, we focused mainly on big studios to ensure that Lanica could handle the most heavyweight demands of mobile gaming and interactive development before we let it loose to the masses.

And now, without further ado, we’re releasing the Lanica Game Platform to indie developers!

What does that mean?  Well, most importantly, we’ve rolled out lower prices for indie devs, non-profits, and educational institutions to access Lanica.  You’ll no longer have to break the bank to have the power of our entire game-making platform in your hands.  Now, no matter what the scale of your operation, any developer can make use of all the big guns that we offer.

[SNIP]

If you’re new around these parts, we should probably explain why we’ve decided to release Lanica as a three-pronged platform for making games:

You see, we realize that most developers out there already have their own processes in place, and it’s unfeasible for them to just drop everything and pick up a whole new platform every year.  That’s why we’ve built the Lanica Game Platform as a multi-tiered but separable platform, so developers can incorporate Lanica into their workflow at any scale — whether it’s just one tool or the entire platform.  We didn’t want Lanica to be an ‘all or nothing’ deal, that simply would not have been fair.  Instead, you can mix and match specific pieces of the Lanica Game Platform to fit your own development needs.

For instance:  Let’s say you absolutely love your current code editor, but are in dire need of a better sprite animator — Animo Sprites will have you covered!  Want better particle effects, but can’t part with your current framework?  You can use Animo Particles!  Need to step up to a completely new game engine? Then Platino (a.k.a. the JavaScript juggernaut) is your baby!

We don’t want to leave anyone out in the cold, so be sure to check out our entire product line and see what could work for you.

 

I was in on the closed beta and will say, working in Titanium is a breeze and the SDK is quite nice.  I never really got much into using the other tools other than to play around with the particle tool.  What I’ve been waiting on most was pricing and today we’ve finally got it:

 

image

 

Note the * beside all of the prices?  That’s because you don’t actually purchase monthly, it’s a bit of marketing slight of hand.  So basically the Platino Engine is 816$ a year for companies, or 408$ a year for indies.  Add another 144/72$ if you want to add in app purchase support.  To be honest, those prices are a great deal higher than I was expecting, especially given the amount of competition there is out there.  I am especially shocked there isn’t a complete package price point.

 

That said, if you are using Titanium and want a game engine, Platino is the only game in town and it’s a good game indeed.  Just not a cheap one, at least compared to it’s peers.

News


1. September 2013

 

I finally decided to check out LibGDX, a very cool and popular Java based cross platform game development library.  I’ve been meaning to check out LibGDX for ages, it’s the Java part that turned me off.  It’s not the programming language, Java is a really good one, it’s the eco-system.  Always it seems like when dealing with Java I deal with a whole slew of new headaches.  Often it seems the cause of those headaches is Google.  Today sadly was no exception.  This post reflects not at all upon LibGDX, a long time ago I intended to run a series of PlayN tutorials, but I spent so much time supporting the build process or fragility of Eclipse that I simply gave up.  Fortunately LibGDX ships with a setup tool that makes a bunch of these problems go away, but it’s certainly not solved the problems completely.

 

The first problem is partially on me, partially on Eclipse and a great deal on Java.  I installed Eclipse as it’s the preferred environment for LibGDX and often trying to do things the non-Eclipse way can really make things more difficult, at least initially.  ( I massively prefer IntelliJ to Eclipse )  Right away I fire up Eclipse and am greeted with:

failed to load the JNI shared library

If you are a veteran developer this is no doubt immediately obvious to you.  I checked the most common things, first make sure JDK is installed.  Make sure JAVA_HOME is set, make sure javac runs from the commandline, run javac –version to make sure things are working right.  In the end it was a version mismatch.  I downloaded the 64bit version of Eclipse and the 32bit version of the Java JDK.  The obvious answer is to download the 64bit JDK but I really wouldn’t recommend that.  Amazingly enough in 2013 the 64 bit version still causes problems.  For example, FlashDevelop wont work with it.  That is just one of a dozen applications I’ve seen that wont run with the 64bit version.

 

Not really a big deal.  Eclipse should have done a heck of a lot better job with the error message.  If it said “64bit JDK required” this would have taken about 10 seconds to solve.  Keep in mind this is a problem that’s existed for 3 or 4 years, so don’t expect an improvement on the Eclipse side any time soon.  Accessibility and polish has never really been a priority when it comes to Eclipse.  The fact 64bit Java is still problematic, that’s 100% on Java though!

 

 

Anyways, other than fighting with Eclipse and Java, everything went wonderfully with LibGDX.  I got my project made and configured without issue ( beyond oddly enough, the Setup UI wanting the original GDX install zip file, I had already deleted… oops ).  Then when I went to run the HTML5 target in Chrome I get:

 

image

 

I click the Download the GWT Developer Plugin button.

 

Nothing.  No error, no page load, nothing.  I reload and try again.

Nothing.

Check my internet connection… all good.

 

Odd.

 

So then I grab the URL for that button and it loads a Chrome Store page ( at least it did something! )

image

 

This application is not supported on this computer.  Installation has been disabled.

 

Lovely.  If I got that message when I clicked the initial link, things would have made a great deal more case.  Want to know why I hate Google for this one?

 

First off… it works in Internet Explorer and Firefox.  It’s only in Chrome that the GWT developer plugin doesn’t work ( on Windows 8 as it turns out ).  But that’s not the hatred part.

Take a look at GWT issue 7778.

"This application is not supported on this computer. Installation has been disabled" while installing GWT developer plugin on Chrome

So, its a known issue of Google’s developer tool working in Google’s browser on Windows 8.  But the hatred part…

image

 

November 9th, 2012.  It’s been a known and reported problem for almost a year.  Fixed?  God no!

 

Welcome to working in Google tools.  You will spend a stupid amount of time trying to debug what the problem is, only to find yourself looking at year(s) old tickets that have been ignored by Google.  When working in Android I ran into common tickets with hundred of comments that were years old on nearly a daily basis.

 

This isn’t a one off rant, this kind of stuff happens EVERY SINGLE TIME I work with Google technology.  I have literally never once NOT run into a problem, from Android, to DART, to NaCL to GWT.  Every single time.

 

It’s not such a big deal for me, I’ve got the experience enough when working with Google tools to expect minimal or wrong errors when problems occurred and for half assed support when I research the problem.  Frankly I just stay the hell away when I can.  Where its a gigantic deal breaker is when a new developer runs into these additional hassles.  In some ways it’s kind of infuriating as great libraries like LibGDX become that much harder for developers to access.

Programming


AppGameKit Studio

See More Tutorials on DevGa.me!

Month List