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

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?

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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