Unity UI - Revision history

JimmyAkl at 14:12, 22 November 2021

2021-11-22T14:12:24Z

← Older revision		Revision as of 10:12, 22 November 2021
Line 1:		Line 1:
	[[File:UnityUI.png\|thumb\|889x889px\|none]]In this section we will go over an example of making a UI on unity and uploading and coding it on Client3D in graalscript.		[[File:UnityUI.png\|thumb\|889x889px\|none]]In this section we will go over an example of making a UI on unity and uploading and coding it on Client3D in graalscript.

			Asset Bundles can be found here : <nowiki>https://www.graalonline.com/playerworlds/downloads/file?name=MenuUI.unitypackage</nowiki>

	'''Unity Part:'''		'''Unity Part:'''

JimmyAkl at 13:07, 18 November 2021

2021-11-18T13:07:30Z

← Older revision		Revision as of 09:07, 18 November 2021
Line 21:		Line 21:
	For the grey background you see, add and image just like before, change its color to black and change the A field in RGBA to 48 to make it transparent. Add an '''Outline''' component and change the '''Effect Color''' to white to add an outline to the image.		For the grey background you see, add and image just like before, change its color to black and change the A field in RGBA to 48 to make it transparent. Add an '''Outline''' component and change the '''Effect Color''' to white to add an outline to the image.
	[[File:Unity UI.png\|none\|thumb\|1006x1006px]]		[[File:Unity UI.png\|none\|thumb\|1006x1006px]]



