Everyday Flash

Creative use of technology // A blog about 3D Flash and Actionscript by Bartek Drozdz

Loading and manipulating images in Unity3D

As I promised here's the first article exploring Unity as a 3D web application tool.

Every web application nowadays is data driven, therefore the ability to dynamically load assets is crucial. Unity3D can load plain text, images, video and sound. Since loading plain text is not so interesting, I thought I'd see how it works with an image.

Here's a little experiment I called "Image Decomposer". It loads an image passed as parameter in the URL and creates a wall of little cubes which colors are based on the pixels of the image. When you rollover the cubes they fall down slowly decomposing it, hence the name.

The code is pretty simple, you can get the source here. Below are a few things I found out while making it.

URL parameters

A very useful way to pass parameters to your swf files is to attach them as a query string in the embedding HTML, like this: flash.swf?paramA=valueA&paramB=valueB. It's a Flash classic!

The good news is that is also works in Unity. Take a look a the HTML source of the demo to see how the image URL is passed to the unity3d file. Inside Unity3D it's very easy to get access to it through a static property called Application.srcValue. It returns the whole path, including the file name and you need to parse the query string yourself. Here's a sample code in C#:

C#:
  1. string su = Application.srcValue;    
  2. string qs = su.Substring(su.IndexOf("?") + 1);
  3. char[] deli = "=".ToCharArray();
  4. string[] ps = qs.Split(deli);

The 'ps' array now contains pairs of key/values from the query string.

Loading freedom

Unity3D supports JPG and PNG format. Sadly GIFs are not supported, even animated... ;) The really nice thing is that there aren't any security restrictions when loading files from other domains. This is something that drove me crazy so many times with Flash! In Unity3D pass a valid URL and it will load the asset, it's so simple. If you don't believe me - just paste any link pointing to an image in the demo ("image" parameter in the URL) and see it for yourself.

I wouldn't expect things to be like that forever though, so use it while you can people!

Coroutines and C#

To deal with asynchronous events, like loading an external asset, Unity3D uses coroutines. They are a bit different from events in AS3, but not very much. If you are a fan of C# and want to use coroutines you may find the official documentation a bit unclear. So, first, read the official documentation here and here, and continue reading this post afterward.

What caught my attention is that to use the yield statement, the enclosing method must return IEnumerator. But all of the inherited methods in MonoBehavior, like Start(), Update() and the event handling ones return void.

Surprisingly, it turns out that you can just change the signature of any of those methods so that they return IEnumerator! If this isn't breaking OOP rules, I don't know what is. But, since it works, it's ok I guess. It's certainly not obvious. Otherwise it is possible to create a custom function that returns IEnumerator and use the StartCoroutine() method of MonoBehavior to run it.

Another thing is that with C# you need to write yield return... not just yield... The official docs being written in Javascript they tend to omit the new operator as well, and C# does not like that. So, if the docs say:

JAVASCRIPT:
  1. yield WaitForSeconds(2);

and you copy/paste this to a C# script, you need to edit this line and make it look like this:

C#:
  1. yield return new WaitForSeconds(2);

If you keep this in mind you will spare yourself some annoying compile errors.

