Start learning with our library of video tutorials taught by experts. Get started

Building Flash Games with Starling

Creating and importing bitmap fonts


From:

Building Flash Games with Starling

with Lee Brimelow

Video: Creating and importing bitmap fonts

So when it comes to rendering text in Starling, you have a couple of different options. First, you can just use regular system fonts that every user has on their system and this could be Arial or any of those common fonts. And Starling will actually render that into a texture and put it on the GPU for you. So this is good if you have text that isn't going to be changing very often. But in most cases what you are going to want to do is to create a bitmap font, and this is essentially identical to the idea of a sprite sheet where you have all of the glyphs for the characters that you are going to want to use, packed into a single image and then there is going to be this data file that says for instance, if I want the letter D, it's going to go to this X and Y in the sprite sheet and pull out the correct area.
Expand all | Collapse all
  1. 2m 9s
    1. Welcome
      45s
    2. Using the exercise files
      36s
    3. What you should know
      48s
  2. 10m 21s
    1. Checking out the finished product
      1m 10s
    2. Downloading the Starling framework
      4m 13s
    3. Installing Flash Builder
      1m 44s
    4. Installing additional tools
      1m 30s
    5. Overview of the Starling framework
      1m 44s
  3. 13m 0s
    1. Creating the Flash Builder project
      2m 40s
    2. Setting up your Starling scene
      6m 7s
    3. Creating the main game class
      4m 13s
  4. 13m 52s
    1. Creating the IState interface
      2m 14s
    2. Creating the three game states
      3m 50s
    3. Building the state machine
      7m 48s
  5. 22m 14s
    1. Creating a static assets class
      2m 3s
    2. Adding images and creating textures
      3m 24s
    3. Creating sprite sheets with TexturePacker
      6m 26s
    4. Creating the main texture atlas
      3m 29s
    5. Creating and importing bitmap fonts
      6m 52s
  6. 14m 16s
    1. Creating the Background class
      5m 55s
    2. Adding the logo
      2m 58s
    3. Adding the play button
      3m 4s
    4. Implementing the destroy method
      2m 19s
  7. 56m 47s
    1. Adding the background
      1m 3s
    2. Creating the Hero class
      6m 14s
    3. Creating the Bullet class
      1m 44s
    4. Creating the BulletManager class
      4m 23s
    5. Using the StarlingPool class
      9m 24s
    6. Firing bullets with the mouse
      7m 24s
    7. Creating the Alien movie clip
      1m 58s
    8. Creating the AlienManager class
      8m 12s
    9. Overview of collision-detection options
      3m 10s
    10. Creating the CollisionManager class
      10m 51s
    11. Implementing the destroy method
      2m 24s
  8. 7m 59s
    1. Adding the background
      1m 10s
    2. Creating the "Game Over" text
      2m 43s
    3. Adding the Try Again button
      4m 6s
  9. 20m 5s
    1. Exploring particle-creation tools
      4m 52s
    2. Adding the smoke texture
      5m 3s
    3. Creating the Explosion class
      2m 6s
    4. Creating the ExplosionManager class
      8m 4s
  10. 11m 5s
    1. Creating sound effects with cfxr
      3m 5s
    2. Adding the sound effects
      3m 42s
    3. Creating the Score class
      4m 18s
  11. 6m 1s
    1. Starling optimization tips
      4m 8s
    2. Helpful Starling resources
      1m 53s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Building Flash Games with Starling
2h 57m Intermediate Jul 05, 2012

Viewers: in countries Watching now:

Join Lee Brimelow in this project-style course that teaches how to build a Flash-based game with Flash Builder 4.6, Flash Player 11, and the Starling framework. Starling, a pure ActionScript 3.0 library for advanced graphics, extends Flash Player 11's support for the modern GPU (graphic processing unit) to enable visual presentations and games in the browser or as a mobile app.

Starting with installation and configuration of Starling and creation of a Flash Builder project, the course shows how to prepare and import graphical assets, create MovieClip classes from sprite sheets, manage various gaming objects, detect collisions, and add both particle and sound effects. The finished game can be deployed to any browser or mobile device that integrates Flash Player 11, which was released in September 2011.

Topics include:
  • Downloading and installing Starling and Flash Builder
  • Creating the project
  • Creating the main game class, static assets class, and other classes
  • Building the state machine
  • Creating a static assets class
  • Adding images
  • Creating sprite sheets with Texture Packer
  • Creating and importing bitmap fonts
  • Detecting collisions
  • Adding particle effects
  • Adding sound effects
Subjects:
Developer Web Games
Software:
ActionScript Flash Builder Flash Player Starling
Author:
Lee Brimelow

Creating and importing bitmap fonts

