I'm wondering how I can tilt a platform on it's center/axis.

For example, if the player steps on the left of the center, it should tilt to that side like in this picture.

enter image description here

Can a platform like this still be an array of tiles? or does it have to be solid. Are there any good libraries (javascript) to handle this kind of transformation and the calculations required?

Could someone provide example code for what this might look like? Thank you.


I'm assuming here you're using <canvas>:

You can use the rotate function on the context to rotate any drawing functions. Draw the tiles with offsets around the centre, then post-translate them. Confusingly you write the translation first and it gets applied second, but here's how you'd do it:

var ctx = document.getElementById('your_canvas').getContext('2d');

ctx.translate(platorm_centre.x, platform_centre.y);

ctx.drawImage( platform_image, 
               -platform_width/2, -platform_height/2, 
               platform_width, platform_height );

// Afterwards, go back to an identity transform:
ctx.setTransform( 1, 0, 0, 1, 0, 0 );

You can replace the single draw call with multiple draw calls to tiles if you subtract the platform's centre from the tile's world position.

Important to note is none of this applies to your physics to actually stand on the platform and make it tilt. I'm assuming you've already solved that problem. :)

  • \$\begingroup\$ Yeah I'm using canvas, so this is perfect. And I haven't done any physics yet, but I guess it's just a matter of adding some gravity according to where on the platform the player is and tilt it according to that, am I right? \$\endgroup\$ – justanotherhobbyist Jul 19 '12 at 21:42
  • \$\begingroup\$ Almost. It's to do with moments and torque, especially in relation to angular momentum. Roughly, take sin(angle of platform) and multiply by the magnitude of the force (player mass * gravitational constant). From this you have torque, which is equal to the moment of inertia I (Bigger and heavier things have a bigger I, so turn slower) multiplied by angular acceleration. Divide by your chosen I for this platform (tweak it 'til it feels 'right') and you have the acceleration to apply to your angle variable. \$\endgroup\$ – Matt Kemp Jul 19 '12 at 22:34
  • \$\begingroup\$ Note that this is acceleration of angle change, not velocity, so your calculation to get your new angle is to calculate the new velocity (old_velocty + angular_acceleration*timestep) and then apply this to get the new angle (old angle + new_velocity*timestep). You may also want to set a minimum and maximum angle your platform can turn to, or you might find that you get a propeller instead. :) Things like box2d will help here as they'll do a lot of the heavy lifting for you. May be worth a look for this kind of project. \$\endgroup\$ – Matt Kemp Jul 19 '12 at 22:39
  • \$\begingroup\$ Excellent, I've heard about box2d, just haven't had time to use it yet, I might use it if the learning curve isn't too big. \$\endgroup\$ – justanotherhobbyist Jul 19 '12 at 22:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.