Registering and unregistering actions before rendering.

[MacSkelly]

I'll start off by saying I'm very new to Babylonjs so excuse my incompetence if I'm doing something silly. So I'm creating a town building sim and I'm handling the building creation by creating a grid of invisible cubes that can turn into specific buildings when clicked on in "Build Mode". I have a button that handles going in and out of "Build Mode" and it alternates a buildMode variable from true to false. What I'm trying to do is register the action that handles the highlighting of the build areas, the cubes, when buildMode equals "true" and unregister it when it equals "false". Here's how I'm handling it so far:

scene.registerBeforeRender(function() {
		
			for(var i = 0; i < 144; i++){
			
				var currentBox = scene.getMeshByName("box" + i);
				var overAction = new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOverTrigger, currentBox, "visibility", 1);
				var outAction = new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOutTrigger, currentBox, "visibility", 0);
				
				if(buildMode == true) {
					
					currentBox.actionManager.registerAction(overAction);
					currentBox.actionManager.registerAction(outAction);
				
				} else {
				
					currentBox.actionManager.actions.pop(overAction);
					currentBox.actionManager.actions.pop(outAction);
				
				}
				
			}
		
		});

It works going from buildMode false to true but not true to false, as in I click the button and build mode enables but it the actions are still working when I click the button again.

Also, am I right in saying that I could maybe avoid all this if I just add a condition to the Action and add the action to the boxes when I first create them? I tried looking into that but I'm not really sure how BABYLON.ValueCondition works. As I said I'm pretty new at this so any help would be great.

[Samuel Girardin]

hi, it s off topic but did you find a solution for your walker?

[MacSkelly]

I've put the walkers on the backburner for the time being as its turning out to be more complicated than I expected. I liked your approach, its very cool, but its a bit too complicated for my project as the walkers will really just be aesthetic, just to make my town look alive. I'm looking in into some pathfinding algorithms such as breadth-first or A* as I really don't need the walkers to avoid each other, just the buildings.

[Samuel Girardin]

you can have a look at this too : http://lo-th.github.io/root/traffic/index.html

 

 

[GameMonetize]

This does not work because you create a NEW overAction and outAction on EVERY frame

You should create all actions outside of this callback and just turn them on and off. BTW why not doing it on click on your button instead of checking it on every frame?

[MacSkelly]

@DeltakoshI notice now that I have made some questionable decisions with my code

How does one go about turning them on and off? I was looking for something like this but I couldn't find it.

[RaananW]

Hi!

So, a simple solution would be this:

http://www.babylonjs-playground.com/#HUY9P

Execute code on pointer over and out, check that a variable out of the functions scope is either true or false, and change this variable with the scene's action manager (in this case, it will toggle when you press the "b" button).

The scene's before and after rendering loops run (surprisingly ) on every frame, before or after the render process.  You should try to avoid creating too many new objects in them, as they will influence your render time. Also - actions, just like JS events, should br registered once, including the entire functionality you need. The helper actions (SetValue etc') are wonderful when needed something simply, but when you need something a bit more complex, use the ExecuteCodeAction.

[MacSkelly]

@RaananW Thanks for the playground example.

It's a much easier approach than what I was going for, but I'm running into a problem. I want to add this action to multiple meshes in a loop but it seems to only work for the first mesh that's added. My code:

for (var i = 0; i < size; i++) {
        
        var box = BABYLON.Mesh.CreateBox("box" + boxNo, 0.5, scene);
        box.position.x = x;
        x += 0.5;
        box.position.z = z;
        			
        var materialBox = new BABYLON.StandardMaterial("texture" + boxNo, scene);
        materialBox.alpha = 0.2;
        box.setMaterialByID("texture" + boxNo);
					
        box.visibility = 0;
					
	box.actionManager = new BABYLON.ActionManager(scene);
					
	box.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, function (evt) {
		if(buildMode) box.visibility = 1;
	}));
					   
	box.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, function (evt) {
		if(buildMode) box.visibility = 0;
	}));
        			
        boxNo++;
        
}

Would you know of any reason why this may be the case? It worked fine with setValueAction, well, before I needed to add the buildMode condition.

[RaananW]

Of course there is a reason. It is called "JavaScript" and it is a hell of a language  (My guess is, that it's working for the last mesh you added)

Try creating the boxes first, and then use a forEach loop (and not a for loop) to create the actions. Should be working.

[RaananW]

Smthng like this - http://www.babylonjs-playground.com/#HUY9P#1

 

[MacSkelly]

@RaananW Thank you so much, it's working perfectly now.

Previously I've only used JavaScript for making small changes to the DOM, so I'm only starting to understand how little I know about it and how confusing it can be