So when it comes to rendering text in Starling, you have a couple of different options. First, you can just use regular system fonts that every user has on their system and this could be Arial or any of those common fonts. And Starling will actually render that into a texture and put it on the GPU for you. So this is good if you have text that isn't going to be changing very often. But in most cases what you are going to want to do is to create a bitmap font, and this is essentially identical to the idea of a sprite sheet where you have all of the glyphs for the characters that you are going to want to use, packed into a single image and then there is going to be this data file that says for instance, if I want the letter D, it's going to go to this X and Y in the sprite sheet and pull out the correct area.

So when it comes to creating bitmap fonts, I am going to be showing you how to use a tool called GlyphDesigner, but that is a Mac only tool. If you are on Windows, there is a tool called Bitmap Font Generator, which you can get on angelcode.com. This essentially allows you to do the same type of thing. Now I am only going to be showing you these tools. I have already gone ahead and created a bitmap font for you which is in the exercise files, but if you don't have those, you are going to need to get your own bitmap font. So if we look in GlyphDesigner, you can see when I first launch it up here it's giving me a default font and here is essentially the sprite sheet that is going to be created.

So I can go through and change it to whatever font I wanted to create a bitmap font out of. Let me just go to, let's say, this font right here. Now what I can do is to choose which characters I need to embed or I want to embed, because again, I don't want to include a bunch of characters that I am not going to use, because this is going to make the resulting sprite sheet that much bigger. So I can come down here and under the Included Glyphs, I can just include the ones I want.

So let's say I only want to include uppercase letters and numbers. So I can get rid of the lowercase, I can get rid of all the symbols and then click Update and now my sprite sheet has been updated to just include the characters that I want. Now we can also apply different Fills to it here, so obviously I can do a Gradient Fill like this. I can change it to a Solid Fill, I can add an Outline. Now when we are in Starling, you are going to have the option of using the individual glyph exactly how it looks which is going to include the Color and the Stroke, or you have the option to actually color over it with your own color and that's what we are going to be doing.

So the actual visual representation is not that important. Now if we go up to the top here you can see we have our Texture Atlas and then we also have a Glyph Info panel which tells us the various IDs and positions of the actual characters that are going to be embedded. So now, let's say, we are ready to export this, what we can do is to click the Export button, and you'll notice that by default this tool will only export a font if you have the registered version. And again, GlyphDesigner is not a free tool, you can download it, you can experiment with it, but you are not actually going to be able to export your bitmap fonts.

So that's essentially how that tool works. Now like I mentioned, I have included a bitmap font that we are going to be using in the exercise files, and if you go into your assets folder, you'll see this komika.png and komika.fnt. So if we look at the png, here is the font sprite sheet that I exported from GlyphDesigner and I have only included the uppercase letters, the numbers and a few different symbols that we might want to use. So very similar to the sprite sheet that we created in TexturePacker.

There is also an XML file and this has an extension of fnt. You can see it's a similar type of thing where we have an XML file which tells us the position of each of the characters in the sprite sheet. And when we want to reference this font from within Starling, we are going to be referencing it within this face name. So I am going to copy that string to the clipboard, so we have it. Now I need to set that font up in my assets class, so that we are able to use it throughout our project.

So very similar to what we did for the TextureAtlas, I am going to need to embed both the PNG and the XML file. So I am going to copy this one here from the TextureAtlas and paste it, and this one is going to be komika.png and for the Class name we are actually going to call it komika. And the next thing I need to do is to embed the XML file, so we'll also copy that embed statement from our TextureAtlas and remember this is not called .xml, this is called komika.fnt.

And again, we need the application octet-stream mimeType and we are going to name this Class komikaXML. Okay, so now we have embedded both the PNG and the XML, now we need to actually register this bitmap font with Starling so that we can use it anywhere in our game. So I am going to come under here where we created our TextureAtlas. Now to register this font, we are actually going to use a static method of the TextField Class.

So I am going to say TextField and when we import this, again, remember to use starling.text.TextField. And there is a static method on there called registerBitmapFont. And to this, we first need to pass in an instance of the BitmapFont class, so we are just going to do it right in line here, I going to say new BitmapFont and to the constructor of the BitmapFont, very similar to the TextureAtlas, we need to pass in a texture object in our XML.

So I am going to create a texture using texture.fromBitmap method and pass in a new komika like that. Because again, that's our embedded image. And next I need to pass in that XML file, again, I am going to need to cast it to XML and then pass in a new komika XML instance. And that's all it takes to register a bitmap font with the system. So again, now that we've done that, anywhere in our movie where we create a TextField we can say use the komika access font that was embedded.

So that's the general workflow of including bitmap fonts into Starling.

There are currently no FAQs about Building Flash Games with Starling.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Building Flash Games with Starling.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked

Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.