Jump to content

Create Alphanueric Sprites with Phaser Text API


klm
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 months later...
 Share

  • Recently Browsing   0 members

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