mapzengo pokemongo unity3d pois places

MapzenGo Part 8 : Places and Pois

It has been like… just two weeks? Oh boy that felt sooo much longer, rough days…

I just realized that I have to blog now and can’t run away from it anymore. It’s soo much harder than coding really. After all these years and so many posts, I still feel horrible at blogging and incredible nervous while writing…  But anyway, I have lots of new stuff, two new layers, no wait three even; earth, places and pois, this time! New and better triangulation library, improved settings window, brand new UI visualization and lots of bug fixes. So let’s have a look;

-Let’s start small, well I added the earth layer… just because. It’s just a clone of landuse and water layers really, nothing interesting here. Admittedly I hardly even tested it. I believe it’s coming from Natural Earth api, remember Mapzen is OpenStreetMap + Natural Earth. It has some interesting features like cliff, ridge, valley but well, I’ve always been much more interested in cities so personally didn’t find it that useful.

-No worries, I have something better; places and poi (Point of interest) layers!
Places layers is like a list of populated places; cities, towns, neighbourhoods etc. It’s extremely useful for city/state/country names at low zoom levels and neighborhood names in high zoom levels.  It looks great coupled with boundary layer as well.
Poi level is even more interesting, it’s a huge list of…. interesting points… yeah. It has lots of places like Apple Store, H&M, Walgreens categorized under so many different “types”. You can check the Mapzen documentation, it’s quite detailed and explains many new properties very well.

mapzengo pois places pokemongo unity3d labelsCity and neighbourhood labels

One important thing to note here though, both these layers use the screen space UI and not the 3D world like the others. Why? Well I initially created 3D markers, like pokestops in PokemonGo but they were extremely hard to use (overlapping with each other) and understand. And you probably already know how horrible is the Unity3D  TextMesh component is. I also tried using icons on a billboard but sprites looked blurry and low quality as well. Instead I put an empty gameobject in the 3D world (as a marker) and an icon on UI which sticks to that empty gameobject on every update. It looks a lot better this way, easier to read text/icons and interact with them. If you want 3D objects though, you can still use those empty gameobject as well!

mapzen go pois place manhattan pokemongo unity3dUI elements on pois

-OK what else? Hmm hmm hmm… Ah the UV mappings!  I won’t go into too much detail with these as it’s tiny little bit complex and hard to explain but we have UVs now. Roads, landscape and water UV mapping was quite easy with repetitive textures really. Building UV mapping is a little harder and not really complete but if you’re interested, you can read our little discussion about it in this Github issue.  You can see roads, park and building UVs in the image below.

mapzen pois places uv mapping pokemongo unity3dMapzenGo with “First-result-on-google” textures

-By the way, you probably noticed how almost every screenshot has a different style right? It’s all just tweaking settings and materials, I’m not keeping any code from you guys. You can achieve all those in like 5-10 minutes of work (after you have a grasp on the general structure). For example, I got bored a few nights ago and created this PokemonGo style in a few minutes; with roads, buildings and pokemons!
That being said, I’m well aware that it’s also quite hard to switch between styles and this is I’m planning to look into soon as well and you’ll probably be able to drag&drop different styles after that.

There are probably bunch of other stuff I’m forgetting at the moment but it’s getting late, I’m getting tired so I’ll just cut it here.

mapzengo pokemongo unity3d pois placesManhattan after 50 post process image effects

What’s next? Well I want to restructure the folder hierarchy first. Not sure exactly about this one yet but I want to switch to factory/layer focused hierarchy where everything related to a single layer rests under one folder. That way it’ll be easier to plug in/out layers into any project.

Then I want a slightly different factory/settings management system. Roman’s (kind gentlemen who wrote all the settings scripts) gonna kill me , I know but I have…some ideas. Yea that sounds bad… I just want to make it easier to use, plug stuff in/out, tweak, change styles etc etc. Unfortunately I’m horrible at editor scripts so might not be able to do this for a while.

Then maybe some improvements for the UI icons of poi and places layers. Or some road mesh improvements (smoother curves? pavements?) Oh and I’m planning to drop/change the running guy thing as it takes like the 90% of the package size. And he’s not even that handsome.

