World UI - Revision history

46.16.211.253: /* Flat World UI */

2018-04-25T11:01:17Z

‎Flat World UI

Bablakeluke: /* Flat World UI */

2018-04-02T16:14:56Z

‎Flat World UI

Bablakeluke: /* Ordinary World UI */

2018-04-02T16:12:17Z

‎Ordinary World UI

Bablakeluke: /* Ordinary World UI */

2018-04-02T16:06:34Z

‎Ordinary World UI

Bablakeluke: /* Ordinary World UI */

2018-04-02T16:05:03Z

‎Ordinary World UI

188.222.158.94: /* Flat World UI */

2017-03-13T02:39:11Z

‎Flat World UI

188.222.158.94 at 02:26, 13 March 2017

2017-03-13T02:26:54Z

151.229.186.156: Created page with "World UI's are for any UI that needs to appear in 3D space. They come in two flavours: == Ordinary World UI == These are true 3D and are typically what you'd use if you wan..."

2017-01-13T16:02:38Z

Created page with "World UI's are for any UI that needs to appear in 3D space. They come in two flavours: == Ordinary World UI == These are true 3D and are typically what you'd use if you wan..."

New page

World UI's are for any UI that needs to appear in 3D space. They come in two flavours:

== Ordinary World UI ==

These are true 3D and are typically what you'd use if you want to make use of the [[Text Extrude|text-extrude CSS property]]. If you want to make one in the editor, go to:

GameObject > UI > PowerUI > In World UI

You'll then get a previewer which will show you where the UI will appear. Note that the "WorldUI Helper" component is intended to be more of a guideline so it's reccommended to take a look at the source.

Typically they're instanced dynamically anyway (such as for 3D chat bubbles etc) so for that you'll want to look at the WorldUI scripting class.

== Flat World UI ==

These are your more traditional in world UI's where it's rendered to an image, then the image is displayed in the gameworld however you wish. They are slower than ordinary WorldUI's because of that extra texture step, but they are a lot more flexible in terms of how they can be displayed. As the surface can be literally any shape, they require slightly specialized input handling. Fortunately PowerUI contains everything you need, so it's just a case of this:

<syntaxhighlight lang="csharp">

// FlatWorldUI myFlatWorldUI;

// Set the transform property to the transform of whichever gameobject is displaying the texture@
myFlatWorldUI.transform=theTransform;

// Mark it as accepting input next (must happen after the above):
myFlatWorldUI.AcceptsInput=true;

</syntaxhighlight>

← Older revision		Revision as of 11:01, 25 April 2018
Line 64:		Line 64:
	ui.document.innerHTML="Hello flat world!";		ui.document.innerHTML="Hello flat world!";

		+	// Use ui.texture somewhere! Note that it's a RenderTexture and will update as your HTML document does.
	</syntaxhighlight>		</syntaxhighlight>

@@ Line 50: / Line 50: @@
 == Flat World UI ==
-These are your more traditional in world UI's where it's rendered to an image, then the image is displayed in the gameworld however you wish. They are slower than ordinary WorldUI's because of that extra texture step, but they are a lot more flexible in terms of how they can be displayed:
+These are your more traditional in world UI's where it's rendered to an image, then the image is displayed in the gameworld however you wish. They are slower than ordinary WorldUI's because of that extra texture step, but they are a lot more flexible in terms of how they can be displayed. To create one:
 <syntaxhighlight lang="csharp">

← Older revision		Revision as of 16:12, 2 April 2018
Line 45:		Line 45:

	</syntaxhighlight>		</syntaxhighlight>
		+
		+	Note that with these true 3D World UI's, you must be '''very careful with the gameObject's scale on the z axis (its depth - the depth spacing between your UI elements)'''. If you set it too small, or even zero, you'll start experiencing [https://en.wikipedia.org/wiki/Z-fighting z-fighting] which means the UI will flicker. You can also use this to your advantage however - setting the z scale quite high gives a very unique looking perspective effect which is particularly powerful in VR. If you want it to be completely flat, create a "flat" WorldUI instead (below).

	== Flat World UI ==		== Flat World UI ==

