UI Starter Kit: Starlink (NGUI + TNet)

[_Daniel_]

Thanks for the clarification.

[iwishash]

I reviewed this package.
I think there's lots of useful info about UI design.
I have simple question.
Why do you use seperated "Background Camera" for showing background images?
Is there any benefit compare with using single UI camera?

[ArenMook]

As I recall, the background camera is used to draw the starry background, which is a mesh rather than a widget -- as well as the blinking star particles.

[galuodo]

could you please offer a picture of chat window?

[ArenMook]

It's the second from the bottom. Easier to see it in action -- open up the demo, play, single player, start the match. You can now type by hitting enter.

[Trithilon]

This is brilliant! I am happy you considered splitting Starlink and doing this in parts.
I am going to get this! XD

[sonicviz]

HI,
Nice work, I picked it up and I'm playing with it now.
Especially like the TNet integration example.

At the moment however I have my head deep in UI visual design.

While I have certain visual skills (photo/video etc) one of my weaknesses, like a lot of programmer centric people I suspect, is UI design skills.
I've trawled the sites like http://graphicriver.net/collections/2642138-kn-bz-ui-kit looking for complete UI kits (as well as Asset Store kits), and I'm talking to some artists, but still not quite finding what I need.

I like the clean design of the starlink kit and I've been playing around with some new controls to see if I can use them for a current project.
ex:

Unfortunately it's missing a few essential GUI controls (drop down etc). I'm thinking of making them to fill the gap.
While the photoshop files are included it would be great if you could write up a quick guide as to HOW you created the controls for starlink, as there needs to be consistency to some degree for new controls to fit. Or can you point to a guide you used to create them? for ex, the main button seems to be a thin pixel square with a gradient applied, offset with a black background which ends up as a slight shadow effect?

ty!

[ArenMook]

Starlink UI features fancy looking buttons and irregularly shaped windows, but you seem to just have square ones here. I'm pretty sure the elements you've used here can all be found in one of the example atlases that comes with NGUI (wooden one I think). Nonetheless, to answer your question, I created all of these in photoshop, but the process can be hard to explain as it involves many steps. For the simplest case try this:

1. Color the background grey so you can see what you're doing in the future.
2. Create a new layer.
3. Draw a white box on this layer.
4. Double-click the white box layer, bringing up Layer Style window.
5. Add a Stroke the same color as the box (white).
6. Right click the layer, rasterize it (this collapses the style)
7. Double-click the layer again for a new Layer style.
8. Add a gradient overlay with 20% Opacity.
9. Add a Drop Shadow effect.
10. Add a Stroke effect and change its Size to be 1 pixel.
11. Close the Layer Style window and hide the Background layer.
12. Save.

[sonicviz]

Yes, I've been playing with the other irregular designs as well. This test was more about exploring the standard feel, as well as the gradient semi 3D look.
Just the standard NGUI atlases don't include any of the base files so it's difficult to see the process to modify them for a new atlas.

Thanks for the process outline.

For doing the irregular designs are you using the pen tool to draw them out, then pretty much a variant of the above process?

ty!

[ArenMook]

Pen to draw the outline.

[xunxun]

does this work on iOS for both NGui and Tnet integrated?

[ArenMook]

Starlink is a game for both iOS and Android, and it uses TNet + NGUI. The content of kit is taken directly from that game. So the answer to your question is "yes".

[sonicviz]

4. Double-click the white box layer, bringing up Layer Style window.
5. Add a Stroke the same color as the box (white).

I don't quite get this.
How big a stroke in pixels?
And isn't creating a white stroke and then rasterizing it the same as just creating a white box in the first place?
Or is to to make the corners not so sharp?

ty!

[LightSky]

I just picked this up and it looks fantastic so far. 
Just a quick question regarding the TNet aspect, I have my TNet server running and I assigned the address for the server into the TnTcp script and I can see the server itself on LAN and it works fine.  However whenever I try to connect to the server via TnTcp it causes my client connection to time out repeatedly and it will not show the games that are currently created (The ones created in LAN on the server that was visible).

TLDR:  I can see my TNet server in LAN and makes games but it doesn't work via TNTcp.  It keeps timing out.  I am using my external address.

[ArenMook]

I don't quite get this.
How big a stroke in pixels?
And isn't creating a white stroke and then rasterizing it the same as just creating a white box in the first place?
Or is to to make the corners not so sharp?

ty!

Default size  (3 pixels). Stroke around a box creates rounded edges.

@LightSky: Via TnTcp? Do you mean just TCP? All connections are done via TCP. UDP is an option for frequent data that you may or may not use. Timing out is most often caused by forgetting to choose "run in background" when building Unity.