Anyway so yeah, I’ll keep working on it as much as I can. Please do keep posting me… whatever. I just love hearing from you guys. That’s pretty much what keeps me going.

Cheers,
Baran

MapzenGo Github Page
Twitter
Download MapzenGo Part 8
(v8.1 @5.10.2016, removed unnecessary image effects folder)
(v8.2 @5.10.2016, fixed BasicLoader and DynamicLoader scenes)
(v8.3 @5.10.2016, fixed some default values and settings for Poi factory)
(v8.4 @15.10.2016, Mapzen Api v1 compatibility)
(v8.5 @28.10.2016, fixed a small bug where scriptable object doesn’t run in non-windows platforms)
(v8.6 @18.12.2016, updated UniRx)

Save

Save

Save

Save

bTube – 2D Texture Shader

Before I start, I must say that I know nothing about shaders at all and I managed to get this together googling & asking my friends all the way. So I’m hardly a reliable source on this topic but still thought it’s worth sharing so here we go…

If you played bTube, you must have noticed that something looks off with the incoming barriers. I mean can you even tell if they are 2D or 3D? Have a quick look if you want; bTube.

As you can see, those 2D looking slices are actually just 3D objects with a special shader that fixed their textures to 2D world. Well why did I made it in 3D then? That’s a whole another question and I can shortly say it felt easier at that time. And with this shader it’s quite hard to tell the difference anyway.

So what does this shader do? It applies the given texture in 2D screen coordinates instead of the 3D triangles. I know I’m quite horrible at describing things like these in words so just check this, yet another comparison image below;

 

Left, is the standard diffuse shader, applying texture to triangles in 3D coordinate system. Right is the shader I used, which doesn’t even take vertex positions into calculation, just slaps the given texture on the screen as a 2D image with no depth.

So it’s an extremely cheap & easy trick but I still believe it’s quite underused and can generate awesome effects ( as seen in bTube! ). You can find a simpler version of what I used in game below. Only difference is I used a color as multiplier for the “space effect” in bTube. Thought it was irrelevant here so took it out for this blog post.

 

Shader "Custom/FixedTexture" {
 Properties {
	_MainTex ("Texture", 2D) = "white" {}
}

SubShader {
	Tags {
	 "RenderType"="Opaque" 
	 "Queue" = "Geometry"
	 }
	LOD 100
	
	Pass {
		 ZWrite On  
		CGPROGRAM
			
			#pragma vertex vert
			#pragma fragment frag
			
			#include "UnityCG.cginc"
			
			sampler2D _MainTex;
			float4 _MainTex_ST;

			struct v2f {
				float4 pos : SV_POSITION;
				float4 screenPos : TEXCOORD0;
			};
						
			v2f vert (appdata_base v)
			{
				v2f o;
				o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
				o.screenPos.xyw = o.pos.xyw;
				return o;
			}
						
			half4 frag (v2f i) : COLOR
			{
				float2 screenUV = i.screenPos.xy / i.screenPos.w;
				screenUV *= _MainTex_ST.xy;
				half4 texcol = tex2D (_MainTex, screenUV);
				
				return texcol;
			}
		ENDCG
	}
}

}

FixedTexture.shader (849.00 bytes)

Please do let me know if you have any questions!

Hexagons in Unity

OK so it has been ages since I last posted something useful here, I’m a bit rusty and my aged post editor is torturing me, but I’ll do my best.

Let’s talk a little bit more about Unity and Hexagons.
Why? Well pretty much because both are the coolest things in their fields.
Unity is just stupefyingly easy and fun. Likewise for hexagons, they are incredibly sexy as well. So yeah, Unity & Hexagons.

I’ll assume that you’ll know the basics here, like creating a script etc. Oh and that being said, I’m a rather newbie in Unity as well so my way of doing things may be wrong or (most likely) not optimal. I work in XNA-ish way a lot and pretty much refuse to learn Unity practices etc. I may be so totally wrong on doing that but yea, that’s how it is for now.

Anyway, let’s get started;

In this post, we’ll create a simple hexagon for future usage. We’ll create it vertex by vertex, not using a 3D model or anything. Most important point here is to make it flexible and manageable for future projects. This is pretty much what we’re trying to achieve in the end ( first pic );