← Older revision		Revision as of 16:06, 2 April 2018
Line 31:		Line 31:


−	Typically ~~they~~'re instanced dynamically ~~anyway (such as for 3D chat bubbles etc)~~ so ~~for that you'll want~~ to ~~look at~~ the [http://powerui.kulestar.com/powerdocs-2_0/classPowerUI_1_1WorldUI.html WorldUI scripting class]:	+	Typically these WorldUI's are instanced dynamically, so to do this either parent the above to a Unity prefab and [https://docs.unity3d.com/Manual/InstantiatingPrefabs.html instantiate the prefab like normal], or directly use the [http://powerui.kulestar.com/powerdocs-2_0/classPowerUI_1_1WorldUI.html WorldUI scripting class]:

	<syntaxhighlight lang="csharp">		<syntaxhighlight lang="csharp">

@@ Line 13: / Line 13: @@
 You'll then get a previewer which will show you where the UI will appear. Note that the "WorldUI Helper" component is intended to be more of a guideline so it's recommended to take a look at the source.
 Typically they're instanced dynamically anyway (such as for 3D chat bubbles etc) so for that you'll want to look at the [http://powerui.kulestar.com/powerdocs-2_0/classPowerUI_1_1WorldUI.html WorldUI scripting class]:
@@ Line 28: / Line 45: @@
 </syntaxhighlight>
 == Flat World UI ==

@@ Line 32: / Line 32: @@
 == Flat World UI ==
-These are your more traditional in world UI's where it's rendered to an image, then the image is displayed in the gameworld however you wish. They are slower than ordinary WorldUI's because of that extra texture step, but they are a lot more flexible in terms of how they can be displayed. As the surface can be literally any shape, they require slightly specialized input handling. Fortunately PowerUI contains everything you need, so it's just a case of this:
+These are your more traditional in world UI's where it's rendered to an image, then the image is displayed in the gameworld however you wish. They are slower than ordinary WorldUI's because of that extra texture step, but they are a lot more flexible in terms of how they can be displayed:
 <syntaxhighlight lang="csharp">
-// FlatWorldUI myFlatWorldUI;
+// Create a FlatWorldUI (200px x 200px):
-// Set the transform property to the transform of whichever gameobject is displaying the texture@
+// Set the innerHTML however you'd like (e.g. via this helper, or write, or doc.location etc).
-myFlatWorldUI.transform=theTransform;
+ui.document.innerHTML="Hello flat world!";
-// Mark it as accepting input next (must happen after the above):
+</syntaxhighlight>
-myFlatWorldUI.AcceptsInput=true;
 </syntaxhighlight>

@@ Line 1: / Line 1: @@
-World UI's are for any UI that needs to appear in 3D space. They come in two flavours:
+Sometimes you might want to create something 2D in your 3D world - for example, showing health above a player, a tv screen, integration with NGUI, billboards or something a little more, well, original..
@@ Line 6: / Line 10: @@
 These are true 3D and are typically what you'd use if you want to make use of the [[Text Extrude|text-extrude CSS property]]. If you want to make one in the editor, go to:
-GameObject > UI > PowerUI > In World UI
+''GameObject > UI > PowerUI > In World UI''
-You'll then get a previewer which will show you where the UI will appear. Note that the "WorldUI Helper" component is intended to be more of a guideline so it's reccommended to take a look at the source.
+// Auto pixel perfect scaling:
-Typically they're instanced dynamically anyway (such as for 3D chat bubbles etc) so for that you'll want to look at the WorldUI scripting class.
+// Either write to innerHTML or navigate it:
@@ Line 26: / Line 43: @@
 // Mark it as accepting input next (must happen after the above):
 myFlatWorldUI.AcceptsInput=true;
 </syntaxhighlight>