1

I am having some fun with box2dweb. The following code is located in my step method which gets called about 30/sec, the code works but a am curios if there is a way of improving it? 

var img = body.GetUserData();
var pos = body.GetPosition();
var newPos = {x: meterToPixelCenter(pos.x,scale,img.width) , y:meterToPixelCenter(pos.y,scale,img.height)};

img.style.left = newPos.x + 'px';
img.style.top = newPos.y + 'px';

var style = 'rotate(' + (body.GetAngle() * 57.2957795) + 'deg) translateZ(0)';
img.style.WebkitTransform = style;
img.style.MozTransform = style;
img.style.OTransform = style;
img.style.msTransform = style;
img.style.transform = style;

I would like to use CSS3 translate for moving the object:

var stylePos = 'translate(' + newPos.x + 'px' + ',' + newPos.y + 'px' + ')';
img.style.WebkitTransform = stylePos;
img.style.MozTransform = stylePos;
img.style.OTransform = stylePos;
img.style.msTransform = stylePos;
img.style.transform = stylePos;

var style = 'rotate(' + (body.GetAngle() * 57.2957795) + 'deg) translateZ(0)';
img.style.WebkitTransform = style;
img.style.MozTransform = style;
img.style.OTransform = style;
img.style.msTransform = style;
img.style.transform = style;

How am I able to do both (rotate and translate)? Would this increase performance?

BenMorel
  • 34,448
  • 50
  • 182
  • 322
Ivan Bacher
  • 5,855
  • 9
  • 36
  • 56
  • Can I ask why are you using javascript to add so much styling and effects? You can do this in CSS. If you need to being and end the effects using javascript, you can still set them up with CSS and just add or remove classes. – CaribouCode Sep 20 '13 at 11:43
  • oh ok ill look into that. The movement and rotation always change depending on user interaction. I must admit that im only starting with this kind of stuff so i could have missed something. – Ivan Bacher Sep 20 '13 at 11:47
  • 2
    If you can manage to setup all the rotations and transitions you need in a CSS stylesheet, then simply add classes to elements to turn them on, I can guarantee that will give you a performance increase. – CaribouCode Sep 20 '13 at 11:49

1 Answers1

2

It should increase performance in most cases, according to this research. But you need to set both translate and rotate in one transform value, like this:

var stylePos = 'translate(' + newPos.x + 'px' + ',' + newPos.y + 'px' + ')';
var styleRot = ' rotate(' + (body.GetAngle() * 57.2957795) + 'deg) translateZ(0)';
img.style.WebkitTransform = stylePos + ' ' + styleRot;
img.style.MozTransform = stylePos + ' ' + styleRot;
img.style.OTransform = stylePos + ' ' + styleRot;
img.style.msTransform = stylePos + ' ' + styleRot;
img.style.transform = stylePos + ' ' + styleRot;

In the code you posted in the question, rotation just replaces and overrides translation.

Ilya Streltsyn
  • 13,076
  • 2
  • 37
  • 57
  • Also, you can simplify CSS and calculations a bit: `var stylePos = 'translate3d(' + newPos.x + 'px' + ',' + newPos.y + 'px' + ',0)'; var styleRot = ' rotate(' + body.GetAngle() + 'rad)';` – Ilya Streltsyn Sep 20 '13 at 12:35