Jump to content

Using animations with Physics


Recommended Posts

Hello Babylon.js forum!


I'm developing a coin pusher type game as a foray into 3D game dev. But I'm stumped on something.


I put an animation on the pusher

var sliderBox = BABYLON.Mesh.CreateBox("slider_box", 2, scene);sliderBox.scaling = new BABYLON.Vector3(2.5, 0.2, 1.5);var sliderZPos = { 	allIn: backWallBox.position.z, allOut: 	backWallBox.position.z - sliderBox.scaling.z * 2 }; sliderBox.position = new BABYLON.Vector3(0, 0.2, sliderZPos.allIn); // Slider animation var sliderAnimation = new BABYLON.Animation("slider_animation", "position.z", 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); var keys = [ 	{ frame: 0, value: sliderZPos.allIn }, 	{ frame: 90, value: sliderZPos.allOut }, 	{ frame: 180, value: sliderZPos.allIn }, ]; sliderAnimation.setKeys(keys); sliderBox.animations.push(sliderAnimation); scene.beginAnimation(sliderBox, 0, 180, true, 1); 

This works great, but I need to enable physics on it and this disables the animation. Physics code is simply...

sliderBox.setPhysicsState({	impostor: BABYLON.PhysicsEngine.BoxImpostor,	move: false});

I do not understand 3D development enough to figure this one out, I've done Google searches but haven't found a solution. How can I emulate what an animation would do with physics? Or am I doing something wrong with regards the animation and/or physics code.


Extra info: the rest of the code is standard stuff and I'm using oimo.js for physics.


Any help is greatly appreicated. Thanks

Link to comment
Share on other sites

Hi adwilson!  Welcome to the forum, good to have you.  And may I say, what an interesting and cool project idea!


You might want to look at:  https://github.com/BabylonJS/Babylon.js/issues/209


I am no expert, but another user apparently has had your same troubles.  Mesh with physicsState set... don't like to be moved in standard ways.  They require applyImpulse.  (This may be why your standard animation appears to stop when the pusher bar has its physicsState set)


And if you use applyImpulse to slide the pusher bar, you are going to run into the same problem as the user in that post above.  How do you know when the bar has moved to ALL-IN or to ALL-OUT?  How do you measure?


Here's an idea... but not necessarily a good idea.  Leave Babylon.Animation alone, and make your own pusher bar animation system.  Do this by doing repeated little applyImpulsings... in the renderLoop (or registerBeforeRender) of the scene... UNTIL... the pusher bar intersectsMesh with a pusher bar 'stopper'.  Put pusher bar 'stoppers' (.visibility = 0 is probably OK) at the ALL-IN and ALL-OUT stopping locations.  These stoppers might be simple tiny boxes that 'watch' for intersectMesh events with the pusher bar. 


When its time to move the bar IN, start doing little repeated applyImpulsings to the pusher bar... until the IN-stopper... intersectsMesh with the pusher bar.  Then quit those impulsings, and start doing little repeated applyImpulsings (against the pusher bar) in the opposite direction, until the ALL-OUT stopper intersects mesh with the pusher bar.  Rinse, repeat.  :)


When I say 'little impulsings'... I mean low-powered.  By repeating these low-powered impulsings, you should see a smooth movement of the pusher bar, in both directions.


Just an idea.  Dad72 has done recent work with collisions and moving mesh.  He might have some ideas, too.  And there are many other very smart people here (far smarter than I), so we are likely to hear better ideas... from others.  Be well!


PS:  Temechon... if you're reading along... http://pixelcodr.com/tutos/oimo/oimo.html is way nice... well done.  Adwilson, this url won't show you how to do applyImpulsing with oimo (impulsings are not used in Temechon's tutorial), but I needed to give him an attaboy anyway.  Using oimo with Babylon.js is sort of new, and information about it is a bit scarce.  Thanks for the oimo info, T-doggydog!  Good stuff.

Link to comment
Share on other sites

Firstly, thank you for the kind words. I feel very welcome already.


I tried setting position as well, like the user on GitHub but obviously it didn't work! Those ideas you suggested are definitely worth a go, it's the only bottleneck in my project so far. Cheers for the idea dude!  :) 


While you bring the subject up I also want to you join with the attaboy for my own reasons! The whole reason I'm this far this quickly is because of those tutorials, they're fantastic! So yeah, Temechon, thanks for oimo and the tutorials!

