ZenGL Tutorial 2/es

│ English (en) │ español (es) │ français (fr) │ русский (ru) │

ZenGL/es | Tutorial 1 | Tutorial 2 | Tutorial 3 | Edit

Este tutorial muestra como crear una Fuente ZenGL (.zfi) y como dibujar texto.

Crear Fuente ZenGL

Para crear una fuente ZenGL necesitas descargar ZenFont que es un generador de fuentes.

Cuando obtengas ZenFont abrelo y verás algo parecido a esto:

Agency FB-Regular-18pt.zfi

Usa las opciones para personalizar tu fuente y luego presiona "Save font" y elige el nombre de archivo que quieras (un nombre de archivo es generado automáticamente con el nombre de la fuente y el tamaño). Los archivos generados son los .zfi con algunas imágenes .tga.

Una vez que tenemos la fuente creada necesitamos seguir estos pasos para dibujar en la ventana de ZenGL.

Crear programa

• Crea un nuevo programa de pascal y añade referencia a ZenGL como fue explicado en el primer tutorial.

• Crea estos directorios:

projectname\bin

projectname\data

projectname\project

• Save your project in "projectname\project".

• Coloca la fuente que has creado en "projectname\data"

• Ve a Proyecto > Opciones > Rutas en Nombre del archivo final escribe "..bin\project1".

Agrega codigo

Variables:

var
  dirRes     : String {$IFNDEF DARWIN} = '../data/' {$ENDIF}; // este es el directorio donde se colocan los recursos
  fnt        : zglPFont; // esta es la fuente que usaremos

Carga la fuente en una variable:

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

Procedimiento de dibujo (aqui dibujaremos nuestro texto con la fuente cargada):

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;

Este es un codigo para salir de nuestra aplicación presionando ESC:

procedure Timer;
begin
  if key_Press( K_ESCAPE ) Then zgl_Exit();
  key_ClearState();
end;

Resultado

Puedes ver el texto con la fuente que creamos y otro texto escalado con alpha.

El codigo resultante es algo parecido a esto:

 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.