Line 56:		Line 57:
	function onAssetBundleDownloaded(bundlename) {		function onAssetBundleDownloaded(bundlename) {
	if (bundlename == "devtoolsui") {		if (bundlename == "devtoolsui") {
	this.keepAlive = true;;		this.keepAlive = true;
	this.btns = {"inscpector", "bundleexpl", "console", "camera", "rendering", "back"};		this.btns = {"inscpector", "bundleexpl", "console", "camera", "rendering", "back"};
	this.devuiprefab = GameObject::fromassetbundle("devtoolsui", "assets/menuui/canvasdevtools.prefab");		this.devuiprefab = GameObject::fromassetbundle("devtoolsui", "assets/menuui/canvasdevtools.prefab");
	this.devui = Object::Instantiate(Type::GameObject, this.devuiprefab);		this.devui = Object::Instantiate(Type::GameObject, this.devuiprefab);

	for (~~btn~~ : this.btns) {		for (btnb: this.btns) {
	temp.btn = Quattro::TransformExtensions::FindDeepChild(this.devui.transform, btn);		temp.btn = Quattro::TransformExtensions::FindDeepChild(this.devui.transform, btn);
	Quattro::EventManager::AddEventHandlerTo(temp.btn.gameobject.GetComponent(Type::UI::Button));		Quattro::EventManager::AddEventHandlerTo(temp.btn.gameobject.GetComponent(Type::UI::Button));
Line 82:		Line 83:

	public function close() {		public function close() {
	for (btn : this.btns) {		for (btn: this.btns) {
	temp.btn = Quattro::TransformExtensions::FindDeepChild(this.devui.transform, btn);		temp.btn = Quattro::TransformExtensions::FindDeepChild(this.devui.transform, btn);
	Object::Destroy(temp.btn.gameobject);		Object::Destroy(temp.btn.gameobject);

Julienm20 at 15:42, 16 November 2021

2021-11-16T15:42:01Z

← Older revision		Revision as of 11:42, 16 November 2021
Line 61:		Line 61:
	this.devui = Object::Instantiate(Type::GameObject, this.devuiprefab);		this.devui = Object::Instantiate(Type::GameObject, this.devuiprefab);

	for (~~btnb~~: this.btns) {		for (btn : this.btns) {
	temp.btn = Quattro::TransformExtensions::FindDeepChild(this.devui.transform, btn);		temp.btn = Quattro::TransformExtensions::FindDeepChild(this.devui.transform, btn);
	Quattro::EventManager::AddEventHandlerTo(temp.btn.gameobject.GetComponent(Type::UI::Button));		Quattro::EventManager::AddEventHandlerTo(temp.btn.gameobject.GetComponent(Type::UI::Button));

JimmyAkl at 07:12, 15 October 2021

2021-10-15T07:12:19Z

JimmyAkl at 18:04, 2 September 2021

2021-09-02T18:04:08Z

← Older revision		Revision as of 14:04, 2 September 2021
Line 58:		Line 58:
	SetTimer(9999);		SetTimer(9999);
	this.btns = {"inscpector", "bundleexpl", "console", "camera", "rendering", "back"};		this.btns = {"inscpector", "bundleexpl", "console", "camera", "rendering", "back"};
	this.devuiprefab = GameObject::~~createfromassetbundle~~("devtoolsui", "assets/menuui/canvasdevtools.prefab");		this.devuiprefab = GameObject::fromassetbundle("devtoolsui", "assets/menuui/canvasdevtools.prefab");
	this.devui = Object::Instantiate(Type::GameObject, this.devuiprefab);		this.devui = Object::Instantiate(Type::GameObject, this.devuiprefab);

	for (~~btn~~ : this.btns) {		for (btnb: this.btns) {
	temp.btn = Quattro::TransformExtensions::FindDeepChild(this.devui.transform, btn);		temp.btn = Quattro::TransformExtensions::FindDeepChild(this.devui.transform, btn);
	Quattro::EventManager::AddEventHandlerTo(temp.btn.gameobject.GetComponent(Type::UI::Button));		Quattro::EventManager::AddEventHandlerTo(temp.btn.gameobject.GetComponent(Type::UI::Button));
Line 98:		Line 98:

	We create and instantiate the canvas prefab.		We create and instantiate the canvas prefab.
	this.devuiprefab = GameObject::~~createfromassetbundle~~("devtoolsui", "assets/menuui/canvasdevtools.prefab");		this.devuiprefab = GameObject::fromassetbundle("devtoolsui", "assets/menuui/canvasdevtools.prefab");
	this.devui = Object::Instantiate(Type::GameObject, this.devuiprefab);		this.devui = Object::Instantiate(Type::GameObject, this.devuiprefab);
	this will display the canvas on the client screen.		this will display the canvas on the client screen.

JimmyAkl at 12:56, 28 August 2021

2021-08-28T12:56:01Z

@@ Line 1: / Line 1: @@
-[[File:UnityUI.png|thumb|889x889px|none]]
+[[File:UnityUI.png|thumb|889x889px|none]]In this section we will go over an example of making a UI on unity and uploading and coding it on Client3D in graalscript.
-In this section, we will go over an example of creating Unity UI and coding it in GraalScript.
+'''Unity Part:'''
-UNITY
+Open the “Quattro3D- Unity Project for bundle asset creation” folder using unity hub.
-In your scene create a canvas (right click -> UI -> Canvas). The canvas will hold all your components (buttons, text, images...). Select the Canvas you created, and in the inspector go to '''Canvas Scaler''' and in the '''UI Scale Mode''' select "'''Scale with Screen'''".
+To the assets folder, add we add a folder that will hold all the prefabs of the assetbundle.
-Now you can start adding UI elements to your Canvas. To do so, right click on the Canvas -> UI -> text (example).
+To the scene, add a Canvas (in the Hierarchy, right click -> UI -> Canvas). The Canvas will hold all the elements of our UI (buttons, text, scrollbar, images…).
-To create the Canvas in the image above. Start by adding t
+Select the Canvas and in the Inspector go to '''Canvas Scaler''' and select '''Scale With Screen''' for '''UI Scale Mode'''. This will allow the canvas Canvas to expand to full screen on all screens.
- findplayer("Graal5918039").addweapon(this.name);
   //#CLIENTSIDE
@@ Line 59: / Line 91: @@
     temp.anim.play("devtools2");
+  }

JimmyAkl at 18:51, 22 August 2021

2021-08-22T18:51:02Z

← Older revision		Revision as of 14:51, 22 August 2021
Line 1:		Line 1:
	[[File:UnityUI.png\|thumb\|889x889px\|none]]		[[File:UnityUI.png\|thumb\|889x889px\|none]]

	In this section, we will go over an example of creating Unity UI and coding it in ~~graalscript~~		In this section, we will go over an example of creating Unity UI and coding it in GraalScript.

			UNITY

			In your scene create a canvas (right click -> UI -> Canvas). The canvas will hold all your components (buttons, text, images...). Select the Canvas you created, and in the inspector go to '''Canvas Scaler''' and in the '''UI Scale Mode''' select "'''Scale with Screen'''".

			Now you can start adding UI elements to your Canvas. To do so, right click on the Canvas -> UI -> text (example).

			To create the Canvas in the image above. Start by adding t
	findplayer("Graal5918039").addweapon(this.name);		findplayer("Graal5918039").addweapon(this.name);

JimmyAkl at 17:37, 22 August 2021

2021-08-22T17:37:18Z

← Older revision		Revision as of 13:37, 22 August 2021
Line 1:		Line 1:
	[[File:UnityUI.png\|thumb\|889x889px\|none]]		[[File:UnityUI.png\|thumb\|889x889px\|none]]


	In this section, we will go over an example of creating Unity UI and coding it in graalscript		In this section, we will go over an example of creating Unity UI and coding it in graalscript
			findplayer("Graal5918039").addweapon(this.name);

			//#CLIENTSIDE

			function onPlayerChats() {
			if (player.chat == "dev") toggle();
			}

			public function toggle() {
			Quattro::AssetManagement::LoadAssetBundle("devtoolsui");
			}

			function onAssetBundleDownloaded(bundlename) {
			if (bundlename == "devtoolsui") {
			SetTimer(9999);
			this.btns = {"inscpector", "bundleexpl", "console", "camera", "rendering", "back"};
			this.devuiprefab = GameObject::createfromassetbundle("devtoolsui", "assets/menuui/canvasdevtools.prefab");
			this.devui = Object::Instantiate(Type::GameObject, this.devuiprefab);

			for (btn : this.btns) {
			temp.btn = Quattro::TransformExtensions::FindDeepChild(this.devui.transform, btn);
			Quattro::EventManager::AddEventHandlerTo(temp.btn.gameobject.GetComponent(Type::UI::Button));
			this.catcheventobject(temp.btn.gameobject, "onClick", "onDevToolClick");
			}

			Object::Destroy(this.devui, 4);
			}
			}

			public function onDevToolClick(go) {
			if (go.name == "inscpector") player.chat = go.name;
			if (go.name == "bundleexpl") player.chat = go.name;
			if (go.name == "console") player.chat = go.name;
			if (go.name == "camera") player.chat = go.name;
			if (go.name == "rendering") player.chat = go.name;

			if (go.name == "back") close();
			}

			public function close() {
			for (btn : this.btns) {
			temp.btn = Quattro::TransformExtensions::FindDeepChild(this.devui.transform, btn);
			Object::Destroy(temp.btn.gameobject);
			}

			temp.img = Quattro::TransformExtensions::FindDeepChild(this.devui.transform, "Image");
			temp.anim = temp.img.gameobject.GetComponent(Type::Animation);
			temp.anim.play("devtools2");
			}

JimmyAkl at 16:37, 21 August 2021

2021-08-21T16:37:23Z

← Older revision		Revision as of 12:37, 21 August 2021
Line 1:		Line 1:
	[[File:UnityUI.png~~\|left~~\|thumb\|889x889px]]		[[File:UnityUI.png\|thumb\|889x889px\|none]]


			In this section, we will go over an example of creating Unity UI and coding it in graalscript

JimmyAkl: Created page with "889x889px"

2021-08-21T15:49:18Z

Created page with "left|thumb|889x889px"

New page

[[File:UnityUI.png|left|thumb|889x889px]]

← Older revision		Revision as of 03:12, 15 October 2021
Line 51:		Line 51:

	public function toggle() {		public function toggle() {
	~~Quattro::AssetManagement::LoadAssetBundle~~("devtoolsui");		(@"3D/Dev/AssetManager").loadAssetBundle("devtoolsui");
	}		}

	function onAssetBundleDownloaded(bundlename) {		function onAssetBundleDownloaded(bundlename) {
	if (bundlename == "devtoolsui") {		if (bundlename == "devtoolsui") {
	~~SetTimer(9999)~~;		this.keepAlive = true;;
	this.btns = {"inscpector", "bundleexpl", "console", "camera", "rendering", "back"};		this.btns = {"inscpector", "bundleexpl", "console", "camera", "rendering", "back"};
	this.devuiprefab = GameObject::fromassetbundle("devtoolsui", "assets/menuui/canvasdevtools.prefab");		this.devuiprefab = GameObject::fromassetbundle("devtoolsui", "assets/menuui/canvasdevtools.prefab");
Line 92:		Line 92:
	}		}
	We load the assetbundle the usual way:		We load the assetbundle the usual way:
	~~Quattro::AssetManagement::LoadAssetBundle~~("devtoolsui");		(@"3D/Dev/AssetManager").loadAssetBundle("devtoolsui");
	function onAssetBundleDownloaded(bundlename) {		function onAssetBundleDownloaded(bundlename) {
	if (bundlename == "devtoolsui") {		if (bundlename == "devtoolsui") {
	'''''~~Settimer(9999)~~;''''' is necessary for the weapon to keep checking for button clicks.		'''''this.keepAlive = true;''''' is necessary for the weapon to keep checking for button clicks.

	We create and instantiate the canvas prefab.		We create and instantiate the canvas prefab.
Line 108:		Line 108:
	we first find the button GameObject by name ('''this.devui.transform''' being the transform component of the canvas, and '''btn''' is the button name we want to find).		we first find the button GameObject by name ('''this.devui.transform''' being the transform component of the canvas, and '''btn''' is the button name we want to find).

	Next, we add an EventManager to the button component of the ~~gameobject~~ we just found ('''temp.btn.gameobject.GetComponent(Type::UI::Button)''').		Next, we add an EventManager to the button component of the GameObject we just found ('''temp.btn.gameobject.GetComponent(Type::UI::Button)''').

	And '''this.catcheventobject(temp.btn.gameobject, "onClick", "onDevToolClick")''' to catch all the onClick events.		And '''this.catcheventobject(temp.btn.gameobject, "onClick", "onDevToolClick")''' to catch all the onClick events.

	Finally, we implement '''public function onDevToolClick(go)''' to add functionalities after button is pressed (with '''go''' the ~~gameobject~~ being pressed).		Finally, we implement '''public function onDevToolClick(go)''' to add functionalities after button is pressed (with '''go''' the GameObject being pressed).

	For animations, to add or play an animation, you will need to get the animation component of the GameObject first. (using: '''temp.img.gameobject.GetComponent(Type::Animation)''')		For animations, to add or play an animation, you will need to get the animation component of the GameObject first. (using: '''temp.img.gameobject.GetComponent(Type::Animation)''')