Continuing the discussion from Boxer Engine Updated:
@peace If you’d like to get something working with 2D transforms (for older browsers), here’s a small little something to get you started: https://github.com/infamous/motor/tree/2D-fallback
To run the project, you’ll need to install Node.js and Meteor, then in the root of the project run npm run dev
, or just meteor
. Give it some time on the initial build, which takes a while to get all the dependencies using NPM v3. It’ll draw a box on the screen and animate it on the X/Y axis.
It’s a really simple implementation of something similar to Famous 0.3.x. Check out the motor/core/Node
and motor/core/Scene
files to see basically the whole implementation. There’s no Engine, so you have to make your own loop. If you’re in an older browser, you’ll need to use setInterval
(or a shim for requestAnimationFrame
which uses setInterval behind the scenes).
Challenge: Tweak the part of the code that applies matrix3d
to simply apply matrix
(which is 2D) for IE 9. You’ll have to use this site to learn how to write 2D matrices for IE 8 using -ms-filter
. IE 9 supports the transform:matrix()
css property, but IE 8 doesn’t. You can alternatively just modify the code to use top
and left
properties, which should be fine for the IE8 (and possibly IE9) use case.