First of all let’s create a Hierarchy like in that second pic above.

Nothing fancy there really as we’ll create everything in code. Told you I don’t like drag&drop stuff and I’ll do it all xna style.
World and HexHolder are empty game object, that’s pretty much it.

Now as another easy step, let’s create a simple script for “Hex”;

 

 

Once again, nothing fancy.
Two things to note here;

(1) is that I added a public Vector2 HexPosition to the Hex script. This is not the x,y,z coordinates of our hexagon. This is the location of any particular hex on the base hex grid ( see that final pic above, whole surface is a big huge grid that doesn’t exists in code but does theoretically ).

The grid we’ll be using is something like this; ( indexing may be different though, I just googled this picture )

(2), we have another object, HexModel inside this one. What’s that? That’s all the vertices, edges and whatever of our Hex. Pretty much the physical or visual stuff wrapped all together. All that stuff gets extremely hairy so I just created a sub class for them.

Speaking of the model, let’s look at how we create that one;

This InitializeModel function actually is inside Hex class. Why? Well mainly because I wasn’t able to find a useful constructor implementation for components. So instead, after setting some important values, I call model creator myself. We’ll look into that later on.

So first, we created a new game object and added that new component HexModel to that. We keep the component reference in Hex, not the game object ( not a big difference but saves us some calls ). Then we set hex parent to be current object’s transform.
This will make HexModel a subobject to Hex in the game hierarchy.
Setting position to zero as it’s relative to the Hex and we want them both at the same place ( for now ) for obvious reasons.
Shader is just a standard share, I’ll add that to files but won’t talk about it here.
And texture is just a filler texture, nothing special.

So where are we standing now?
We have a world hierarchy, a hex wrapper “Hex” and a model “HexModel”.
Well we actually haven’t created the HexModel yet so let’s do that now.

Add a new script inside the assets as normal and open it with whatever IDE you’re using BUT this time we’ll make a vital change/addition to the script file;

Notice the new line right above the class definition. That lines says, this component requires a MeshFilter and MeshRenderer in whatever object it’s attached to. In other words, this script can only be attached to physical objects ( with mesh stuff ).

First property is just optional, I always like to keep a reference to parent object if possible.
Then, since this will be a mesh object, there are some stuff we have to have for visualization, like Vertices, normals etc.
The idea is to set all these vertices, normals, UV and let Unity draw them on screen.

void Start ()
{
Parent = transform.parent.GetComponent<Hex>();
Vertices =newVector3[24];
UV =newVector2[24];

DrawTopAndBottom();
DrawSides();
SetTriangles();

var mesh =newMesh { name =“Hex Mesh” };
GetComponent<MeshFilter>().mesh = mesh;
mesh.vertices = Vertices;
mesh.uv = UV;
mesh.triangles = Triangles;
mesh.normals = Normals;
}

I don’t even know why I’ve been posting pics, not embedded code really. Anyway here it is, should be easier now.
This is the start function of HexModel. First we get and save a reference for the parent objects Hex script, then we create arrays for vertices and UV.
Next 3 functions creates vertices, they are extremely straight forward and simple, not sure if there is anything to talk about them. I might do another post in the future but I’ll skip them for now. They’ll of course be in the sample solution below.
And 3rd part is, now that we set vertices and UV’s, we tell Unity to use them as this current game objects mesh.

 

Now two important things,
First we’ll create a few global variable for our hexagon grid, like hex radius and related values.
Simply create a new C# script file and paste all this into that;

using System;

public static class Globals
{
public static int Radius =8;
public static int Height =2* Radius;
public static float RowHeight =1.5f* Radius;
public static float HalfWidth = (float)Math.Sqrt((Radius * Radius) ((Radius /2) * (Radius /2)));
public static float Width =2* HalfWidth;
public static float ExtraHeight = Height RowHeight;
public static float Edge = RowHeight ExtraHeight;
}

Those are some generic values all calculated using base radius value. I don’t like static stuff for obvious reasons but I feel like this is OK and since it makes everything much easier… yeah.

