Difference between revisions of "ZenGL Tutorial 2"

From Free Pascal wiki
Jump to navigationJump to search
m (Created)
 
m (added multiline text)
Line 50: Line 50:
 
Draw procedure (here we will draw our text with the loaded font):
 
Draw procedure (here we will draw our text with the loaded font):
 
<delphi>procedure Draw;
 
<delphi>procedure Draw;
 +
var
 +
  rect: zglTRect;
 
begin
 
begin
 
   text_Draw( fnt, 0, 0, 'Sample Text. Press ESC to EXIT.' );
 
   text_Draw( fnt, 0, 0, 'Sample Text. Press ESC to EXIT.' );
  
 
   text_DrawEx( fnt, 32, 32, 1.5, 0, 'Sample Text with DrawEx - Scale 1.5 - Alpha 150', 150 );
 
   text_DrawEx( fnt, 32, 32, 1.5, 0, 'Sample Text with DrawEx - Scale 1.5 - Alpha 150', 150 );
end;</delphi>
+
 
 +
  rect.H:=128;
 +
  rect.W:=400;
 +
  rect.X:=0;
 +
  rect.Y:=96;
 +
 
 +
  pr2d_rect(rect.X,rect.Y,rect.W,rect.H,$FFFFFF,100);
 +
 
 +
  text_DrawInRect(fnt,rect,
 +
  'Sample multiline text in rect.' + #10 +
 +
  'Sample multiline text in rect.'+ #10 +
 +
  'Sample multiline text in rect.');
 +
end; </delphi>
  
 
This is some code to exit our application pressing ESC:
 
This is some code to exit our application pressing ESC:
Line 107: Line 121:
  
 
procedure Draw;
 
procedure Draw;
 +
var
 +
  rect: zglTRect;
 
begin
 
begin
 
   text_Draw( fnt, 0, 0, 'Sample Text. Press ESC to EXIT.' );
 
   text_Draw( fnt, 0, 0, 'Sample Text. Press ESC to EXIT.' );
  
 
   text_DrawEx( fnt, 32, 32, 1.5, 0, 'Sample Text with DrawEx - Scale 1.5 - Alpha 150', 150 );
 
   text_DrawEx( fnt, 32, 32, 1.5, 0, 'Sample Text with DrawEx - Scale 1.5 - Alpha 150', 150 );
end;
+
 
 +
  rect.H:=128;
 +
  rect.W:=400;
 +
  rect.X:=0;
 +
  rect.Y:=96;
 +
 
 +
  pr2d_rect(rect.X,rect.Y,rect.W,rect.H,$FFFFFF,100);
 +
 
 +
  text_DrawInRect(fnt,rect,
 +
  'Sample multiline text in rect.' + #10 +
 +
  'Sample multiline text in rect.'+ #10 +
 +
  'Sample multiline text in rect.');
 +
end;  
  
 
procedure Timer;
 
procedure Timer;

Revision as of 01:31, 30 May 2011

This tutorial show how to create a ZenGL Font (.zfi) and how to draw text.

Create ZenGL Font

To create a ZenGL Font you need to download ZenFont that is a Font generator.

When you got ZenFont open it and you will see something like this:

zenfont.png

Agency FB-Regular-18pt.zfi

Use the options to customize your font and then press "Save font" and chose the filename you want (some filename is generated automatically with

the font name and size). The files generated are the .zfi file with some .tga images.

Once we have a font created we need to follow those steps to draw in the ZenGL window.

Create program

  • Create a new pascal program and add reference to ZenGL like was explained in the first tutorial.
  • Create those directories:

projectname\bin

projectname\data

projectname\project

  • Save your project in "projectname\project".
  • Put the font you has created in "projectname\data"
  • Go to Project > Options > Paths in Target file name write "..\bin\project1".

Add code

Variables: <delphi>var

 dirRes     : String {$IFNDEF DARWIN} = '../data/' {$ENDIF}; // this is the directory where resources are placed
 fnt        : zglPFont; // this is the font we will use </delphi>

Load the font in a variable: <delphi>procedure Init; begin

 fnt := font_LoadFromFile( dirRes + 'Agency FB-Regular-18pt.zfi' );

end; </delphi>

Draw procedure (here we will draw our text with the loaded font): <delphi>procedure Draw; var

 rect: zglTRect;

begin

 text_Draw( fnt, 0, 0, 'Sample Text. Press ESC to EXIT.' );
 text_DrawEx( fnt, 32, 32, 1.5, 0, 'Sample Text with DrawEx - Scale 1.5 - Alpha 150', 150 );
 rect.H:=128;
 rect.W:=400;
 rect.X:=0;
 rect.Y:=96;
 pr2d_rect(rect.X,rect.Y,rect.W,rect.H,$FFFFFF,100);
 text_DrawInRect(fnt,rect,
 'Sample multiline text in rect.' + #10 +
 'Sample multiline text in rect.'+ #10 +
 'Sample multiline text in rect.');

end; </delphi>

This is some code to exit our application pressing ESC: <delphi>procedure Timer; begin

 if key_Press( K_ESCAPE ) Then zgl_Exit();
 key_ClearState();

end; </delphi>

Result

You can see text with the font we created and other text scaled with alpha.

zengltext.png

The resulting code is something like this:

<delphi>program project1;

{$IFDEF WINDOWS}

 {$R *.res}

{$ENDIF} {$DEFINE STATIC}

uses

 {$IFNDEF STATIC}
 zglHeader
 {$ELSE}
 zgl_main,
 zgl_screen,
 zgl_window,
 zgl_timers,
 zgl_keyboard,
 zgl_font,
 zgl_text,
 zgl_textures,
 zgl_textures_tga,
 zgl_primitives_2d,
 zgl_utils,
 zgl_math_2d
 {$ENDIF}
 ;

var

 dirRes     : String {$IFNDEF DARWIN} = '../data/' {$ENDIF};
 fnt        : zglPFont;

procedure Init; begin

 fnt := font_LoadFromFile( dirRes + 'Agency FB-Regular-18pt.zfi' );

end;

procedure Draw; var

 rect: zglTRect;

begin

 text_Draw( fnt, 0, 0, 'Sample Text. Press ESC to EXIT.' );
 text_DrawEx( fnt, 32, 32, 1.5, 0, 'Sample Text with DrawEx - Scale 1.5 - Alpha 150', 150 );
 rect.H:=128;
 rect.W:=400;
 rect.X:=0;
 rect.Y:=96;
 pr2d_rect(rect.X,rect.Y,rect.W,rect.H,$FFFFFF,100);
 text_DrawInRect(fnt,rect,
 'Sample multiline text in rect.' + #10 +
 'Sample multiline text in rect.'+ #10 +
 'Sample multiline text in rect.');

end;

procedure Timer; begin

 if key_Press( K_ESCAPE ) Then zgl_Exit();
 key_ClearState();

end;

Begin

 {$IFNDEF STATIC}
 zglLoad( libZenGL );
 {$ENDIF}
 timer_Add( @Timer, 16 );
 zgl_Reg( SYS_LOAD, @Init );
 zgl_Reg( SYS_DRAW, @Draw );
 zgl_Enable( APP_USE_UTF8 );
 wnd_SetCaption( 'Sample Text' );
 wnd_ShowCursor( TRUE );
 scr_SetOptions( 800, 600, REFRESH_MAXIMUM, FALSE, FALSE );
 zgl_Init();

End. </delphi>