Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct here to familiarize yourself with the rules and how to post constructively.

  2. Unity 2022.1 is now available as the latest Tech release.
    Dismiss Notice
  3. Improve your project's performance with our new guide on profiling in Unity.
    Dismiss Notice

Weekend project: jQuery for Unity - uQuery

Discussion in 'Scripting' started by Jlu, Nov 2, 2012.

  1. Jlu

    Jlu

    Joined:
    Oct 15, 2012
    Posts:
    18

    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. :)
     
    Last edited: Mar 17, 2014
    webessence and ZiadJ like this.
  2. mgear

    mgear

    Joined:
    Aug 3, 2010
    Posts:
    7,562
    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..)
     
  3. Jlu

    Jlu

    Joined:
    Oct 15, 2012
    Posts:
    18
    Hi mgear

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

    Jlu

    Joined:
    Oct 15, 2012
    Posts:
    18
    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 :)
     
  5. Jlu

    Jlu

    Joined:
    Oct 15, 2012
    Posts:
    18
    Getting and setting object's attributes (properties) is now possible with uQuery's .arrt() command! :cool:
     
  6. mgear

    mgear

    Joined:
    Aug 3, 2010
    Posts:
    7,562
    Now just needs .click() and maybe .mouseOver(), then can start building menus with ease :)
     
  7. Jlu

    Jlu

    Joined:
    Oct 15, 2012
    Posts:
    18
    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 :)
     
  8. mgear

    mgear

    Joined:
    Aug 3, 2010
    Posts:
    7,562
    Some problem with mouseout/mouseleave? Couldnt get it to trigger on guitexture.. (mouseenter and click works fine)
     
  9. juxus

    juxus

    Joined:
    Nov 1, 2013
    Posts:
    3
    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
     
  10. mgear

    mgear

    Joined:
    Aug 3, 2010
    Posts:
    7,562
    ^ That link is broken..
     
  11. Jlu

    Jlu

    Joined:
    Oct 15, 2012
    Posts:
    18
  12. Jlu

    Jlu

    Joined:
    Oct 15, 2012
    Posts:
    18
    Whoa! Managed to add .get(), .post() and .ajax() functions! :cool:
     
  13. iddqd

    iddqd

    Joined:
    Apr 14, 2012
    Posts:
    466
    very cool, thanks a lot for this!
     
  14. Atasuke

    Atasuke

    Joined:
    Nov 1, 2014
    Posts:
    1
    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 :(
     
  15. Jlu

    Jlu

    Joined:
    Oct 15, 2012
    Posts:
    18
    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.
     
  16. Aziz1989

    Aziz1989

    Joined:
    Feb 2, 2015
    Posts:
    4
    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 :p]

    thank you :)
     
  17. webessence

    webessence

    Joined:
    May 18, 2017
    Posts:
    1
    This is awesome! Keep up the good work (if you're still on it) :)
     
  18. Honorsoft

    Honorsoft

    Joined:
    Oct 31, 2016
    Posts:
    80
     
unityunity