wayfinder Posted June 6, 2014 Share Posted June 6, 2014 Hi! As far as I could see, neither Phaser nor PIXI have out of the box capabilities to free transform a rectangular image (move the corners anywhere and stretch the image accordingly). Correct me if I'm wrong... (please! PLEASE!!! ) After trying a lot of different things that didn't work at all, my current approach is to use three.js to paint the transformed image to a rendertarget, which works as far as this: http://jsfiddle.net/beAh8/5/ I correctly render the transformed quad into a rendertarget that I can then use as a texture in three.js. But, how do I get the resulting texture into a format I can use in Phaser? I tried to do it like this: var rtt = new Phaser.BitmapData(this, 'rendertarget', 1280, 1280);rtt.ctx.drawImage(rtTexture, 0, 0, 1280, 1280); However, the WebGL element that I'm rendering to (three doesn't support Canvas Render To Texture) doesn't have a 2d rendering context, so I get an error. Can you help? (I'm 100% open to other approaches to solve the underlying problem of stretching images, too!) Link to comment Share on other sites More sharing options...
wayfinder Posted June 6, 2014 Author Share Posted June 6, 2014 Went another way and adapted this for use in Phaser: https://code.google.com/p/cartagen/source/browse/trunk/cartagen/public/cartagen/lib/projective.js?r=357 It kind of works! Link to comment Share on other sites More sharing options...
wayfinder Posted June 8, 2014 Author Share Posted June 8, 2014 Just as an update: I have a quite pretty working version now and understand it (for the most part ). The code from cartagen subdivides the image into many, many parts and then uses standard shear/scale transforms on them to approximate any given polygon. You can set how finely grained the effect should be (and thereby how high the cpu cost and how good the results are). Link to comment Share on other sites More sharing options...
Recommended Posts