And now we’ll create the script that’ll run first and create everything. Remember that “World” object we created in game hierarchy? Yeah we’ll use that as script host for this, so create a “World” script and attach it to the World object.

publicclassWorld : MonoBehaviour {

Dictionary<Vector2, Hex> Hexes { get; set; }

void Start ()
{
Hexes =newDictionary<Vector2, Hex>();

var position =newVector2(0,0);
var pos = ToPixel(position);

var hex =newGameObject();
hex.AddComponent(“Hex”);
var hm = hex.GetComponent<Hex>();
hm.HexPosition = position;
hex.transform.position = pos;
hex.transform.parent = transform.FindChild(“HexHolder”);
hm.InitializeModel();
this.Hexes.Add(position, hm);
}

In our “World” we just have one single dictionary for now, which will help us to keep track of all hexagons we have in this world.
Then we’re creating a new hexagon at grid position 0,0. Remember this is grid position, not global x,y,z of the hexagon.
We send that grid position to a function to convert it to exact pixel coordinates, that’s the function I posted long ago in another post. Won’t go into that here as it is long and boring but it’s there in the code if you want to check it out.

It’s standard stuff really, we create a new game object, attach our Hex script to it. Set it’s HexPosition, set it’s pixel position, added it under the “HexHolder” object we created at the begining ( parent-child relation here, just to keep stuff organized ). Then we call InitializeModel function which will create the flesh and bones of our hex and add it to the list for future references.

Well we’re pretty much done, just one little thing, do no forget to add “Resources/Textures/” folder into assets and create a “Hex” texture there. Our HexModel will look for it and if it’s not able to find it, it’ll look all dark grayish.

At this point, if you run it on Unity and play with the camera angles a little bit, you should get something that looks like this;

Well it’s not the worlds most beautiful hexagon but it’s 100% your!
You can add lighting and whatever to make it look better really,

Better?
Yeah I guess a little bit better.

You can find the whole sample here;
Hexagons.zip (176.86 kb)

For some reason it won’t load the scene by itself though, remember to load the scene yourself after opening the project ( file -> open scene -> hexagons ).

Anyway, 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!

Oldies – Pirates

It was a project based on my random island generator thing. It’s just something like a tech demo, generating multiple islands at once etc. Nothing fancy but it was a good start I say.

I still keep dreaming about that pirates game actually, I still believe it would be glorious and damn successful. I won’t go into that, not talking about my precious billion dollar ideas here for sure HARRR!

It looks something like this;

I know it looks ridiculous but the concentration point was turning that one map generator to work on a giving coordinate. Then I was planing to create a big huge voronoi diagram and create an island on each voronoi site etc etc.

I’m pretty sure I’ll go back to this in future. Damn pirates have so much wenches… ehm I mean potential. Until that I’ll just keep playing Sid Meier’s Pirates…

And here comes the…

I must warn you though, code is most likely horrible. It might give you various kinds of disease, start a hurricane, place you right by the Gandhi on map or make you want to gauge your eyes out. All these projects are “as is” and I won’t be able to help you much further with them ( I really don’t remember much ) or fix bugs etc etc.

If you like them though, you’re obliged to let me know and feel happy. I want to feel happy. Don’t be mean. ( you can use the comments below or mail brnkahyaoglu@gmail.com )

Download: Pirates.zip (517.63 kb)

Towel Progress Update

Well not really a progress update, but I just wanted to post the latest setup. ( I really don’t want this to rot on my hdd like that ).

I haven’t worked on this one for a while now. Kinda lost interest. Especially after not being able to find a decent flash developer to make a simple player for me…. I hate flash.

First of all; You can DOWNLOAD towel here.

-OK so what is this exactly?

It’s a modular news&event&stream aggregator created mainly for Starcraft2 community. But since it’s modular, it’s rather easy to make it support any game/community out there. It’s not only modular, it’s also totally customizable…. and supports localization with just a bunch of text files…. gah it has too many features to just die like that.

-Why would anyone need it?

Basically it pops up notifications for streams and events ( tournaments etc ). It uses TeamLiquid Calendar and Stream data for that but you can add your own favorite stuff too.

With Towel, you can just mark a stream as favorite and then you’ll get a notification whenever that stream goes online again. Better than refreshing TL every 5 minutes isn’t it? Same goes for events too. Haven’t you ever missed a tournament while playing something and totally forget about the time?

All in all, I can say at this stage ( with just 2 base modules, streams and events ) it’s TL on desktop with increased usability.

-What does it looks like? Is it customizable?

Oh well, visuals aren’t really done but in general;

Menu – Calendar – Streams

Towel Progress Update - Windows Live Writer Towel (10)Towel (11)

Is it customizable you say? Hell yes it is! It’s totally customizable, style files are NOT compiled, they are just basic xaml files which you can open with notepad and edit. You can change simple stuff like colors, font etc OR redo the most of the layout. All you need is notepad…

-Does it also have a player? Why?

Yes Towel has a stand alone player, just like any media player out there, to play the streams. Why? Because watching streams in a browser window kinda blocks whatever else you’re doing. This is pretty much the whole point of Towel Player;

WindowClipping (26)

You really shouldn’t have to switch tabs to post something on forums while watching a stream. ( that player is pinned so it’ll be always on top of whatever else you’re doing ) Or to watch 2+ streams…

WindowClipping (27)

 

-How many modules are there?

There are just Streams and Events module for now. Obviously I was planning for much much more before I lost my appetite.

-Lost your appetite? After like months of work? Why?

Because flash is a pain in the ass. I need a somewhat decent flash developer for a simple basic flash player but naah, couldn’t find anyone. And without flash player, it’s really hard to support quality changes in player ( pretty much doesn’t work at this stage )

-And if you find a flash developer?

I’ would probably go back to this. I would like to add a few more modules and improve current ones. Trust me I don’t like trashing 6 months hard work just like that.

-Why do you need flash anyway?

Because Twitch developers refuses to fix their broken Javascript player and/or document it. I know it’s not all roses and daisies over there but how hard can it be to fix a resolution bug… If they don’t have a Html5 player up and working until this fall, I’m pretty much done with twitch & sc2 fan stuff.

-Do you need help in any other way?

Well of course. It’s hard to be a single developer you know, pretty much like a single mother. When there is no interest or anyone gagging you for bug and stuff, you lost interest in it. That’s pretty much why&how I kept ScCalendar alive for almost a year

-There are lots of bugs!

Well of course, it’s not a full release after all. It’s pretty much beta, almost alpha version. Basic functionality should be OK though.

Oh just beware, “Run on Windows Startup” doesn’t work.

-So that’s it?

Yep, pretty much. Don’t hesitate to contact me for whatever, questions, comments…

Fedora

Fedora was my XNA learning project where I tried to create a Fez-like game engine .

The goal was using the orthogonal camera and implement camera dimension switches as smooth as they are in Fez. In later stages I also tried some other stuff like creating the world as character moves , pretty much like they did it in Bastion.

Also created a map editor for Fedora in WPF which was my first 3D work in WPF.

I haven’t bloged about this project yet but I’m planing to write about camera control these days.

Dungeon Generator

It’s a series of little tests more than a full scale project. Including things like random map generation using predefined modules , creating rooms with Binary Space Partitioning and creating corridors with A* algorithm

I have only one blog post about this for now , but I’m planing to write more about it in the future.

Yet Another A* Implementation

Map Generator

A map generator based on Amit Patel’s Polygonal Map Generation blog post. There are 4 different versions ; 2D / 3D WPF , 2D / 3D XNA ( main project ).

Using Voronoi diagrams to create the main structure and Lloyd’s algorithm for relaxation.  There is a Catmull-Clark subdivision implementation in 3D XNA version to smooth the polygons and a linear interpolation implementation in 2D WPF to smooth the coastline.

 

Blog posts about this project;

Part 1 – Introduction

Part 2 – Creating the Island

Part 2.5 – Smoothing the Coastline

Part 3 – Elevation

Part 4 – Rivers

Part 5 – Moisture

 

GALLERY

[usercontrol: /blog/user controls/gallery.ascx ImageUrl=/blog/gallery/mapgenerator;RepeatColumns=5]