OpenStreetMap in Unity3D

Edit: New Post PokemonGO – Mapzen Post (26.07.2016)

This time I have something a little bit different; OpenStreetMap in Unity3D!

If you don’t know what OpenStreetMap is (well I didn’t until last week); it’s a crowd sourced map api created and supported by what seems to be a quite big community. So you can think of it as an open source (and free) Google/Bing Maps. And it gets even better, there are many other smaller projects/services built upon OpenStreetMap data, specializing in certain fields like metropol maps, metro maps etc. All these data under ODb License. How awesome is that?

So that is pretty much how I found about Mapzen and their Vector Tile Service, which by their own description “provides a free & open vector tile service for OpenStreetMap base layer data, with worldwide coverage updated daily, available in GeoJSON, TopoJSON, and binary data formats”.

I won’t go into detail about their service, format and everything but you can read all about it in their wiki page. What I’ll do though, is a walkthrough of parsing and visualizing their data in Unity3D so when we’re done, it’ll look something like this;

unity3d mapzen OpenStreetMap

On the left, you can see the original OpenStreetMap view and on the right, it’s the same data in triangles and debug lines… well yea I know I kinda suck at visualization.

Some bullets before we get started;

  • Note that I’ll just go over some important parts of the chode here, not the whole thing. You can find the project files at the bottom of the page anyway.
  • We’ll have to use three different coordinates systems and convert values back and forth to make this happen. First of all, we obviously have longitude & latitude, then we have OpenStreetMap tile coordinate system (origin at top left) and finally the 3D space coordinates in Unity3D, starting at bottom left (XZ plane). So you’ll see lots of conversion method calls and y axis sign chances through out the code. Becareful with those.
  • You can use this nice tool to find the tile you need; PHPCalc for OpenStreetMap . It’s a must-have tool if you’re planning to use OpenStreetMap in your project.

 

Also TMS (Tile Map Service) might be a little bit confusing at the begin but it’s actually just a grid system on a mercator projection. Only thing is, this grid has different detail levels. At level 1, it divides whole thing into 4 sections, at level 2, it’s 16 etc. Try these and you’ll get the idea; (0,0,1), (0,1,1), (1,0,1), (1,1,1). Those are x coordinate, y coordinate and detail level respectively. As you can see, just those 4 tiles covers up the whole world map in level one but that number increases really fast as the detail level increases.

