Start learning with our library of video tutorials taught by experts. Get started
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.
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.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.