Nick Posted May 27, 2015 Share Posted May 27, 2015 I'm trying to re-create the opening scene of Star Wars in Phaser (I'm creating a Birthday invitation for my kid ), but I'm stuck on the scrolling credits style text. I can get it close by tweening the y position and scale, but the 'tilted' effect is what's missing. The desired effect is to perform a 3d transform on the text so that it is rotated from it's center along on y axis. But I'm kinda stumped as to how I can achieve this with Phaser. Any ideas much appreciated Link to comment Share on other sites More sharing options...
Tom Atom Posted May 27, 2015 Share Posted May 27, 2015 Hi, I would not do 3D effect on text. I would render all text as RenderTexture or BitmapData (updated with scrolling) and this texture I would render as single quad on the screen. To be honest, I do not know how to transform it in Phaser/Pixi so it looks like 3D. But I believe, that it should be much easier than do it with text - maybe somehow hack into "PIXI.WebGLSpriteBatch.prototype.render" where positions for quad are calculated... I do not know if this would work, but: I would replace this method with my own, that would call the original one and in the end it would check if rendered sprite has some extra property (like "doThis3D") and if so, I would adjust just calculated XY and UVs... Something like (pseudocode):PIXI.WebGLSpriteBatch.prototype.oldRender = PIXI.WebGLSpriteBatch.prototype.render;PIXI.WebGLSpriteBatch.prototype.render = function(sprite) { this.oldRender(sprite); if (sprite["doThis3D"] !== "undefined") { // adjust XY, UVs }} Link to comment Share on other sites More sharing options...
Nick Posted May 28, 2015 Author Share Posted May 28, 2015 Thanks Tom Atom. I think what I'm going to try, is to create the text on a renderTexture as you suggested and then do a 3d transform via css on it's <canvas>. I'll post an update here. fariazz 1 Link to comment Share on other sites More sharing options...
Nick Posted July 28, 2015 Author Share Posted July 28, 2015 For anyone interested, here's how it turned out: http://louis.surge.sh drhayes, frenetikm, kenshm and 3 others 6 Link to comment Share on other sites More sharing options...
codevinsky Posted July 29, 2015 Share Posted July 29, 2015 Very nice! Link to comment Share on other sites More sharing options...
jdnichollsc Posted July 29, 2015 Share Posted July 29, 2015 Ohhh so easy! Very cool man! hahaha And... It is easier with a text and a tween... without a renderTexture Regards, Nicholls Link to comment Share on other sites More sharing options...
Tom Atom Posted July 30, 2015 Share Posted July 30, 2015 Nice! Any chance to show source? Link to comment Share on other sites More sharing options...
Nick Posted July 30, 2015 Author Share Posted July 30, 2015 Thanks Guys. I've shared the source on GitHub here: https://github.com/nickryall/starwarsinvite jdnichollsc 1 Link to comment Share on other sites More sharing options...
drhayes Posted July 31, 2015 Share Posted July 31, 2015 This looks great! Good job! Thanks for sharing the source, too. Link to comment Share on other sites More sharing options...
Tom Atom Posted August 1, 2015 Share Posted August 1, 2015 Great, thanks! Link to comment Share on other sites More sharing options...
Recommended Posts