For this post, I’ll use detail level 14 and 9685/6207 coordinates (yeap, my neighbourhood); so  (9685,6207,14).  But of course, that’s just an image of the data they provide, the real thing is actually here. That’s actually a readable link and goes like, “get me the building and road data for detail 14 at 9685×6207 coordinates”. I highly suggest using a JSON reformatter to be able to read it though (i.e. http://jsonviewer.stack.hu/).

So let’s get started;

public IEnumerator CreateTile(World w, Vector2 realPos, Vector2 worldCenter, int zoom)
{
    var tilename = realPos.x + "_" + realPos.y;
    var tileurl = realPos.x + "/" + realPos.y;
    var url = "http://vector.mapzen.com/osm/water,earth,buildings,roads,landuse/" + zoom + "/";

    JSONObject mapData;
    if (File.Exists(tilename))
    {
        var r = new StreamReader(tilename, Encoding.Default);
        mapData = new JSONObject(r.ReadToEnd());
    }
    else
    {
       var www = new WWW(url + tileurl + ".json");
       yield return www;

       var sr = File.CreateText(tilename);
       sr.Write(www.text);
       sr.Close();
       mapData = new JSONObject(www.text);
    }
    Rect = GM.TileBounds(realPos, zoom);
    CreateBuildings(mapData["buildings"]);
    CreateRoads(mapData["roads"]);
}

This is the entry point for whole process. Let’s have a look at it; it returns IEnumerator because I’m using WWW object and calling this function in a coroutine. Then we have 4 parameters; World is my main script to handle environment related stuff, not really necessary here. realPos is the x,y coordinates of the tile in TMS system (so 9685,6207). worldCenter is where we’ll create this tile in Unity3D space (it’s Vector2 as I’m using Y=0 by default). And zoom is the detail level.

Rest of it should be quite straight forward, I’m downloading and caching the JSON data. I believe there is already a WWW object with caching but I did it myself. This way it’ll be easier to chance database (text, xml, sql) whenever I want. So if we already have the data for that tile, it’ll re-use the old data file. If not, it’ll just download the data from the mapzen server.
I also used a third party library to parse JSON in C# (see JSONObject above). It’s nothing fancy really, just parses the data and creates something like a nested dictionary for it, which simplifies searching stuff.

And finally we have two big function calls; CreateBuildings and CreateRoads, taking related JSON sections, mapData[“buildings”] and mapData[“roads”], respectively. You can find those sections in the map Json and again, for your own sanity, use a JSON formatter.

Now let’s have a look at the CreateBuilding function;

private void CreateBuildings(JSONObject mapData)
{
	foreach (var geo in mapData["features"].list.Where(x => x["geometry"]["type"].str == "Polygon"))
	{
		var l = new List<Vector3>();
		for (int i = 0; i < geo["geometry"]["coordinates"][0].list.Count - 1; i++)
		{
			var c = geo["geometry"]["coordinates"][0].list[i];
			var bm = GM.LatLonToMeters(c[1].f, c[0].f);
			var pm = new Vector2(bm.x - Rect.center.x, bm.y - Rect.center.y);
			l.Add(pm.ToVector3xz());
		}

		try
		{
			var center = l.Aggregate((acc, cur) => acc + cur) / l.Count;
			if (!BuildingDictionary.ContainsKey(center))
			{
				var bh = new BuildingHolder(center, l);
				for (int i = 0; i < l.Count; i++)
				{
					l[i] = l[i] - bh.Center;
				}
				BuildingDictionary.Add(center, bh);

				var m = bh.CreateModel();
				m.name = "building";
				m.transform.parent = this.transform;
				m.transform.localPosition = center;
			}
		}
		catch (Exception ex)
		{
			Debug.Log(ex);
		}
	}
}

This is rather straight forward actually. I read vertex data for each building from the json object and create a mesh using those vertices using BuildingHolder class. Vertex coordinates are in lat/long system originally so first I convert them to meters (GM.LatLonToMeters call), then I substract the tile center from that as I attach buildings to tiles as children. I keep buildings inside a dictionary using their center point as key which isn’t a good idea and might cause problems with complex polygons (when a big concave polygon surround a smaller one, their centers may overlap). It’s good enough for now but you should consider finding a better key for them.

Another thing to note is that building vertices are kept relative to their center as well. So vertice positions are relative to the building center and building position is relative to the tile center, it’s a nice and clear hierarchical system. And building meshes are created inside that BuildingHolder class which makes it extremely easy to switch visuals. i.e. if you want 3D polygons, all you would need is to change whatever is inside that class to add height and the rest of the code will work just the same.

private void CreateRoads(JSONObject mapData)
{
	foreach (var geo in mapData["features"].list)
	{
		var l = new List<Vector3>();

		for (int i = 0; i < geo["geometry"]["coordinates"].list.Count; i++)
		{
			var c = geo["geometry"]["coordinates"][i];
			var bm = GM.LatLonToMeters(c[1].f, c[0].f);
			var pm = new Vector2(bm.x - Rect.center.x, bm.y - Rect.center.y);
			l.Add(pm.ToVector3xz());
		}

		var m = new GameObject("road").AddComponent<RoadPolygon>();
		m.transform.parent = this.transform;
		try
		{
			m.Initialize(geo["id"].str, this, l, geo["properties"]["kind"].str);
		}
		catch (Exception ex)
		{
			Debug.Log(ex);
		}
	}
}

CreateRoads is pretty much the same. Only different is taht I’m not generating polygons for the roads, just some debug lines so there is no mesh generation inside the RoadPolygon component. I’m just giving it the road vertices and it’ll draw lines between them in its update function.

You can find the project files below and there are a lot more than what’s covered here. Please do let me know if you have any questions or find any bugs/mistakes. I’m planning to write a few more blog posts on this, i.e. I already created a dynamic tiling system, which loads tiles as you move so you can travel all the way across usa or europe. Writing that was much easier than writing this blog post though, I’m having quite hard time writing in english so it may take some time 🙂

Anyway, let me know what you think!
Cheers!

UnityOsm.unitypackage (19.27 kb)

New Post PokemonGO – Mapzen Post
New Updated version (25/07/2016)

Random Planet Generator

So me and my collague found this brilliant blog post; Procedural Planet Generation by Andy Gainey a few days ago. Even though it looks beautiful and stuff, it’s written in javascript which isn’t a popular development platform here, so we decided to convert it to C# & Unity3D.

We’ve only done the icosahedron subdivision part for now, but still working on the rest actively.

 

 

You can find the Unity3D project files below but beware, it’s just a raw translation from Javascript to C# at the moment and looks quite ugly (I mean the coding style). I’ll do the refactoring and beautifying stuff when we’re done with it. That being said, we may not do a 100% conversion either and go on a different way at some point.

Anyway, I hope you guys find it useful, please do notify us about any bugs or issues in the C# version so we can fix it asap. Enjoy!

https://github.com/alprkskn/RandomPlanetGenerator

bTube

Yeap, so I finished my first “One Game a Month” game, bTube, a few days ago.

It’s still far from done and have serious balance issues but still, if you want to try it out;

http://barankahyaoglu.com/ogam/btube/btube.html

Please do let me know what you think!
E-Mail: brnkahyaoglu@gmail.com

 

Banner Saga Caravan Movement

So I’ve been playing Banner Saga for a few days.
I found the gameplay to be rather boring and underwhelming but as a winter person I kept playing just for the winter/snow scenes.
Brilliant art, good writing, great scenes etc.

One of my favorite things for me was the caravan scenes,

Doesn’t that looks BEAUTIFUL?
Yea they put such awesome scenes in between the fights to keep player going and it totally worked on me.

Anyway, so I decided to do that myself in Unity, as I always do. I manage to… recreate it somehow. Sadly programmer art is nowhere close to what you’ve seen above.

 

But it works and that’s satisfying enough for me. It’s just bunch of boxes moving on bezier curve really, nothing complicated.It also has a n-layer background, all infinite, generated as caravan moves etc.
I’m still not that comfortable with Unity but I think the overall structure is rather decent and flexible.

You can also check it out here;
http://barankahyaoglu.com/unity/banner.html

Anyway you can find the project below,Let me know if you have any questions or whatever. ( brnkahyaoglu@gmail.com )
I hope you like it, cheers!

BannerSageTests

Voronoi in Unity

Hey there!

Well I’ll keep this one short. I just got bored last week and decided to play with unity a bit.
I had the idea of converting my map generator stuff into Unity for a long time now but never had chance/time to do so.
And yea started with Voronoi stuff. Turns out that my old code is a horrible nightmare so rewritten most of the stuff, fixed some serious bugs etc etc.

 

Anyway, you can find the Unity Solution below.
And let me know if you have any questions! brnkahyaoglu@gmail.com
Cheers!

PS: Yea I don’t know how to package Unity projects so I just zipped the whole thing. Please do let me know if there is a proper way.

MapGen.zip (310.96 kb)

Hexagons in Unity – Part 2

OK I decided to write a small post about that part where we create the vertices, UV coordinates etc in the previous post.
I’ll try to make it clear for the people who’re new in 3D stuff.

 

So yeah, we created a hexagon in our previous post, by creating every vertex and triangle by hand, instead of using a pre-build 3D model. For the simplicity, I’ll do a basic version of our hex this time and create only the top face of the hexagon. If you remember the previous post, it had a height, sides and a bottom etc.

Anyway, first have a look at this;

Our hex has a radius of r, this is the distance from the center to any corner. In a standard hex, this is also equals to the edge length. And we have “Half Width”, well it’s the width divided by two really. Nothing fancy.
Remember that we’ll be using center of the hexagon as origin for creating the vertices. So for example, the coordinates for the top corner should be; ( 0, -R ).

UV mapping is a little bit different though. First of all, origin for UV mapping is always bottom left corner, this is fixed and you really can’t change it. Also the width and height of the UV map is scaled down to 1 ( see blue coordinates in the picture ). So again, UV coordinates for the top corner should be; ( 0.5, 1 ).

Let’s have a look at the function;

//top
Vertices[0] =new Vector3(0, 0, Globals.Radius);
UV[0] =new Vector2(0.5f, 1);
//topright
Vertices[1] =new Vector3(Globals.HalfWidth, 0, Globals.Radius /2);
UV[1] =new Vector2(1, 0.75f);
//bottomright
Vertices[2] =new Vector3(Globals.HalfWidth, 0, Globals.Radius /2);
UV[2] =new Vector2(1, 0.25f);
//bottom
Vertices[3] =new Vector3(0, 0, Globals.Radius);
UV[3] =new Vector2(0.5f, 0);
//bottomleft
Vertices[4] =new Vector3(Globals.HalfWidth, 0, Globals.Radius /2);
UV[4] =new Vector2(0, 0.25f);
//topleft
Vertices[5] =new Vector3(Globals.HalfWidth, 0, Globals.Radius /2);
UV[5] =new Vector2(0, 0.75f);

 

Array indexing for these stuff is actually important so be careful with that. Other than that, yea I guess that’s all for this one right?

So now we have bunch of vertices in the space but that doesn’t mean much in a 3D world. To create something visible, we need surfaces and for that we need triangles. Next thing we need to do is to set the triangle information, in other words, let the system know which 3 vertices will be used for a triangle.

 

Now check this out;

 

 

Notice that numbers right by the corners are the index numbers of vertices in the Vertices array. So now we divided our hexagon into 4 triangles and all we have to do is;

2f3″>};

