Create Alphanueric Sprites with Phaser Text API

[klm]

Hello,

 

I am considering using Phaser for some educational games and would like to know if there is a way to create sprites that are alphanumeric values such as "A", "2", etc. without the use of any image game assets.

 

To experiment I have tried variations of the approaches below but have not been successful.  These snippets are attempts to create letter "A" brick sprites for a Pong game:

 

  this.alphanumericSpriteGroup = game.add.group();

  this.alphanumericSpriteGroup.enableBody = true;

  for (var i = 0; i < 5; i++)

  for (var j = 0; j < 5; j++)

  var alphanumericSprite = 'A';

  game.add.sprite(55+i*60, 55+j*35, alphanumericSprite, 0, this.alphanumericSpriteGroup);

 

This variation attempts the use of the Phaser Text API

 

  this.alphanumericSpriteGroup = game.add.group();

  this.alphanumericSpriteGroup.enableBody = true;

  for (var i = 0; i < 5; i++)

  for (var j = 0; j < 5; j++)

  var alphanumericCharacter = 'A';

  game.add.sprite(55+i*60, 55+j*35, (game.add.text(55+i*60, 55+j*35, alphanumericCharacter, {font: '24px Arial', fill: '#ffffff' }), 0, this.alphanumericSpriteGroup));

 

I noticed the Phaser Center Text on Sprite example at http://examples.phaser.io/_site/view_full.html?d=text&f=center+text+on+sprite.js&t=center%20text%20on%20sprite may be a good alternative option as it may only require the use of one image asset for multiple alphanumeric sprites but I would like to avoid using any image assets at all if possible.

[lewster32]

You can add a Text object as a child to a null sprite if you want to have physics and the other stuff Sprites offer:

// Create a 'container' sprite this.alphaNumericSprite = game.add.sprite(game.world.centerX, game.world.centerY, null);// Create the text objectthis.alphaNumericSpriteText = game.add.text(0, 0, alphaNumericCharacter, {font: '24px Arial', fill: '#ffffff'});// Add the text object as a child of the container spritethis.alphaNumericSprite.addChild(this.alphaNumericSpriteText);

You could also look at using BitmapData to do this, which would be much more lightweight. You'd basically have a single text object at initialisation, and run a loop where you change the letter/number and then call bitmapData.draw to copy the current letter/number to each sprite.

 

You could also with a bit more work create a single BitmapData and write every letter and number to it, then use it as you would a sprite sheet for maximum performance.

[klm]

Thank you for your reply, it's very helpful.  I am interested in learning more about the single BitmapData approach you mentioned that will maximize performance.  Is this what the tutorial at http://www.paolodistefano.com/2015/03/16/using-littera-with-phaser provides guidance on?  Also, are there examples of this approach at http://phaser.io/examples?