Suivez-nous sur X
|
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z,
ALL
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z
|
|
A propos d'Obligement
|
|
David Brunet
|
|
|
|
En pratique : Karate - text et tunnel
(Article écrit par Laurent Stephanoni - février 2005)
|
|
Note : le script de cet article est fourni ici.
Alors, notre première "démo" n'était pas trop mal, non ? Mais il manque pourtant une chose essentielle ! Non, pas l'image
avec une jolie damoiselle dénudée... Laquelle alors ? Une petite Kpart avec un texte défilant (scrolltext), bien sûr !
Et derrière, pour se la raconter un peu, on va mettre un tunnel.
1. Le texte défilant
1.1 Les polices
Eh oui, avant de taper du texte, il faut déjà des polices de caractères. Une police Karate est très simple en fait.
Il s'agit simplement d'une image dans laquelle tous les caractères sont présents, les uns à côté des autres.
Vous pouvez jeter un coup d'oeil à "karate:data/fonts1.iff" par exemple.
Pour charger cette police, il nous
faudra connaître la liste des caractères présents, le nombre de caractères par ligne, ainsi que la taille d'un caractère.
Dans notre cas, on a des caractères de 32 par 32, qui arrivent 8 par 8 :
ABCDEFGH
IJKLMNOP
QRSTUVWX
YZ012345
6789
!?'(),-.
On les chargera par l'appel au constructeur BMFONT (BitMap Font) suivant :
<BMFONT> police | data/fonts1.iff | 32 | 32 | 8
| abcdefghijklmnopqrstuvwxyz0123456789 !?'[],-. </BMFONT>
|
1.2 Le texte
Chaque texte doit être construit à l'aide du constructeur KTEXT. Seuls les caractères qui sont listés dans
le constructeur du BMFONT seront affichés. De même, les espaces blancs (retours chariot, tabulations et espaces)
seront supprimés au début et à la fin du texte, et à chaque retour chariot dans le texte. Il faut donc "baliser"
le texte pour conserver son formatage. Par exemple on peut entourer chaque ligne entre des "+". Si on reprend
le texte d'intro de www.k-fighter.net, ça peut donner :
<KTEXT> promo |
+karate fighter is a+
+ demomaker used to+
+ make visual demos+
+ that can work on a+
+ very large number+
+of amiga computers.+
+ it uses 680x0+
+software engine and+
+ can run on 68020+
+ aga screens up to+
+68060 Cybergraphics+
+ machines, and run+
+fine on new powerpc+
+amiga architectures+
+and Amiga emulators+
+ as well.+</KTEXT>
|
On a choisi d'écrire une vingtaine de caractères par ligne. Comme vous le voyez, en dehors des "+" pour marquer les
vraies lignes, on n'utilise que des caractères qui apparaissent dans le constructeur de la police (minuscules).
1.3 L'affichage
L'affichage du texte se fait par deux effets : DisplayText et DisplayTextPlain. Ils sont identiques, sauf
que le DiplayTextPlain affiche la couleur zéro (pas de transparence, donc plus rapide).
Pour afficher du texte dans un rectangle, il va nous falloir :
- Un rectangle.
- Une police.
- Un texte.
Et des données sur ce texte :
- Le nombre de caractères avant le retour chariot.
- Le nombre maximum de caractères à dessiner.
- Le numéro du premier caractère à afficher.
- Puis les coordonnées du premier caractère à afficher. Il s'agit des quatre coordonnées habituelles des sprites dans Karate. C'est à partir de la position et de la taille du premier caractère que tout le texte sera affiché.
Notre texte défilant vertical s'écrit donc ainsi :
<FX>
<PA> DisplayText </PA>
<PA> </PA>
<PA> police </PA>
<PA> promo </PA>
<PA> CTE | 22 </PA> 20 caractères par ligne + les 2 balises
<PA> CTE | 400 </PA> 400 caractères au total
<PA> CTE | 0 </PA> en commencant au caractère 0
<PA> CTE | 0 </PA>
<PA> AFF | 1.2 | -0.0025 </PA> Pour un scroll vertical, on bouge les Y
<PA> CTE | 0.05 </PA>
<PA> AFF | 1.25 | -0.0025 </PA>
</FX>
|
Pour un texte défilant horizontal, on changera les coordonnées du premier caractère, par exemple :
<FX>
<PA> DisplayText </PA>
<PA> </PA>
<PA> police </PA>
<PA> promo </PA>
<PA> CTE | 400 </PA> plus de limite au nombre de caractères par ligne
<PA> CTE | 400 </PA> 400 caractères au total
<PA> CTE | 0 </PA> en commencant au caractère 0
<PA> AFF | 1.2 | -0.0025 </PA>
<PA> CTE | 0.90 </PA>
<PA> AFF | 1.25 | -0.0025 </PA>
<PA> CTE | 0.95 </PA>
</FX>
|
Ici, le rendu sera moyen, du fait de la justification à droite du texte. De plus, c'est beaucoup plus lent,
il faudra donc penser à mettre énormément de frames (images) à jouer dans le <PLAY>.
Par contre, un texte défilant horizontal, ça peut s'optimiser, en calculant finement l'indice du premier caractère
à écrire, et le nombre de caractère à écrire.
2. Un premier pas vers la 3D : le tunnel
2.1 Une caméra
On ne va pas écrire notre texte sur rien ! On va donc mettre un joli tunnel derrière.
Le tunnel est un effet 2D classique de raycasting (lancer de rayon), qui imite la 3D. Il lui faut une caméra
pour gérer la vision en 3D de la chose. Une caméra ? N'ayez pas peur. Une caméra, en Karate, c'est
un point dans l'espace (x, y, z), un angle de vue (o1, o2, o3), et une focale. Les angles en Karate
vont de -1 à 1. En jouant sur la focale, on peut rapprocher ou éloigner un objet, comme sur
un appareil photo (ou une caméra, aussi).
On crée la caméra comme suit (première ligne, la position, deuxième ligne, les rotations ou angles, troisième ligne la focale) :
<KCAM> camera |
0 | 0 | 0 |
0 | 0 | 0 |
1 </KCAM>
|
On va la poser au centre de l'univers, le tunnel sera centré autour. On va la faire regarder perpendiculairement à
l'axe du tunnel. On fera tourner la caméra autour de cet axe et on va avancer dans le tunnel, histoire de
donner du mouvement. On n'est absolument pas obligé de faire ça. Si on veut juste poser une caméra,
on définit tous les paramètres une fois pour toute dans son constructeur. Mais c'est sympa de se déplacer
dans le tunnel. On va donner ce mouvement avec un "SetCamCoord", comme suit :
<FX>
<PA> SetCamCoord </PA>
<PA> camera </PA>
<PA> CTE | 0 </PA> X de la camera
<PA> CTE | 0 </PA> Y de la camera
<PA> AFF | 0 | 4 </PA> Z de la camera, qui avance,
parce qu'on avance dans le tunnel
<PA> CTE | 0 </PA>
<PA> CTE | 0.5 </PA> on est perpendiculaire au tunnel
<PA> AFF | 0 | -0.002 </PA> on tourne un peu
<PA> CTE | 0.5 </PA> focale moyenne, pour ne
pas se retrouver trop loin des parois
</FX>
|
Si vous voulez vraiment vous amuser, et vous prendre la tête, vous pouvez jouer avec les paramètres
angulaires, il y a vraiment moyen de se détruire les neurones pour bien appréhender cette fonction.
Ici, on a utilisé un système de positionnement relativement complexe (plein d'angles) pour placer
notre caméra. Et tous ces réglages par angle peuvent être embêtants pour suivre un objet par exemple.
Pour résoudre cela, l'auteur de Karate a créé une deuxième fonction, qui prend en paramètres un
point dans l'espace qui sera la position de la caméra, un autre point qui sera le point visé,
un angle autour de l'axe passant par ces deux points, et une focale. Cet effet s'appelle
"SetCamTarget", et on en reparlera plus tard, quand on abordera la 3D.
2.2 The tunnel now !
Un tunnel, c'est simple en fait. On a juste besoin d'un rectangle, d'une texture, et d'une caméra. On donne
ensuite la distance entre les deux bords du tunnel (la largeur du tunnel, quoi), et le niveau de zoom de
la texture. Il reste trois paramètres, deux non utilisés, et le dernier pour dire si la couleur zéro
sera transparente ou pas.
Ce qui nous donne :
<FX>
<PA> Tunnel </PA>
<PA> </PA> le rectangle par défaut
<PA> texture </PA> notre texture utilisée précédemment
<PA> camera </PA> notre nouvelle camera
<PA> CTE | 2 </PA> la largeur du tunnel
<PA> CTE | 0.25 </PA> le zoom sur la texture
<PA> 2CTE | 0 | 0 </PA> Des trucs pas utilisés
<PA> CTE | 0 </PA> Pas de couleur zero transparente
</FX>
|
Ceci est à écrire avant le <FX> du texte défilant.
On ajoute tout ça dans une Kpart qui a pour ID "texte" par exemple, et on ajoute la ligne suivante dans le Kscript
principal :
<PLAY> texte | 1000 | 0 | 1 </PLAY> dans le kscript principal.
|
Et ça nous donne le script disponible ici.
Et voilà ! Dans le prochain article, on verra comment réutiliser les anciennes parts dans une nouvelle part, et
aussi la magie des rectangles ! Ça nous permettra de grandement améliorer cette part de texte nouvellement créée.
Soutenez le travail d'Obligement
|
|
|
