Star Wars Style Scrolling Text

[Nick]

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

[Tom Atom]

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     }}

[Nick]

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. 

[Nick]

For anyone interested, here's how it turned out:

 

http://louis.surge.sh

[codevinsky]

Very nice!

[jdnichollsc]

Ohhh so easy! Very cool man! hahaha

 

And... It is easier with a text and a tween... without a renderTexture 

 

Regards, Nicholls 

[Tom Atom]

Nice! Any chance to show source?

[Nick]

Thanks Guys. I've shared the source on GitHub here:

 

https://github.com/nickryall/starwarsinvite

[drhayes]

This looks great! Good job! Thanks for sharing the source, too.

[Tom Atom]

Great, thanks!