Triangles =new int[]
{
1, 0, 5, 2, 4, 3, 2, 1, 4, 1, 5, 4
};

This array will take integer three by three and generate triangles out of them. So 1,0,5 will be our first triangle, 2,4,3 will be the second etc.
Important thing to note here is that, order of the vertices do matter. In our situation, we ordered them counter clockwise so the surface will be above ( it’s all one sided ). If we had them clockwise, surface would have been below. So if you want to turn it over, you can just change the order of vertices, ie 1,0,5 to 1,5,0.

 

There is one more little thing in the code I posted earlier; Normals.
Normals aren’t always necessary ( depending on the shader ) but it’s good to know really. They are small vectors, showing UP for every single vertex. Yea, Up as in the opposite of down. Normals are used for lighting calculations so pretty damn important as well. For this example though, our normals array will be extremely simple as our shape is simple itself. It’s a simple surface so we can just set all vertex normals to 0,1,0 ( world up in my sample ).

22282a;color:#ffcd22

Normals =new Vector3[]
{
new Vector3(0, 1, 0),
new Vector3(0, 1, 0),
new Vector3(0, 1, 0),
new Vector3(0, 1, 0),
new Vector3(0, 1, 0),
new Vector3(0, 1, 0)
     };

Again the indexes should be in sync with other array indexes, so first vector3 is the normal for vertex 0 etc.

