Jump to content

Draw Text As Sprite?


Recommended Posts

So I'm basically trying to make a tilesprite composed of text.  The idea is so I can have dynamic text to behave like a sprite, rather than constructing a different spritesheet for every kind of font I might need.  The primary use is to scroll through the text (think like a slot machine?) composed of text, rather than icons.  Hence the tilesprite, but I'm sure there's other ways to do it.


None of the examples really deal with text being used in such a fashion, so I'm not sure where to begin.


This is done fairly simply in just plain old canvas, but I'm not really sure a Phaser equivalent?  I thought perhaps RenderTexture, but I can't seem to construct one without using an actual image.


I haven't used Phaser since 1.1.3 or so, so I'm not really familiar with all the changes.



Anyone got some insight on where to begin here?

Link to comment
Share on other sites

Always feel silly asking then answering it myself, but for those interested you can accomplish this by making your own bitmap data object, filling the text (plain ol' canvas method, ctx.fillText for example) and then use the bitmap data itself to construct your phaser sprite.  For example:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'render-text', { preload: preload, create: create });var bmd = null;var spr = null;//  The Google WebFont Loader will look for this object, so create it before loading the script.WebFontConfig = {    active: function() { game.time.events.add(Phaser.Timer.SECOND, createText, this); },    google: {      families: ['Revalia']    }};function preload() {    game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');}function create() {    game.stage.setBackgroundColor(0x2d2d2d);    bmd = game.make.bitmapData(400,200);}function createText() {    bmd.ctx.beginPath();    bmd.ctx.rect(0,0,400,200);    bmd.ctx.fillStyle = '#FF0000';    bmd.ctx.fill();    bmd.ctx.fillStyle = '#000000';    bmd.ctx.font = '32px Revalia';    bmd.ctx.fillText('hello,phaser!',40,40);    spr = game.add.sprite(100,100,bmd);    spr.inputEnabled = true;    spr.input.enableDrag();}
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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