Scaling images (or why you don't need to do this)

Once the image is loaded, it can be assigned to a Texture2D object, which is the type to store bitmaps in Unity3D. From now on it can be used as a texture for any material. For example, you can create a plane and assign it as the main texture of the plane's material or use GUI.Label to display the picture in 2D. But let's do something more interesting.

Texture2D has a few methods to extract information from the image, the most basic being GetPixel() and SetPixel(). They work exactly the same way as their equivalents in AS3 BitmapData class. The first allows to get the color of a pixel at a given coordinate, the other does the opposite.

When you start to play with these and you use images embedded in the project, make sure to select the "Is Readable" checkbox in the inspector. Images loaded dynamically are readable by default.

In the demo, no matter how big the loaded image is, the amount of cubes generated remains the same (it will adapt for different aspect ratios though). My first idea was to scale the image to something like 50x50 pixels, and then using getPixel() to fetch the color for each cube. But I found out that there isn't any function to resize an image in the API. Sure, I could write my own function, but this can get quite complex as you can see here. Fortunately there is a better way.

Texture2D has a method called GetPixelBilinear(). It uses bilinear filtering to evaluate the color of the image at a specific point defined by normalized coordinates (i.e. in 0-1 range). If the word "bilinear" sounds familiar to you it's because Photoshop also uses this algorithm to scale images. With this method the same code can be used to get pixel colors from images regardless of their size and aspect ratio:

C#:
  1. Color c1 = image.GetPixelBilinear(0,0); // always top-left color
  2. Color c2 = image.GetPixelBilinear(1,1); // always bottom-right

It's much more elegant (and faster) than scaling images!

As a side note: it would be also very easy to implement an actual resizing function using this method, in case you really need that. I'm sure that by now you can figure out how to do this :)

What's next?

The above example is simple but I hope it shows you how to get started with dynamic content. As far as images are concerned, much more is possible. By using custom shaders and render textures you can apply filter effects to images (and video). However, these features are available only in Unity3D Pro and besides, explaining it would make this post way too long. I'll do that in a separate article instead.

Modifiers in Unity3D

Ringo from FlashBookmarks asked me if there were modifiers similar to AS3Dmod in Unity. I searched for something similar some time ago, but didn't find anything interesting.

However, when I was starting C# scripting, I ported two of the modifiers from AS3Dmod - Bend and Twist. So I thought to share them with everyone. Don't expect much, it's not the full library, just two classes. If I have some free time, I'll look into how to implement stacking, since for the moment you cannot apply two modifiers to the same object (the second one won't have any effect).

To play around with them grab this package and import it into Unity. Keep in mind that the modifiers work at runtime, so you won't see any effects in the editor until you run the game. If you want to animate them, just add another script that will have a reference to the modifier instance and change it's properties at each Update() call.

If you are interested in this kind of "bricolage" with 3D geometry, I recommend to take a look at the Procedural Examples project provided by Unity. You will find there some highly interesting samples like dynamic extrudes or perlin noise. It's a great starting point to explore runtime geometry transformation.

Of course, take a look into the sources of the modifiers too! You'll see how simple it is to access the geometry at runtime and do some modifications. Basically it goes like this:

C#:
  1. MeshFilter mfilter  = GetComponent(typeof(MeshFilter)) as MeshFilter;
  2. mesh = mfilter.mesh;
  3. Vector3[] vs = mesh.vertices;
  4. int vc = vs.Length;
  5. for (int i = 0; i <vc; i++) {
  6.   // Modify your vertices here
  7. }
  8. mesh.vertices = vs;
  9. mesh.RecalculateNormals();

Things worth notice: In Unity a vertex is just an instance of Vector3 - there isn't any special class for this, as in Flash-based 3D engines.

You can see a bit of the casting-drama I need to do (lines 1-2) to get to the object holding the actual geometry information (Mesh). That's a bit annoying in C#, with JS that code would be more readable. Anyway, it's better to make that only once, in Start() and not at every Update().

To get correct lightning effects on the materials, do not forget to call mesh.RecalculateNormals() after you've modified the positions of the vertices.

If you want to modify your mesh continuously (i.e. to animate it) it's necessary to keep the original array of vertices, because the code above overwrites the original positions. Take a look at the source code in the package to see how I did it.

That's all for now, hope you enjoy it!

Book review “Unity Game Development Essentials”

Unity Game Development Essentials

I like books. A book is always a good thing, no matter how abundant online resources are. It's always at hand, with all the information brought together in one place, not scattered across different sites or even worst, across different forum threads.

When I learned a couple of months ago that Will Goldstone was writing a book on Unity3D, I was pleasantly surprised. A bit later Packt, the publisher of the book, contacted me asking for a review.

In the meantime the book hit the shelves, and there was some buzz on Twitter, so there's a good chance you've already heard about it. If you are still wondering whether you should buy it, keep reading.

Great for beginners

The book is written in the form of one big tutorial. The author leads us through different parts of the Unity3D IDE in the course of creating a simple game. The word "simple" is key here. Before I had the chance to read the book I went through the Unity3D official tutorial which has a similar structure. It presents us with a very cool 3D artwork and a pretty complex game to build. Compared to that, what we will create with the book is pretty basic. However, in this case: simpler means better.

After completing the official tutorial I felt I merely scratched the surface, and many parts of it were too complex to follow. The book doesn't leave you with this feeling. You'll be guided in creating a game but you will do it from scratch and all the steps are explained in depth.

Scripting

I assume most readers of this blog are familiar with programming. In this case you may find the code presented in the book somewhat rudimentary. One way of making it more fun is to translate the code from JavaScript into C# on the way. I did that, and I think it's much more beneficial than just copy-pasting. At least you will read it that way.

Furthermore, Actionscript 3 programmers can find that some examples are bending the rules of strict OOP. Again, for a seasoned AS3 developer, restructuring the code in those places can be another good exercise.

The book covers obviously more than just scripting. Among other topics, I particularly enjoyed the chapters on particle systems and on 2D GUI (as you will find out, 2D GUI is the weird part of Unity)

Other ressources

An indispensable companion of the book is the Unity scripting reference. The docs are solid and in most cases you'll find what you're looking for. Not always however, and if you feel you need more info I recommend to search the forums. I am not a fan of forums overall, but I must admit that the Unity3D forum is a pretty good resource.

A remark on the Unity3D documentation

A bit off-topic, but I will take the occasion to rant about the Unity3D scripting documentation. Not about the content, but about the form.

In the Unity3D docs the list of classes is sometimes placed on the left column, sometimes in the middle. Sometimes they are listed in alphabetical order, sometimes presented in an inheritance structure. Every property and method is presented on a separate page, which is a big waste of space given the fact that most of them have max 2-3 lines of description. It leads to constant back/forward clicking when exploring the API. And it might get even worse when Unity will introduce namespace support.

It would be cool if the docs followed the good old Java standard, where the list of classes is always in the same place, always accessible and in alphabetical order. The properties and methods are listed in one big table, which is also much easier to browse.

OK, enough complaining, now back to the book...

Conclusion

If you want to get into Unity, it's probably a good idea to buy this book. You'll get yourself a decent introduction to the main aspects of the software. Remember that you won't learn any advanced stuff like stucturing code in large projects, writing custom shaders or making advanced physics simulations. The important thing is that the book explains all the basics leaving you well prepared to explore the rest. I enjoyed reading it and I learned quite a lot!

Getting started with C# for Unity3D

C#

Unity3D offers a choice between 3 different programming languages: JavaScript, C# and Boo. Each of them has its pros and cons, but for me C# almost immediately came out as a clear winner. That is because it is fully object oriented and it's syntax is similar to Java and Actionscript 3, both of which I am experienced with. However, before I started to play with Unity3D, I never wrote a single line in C#, so I had to learn it from scratch.

As you probably know C# was originally developed by Microsoft and is widely used in the .NET framework as well as in Silverlight development. It is important to understand however that learning C# for Unity3D is not the same thing as learning the .NET platform. In fact you don't have to know anything about .NET to use C# with Unity3D.

While I use all kinds of online documentation, a book is often the best companion, so I thought buying a good C# book would be in order. It turns out that the small O'Reilly C# Pocket Guide is exactly what one needs. It is absolutely unnecessary to buy a 500 page C# bible, as most of the stuff in those books is related to .NET and is not applicable to Unity3D at all.

Of course the book alone is not enough. You also need the Unity3D scripting reference. All the examples in the docs are given in Javascript only. But don't worry, they are easy to translate once you get used to.

C# is a very elegant and powerful language. It's dot-syntax is based on Java, so if you come from a Java background you'll quickly feel comfortable with it. There are a few differences though. The most striking difference is the convention to start property and method names with an uppercase letter. I guess it comes from Visual Basic. I am not a fan of this convention, but it's better to use it and have a consistent code rather than fight it.

The list of all C# features is so long, that it makes AS3 look poor in comparison. C# is really like Actionscript on steroids. I suppose the next version of Actionscript will have at least some of those implemented, so it's good to know about them. Here's a list of my favorites.

Operator overloading

This is the coolest one by far! It allows to define custom actions for common operators like +, -, * or /. The best illustration of this feature comes with vector addition. In Actionscript, to get a sum of 2 vectors you need to write something like this:

Actionscript:
  1. var c:Vector3D = a.add(b);

This is not very nice, and becomes almost unreadable if more than two vectors are added. In C#, thanks to the overloaded + operator it looks like this:

C#:
  1. Vector3 c = a + b;

This is much more readable and elegant, isn't it? It goes without saying that the 3D vector implementation in Unity3D has all the operators overloaded. In case you want to do it yourself however, the implementation of operator overloading is very simple and in the above case could look something like this:

C#:
  1. public static Vector3 operator + (a:Vector3, b:Vector3) {
  2.    return new Vector3(a.x + b.x, a.y + b.y, a.z + b.z);
  3. }

There are some simple rules: the operator function must always be static and must return an object of type it is defined for. However it can take any type of parameters. This allows to define operator overloading for adding or multiplying vectors but also for multiplying vector by a scalar or multiplying vectors by matrices. In fact this can be achieved thanks to another C# feature - method overloading.

Method overloading

Method overloading allows to define multiple methods with the same name provided that they take different parameters. It works with regular methods and with constructors as well. If there a multiple ways to create an object you can define multiple constructors to satisfy each case. As mentioned above it works with operators too.

A good example of method overloading in Unity3D API is the 'Transform.Rotate()' method. It has has been overloaded 3 times with different ways to specify a rotation:

C#:
  1. void Rotate (Vector3 eulerAngles, Space relativeTo)
  2. void Rotate (float xAngle, float yAngle, float zAngle, Space relativeTo)
  3. void Rotate (Vector3 axis, float angle, Space relativeTo)

You can either pass a vector of angle values, three floats - one for each axis, or a single angle combined with a rotation axis. This is only logical to call it 'Rotate' every time because this is what the method does at the end.

Actionscript has default parameter values, which in some cases can simulate method overloading but they are not quite as flexible as that.

Getter/setter syntax

C# has a very concise way of declaring parameters. While in Actionscript it takes two functions - one for 'get' and one for 'set', in C# it can look like this:

C#:
  1. public float Size { get; set; }

In this case the compiler automatically adds a private member for this property and there isn't anything else you need to do. Of course such a parameter is not very practical, so here's a more complex code, involving a public getter and private setter:

C#:
  1. public float Area {
  2.     get { return size * size; };
  3.     private set { size = Mathf.Sqrt(value) };
  4. }

You will also notice that neither the 'function' nor the 'var' keywords do not exist in C#. In that C# closely follows Java. This is good because both these keywords are completely redundant and do not add any information to the code.

Among other interesting features I recommend to explore indexers, generic types, structures and enumerators all of which are covered in depth in the pocket guide mentioned above but also in the many online C# tutorials.

Editing C#

There are multiple editors that support C#. Microsoft offers a great and free editor called Visual C# Express Edition which features code completion, but is Windows only (obviously). For a Mac there's Mono Develop which looks very powerful, but is not very stable yet. Unfortunately the C# plugin for Eclipse is completely unstable for the moment, and I wouldn't recommend it. On the other hand, it is still in alpha so let's give it some time. Of course there's always TextMate.

Last but not least there's Unitron - the Unity3D default editor. It is not very popular among developers, and I saw people complaining about it being too basic. I don't share this opinion. While it ain't no FDT, it's pretty solid, very stable and has basic auto-completion. The trick is auto-completion is turned off by default (why?). To turn it on go to 'Preferences' and you'll find it at the bottom of the 'General' section. With that, I'm sure that Unitron is enough to get started.

Most of us know JavaScript from the browser environment. JavaScript is often the first programming language people ever used. If this is the case, you may be tempted to just use JS with Unity3D right away and not bother learning anything new. After all, as far as Unity3D is concerned, anything that can be done with C# can also be done with JavaScript.

However in the long term, C# offers better control over the code, full OOP support, strong typing and a lot satisfaction of mastering a robust programming language, so the extra effort is worth it. Plus, for a seasoned AS3 developer, mastering C# is a matter of a couple of weeks anyway, so go ahead and try it out!

UPDATE March 2010. Here's a new post about C# and Unity3D:
Loading and manipulating images in Unity3D
(more coming)



  • FITC10