Proof of concept? Easy GUI animation

Hallo every one,

I started a topic about the project at my internship and asked if you guys like the moving GUI. Then softrare asked me if I could make a easy plugin to make it easier to create moving GUI. At first I told him that the work I had done for my projects isn't useful for someone else but he planted the idea in my head and I just can't let it go... (some how my brain wont stop until I've at least found a solution in my head )

So, in order to free my mind of ideas stuck in there I started a couple of hours ago with such a plugin, or at least some prove of concept I guess Would something like this be useful? I know it doesn't make sure the GUI has lower draw calls etc but I think it does make it easier to create animate GUI's if I would continue with this.

Ok so here's how it works:

The first thing you do is decide how many "Pages" you would have (My background is webdesign, sorry for this logic). Each page is like a mode in witch your game is playing, like are you in the Menu or are you playing the game. If you switch pages all the GUI objects will animate "out" and the new page wil animate "in" (well, not yet but its going to).

You add pages like this:

Code (csharp):

1. // Place all the different gui pages there are in your game in the page enum
2. enum page {Home, Game, Options}

Within each page you create pools, a pool contains on or more GUI objects that have to move together, a GUI cannot be in 2 pools... If you open a pool in your GUI script it will look if this pool already excists, if not he will create it.

You open a pool like this:

Code (csharp):

1. guiController.OpenPool("Home1", "X", -250, 1, "easeInOutQuint");

Home1 = the name of this pool
"X" = the axis the GUI will be animated along
-250 = the position relative to the GUI you place later when its CLOSED
1 = the time in sec
"easeInOutQuint" = the animation type of iTween

And at this point I only made a function for a button but that would look like this:

Code (csharp):

1. if(guiController.GUIButton(5,5,200,30,"Home1 -> Btn1")){
2.  
3. }

The first 4 are just like the usual position of a GUI object and the last one is the name to be displayed on the button.

Ofcourse in the there should be a similar hasht like iTween has for the OpenPool and more options for the GUI's etc. I've also got a nice Idea for letting objects in a pool auto position.

For example I say that a pool is in the middle of the screen, and then when I place on GUI in it it will be in the middle of the screen (on the x axis) and then when I place a seccond one in it, the first one will move to the left and the new one will be off-center to the right. So they are in the middle "together";

This is a script witch creates an animated GUI like this: [CLICK ME]

Code (csharp):

1. var guiController : GUIController;
2.  
3.  
4. function OnGUI () {
5.     if(guiController.pageState == page.Home){
6.  
7.         // Opening pool
8.         guiController.OpenPool("Home1", "X", -250, 1, "easeInOutQuint");
9.  
10.             if(guiController.GUIButton(5,5,200,30,"Home1 -> Btn1")){
11.                 guiController.HidePool("Home1");
12.                 guiController.ShowPool("Header");
13.             }
14.  
15.             if(guiController.GUIButton(5,50,200,30,"Home1 -> Btn2")){
16.                 guiController.HidePool("Home1");
17.                 guiController.ShowPool("Header");
18.             }
19.  
20.         // Opening pool
21.         guiController.OpenPool("Header", "Y", -100, 1, "easeOutBack");
22.  
23.             if(guiController.GUIButton(Screen.width/2 - 100,5,200,30,"Header -> Btn1")){
24.                 guiController.ShowPool("Home1");
25.                 guiController.HidePool("Header");
26.             }
27.  
28.        
29.  
30.     }
31.  
32. }

This is the GUIController.js
I know, the code isn't that neat but I've got a headache all day long so thats why

Code (csharp):

1. // Place all the different gui pages there are in your game in the page enum
2.  
3. enum page {Home, Game, Options}
4.  
5.  
6. var screenRatio : float;
7. var pageState : page;
8.  
9. var currentPool : String;   // The current pool we are creating gui's in
10. var currentId : int;    // The id of the place pool where editing in the pagePools array
11.  
12.  
13. // Private vars
14. var pagePools = new Array();
15. /*
16. pagePools[i][0] = Pool name
17. pagePools[i][1] = The animation value
18. pagePools[i][2] = Animate along X or Y axes
19. pagePools[i][3] = The position when the object is animated closed
20. pagePools[i][4] = The time the animation needs to last
21. pagePools[i][5] = The type of animation for iTween
22. */
23.  
24.  
25. function OpenPage (tPage : page) {
26.     currentPage = tPage;
27. }
28.  
29. function OpenPool (tPool : String, tMove : String, tPos : float, tTime : float, tAnimation : String) {
30.     CreatePool (tPool, tMove, tPos, tTime, tAnimation);
31.     currentPool = tPool;
32. }
33.  
34.  
35. function CreatePool (tPool : String, tMove : String, tPos : float, tTime : float, tAnimation : String) {
36.     currentId = -1; // Reset Id
37.     for(var i : int = 0; i < pagePools.length; i++){
38.         if(pagePools[i][0] == tPool){
39.             currentId = i;
40.         }
41.     }
42.  
43.  
44.     if(currentId == -1){
45.         var tArray = new Array(tPool, 0, tMove, tPos, tTime, tAnimation);
46.         pagePools.Push(tArray);
47.         currentId = pagePools.length -1;
48.     }
49. }
50.  
51.  
52.  
53. // The different GUI sorts...
54. function GUIButton (tX : float, tY : float, tW : float, tH : float, tInput) {
55.     if(pagePools[currentId][2] == "X"){
56.             tX += pagePools[currentId][1];
57.     }
58.     else if(pagePools[currentId][2] == "Y"){
59.         tY += pagePools[currentId][1];
60.     }
61.  
62.  
63.     if(GUI.Button(Rect(tX, tY, tW, tH), tInput)){
64.         return true;
65.     }
66.     else {
67.         return false;
68.     }
69. }
70.  
71. function ReturnId (tPool) {
72.     for(var i : int = 0; i < pagePools.length; i++){
73.         if(pagePools[i][0] == tPool){
74.             return i;
75.         }
76.     }
77. }
78.  
79. function HidePool (tId : int) {
80.     CreateGUIControllerCallBack(tId, true);
81. }
82.  
83.  
84. function HidePool (tId : String) {
85.     var tId2 = ReturnId(tId);
86.     CreateGUIControllerCallBack(tId2, true);
87. }
88.  
89.  
90. function ShowPool (tId : int) {
91.     CreateGUIControllerCallBack(tId, false);
92. }
93.  
94.  
95.  
96. function ShowPool (tId : String) {
97.     var tId2 = ReturnId(tId);
98.     CreateGUIControllerCallBack(tId2, false);
99. }
100.  
101.  
102.  
103. function CreateGUIControllerCallBack (tId : int, tHide : boolean) {
104.     var tObject : GameObject;
105.     tObject = new GameObject ("GUIControllerCallback[" + tId + "]");
106.     var tScript = tObject.AddComponent ("GUIControllerCallback");
107.  
108.     if(tHide == true){
109.         tScript.StartHide(tId,this);
110.     }
111.     else {
112.         tScript.StartShow(tId,this);
113.     }
114. }
115.  
116.  
117. function PoolPosCallback (tFloat : float, tId : int) {
118.     pagePools[tId][1] = tFloat;
119. }

unfortunately iTween somehow can't have "onupdateparams" in ValueTo so I had to make this tiny script for it...

Code (csharp):

1. var guiController : GUIController;
2. var poolId : int;
3.  
4.  
5. function StartHide (tId : int, tScript : GUIController) {
6.     Debug.Log("StartHide");
7.     poolId = tId;
8.     guiController = tScript;
9.    
10.  
11.     iTween.ValueTo (gameObject, iTween.Hash(
12.     "from"     , 0,
13.          "to"   , parseFloat(guiController.pagePools[tId][3]),
14.          "time"       , parseFloat(guiController.pagePools[tId][4]),
15.          "easetype" , guiController.pagePools[tId][5],
16.          "onComplete" , "OnCompleted",
17.          "onUpdate"    , "Callback")
18.      );
19. }
20.  
21.  
22.  
23. function StartShow (tId : int, tScript : GUIController) {
24.     poolId = tId;
25.     guiController = tScript;
26.  
27.     iTween.ValueTo (gameObject, iTween.Hash(
28.     "from"     , parseFloat(guiController.pagePools[tId][3]),
29.          "to"   , 0,
30.          "time"       , parseFloat(guiController.pagePools[tId][4]),
31.          "easetype" , guiController.pagePools[tId][5],
32.          "onComplete" , "OnCompleted",
33.          "onUpdate"    , "Callback")
34.      );
35. }
36.  
37.  
38. function Callback (tFloat : float) {
39.     Debug.Log(poolId + " = " + tFloat);
40.     guiController.PoolPosCallback(tFloat,poolId);
41. }
42.  
43.  
44. function OnCompleted () {
45.     Destroy(gameObject);
46. }

Ps. I hope it still makes some sense... Today is really not my day :-|

 

Great stuff! Just out of curiosity; which company do you work for?

 

Thx I do my internship at a company who creates building plans for ships... I do have a very cool project all by my self but I'm afraid I can't give you more details at this point. They want to keep still that they have me Ill definitely post it on the forum when its done (in about 1.5 months)

 

Very nice Crash-Konijn Thanks for your efforts, you created a quite easy to use interface there. Proof of concept definitely passed as far as I am concerned

 

Thanks! I've been working on this the whole day again I remade the whole thing ^^ This is what I have know. I'm also going to try to make it possible to use the pool to position everything in it, using commands like "animation-align-x","center" and then it would be place nice in the center of the screen.

The way my script works now makes it also possible to create the whole GUI ones when you switch from page, as I'm not switching pages yet I have placed it in the Start() function.

This is the script I use to create the GUI [Watch it here]

Code (csharp):

1. var guiController : GUIController;
2.  
3. function Start () {
4.     // Opening pool Home1
5.         guiController.OpenPool("Home1", Array(
6.             "animation-state" , "idleOut",
7.             "animation-x-pos" , -250,
8.             "animation-time" , 1,
9.             "animation-easetype" , "easeInOutBack")
10.         );
11.  
12.         // Creating btn
13.         guiController.GUIButton("Btn1", 5, 5, 200, 30, Array("value" , "Home1 -> Button1"));
14.         guiController.GUIButton("Btn2", 5, 40, 200, 30, Array("value" , "Home1 -> Button1"));
15.        
16.  
17.         // Opening pool Home2
18.         guiController.OpenPool("Home2", Array(
19.             "animation-state" , "fadingIn",
20.             "animation-x-pos" , -250,
21.             "animation-time" , 1,
22.             "animation-easetype" , "easeInOutBack")
23.         );
24.  
25.         // Creating btn
26.         guiController.GUIButton("Btn3", 5, 105, 200, 30, Array("value" , "Home2 -> Button3"));
27.         guiController.GUIButton("Btn4", 5, 140, 200, 30, Array("value" , "Home2 -> Button4"));
28. }
29.  
30. function OnGUI () {
31.     if(guiController.pageState == page.Home){
32.         // Creating btn down
33.         if(guiController.GUIButtonDown("Btn1")){
34.             guiController.HidePool('Home1');
35.             guiController.ShowPool('Home2');
36.         }
37.  
38.        
39.         // Creating btn down
40.         if(guiController.GUIButtonDown("Btn3")){
41.             guiController.HidePool('Home2');
42.             guiController.ShowPool('Home1');
43.         }
44.     }
45.  
46.     guiController.FinishGUI();
47. }
48.  

And currently can use these options:

Code (csharp):

1.  
2.  
3. ///////////////////////////////////////////////////////////////
4. //-------- The current state the pool is in -------------------
5. ///////////////////////////////////////////////////////////////
6.  
7. "animation-state" : animationState
8. // Sets the animation state [pool]
9.  
10.  
11.  
12. ///////////////////////////////////////////////////////////////
13. //------ The X  Y animation position when the object is closed
14. ///////////////////////////////////////////////////////////////
15.  
16. "animation-x-pos" : float
17. // Sets the x pos of the animation when pool is out [pool]
18.  
19. "animation-y-pos" : float
20. // Sets the x pos of the animation when pool is out [pool]
21.  
22. "animation-pos" : Vector2
23. // Sets the x  y pos of the animation when pool is out [pool]
24.  
25.  
26.  
27. ///////////////////////////////////////////////////////////////
28. //-------- The X  Y animation time ---------------------------
29. ///////////////////////////////////////////////////////////////
30.  
31. "animation-x-in-time" : float
32. // Sets the x time that the in animation will take in sec [pool]
33.  
34. "animation-x-out-time" : float
35. // Sets the x time that the out animation will take in sec [pool]
36.  
37. "animation-x-time" : float
38. // Sets the x time that the animation will take in sec [pool]
39.  
40. "animation-y-in-time" : float
41. // Sets the y time that the in animation will take in sec [pool]
42.  
43. "animation-y-out-time" : float
44. // Sets the y time that the out animation will take in sec [pool]
45.  
46. "animation-y-time" : float
47. // Sets the y time that the animation will take in sec [pool]
48.  
49. "animation-time" : Vector2
50. // Sets the x  y time that the animation will take in sec [pool]
51.  
52.  
53.  
54. ///////////////////////////////////////////////////////////////
55. //-------- The X  Y animation easetype -----------------------
56. ///////////////////////////////////////////////////////////////
57.  
58. "animation-x-in-easetype" : easeType
59. // Sets the easetype of the x in animation [pool]
60.  
61. "animation-x-out-easetype" : easeType
62. // Sets the easetype of the x out animation [pool]
63.  
64. "animation-x-easetype" : easeType
65. // Sets the easetype of the x animation [pool]
66.  
67. "animation-y-in-easetype" : easeType
68. // Sets the easetype of the y in animation [pool]
69.  
70. "animation-y-out-easetype" : easeType
71. // Sets the easetype of the y out animation [pool]
72.  
73. "animation-y-easetype" : easeType
74. // Sets the easetype of the y animation [pool]
75.  
76. "animation-easetype" : easeType
77. // Sets the eastetype of the animation [pool]
78.