Detailed use of shoebox to make bitmap fonts

Http://childhood.logdown.com/posts/190580/-details-using-shoebox-produce-bitmap-fonts?utm_source=tuicool

1 Shoebox Introduction

• Shoebox official website

Shoebox is a free cross-platform tool based on the Adobeair implementation. This tool uses drag-and-drop, clipboard workflow mode, can easily handle game pictures, create bitmap fonts and so on.

• Support Engine

2 Overview of functions

Shoebox small, perfectly formed. The author makes this tool to be used heart, if you want to donate, the official website right corner:). When writing this text, the author uses the version is the most new 3.4.2. Some pictures of the official website show that many of the old version, pay attention to it.

Sprites

• Package Bitmap (Sprite Sheet)

This feature is very powerful. In the game production, we often use tools such as Texturepacker, some of the broken image to synthesize a wizard form (Spritesheet), the benefits are self-evident. This function of shoebox, in some respects does not have the TP tool so powerful, but has own characteristic function. Ta can be multiple pictures, SWF (AS1,AS2,AS3 version) animation or GIF animation to a texture map, powerful bar, support Swf/gif Oh.

• Reading Wizard (read Sprites)

Read a sprite form or a set of bitmap fonts and export them individually as Sprite pictures. Requires a picture file and a Find index text file (i.e. picture description data file).

• Extract Wizard (Extract Sprites)

It was an FlappyBird experiment I took with the elf form.

Detects sprite images of images with alpha channels and exports them at once. This feature can be used as an Elf-SLR wizard when you lose a picture description file. The same object if there is a transparent gap in the picture, will be a number on the table, this is not ideal, friends if you want to use this function note.

• Set Anchor point (Sprite pivots)

This we use in the cocos2d, Starling inside there is a set pivot.

Gui

• Bitmap font (Bitmap font)

This is what we are going to focus on today. See details in the following sections.

• Split psd file (split PSD)

This function is definitely the welfare of the art staff. It is strongly recommended that friends recommend to their company's mm, to introduce them to the shoebox, and hold their small hands, hands-on teaching them how to use this function. If the art is GG, no matter what. I do not know how other art is done, as a non-fine art of me, but often using Photoshop, when I export pictures, if the layer too many, by hiding the other layers, the layer's pictures are exported individually, which also involves cropping or new document export. No trouble? Of course. Therefore, this function can efficiently export the picture in PSD.

• Slice 9

As the name implies, this feature deals with nine Gongge images. Because in the cocos2d has own nine diagram class, here does not introduce.

Animation

• Animation frame (Ani Frames)

Export a GIF or SWF animation as a frame sequence diagram. Exceptionally powerful! After you drag and drop the animated GIF image above AniFrames , save the sequence frame that will export the animation. SWF in the same vein. This feature is often used to parse resources.

• Frame form (Framesheet)

This feature sets up the animation frame sequence export (aniframes) and the pack sprite Picture (Pack Sprites) feature, which can be saved as a sprite form and contains the animated frame sequence diagram when the GIF or SWF animation file is dragged and dropped onto the top.

Bitmaps

• Jpng Bitmap (jpng Bitmap)

Converts a 32-bit RGBA bitmap into a 24-bit JPG format diagram with an alpha channel group. The engine parsing requires a JPG image to be loaded, and then the 32-bit RGBA diagram is re-formed by copying the right alpha channel and applying it to the color area on the left. It seems that this practice is seldom used now.

• Mask Image

The JPG image is masked and feathered, and a complex diagram is synthesized. It's not clear how this is used in particular.

Misc

• Flickr Upload
• Clean up Text
• Mac to PC URL

These three games are less than basic. Don't introduce it. If you want to know more, you can delve into the website.

3 to the chase create a bitmap font

Under normal circumstances, under Windows we can use the free bitmap Font Generator,mac under the paid glyph Designer. With this cross-platform shoebox, artists can make a set of bitmap fonts that support Chinese in their own designs.

Work flow

1. Right-click to open the Settings panel, Txt Chars Enter the font you want to make, such as I enter abcdefghijklmnopqrstuvwxyz these fonts, and finally give you an cocos quick artistic effect. followme!

2. Press and hold the bitmapfont icon around 2s, copy our character set to the Clipboard, open Photoshop, create a new file, use the text Input tool or hotkey T to click on the canvas, and then paste the characters on the Clipboard onto the canvas. As shown

Fonts have no beauty, do they?

3. Here is the time to develop your design capabilities. Let the art design the font for yourself. I randomly added a stroke, an outer glow, a projection, such as

4. Save the design you just made, and export it as a PNG image. It is important to note that when designing the font spacing is not too close, otherwise shoebox in the subsequent recognition process, will be too close to the font recognized as a font.

5. Drag and drop the saved image onto the Bitmapfont icon, and there will be a flowing dashed line indicating that it can be dragged and dropped effectively. If you drag a JPG image, it is invalid.

6. It's time to witness the miracle!

In the Message column of the Setup Panel, we enter cocos quick , set the character spacing (kerningvalue) to the appropriate value such as-2, the space width (txtspacewidth) to 5, and then apply apply the OK, you can see the text preview effect.

7. When the parameters are adjusted properly, the Save font (Savefont) will generate a PNG image and a FNT data file in the original image directory. This time the engine will be able to use these two files directly.

If you look at the text trouble, you can first look at the video.

• "Youku video Shoebox creating bitmap Fonts"
• "Youku Video shoebox Chinese character bitmap Example"

Happy designing!

Posted by Childhoodandy March, shoebox bmfont bitmap font Bitmap font Generator Glyph Designer

Comments

Detailed use of shoebox to make bitmap fonts