Link to comment
Share on other sites

Hmm.  I was just thinking.  Just because we can't MOVE a mesh with physicsState set... does not mean we can't 'get' the current position of that mesh.  So, maybe...  if (pusher.position < all-in) { reverseImpulsings() }  etc etc.


I just wanted to remind you to check if you could getPosition of a physics object that is currently moving (from an impulsing).  Maybe you don't need stoppers and intersectMesh crap.  Maybe you only need to keep checking pusher bar position, and when it has gone far enough.position, reverse the impulsings (direction).  *shrug* :)

Link to comment
Share on other sites

Hello there ! 


Thank you for your kind words :)


In Oimo, there IS a way to update the position of a mesh having a physics body. I created a method called updatePhysicsBodyPosition, to be used like this : 

floor.position.z += 1;floor.updatePhysicsBodyPosition();

This way, the physics body will be updated accordingly to the mesh position. And it works with rotations too !

However, this method won't check physics interactions, as it is not a movement, so be careful !


Hope this can help you with your game :)


Cheers !


@Wingnut : Using Oimo is the same as using Cannon : same methods, same objects, same everything. A demo should work with Cannon and Oimo just by updating the plugin name. Everything except this method above :)

Link to comment
Share on other sites

Here's a progress update...


@Temechon: updatePhysicsBodyPosition() let the coins drop through the pusher as you warned it probably would so that couldn't help me this time, but I appreciate your help none the less B) .


@Wingnut: I tried your idea and had reasonable success, testing the position wasn't quite enough as the deceleration made it breach it's limits, so I put very heavy but very small objects in the way, one at the back  and one at the front which is almost completely unobtrusive so the coins don't hit it (and isn't visible either). 


With the ideas and knowledge I have now I'm going to restart the whole thing, do it properly with better calculated values instead of "winging" most of them (which causes the pusher to get wedged sometimes and other funky physics) and build a nicer stage and textures etc. using Blender. 


Here is the demo - [DEMO]

(No interaction on the world, just drops 100 coins at random places, feel free to fiddle with the pusher force though!)


This is exciting, did everyone else get this buzz on their first 3D project?

Link to comment
Share on other sites

Very nice, adwilson!  You're becoming a Babylon.js expert rather quickly.  And yes, I get excited when making 3D scenes...  almost every time.  But right now, I'm kind of excited about YOUR project.  Its coooooool.  I suspect we are going to see lots of fun projects from you.  Keep on doing what you're doing... and showing us your inventions and discoveries.  We love seeing them!  Party on!


A handy thing to keep in mind is... you don't need to use 'button' in your gui.  If you want more style-ability from your buttons, just use a span.  Set its CSS background color (let's say red), then set its border to maybe 2pt outset red...  then set its cursor: pointer... and its onclick="somefunction()".


You've just made a button from a span element, and you get lots of CSS power to style it.  Sometimes, a STANDARD button element doesn't accept CSS as well as it could/should.  With span-buttons, you could even use round-corners, but I don't know what a round-corner span element looks like... when it has an outset border.  Just some more options.  :)


If you want to get really fancy, you can set its onmousedown="functionToChangeToInsetBorderStyle()" and onmouseup="functionToChangeToOutsetBorderStyle()".  That makes it look like your span-button "depresses" (moves inward) when you press it.  Stupid HTML tricks.  hehe


@temechon - Thanks for that Oimo info, good deal.

Link to comment
Share on other sites

Yeah for sure! I'll keep showing off anything I'm working on, thanks for the kind words! :)


I've found the new(ish) <button> tag is perfect to be honest, you can have HTML inside it and style it just as well as a <span> tag because as soon as you set a style on them they lose all their default styles and become like any other element (plus they are semantically correct and correct for accessibility, but that isn't too relevant for games), were you thinking of the old <input type="button"> tag? Because they are dated and very limited.

Link to comment
Share on other sites

Hi adwilson!  Yes, I was indeed thinking of the older input type="button".  (My brain often fails me these days.)  :)


I haven't used <button> much at all, if ever.  Good to hear that it has full CSS style-ability.  I will start using <button> instead of <span> ... for my scene buttons.  Thanks for the correction and information on that.  "semantically correct and correct for accessibility"... well said and absolutely right.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...