ZenGL Tutorial 2/es: what changed

Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.

Title: ZenGL Tutorial 2/es

New		Line
1	+	Este tutorial muestra como crear una Fuente ZenGL (.zfi) y como dibujar texto.
2	+
3	+	## Crear Fuente ZenGL
4	+
5	+	Para crear una fuente ZenGL necesitas descargar [ZenFont](http://zengl.org/download.html) que es un generador de fuentes.
6	+
7	+	Cuando obtengas ZenFont abrelo y verás algo parecido a esto:
8	+
9	+	![](/wiki-images/4/42/Zenfont.png)
10	+
11	+	Agency FB-Regular-18pt.zfi
12	+
13	+	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.
14	+
15	+	Una vez que tenemos la fuente creada necesitamos seguir estos pasos para dibujar en la ventana de ZenGL.
16	+
17	+	## Crear programa
18	+
19	+	- Crea un nuevo programa de pascal y añade referencia a ZenGL como fue explicado en el primer tutorial.
20	+
21	+	- Crea estos directorios:
22	+
23	+	projectname\bin
24	+
25	+	projectname\data
26	+
27	+	projectname\project
28	+
29	+	- Save your project in "projectname\project".
30	+
31	+	- Coloca la fuente que has creado en "projectname\data"
32	+
33	+	- Ve a Proyecto \> Opciones \> Rutas en Nombre del archivo final escribe "..bin\project1".
34	+
35	+	## Agrega codigo
36	+
37	+	Variables:
38	+
39	+	``` pascal
40	+	var
41	+	dirRes : String {$IFNDEF DARWIN} = '../data/' {$ENDIF}; // este es el directorio donde se colocan los recursos
42	+	fnt : zglPFont; // esta es la fuente que usaremos
43	+	```
44	+
45	+	Carga la fuente en una variable:
46	+
47	+	``` pascal
48	+	procedure Init;
49	+	begin
50	+	fnt := font_LoadFromFile( dirRes + 'Agency FB-Regular-18pt.zfi' );
51	+	end;
52	+	```
53	+
54	+	Procedimiento de dibujo (aqui dibujaremos nuestro texto con la fuente cargada):
55	+
56	+	``` pascal
57	+	procedure Draw;
58	+	var
59	+	rect: zglTRect;
60	+	begin
61	+	text_Draw( fnt, 0, 0, 'Sample Text. Press ESC to EXIT.' );
62	+
63	+	text_DrawEx( fnt, 32, 32, 1.5, 0, 'Sample Text with DrawEx - Scale 1.5 - Alpha 150', 150 );
64	+
65	+	rect.H:=128;
66	+	rect.W:=400;
67	+	rect.X:=0;
68	+	rect.Y:=96;
69	+
70	+	pr2d_rect(rect.X,rect.Y,rect.W,rect.H,$FFFFFF,100);
71	+
72	+	text_DrawInRect(fnt,rect,
73	+	'Sample multiline text in rect.' + #10 +
74	+	'Sample multiline text in rect.'+ #10 +
75	+	'Sample multiline text in rect.');
76	+	end;
77	+	```
78	+
79	+	Este es un codigo para salir de nuestra aplicación presionando ESC:
80	+
81	+	``` pascal
82	+	procedure Timer;
83	+	begin
84	+	if key_Press( K_ESCAPE ) Then zgl_Exit();
85	+	key_ClearState();
86	+	end;
87	+	```
88	+
89	+	## Resultado
90	+
91	+	Puedes ver el texto con la fuente que creamos y otro texto escalado con alpha.
92	+
93	+	![](/wiki-images/7/75/Zengltext.png)
94	+
95	+	El codigo resultante es algo parecido a esto:
96	+
97	+	``` pascal
98	+	program project1;
99	+
100	+	{$IFDEF WINDOWS}
101	+	{$R *.res}
102	+	{$ENDIF}
103	+	{$DEFINE STATIC}
104	+
105	+	uses
106	+	{$IFNDEF STATIC}
107	+	zglHeader
108	+	{$ELSE}
109	+	zgl_main,
110	+	zgl_screen,
111	+	zgl_window,
112	+	zgl_timers,
113	+	zgl_keyboard,
114	+	zgl_font,
115	+	zgl_text,
116	+	zgl_textures,
117	+	zgl_textures_tga,
118	+	zgl_primitives_2d,
119	+	zgl_utils,
120	+	zgl_math_2d
121	+	{$ENDIF}
122	+	;
123	+
124	+	var
125	+	dirRes : String {$IFNDEF DARWIN} = '../data/' {$ENDIF};
126	+	fnt : zglPFont;
127	+
128	+	procedure Init;
129	+	begin
130	+	fnt := font_LoadFromFile( dirRes + 'Agency FB-Regular-18pt.zfi' );
131	+	end;
132	+
133	+	procedure Draw;
134	+	var
135	+	rect: zglTRect;
136	+	begin
137	+	text_Draw( fnt, 0, 0, 'Sample Text. Press ESC to EXIT.' );
138	+
139	+	text_DrawEx( fnt, 32, 32, 1.5, 0, 'Sample Text with DrawEx - Scale 1.5 - Alpha 150', 150 );
140	+
141	+	rect.H:=128;
142	+	rect.W:=400;
143	+	rect.X:=0;
144	+	rect.Y:=96;
145	+
146	+	pr2d_rect(rect.X,rect.Y,rect.W,rect.H,$FFFFFF,100);
147	+
148	+	text_DrawInRect(fnt,rect,
149	+	'Sample multiline text in rect.' + #10 +
150	+	'Sample multiline text in rect.'+ #10 +
151	+	'Sample multiline text in rect.');
152	+	end;
153	+
154	+	procedure Timer;
155	+	begin
156	+	if key_Press( K_ESCAPE ) Then zgl_Exit();
157	+	key_ClearState();
158	+	end;
159	+
160	+	Begin
161	+	{$IFNDEF STATIC}
162	+	zglLoad( libZenGL );
163	+	{$ENDIF}
164	+
165	+	timer_Add( @Timer, 16 );
166	+
167	+	zgl_Reg( SYS_LOAD, @Init );
168	+	zgl_Reg( SYS_DRAW, @Draw );
169	+
170	+	zgl_Enable( APP_USE_UTF8 );
171	+
172	+	wnd_SetCaption( 'Sample Text' );
173	+
174	+	wnd_ShowCursor( TRUE );
175	+
176	+	scr_SetOptions( 800, 600, REFRESH_MAXIMUM, FALSE, FALSE );
177	+
178	+	zgl_Init();
179	+	End.
180	+	```
181	+
182	+	---
183	+	From the Free Pascal wiki, page "ZenGL Tutorial 2/es", as it stood on 2020-03-03 after a change by Trev, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).

Back to history