Aaaand that should be it. You can find the whole sample code in the previous post.

Let me know if you have any question, liked the post or wanted to say hi.
I had to close the comments due to increasing spams but you sure can always mail me for anything; brnkahyaoglu@gmail.com
See you later everyone!

Unity

Soooo it has been a while eh?

I know I know, I really should start posting again. It’s not that I’m not doing but I’m terribly busy and doing some oh-not-so-cool stuff these days. ie. master course homeworks -_-

Yeah, boring days, development wise.

Anyway, I had little free time yesterday and decided to check out Unity3D. I actually was looking for a chance to check it out for… a few years now? Finally yesterday was the day!

My first experimental work was on hexagons as usual. I just love hexagons.

I learned a decent amount of stuff about code management and structure of unity. It’s quite fun really, even felt a little bit toooo easy haha.

Even after switching from XNA to Unity, I’m still creating every object vertex by vertex by the way, not sure if it’s a good habit or not but sure feels weird.

Anyway you can check it out here; ( WASD for movement and mouse for camera )

http://www.barankahyaoglu.com/unity/smallshooter.html

Oh yea I’m also LOVING this web player thing. A few seconds of gameplay is sooo much better than thousands of screenshots afterall.

I’ll try to post more and especially about Unity in the future.

Cyaaa!