Weekend project: jQuery for Unity - uQuery

uQuery - jQuery for Unity


Hello (web) developers!
Here's my weekend project: jQuery to Unity.

If you're a ninja with jQuery and want to get familiar with Unity coding, this is the tool for you!
It's still a subset of jQuery, but I believe it will help developers like me


Source code

Source can be found here:

https://github.com/jehna/uQuery



Selectors:

Selectors help you grab the Unity's object you need.
Current behavior of selectors are:

Code (csharp):

1.  
2. // Select objects by tag:
3. uQuery("MainCamera"); // Returns all objects tagged "MainCamera"
4.  
5. // Select objects by class:
6. uQuery(".NewBehaviourScript"); //  Returns every script named "NewBehaviourScript" (class = name of your script)
7.  
8. // Select object by identifier
9. uQuery("#Cube"); // Returns first GameObject, that you have named "Cube"
10.  
11.  

Manipulation

You can use .each to manipulate all the objects you have selected.
Note: Variable "this" behaves different than in normal JavaScript, so you'll need to assign a helper variable:
(in the examples I'm using var _this as equivalent to this)

Code (csharp):

1.  
2. // Print all names of GameObjects tagged as "Enemy"
3. uQuery("Enemy").each(function(_this) {
4.   // Now we have current object in variable "_this"
5.  
6.   var myName = uQuery(_this)[0].gameObject.name; // Get name of current object
7.   Debug.Log(myName);
8. });
9.  
10. // You can typecast objects to direct manipulation of attributes.
11. // eg. manipulation of GUITexture
12. uQuery(".GUITexture").each(function(_this : GUITexture) {
13.   _this.pixelInset.y = 10;
14. });
15.  

You can get and set object's properties with .attr() function!

Code (csharp):

1.  
2. // Get enemy's health
3. Debug.Log( uQuery(".Enemy").attr("health") );
4.  
5. // Get vertical position of the object
6. var vertical = "y";
7. Debug.Log( uQuery(transform).attr(vertical, "localPosition") );
8.  
9. // Set all MeshRenderers off
10. uQuery(".MeshRenderer").attr("enabled", false);
11.  
12.  

NEW! AJAX

Now you can use the jQuery's famous $.get, $.post and $.ajax functions!
Effortless requests with couple lines of code:

Code (csharp):

1.  
2. // Get a simple string data from the Internet
3. uQuery.Get("http://pastebin.com/raw.php?i=gyYybxa8", function(data, xhr) {
4.     Debug.Log(data);
5. });
6.  
7. // Grab a kitten image and pass it as a texture
8. uQuery.Get("http://placekitten.com/400/301", function(data, xhr : uQueryXHR) {
9.     uQuery(".GUITexture")[0].texture = xhr.www.texture;
10. });
11.  
12. // Perform a POST request to a local server
13. uQuery.post("http://localhost/test.php", {"test" : "data"}, function(data, xhr) {
14.     Debug.Log(data);
15. });
16.  

Supported functions

You can use .show(), .hide() to toggle visibility of current object.
You can use .fadeIn() and .fadeOut() to easy animating your objects.
All class-manipulation functions are also supported (.hasClass(), .addClass(), .removeClass() and .toggleClass()).

Code (csharp):

1.  
2. // Hide and show camera
3. uQuery("MainCamera").hide();
4. yield WaitForSeconds(3);
5. uQuery("MainCamera").show();
6.  
7. // Fade all GUITextures out and in
8. uQuery(".GUITexture").fadeOut();
9. uQuery(".GUITexture").fadeIn();
10.  
11.  
12. // Check if camera doesn't have script named "CameraMover" and add it if necessary
13. if(!uQuery("MainCamera").hasClass("CameraMover")) {
14.   uQuery("MainCamera").addClass("CameraMover");
15. }
16.  
17.  

Events

Basically, you can use .bind() to set triggers to different gameObjetcts in Unity, like you would do in jQuery. You can even set your own custom triggers that you can fire using .trigger().
Shorthands for commonly-used bindings are:
.click()
.mousedown()
.mouseup()
.mouseenter()
.mouseleave()
.mouseout()
.mouseover()

Code (csharp):

1.  
2.  
3. // Print out when any GUITexture was clicked
4. uQuery(".GUITexture").click(function() {
5.   Debug.Log("Clicked GUITexture");
6. });
7.  
8. // Print out gameobject's name when any of it's childrens are clicked
9. uQuery(".Collider", this).click(function() {
10.   Debug.Log("Clicked: " + gameObject.name);
11. });
12.  
13. // Create a custom trigger that is fired when time has passed 2 seconds
14. uQuery(this).bind("twoseconds", function() {
15.   Debug.Log("Two seconds has passed");
16. });
17.  
18. yield WaitForSeconds(2.0);
19.  
20. uQuery(this).trigger("twoseconds");
21.  
22.  

Let me know what you think.

 

Sounds good!

Might be very nice if could do those fade/animate/slide and other effects on objects (gui objects too).. (with basically just 1 line of code..)

 

Hi mgear

I'm working this weekend with the animations, so you'll soon be happy to find at least .fadeOut() and .fadeIn() working...

 

Now it's working!
You can use .fadeIn() and .fadeOut() to animate GUI objects and textures (that support transparency).

There's also a base to general animating, which I plan to extend to support object moving etc..

Let me tell if you have more great feature requests

 

Getting and setting object's attributes (properties) is now possible with uQuery's .arrt() command!

 

Now just needs .click() and maybe .mouseOver(), then can start building menus with ease

 

Hi mgear

I'm glad to announce that your wishes are fulfilled. uQuery now supports .click(), .mouseover() and many other bindings that are familiar from the traditional jQuery

 

Some problem with mouseout/mouseleave? Couldnt get it to trigger on guitexture.. (mouseenter and click works fine)

 

Hello,

right now i'm working on an app using the Vuforia AR SDK. I have to animate the visibility of models because i have one model for every frame. Just like you would get from a fluid animation you import from Realflow. It works nicely in Maya and Cinema 4d but Unity won't read the visibility i adjusted in other 3d-software. So i will have to do it in Unity3d. I'm not much of a coder though but i guess one could write an easy script for it. I even would do it manually once, to check out if it runs on an android. Do you have any ideas how i could solve this?

https://dl.dropboxusercontent.com/u/...013_121102.png this ist my project. All models "frames" are visible at the same time so it looks like a strange polygon mayhem. The meshes in the parent directory "test 2 von f 0" on the left side > ofmensh, ofmesh1, ofmesh2... should be just visible in one frame according to their name. Can someone help me?

Thanks in advance for your help.

Greetings from Germany,

Gregor

 

^ That link is broken..

 

Hi @mgear

Revived this old project and fixed the mouseout/mouseleave bug.
https://github.com/jehna/uQuery/issues/2

 

Whoa! Managed to add .get(), .post() and .ajax() functions!

 

very cool, thanks a lot for this!

 

Really good work...

Can i use the Ajax functions in C#? if i can, how i can use this? in C# can't use functions in params

 

Unfortunately no, since this port works only with JScript.net, since, as you stated, C# does not allow similar syntax to regular jQuery code.

In fact, you could use delegates as anonymous functions, but the core behaviour is so different from JScrip.net's one that the two are not any way compatible with each other.

 

Hi everyone i need your help,

i am willing to create a page flip for an interactive book i am making, i was up to imitate Turn.js effects, i am using c# to code this project, thats why jQuery never crossed my mind to integrate then i said it would be great if there are some API, and boom i found it ^^.

Well now reading your comments untill 2014 i think it is not possible to get it work properly with no Ajax support in C# etc...
so i am checking with you guys:

1) did anyone make it work with C# correctly (something like Page flip in Turns.js) ??
2)Is there anyway to do so, or to make such effect (i dont want animation i want the reader to feel like it was a real book) [free solution am broke ]

thank you

 

This is awesome! Keep up the good work (if you're still on it)