Search Unity

  1. Unity 2019.1 is now released.
    Dismiss Notice

Can the Typescript "engine" run regular javascript code?

Discussion in 'Project Tiny' started by ElementalCode, Dec 6, 2018.

  1. ElementalCode

    ElementalCode

    Joined:
    Aug 6, 2014
    Posts:
    2
    I have a week of vacation (starting monday) of my daily job and I was looking into making a clicker game in unity to wipe my head and have some fun.

    Would be really cool to use uTiny but I realized I don't have the "BigInt" of C# and all the libs online I can find for big integers are done in javascript.

    Can the typescript run javascript or shall i start making my own ts bigint? :S

    (or is there a better way?)

    Thank you all for your time. If I survive this critical hurdle, I will keep you all updated on my adventures on uTiny!
     
  2. etienne_unity

    etienne_unity

    Unity Technologies

    Joined:
    Aug 31, 2017
    Posts:
    51
    Great question @ElementalCode

    TypeScript is compiled to JavaScript, and you can easily talk to external JavaScript libraries from your Tiny project.

    To do so, you'll need to add a
    tsconfig.override.json
    file at the root of your Tiny project folder, with the following content:


    {
    "compilerOptions": {
    "allowJs": true
    },
    "include":[
    "External/SomeJsLib/**/*.js"
    ]
    }


    Put your JavaScript library in the
    External
    folder, side-by-side with the Unity project's
    Assets
    folder.

    When compiled, a single Js file is created by the TypeScript compiler, and will include your external Js library.
     
    TheRoccoB and simon_chen like this.
  3. zotimer

    zotimer

    Joined:
    Apr 1, 2018
    Posts:
    1
    Will it still be possible to link in JS libraries after TypeScript is replaced by C#?
     
  4. etienne_unity

    etienne_unity

    Unity Technologies

    Joined:
    Aug 31, 2017
    Posts:
    51
    Yes. You'll be able to PInvoke JavaScript from C#, and send messages from Js to C#.

    Open question: is there any interest in keeping the TypeScript integration for Web platforms? You won't be able to write Systems or access ECS storage from JavaScript, but we could maintain the current TypeScript scripting pipeline to compile TypeScript and bundle JavaScript files in the final output.
     
    osamansr2o1oo likes this.
  5. dwiperidream

    dwiperidream

    Joined:
    Nov 12, 2015
    Posts:
    6
    @etienne_unity - Are there any example projects where there are external JS files being loaded? I've attempted to get this working and I'm finding that it does not appear to process the tsconfig.override.json since intellisense with VS Code is not working (and I get compile errors in Unity). I checked the samples provided in Unity w/ Tiny -> Import Samples but they are all just TS.

    I've also tried adding the "extends" keyword to the override and pointing it to the generated tsconfig.json without luck. My project has the override file in the base directory, at the same level as the tsconfig.json and my External folder is at the same level as the Assets. As a test, I tried adding the files and "allowJs" to the base tsconfig.json and the intellisense worked fine with that - but obviously that's not going to work with the code generation Unity runs on each build.

    With regards to the open question - I think it'd be nice to be able to have all code in a single deployable project within Unity - if that's the end result of that implementation.
     
  6. etienne_unity

    etienne_unity

    Unity Technologies

    Joined:
    Aug 31, 2017
    Posts:
    51
    Hi @dwiperidream

    There is unfortunately no sample with external JS at this time.

    You need to put the
    tsconfig.override.json
    at in the Tiny project folder, side-by-side with the .utproject file. We do this to support overrides on a per-project basis.

    The
    tsconfig.override.json
    feature works by merging the file into the generated
    tsconfig.json
    file at the root level, so whatever you put in there should be visible in the tsconfig.json file after a build. You don't want to (can't) use the extends functionality with this approach.
     
  7. dwiperidream

    dwiperidream

    Joined:
    Nov 12, 2015
    Posts:
    6
    @etienne_unity - Got it - I misunderstood - I had it in the root of the entire Unity project by mistake, not beside the .utproject file. Works like a charm now, thanks for the quick response!
     
  8. sercand

    sercand

    Joined:
    Nov 7, 2013
    Posts:
    2
    osamansr2o1oo likes this.
  9. tbriley

    tbriley

    Joined:
    Sep 10, 2013
    Posts:
    99
    apologies, but i'm also unable to get this to work. i am trying to use a Map, which throws an error, even if i set my target to ES6; i can see it updates the root tsconfig.json, but the compiler still complains it cannot find it.

    so i've tried adding TSMap and HashMap. they're both under External (next to Assets) and also being added to tsconfig.json, but the compiler still complains they cannot be found. i'm not much of a web developer (i normally just play with plain HTML), is there another step i need to take with these to make them usable?
     
  10. Michael-N3rkmind

    Michael-N3rkmind

    Joined:
    Aug 16, 2015
    Posts:
    20
    @etienne_unity I'm building my website with Tiny Unity, and rely heavily on pure javascript. Would appreciate if we kept it in there, so i can update my packages in the future :)
     
    FardinHaque likes this.
  11. NiallT

    NiallT

    Joined:
    Sep 22, 2018
    Posts:
    24
    Definitely. I'm looking to use Tiny Mode to generate learning activities to be integrated with other web-based activities and a Virtual Learning Environment.

    As such, having easy, direct access to common scripts in the web platform would be pretty vital.

    However, note I say "common scripts". Whether dealing with Typescript or C#'s PInvoke, there needs to be a way to include either a copy of external web assets or stub functions in the project hierarchy so that they're available during testing, but not built into the final app.

    e.g. If I have a file on my webserver /scripts/js/VLEinterface.js , there should be a way of including a directory hierarchy mimicking this with, with the final built project simply referring to this file from my website. (For this specific use case, my VLEinterface.js would just be stub functions, but in other cases, I would be copying the live code, graphics etc in there.)
     
  12. CommunityUS

    CommunityUS

    Joined:
    Sep 2, 2011
    Posts:
    170
    I have not played around with this feature yet, but from what I read above you are putting it in the wrong spot. If wanted to add external package to MatchThree sample, you would put it:
    UnityProject\Assets\TinySamples\MatchThree

    This I assume because they said "I had it in the root of the entire Unity project by mistake, not beside the .utproject" so here we are talking about MatchThree.utproject

    So then reference it in some test way, build it, and it should work.
     
  13. CommunityUS

    CommunityUS

    Joined:
    Sep 2, 2011
    Posts:
    170
    I was curious how this would work in practice. How well can you handle responsiveness? i.e. different screen sizes from desktop display to mobile horizontal/vert.?

    It sounds like could PInvoke from C# into a external .js library, like we are troubleshooting above. If focused on building your website using external .js libs, and made your own external .js lib based off what you are doing in .ts that you could later PInvoke into would this be a possible solution.

    On this topic though, I do agree that the many people this Tiny Mode would potentially be relevant for are all already using .js so why not keep it in?

    @etienne_unity
    For me the big question is, does C# at final release compile to .js still?
     
  14. abeisgreat

    abeisgreat

    Joined:
    Nov 21, 2016
    Posts:
    45
    I can't speak for the team but on final release the C# code will almost definitely compile to WelbAssembly as it's the only thing that makes sense in the future.
     
  15. Guilherme-Otranto

    Guilherme-Otranto

    Joined:
    Mar 12, 2014
    Posts:
    27
    I can confirm that this is correct.

    In particular, you will want both the External folder (with your .js inside) and the tsconfig.override.json on the same folder as your .utproject file.
     
  16. Revolter

    Revolter

    Joined:
    Mar 15, 2014
    Posts:
    62
    Hey Guilherme, thanks for the help.
    Do I write the js script by myself or is there a js library provided by Facebook which I can download and import?
     
  17. Tomiha_be

    Tomiha_be

    Joined:
    Jan 14, 2016
    Posts:
    5
    Is there an example project available to import and use an external js lib? (Doesn't need to be much)
    Would be very helpful! Thx
     
    CommunityUS likes this.
  18. sniffle63

    sniffle63

    Joined:
    Aug 31, 2013
    Posts:
    112
     
    Antonia-Chimp and Pakor like this.
  19. Saikyun

    Saikyun

    Joined:
    Jul 10, 2013
    Posts:
    1
    Yes, I'd love for JS/TS to be as supported as possible. Being able to compile other languages to TS/JS would be a really good selling point of Tiny for me.
     
  20. sniffle63

    sniffle63

    Joined:
    Aug 31, 2013
    Posts:
    112
    So its easy to use a downloaded javascript library but, what if we want to access a hosted library?
    As in for facebooks javascript SDK isn't actually downloadable and you have to access it threw a URL..
    How would we go about adding that?

    facebook says we need to add somehting like this
    Code (JavaScript):
    1. <script>
    2.   window.fbAsyncInit = function() {
    3.     FB.init({
    4.       appId            : 'your-app-id',
    5.       autoLogAppEvents : true,
    6.       xfbml            : true,
    7.       version          : 'v3.2'
    8.     });
    9.   };
    10. </script>
    11. <script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
    Then (i know this is 10 years ago) if i wanted to use the kongregate API its
    Code (JavaScript):
    1. <script src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'></script>
    2.  
    3. kongregateAPI.loadAPI(function(){
    4.   window.kongregate = kongregateAPI.getAPI();
    5.   // You can now access the Kongregate API with:
    6.   // kongregate.services.getUsername(), etc
    7.   // Proceed with loading your game...
    8. });
    9.  
    but im not sure how id go about doing that using the tsconfig.override
     
  21. VegaSINe

    VegaSINe

    Joined:
    Jan 24, 2019
    Posts:
    3
    I'm having an using an external library. Specifically this one: https://github.com/socketio/socket.io

    How do I properly consume this library?

    I was able to get it working in a standalone Node.js application, but I can't figure it out in Unity. It defines exports, so I thought I should be able to just import them, but that doesn't play nice with namespaces. Can anyone help me out?

    EDIT:
    I managed to resolve this issue. The main problem was I was using the server library and not the client library, which had a dependency on Node.js.
     
    Last edited: Apr 12, 2019