How do I create a Web Worker function

A little bit of an advanced question here, but I'm hoping there's a simple answer.

Has anyone made a web worker plugin to run parallel functions?

All I'm hoping to do is create a loading screen that can run a loading animation while content loads in the background. Obviously, this isn't possible with Javascript's single-threaded approach, but web workers could allow for that functionality. Since the Pathfinding behavior uses a web worker, I was hoping someone had already extrapolated on that to create a Web Worker plugin, but I didn't find anything when searching for it.

I'm prepared to try to make it myself, but I'm on a bit of a time crunch and was hoping that there had been some groundwork already laid. What I would like is a Web Worker object that functions mostly like the Function object, but runs any actions given to it as a web worker, instead of in the main thread.

Any information about this would be a great help! Thanks!

I would love to link to the project, but for some reason I'm not allowed to?

Anyway, you should be able to get to the Github repo here:

github (dot) com/the1076/The-Legend-of-Zelda--The-Synd-Rupees

And play a development version, to see the hang up, here:

cynicstudios (dot) com/subdomains/games/construct/loztsr/

While creating a webworker that can execute dynamically generated code (ex. action script inside a function) is possible it would be complex to achieve though as you would need an algorithm to prep code and stringify it to be executed in a eval() statement in the worker, on top that and the elephant that really prevents this from being usable is that web workers have no access to DOM objects including the canvas for drawing purposes. You can only run large equations the work with specific variables (path finding) or data management actions (sorting or re-configuring array data) that have no DOM requirements in it.

If you wanted to try and create your own plugin this will get you started.

Method for taking all code inside a function and converting it to a string to be passed to the eval statement

function stringifyFunction(callback) {
    //used to return stringified code from a function to make eval() usage easier
    var string = callback.toString();
    var startPos = strpos('{', string) + 1;
    string = string.slice(startPos, string.lastIndexOf('}'));
    return string;
}
[/code:t6z1jcpd]

Your action script
[code:t6z1jcpd]
var worker = new Worker("workerFilePathGoesHere");

var workFunction = stringifyFunction(function(){
    
    //this puts the cart before the horse as you will below this send the data variable
    //IE  data.test = 42;

    var response;
 
    //dynamic code goes here acting on the data you passed to it and sets something in response variable

     response = data.test + 1;

    //send response back when finished
    postMessage(response);

})

var data = {
    test : 42
}

//Send
worker.postMessage({
    data : data,
    work : workFunction
})

//Receive
worker.onmessage = function (e) {
	   var response = e.data;
           //response = 43
           // the response from the work file will be here.
           // after ward you can trigger anything else on the even sheet and pass or store this response as needed
	    worker.terminate();
	}
[/code:t6z1jcpd]

worker file that can work on dynamically generated stringified code
[code:t6z1jcpd]
self.addEventListener('message', function(e) {
    var data = e.data.data
    eval(e.data.work);
    self.close();
})
[/code:t6z1jcpd]

I can't take you any farther but good luck

Hey, thanks for the help!

Yeah, mainly what I'm trying to do is do iterative array manipulation in the web worker, so it should work out just fine. I think, though, that progress callbacks are the way to go, similar to more low level code like C#.

Something like passing a function over to a web worker, and then working through steps, and passing back a progress message, as opposed to handling the entire function at one time with the web worker.

So, you could pass it a tilemap name and an array, and then have it look at the array 100 tiles (for example) at a time, send the message back to change 100 tiles on the main thread, and then continue on. This makes the main thread do the real work of accessing the canvas objects, but releases it at intervals to do animations as well.

Because, like I said, that's really the main issue I'm having, is that Construct will lock everything up trying to complete one task, when it really should be allowing some Graphical functionality to continue on.

Obviously, in that example, there are clearly defined work units, so it's a 'simple' example. I think there are some other use cases but, as you said, it gets very tricky. In any case, I hope I'm not the only one who could gain from this kind of functionality.

I really appreciate the code snippets. They'll undoubtedly help. When I get to implementing a solution, I'll update here with how I went about it, and link to a plugin, if that's the route I take.

Thanks, again!