Jump to content

Star Wars Style Scrolling Text


Nick
 Share

Recommended Posts

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

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

  • 2 months later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...