Javascript HTML5 Extension

Hello,

I have tested defold in the past, but I could not use it because I can not create javascript extensions or call java function from lua, now I see that this is possible and I would like to try it again, but how can create a javascript extension and call functions inside?

sorry for my english.

Regards.
Maxi.

1 Like

I was in the process of writing a question along these lines myself. Iā€™ve poked around in Mathiasā€™s example extension but, at least for me, it was over my head, and a little confusing since there seem to be three different ways to do extensions for web games. Some tutorial on how to communicate to and from javascript libraries would be awesome.

1 Like

Have you tested using this?

html5.run(code)

If you include JS functions on your .html page this should be able to call them. This can do many of the things we would want. You can use it to tick callback functions on the .html page too.

I just tested html5.run(code) in building with Editor 2 and it works in engine though it doesnā€™t autocomplete.



function init(self)
	sysinfo = sys.get_sys_info()
	if sysinfo.system_name == "HTML5" then 
		html5.run("alert_this('Hello! I am an alert box!!');")
	end
end
	<script type='text/javascript'>
	function alert_this(text)
	{
		alert(text);
	}
	</script>
	

What kind of HTML5 extension do you both want to make? It could probably be done most easily with a .js include.

4 Likes

The auto complete should be fixed in the next release (Editor 1) and in a few hours (Editor 2)

4 Likes

As @pkeod mentioned, the html5.run() is the simplest way of communicating. And if you are waiting for a reply, you can poll the result yourself.

E.g. (A quick test, no native extensions needed):

function init(self)    
    html5.run("start_processing()")
end

function update(self, dt)    
    -- poll the result
    local result = html5.run("get_processing_result()") -- calling function in index.html
    if result ~= "" then -- Or whatever your function returns as "no result"
        print("YAY, the processing is done! Result: ", result)
    end
end

The .html template file contains this:

    <script type='text/javascript'>
        processing = -1
        function start_processing()
        {
            processing = 5;
        }

        function get_processing_result()
        {
            if( processing > 0 )
            {
                processing--;
                if( processing == 0 )
                {
                    processing = -1; // stop processing
                    return "TEXT FROM JS"; // stop processing
                }
            }
            return ""; // empty means no result
        }
    </script>

And, in the end, I get the output:

DEBUG:SCRIPT: YAY, the processing is done! Result:  TEXT FROM JS

What is your use case? What do you want to do?

4 Likes

Thanks for example. Itā€™s super easy to call JavaScript from Luaā€¦ As I understood itā€™s impossible to implement a ā€œJS -> LUAā€ bridge with the message passing mechanism?
I donā€™t think that current workaround with update function in lua is a good solution :frowning: Much better to have mechanism to send message from JS to LUA and get data in on_message function.

1 Like

You could implement your own message passing bridge router JS <-> Lua.

2 Likes

Oh, wow, thanks guys! Thatā€™s way easier than what I was thinking.

Next question: Is it possible for the engine to include Javascript and other files into the bundle, or do I have to drop them in manually after bundling?

Polling will probably fill my needs, but what would it take to call Lua functions from Javascript?

1 Like

I see two ways for you to add your JavaScript files:

3 Likes

Thanks for your help! htm5.run() work great for me but I can send a message to lua from javascript in my .html? I need put my custom functions in the exported .html?

Sorry for my english.

Maxi.

Great, thanks! The ā€˜bundle_resourcesā€™ option is exactly what I was thinking, but apparently it only works on iOS, Android, and OSX? Iā€™ll just drop them in by hand for now, and start reading about Emscripten libraries. Thanks for your help.

Nah, thatā€™s just the doc that hasnā€™t been updated, for each new platform we roll out, we support those bundled assets.

Try this:

[project]
bundle_resources = /bundle

And put your content in /bundle/js-web:

3 Likes

When you generate an HTML5 build you are given a .html file. You can edit this generated .html file to include for example an extra <script> tag and you can put your custom functions there. Then put this custom .html file into your game project folder and specify it under the HTML5 area in your game.project.

If you want to communicate via JS to the Defold HTML5 game you will need to have the Defold game periodically check to see if the native JS is attempting to communicate. This can be done a number of ways such as putting messages into a queue which the game will grab on its next update to process.

2 Likes

I put my index.html file in my gameproject but I can not see in the options to choose

You set it under the HTML5 settings:

great, where need put my custom script?

   function openqkygames()
   {
   		window.open("www.qkygames.com",'_blank');
   }

and in defold I need call

html5.run(ā€œhellojava()ā€)

You can put it in your index.html file:

    <script>
      function openqkygames() {
          console.log("Hello");
          window.open("www.qkygames.com",'_blank');
        };
    </script>

And then you call it from within the game html5.run("openqkygames()")

great, and how can send a message from openqkygames() to defold?

Currently, there is no way to post messages to Defold. Your easiest route right now is to use polling to ask for the result from within your Lua code:

local result = html5.run("check_if_finished()") -- You get a string back
if result ~= "" then
    print("RESULT! " .. result)
end
2 Likes

Is something changed since then?
Iā€™m interesting in passing data from js back to defold.
Maybe itā€™s possible to write some kind of natvie html5 extension which will trigger lua function?