App: Blockly with Unity games and Processing sketches

[Uwe K]

Hi,

I'd like to introduce the Blockly app we have been building over the last months: https://app.code-it-studio.de/

It's a combination of programming courses for kids and maker-space where they can practice their skills. For the courses we pair Blockly with WebGL games that contain a Lua interpreter. For our first maker-space we pair Blockly with P5.js, a library for procedural generation of images and animations. We plan to extend both parts of the app, integrate editors for blocks and toolboxes (based on Blockly's dev tools) and to eventually make an open source offline version. We see block based programming as a stepping stone towards text programming only for some people in some domains. For most people in most domains, a block editor can handle all their needs. I'm thinking of editing regular expressions, config files or CLI arguments. Giving non-technical people more access to such things is what we're trying to achieve long-term.

Anyway, thank you for answering my previous questions and changing my mind on issues. We're feeling very good about the decision to build our product on top of Blockly.

Any feedback about the app is welcome!

[picklesrus]

Thank you for sharing! 

[suki]

Hi, 

Looks good! I'm struggling with the blockly to Unity implementation, especially since js is now deprecated in Unity. Do you mind giving some pointers on how you got blockly talking to Unity? 

Thank you! 

[Uwe K]

Hi,

sure, no problem:

We generate Lua, not Javascript code, in Blocky. Our Unity game includes a Lua interpreter called MoonSharp. The web app sends user code to the game, which then feeds that code to the interpreter, waits for results and sends those back to the app.

A simpler approach would be to have Blockly generate JS, then execute the generated code inside the web app. That code would communicate to the game.

The communication docs are here: https://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html

I hope that helps.

[suki]

Thanks for the resource! I've literally just started so I don't have page on the browser for my Unity game to be rendered on -- just the WebGL page. Is that what you mean by web app? If so, is it possible for blockly to talk to this WebGL build that has the index.html file? 

And on the Unity doc, where it says "Calling Unity scripts functions from JavaScript", would the SendMessage be in the javascript, html, or unity C# file? 

[Uwe K]

By web app I meant the html document. That document has to contain both the game and a blockly workspace. Unity generates an example html page along with your game, that's a good starting point. With Blockly and your game inside one page, the communication between them is handled by JS code on that page. You can add something like a "run" button, which triggers the code execution process... a JS function that does two things: (1) get the user code from the Blockly workspace and (2) execute it, either with eval or a Function constructor or a separate JS interpreter.

Docs for the JS interpreter: https://developers.google.com/blockly/guides/app-integration/running-javascript#js_interpreter

The SendMessage calls would be generated by your custom blocks. If you have a block for starting the game, its code generator would produce something like "SendMessage('JsApiGameObject', 'StartTheGame');". That code would get evaluated when the "run" button is pressed.

[suki]

Thank you for that info -- it led me in the right direction. 

Now I am trying to deploy, using firebase, but running into an issue of getting Unity to render. In my dev tools, I get a GET 404 error, indicating that Firebase is having issues talking to Unity. I was wondering if a) you used Firebase and how you got it to work b) if you didn't use Firebase as a server, what did you use and how it worked with Unity? 

Thank you as always! 

[Uwe K]

Our server is based on express.js, but any server should do. From the server point of view, blockly and your game are plain old javascript or web assembly files. I'm not familiar with Firebase though. Would you post a link here once you got it working?

[Ahmed Alngar]

hi  your app is awsome I liked it so much. I wanna develop one similar to it but i don't know where to start any recommendations please. I read some of the blockly API doc but I don't know how to develop a game and how to connect it with the blocks 

thanks a lot  

 

 

 

 

[Uwe K]

Thank you. There are many ways to develop games. We're using the unity engine, but that may not be the best way to get started. I suggest you check out the Blockly games examples (blockly-games.appspot.com), analyze their source code and go from there.

good luck

[Ahmed Alngar]

it's ok to start with unity i know c# and i want to work on it but i don't know where to start developing a game like yours any tuts recommendations?

 

[Uwe K]

Their own stuff is pretty good: https://unity3d.com/de/learn/tutorials

There's also lots of third party tutorial content, but I don't have experience with that.

[Ahmed Alngar]

thanks

i'll check it  

[m lz]

hi, Uwe K
    I googled https://github.com/google/blockly/issues/1494,find your project https://app.code-it-studio.de/project/21362?autoRun=true​ implement procedure with type variable(Own blocks part),did this part code could share with me ,I already want to archive this feature for my project.(https://www.mlzboy.xyz) my project was a crawler base on blockly embedded an jupyter notebook 

[Uwe K]

Hello. The way I did this required changes to Blockly core, which makes it complicated to keep up with new versions of Blockly. Since then then app inventor team has released their implementation of this concept as Blockly extension. I would recommend you use that one: https://github.com/mit-cml/blockly-plugins/tree/main/block-lexical-variables

[Mark Friedman]

Thanks for the plug, Uwe!  I'll just point out, however, that that plugin doesn't support typed procedure parameters (or typed variables at all, for that matter), so if the typing is important then it might not be a good fit. 

-Mark

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/89eafc80-da2b-44c5-8b95-59280218bd2en%40googlegroups.com.