Tutorial index

In this tutorial we will use the font editor to generate a bitmap font.

You can download the source for this tutorial here.

To generate a new font we can use phxFontEditor.exe that is located in the Binary folder and select File→New and select generator to start the built in font generator.

You can modify the settings of the font to generate to add shadows and outlines but the default settings will be sufficient for the tutorial.

To select witch characters to include in the bitmap font press the Characters button above to show the character select dialog. If you have a translation file containing all required characters you can press Import to add all the characters from that file.

Close the character dialog and press OK to generate the font. Make sure to check the preview window so the text looks okey.

If any character overlaps or looks wrong you can change the location and offsets of the character in the character editor page.

Save the font as Tahoma.phxfnt

Start with adding a variable for the font list.

TGame = class(TPHXApplication)
  private
    Device : TPHXDevice;
    Canvas : TPHXCanvas;
    Fonts  : TPHXFontList;
  public
    procedure Init; override;
    procedure Update; override;
    procedure Render; override;
    procedure Shutdown; override;
  end;

In the init function create the font list and load the font we created in the editor.

procedure TGame.Init;
begin
  ...
  // Create the font list
  Fonts:= TPHXFontList.Create(Device, Canvas);
  // Load a gont
  Fonts.LoadFont('Tahoma.phxfnt');
end;

To draw text use one of the TextOut methods of the font.

procedure TGame.Render;
begin
  // Clear the back buffer
  Device.Clear;
 
  // Draw a simple font
  Fonts[0].TextOut(4, 4, 'Hello world');
  // Draw gradient text
  Fonts[0].TextOut(4, 24, 'Hello world', clrSilver, clrMaroon);
 
  // Lines with the correct spacing
  Fonts[0].TextOut(200, 4 + Fonts[0].Height * 0, 'Line 1');
  Fonts[0].TextOut(200, 4 + Fonts[0].Height * 1, 'Line 2');
  Fonts[0].TextOut(200, 4 + Fonts[0].Height * 2, 'Line 3');
 
  // Flush the canvas
  Canvas.Flush;
  // Flip the front and back buffers to show the scene
  Device.Flip;
end;

The result should look something like this

One of the overloaded text out methods allows to align text inside a rectangle

  // Draw text that is aligned to the top right corner of the device window
  Fonts[0].TextOut(Device.Bounds, 'Aligned text', taTopRight, clrGreen);
  // Draw text that is aligned to the bottom left corner of the device window
  Fonts[0].TextOut(Device.Bounds, 'Aligned text', taBottomLeft, clrTeal);

Green text to the top right corner and teal in the bottom left corner.

The font class has support for drawing selection rectangles for a text using the DrawSelection method.

procedure TGame.Render;
begin
  ...
  // Draw a selection rectangle for a text
  Fonts[0].DrawSelection(4, 120,  'The quick brown fox jumps'#13'over the lazy dog.', 5, 11, clrNavy);
  // Draw the text above the selection rectangle
  Fonts[0].TextOut(4, 120, 'The quick brown fox jumps'#13'over the lazy dog.');
  ...
end;

The result should look like this

The font engine supports word wrapping on a word by word basis for western languages and a character based word wrapping for east asian languages

To enable word wrapping select Word and enter the wanted characters to word wrap on. In the example below space ( ) and comma (,) is selected as wrapping characters.

To enable character wrapping select Char and enter the the characters that may not be first on a new line as well as the characters that cant be the last character on a line.

http://en.wikipedia.org/wiki/Kinsoku_shori#Line_breaking_rules_in_Japanese_text_.28Kinsoku_Shori.29

To draw wrapped text use the WrapText function of the font. The wrapping mode is saved in the font and depending on the loaded font the correct wrapping mode is selected.

procedure TGame.Render;
var Rect: TRectf;
var Text: WideString;
begin
  ...
  Rect:= TRectf.Create(450, 50, 500+250, 50+400);
  Text:= '製材所は近隣の森に生えている木から木材を取ります。木材は頑丈で用途も様々。建物や武器、道具の建設には欠かせない材料です。';
 
  // Draw the word wrapped text
  Fonts[1].WrapText(Rect, Text);
  ...
end;

Back to tutorial index