Actions

[Saafine]

PLAYGROUND : http://playground.babylonjs.com/#1GM4YQ#123

PROBLEM: Clicking on GREY boxes displays wrong message. Should work the same as clicking on RED boxes.

MORE INFO: One function is creating elements from predefined array. Second function is dynamically creating elements using FOR loop and I don't quite understand why it is not working properly.

As you can see on the playground: clicking on RED boxes works just fine. The browser correctly displays clicked box's index. However, clicking on GREY boxes always displays the same message.

Thank you for reading, 

Saafine

[Wingnut]

Hiya @Saafine, welcome to the forum!  What a nicely-done playground, thx for that.

And isn't it strange?  In the not-working looper... the 'x' variable of the actions (the alerts) was using the last value of x.  (which is now xx, for no real reason).

To help explain to others, let's pretend we had FOUR gray boxes being generated.  ALL the alert ('box ' + xx + 'was clicked')... returned 4.  No matter which box is clicked, it reported box 4.  It acts like the framework waits for the for-loop to finish, and THEN adds the actions to the actionManagers.  By that time, xx == 4... so all 4 boxes get a "box 4 was clicked" alert.  It's weird!  Totally totally weird. 

The actionManager says "Yeah, I know you want some actions registered now, but, I'll get to it later.  I'm busy with a FOR-loop at the moment."  hehe.  Meantime, xx == 4, and all the registered actions... say "box 4 was clicked"

ANYway... I found a work-around. 

http://playground.babylonjs.com/#1FJFZD

Whenever an actionManager triggers an executeCodeAction, for convenience, it automatically sends an event object as a parameter to the code being executed.  I made a func called codeAction, as you can see.  Just like other event objects and handling, it has a source, and for BJS, that source is a mesh, with a .name property.  It works.

But ain't that weird?  *scratch scratch*  Almost like actionManagers queue their registerAction(), and actually register it a bit later.    Or something.  Welcome again.

[JohnK]

Hi @Saafine and welcome from me, look again at line 49

action[x] = new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function () { alert('i clicked ' + x + ' box'); });

This sets up the action on the boxes and is fired only after the for loop has been completed and a box has been clicked on; at which time x will be the last value assigned to it after all the code has been run. As the loop stops when x = 2, this is the current value of x and is the one that will be read by the OnPickTrigger function. So @Wingnut's solution is not so much a workaround as the way to do it as it picks up the actual name of the box clicked.

One more thing using MeshBuilder requires an object as its second parameter, since 50 is not an object the CreateBox uses the default settings for the object properties and so the box sizes are all 1.

The corrected format in the playgrounds are

http://playground.babylonjs.com/#1GM4YQ#124

http://playground.babylonjs.com/#1FJFZD#1

[adam]

Is there any reason not to create one ExecuteCodeAction and one ActionManager?

http://playground.babylonjs.com/#1FJFZD#2

if you wanted some boxes to do a different combo of actions on click it would make sense to create other ExecuteCodeActions and ActionManagers.

http://playground.babylonjs.com/#1FJFZD#3

[Saafine]

@Wingnut Thank you !  I wanted my function to do exactly that. It's a real pleasure to read your responses. I really appreciate that.

@JohnK Thank you for explaining. It took me a few hours to wrap my head around why it was not working. And thank you for pointing out the mistake in setting up the MeshBuilder.

@adam Good point. No reason to create more than one of these in this case.

Also, I've kept digging and came across 'Self-Invoking Functions' in javascript. It looks really messy, but seems to work too:

http://playground.babylonjs.com/#1FJFZD#4

 

[Nabroski]

it's seems cloning is the new thing here in the forum

http://playground.babylonjs.com/#M8580#0

Best

[Wingnut]

Wow, cool code from BOTH @Saafine and @Nabroski... just that quick.  Nice, you guys!

Look at that debris in Nab's render loop:

i % 24 == 0 ?(g[a].material = material,
	g[a].rotation.y += 3,
		g[a++].rotation.y -= .3) :
	(a == 10 ? a = 0 : !0), i++

Wow!  It almost looks like regexp.    (droooool)

If I could code like that, I'd be somebody.