 |
Mercredi 24 avril 2024 - 20:12 |
| Translate |
|
| Rubriques |
| Réseaux sociaux |
|
| Liste des jeux Amiga |
|
| Trucs et astuces |
|
| Glossaire |
|
| Galeries |
|
| Téléchargement |
|
| Liens |
|
| Partenaires |
|
| A Propos |
|
| Contact |
|
|
|
Note : le script de cet article est fourni ici.
Le premier effet Karate
On va commencer sagement. Faites quelques assouplissements... Ok. On y va. On va se placer dans le répertoire de Karate pour créer un fichier texte. On tape dans un Shell "cd chemin:vers/karate/" puis "ced helloworld.k" afin de créer le fichier helloworld.k.
Notre premier effet va se contenter de charger deux images, d'en afficher une en fond d'écran, et l'autre va venir lui dire bonjour (d'où le hello world :)).
Pour cet exemple, on va piocher dans les données fournies dans les exemples officiels de Karate. Ces données se trouvent dans le répertoire data/ à la racine de Karate.
Le fond d'écran
L'image s'appelle realeyez.iff. On va la charger sous le nom "fond", soit la ligne :
<KIMG> fond | data/realeyez.iff </KIMG> |
Comment poser une image ? C'est le rôle de l'effet SpritePlain. Un petit tour dans les commandes de Karate vous apprend :
|
<FX>
<PA> SpritePlain </PA> <PA> (rectangle) Le Rectangle où dessiner </PA> <PA> (image) L'image à afficher </PA> <PA> (fixedfloat) L'abscisse du coin supérieur gauche de l'image dans le rectangle indiqué </PA> <PA> (fixedfloat) L'ordonnée du coin supérieur gauche de l'image dans le rectangle indiqué </PA> <PA> (fixedfloat) L'abscisse du coin inférieur droit de l'image dans le rectangle indiqué </PA> <PA> (fixedfloat) L'ordonnée du coin inférieur droit de l'image dans le rectangle indiqué </PA> </FX> |
Ou, pour résumer, SpritePlain pose une image dans un rectangle aux coordonnées fournies.
Dans notre cas, on va utiliser le rectangle par défaut (l'écran complet), et on va couvrir tout l'écran. Pour cela, il faut savoir que Karate a une gestion de l'écran complètement indépendante du mode écran, donc des pixels. Ainsi, le coin en haut de l'écran est le point (0,0), et le coin en bas à droite est le point (1,1).
Donc, écrivons notre première KPart.
<KPART> <ID> premiere </ID> <FX> <PA> SpritePlain </PA> <PA> </PA> Rectangle par défaut <PA> fond </PA> <PA> CTE | 0 </PA> X du coin supérieur gauche de notre image de fond <PA> CTE | 0 </PA> Y du coin supérieur gauche de notre image de fond <PA> CTE | 1 </PA> X du coin inférieur droit de notre image de fond <PA> CTE | 1 </PA> Y du coin inférieur droit de notre image de fond </FX> </KPART> |
La commande "<PA> CTE | x </PA>" permet de remplir un paramètre avec un "fixedfloat" constant de valeur x. Il ne faut pas oublier le CTE, sinon Karate nous dira que le type de données n'a pas été initialisé.
Enfin, pour pouvoir lancer cette première présentation, on va poser un KScript et un Main.
<KSCRIPT> <ID> script </ID> <PLAY> premiere | 9999 | 0 | 1 </PLAY> </KSCRIPT> <MAIN> script | 0 | 1 </ID> |
Et lancez votre premier script Karate.
Le résultat n'est pas top. C'est parce que l'on a "oublié" de choisir une palette. On va indiquer à Karate d'utiliser la palette de l'image de fond.
Pour cela, il faut ajouter l'effet SetPalette dans la KPart.
<FX> <PA> SetPalette </PA> <PA> fond </PA> </FX> |
Voilà, le résultat est meilleur. :-)
Règle numéro 1 : ne pas oublier d'indiquer la palette à utiliser.
Corollaire : il ne faut indiquer qu'une seule fois la palette à utiliser par partie.
Le sprite, n'écoute que lui
On va ensuite charger une autre image, un fantôme de Pacman, version Karate. C'est l'image ghost1.iff.
<KIMG> fantome | data/ghost1.iff </KIMG> |
Cette fois-ci les X de l'image vont bouger. On va choisir la fonction "bounce".
La documentation de Karate nous dit :
| <PA> BOUNCE | 'float' t0 | 'float' t1 | 'float' t2 | 'float' val1 | 'float' val2 </PA> |
Bounce permet de remplir un paramètre de type "fixedfloat". Ce paramètre aura pour valeur val1 à t=t0, puis "sautera" à val2 à t=t1, puis redescendra à val1 quand t=t2. Les deux sauts sont en fait des moitiés de parabole, ce qui donnera un mouvement non uniforme du meilleur effet.
Dans notre cas, on va choisir de le faire aller de x=-0.3 à x=0.15 et on va dire que notre sprite va faire 0.2 de large par 0.26 de haut.
On va ajouter dans notre KPart le code suivant, après l'effet SpritePlain (sinon, l'effet SpritePlain va écrire sur notre nouveau Sprite, ce qui serait dommage).
<FX> <PA> Sprite </PA> <PA> </PA> Rectangle par défaut <PA> fantome </PA> <PA> BOUNCE | 0 | 200 | 500 | -0.3 | 0.15 </PA> X1 <PA> CTE | 0 </PA> Y1 <PA> BOUNCE | 0 | 200 | 500 | -0.1 | 0.35 </PA> X1 + 0.2 <PA> CTE | 0.26 </PA> Y1 + 0.26 </FX> |
Pour voir la différence entre Sprite et SpritePlain, remplacer le Sprite que vous venez d'écrire par un SpritePlain. Le SpritePlain n'a pas de couleur 0 transparente, mais par contre il prend moins de temps à écrire sur l'écran, donc il est très utile pour poser des gros fonds d'écran.
A l'opposé, si vous pensez que tout va bien, vous avez tout faux. En effet, pour vous en rendre compte, changer la deuxième ligne de SetPalette par...
<PA> fantome </PA> |
Ça ne vous choque pas ? Si ! Le petit fantôme n'apparaissait pas avec toutes ses couleurs. On arrive à la deuxième règle de base de Karate. Une fois que l'on connaît avec précision les différentes images qui apparaîtront dans une KPart, il faut les charger sous votre éditeur de dessin préféré, et mixer leur palette, de façon à ce qu'elles aient une palette commune.
Sous Personal Paint, cela se fait très bien. Il suffit de passer dans un mode écran en 256 couleurs et de charger les images que vous souhaitez utiliser comme des brosses. Faites ensuite "Couleur/Fusionner" et sélectionnez toutes vos brosses. Personal Paint va travailler et vous rendre toutes vos brosses dans une palette commune. Plus qu'à sauver tout ça et à relancer votre présentation Karate. Magique, non ?
Règle numéro 2 : utiliser une palette commune pour toutes les images d'une KPart.
Corollaire : bien connaître vos KPart avant de coder peut vous faire gagner un temps considérable.
On peut très bien s'en passer, mais ça peut aboutir facilement à des couleurs freshy funky staïle...
Bon, assez jouer avec des Sprites, on va passer aux textures et aux effets de déformation !
Deuxième partie
On va déjà modifier notre KScript pour qu'il ne joue la première partie que pendant 1000 trames.
<PLAY> premiere | 1000 | 0 | 1 </PLAY> |
On va tout d'abord charger une texture. Cette dernière est tout simplement une KIMG de 256 pixels de haut sur 256 pixels de large. Pourquoi une taille aussi fixe ? Tout simplement parce que cela permet d'avoir des calculs très optimisés.
Attention : si votre texture ne fait pas 256x256, l'effet ne sera pas affiché. Cela vous fera peur la première fois, mais c'est normal.
Notre texture s'appelle texture1.iff. on va la charger avec...
<KIMG> texture | data/texture1.iff </KIMG> |
Notre effet sera un joli twirl, une déformation radiale de l'image. Pour d'autres effets de textures, regarder dans la documentation de Karate tout ce qui se trouve dans le module (plugin) Caster.Fx. c'est-à-dire les effets Warper, Ground, Tunnel et MapRect.
<FX> <PA> Twirl </PA> <PA> (rectangle) Le Rectangle où dessiner </PA> <PA> (image) La texture en 256 x 256 </PA> <PA> (fixedfloat) Le décalage en X de la texture</PA> <PA> (fixedfloat) Le décalage en Y </PA> <PA> (fixedfloat) Valeur du centre de rotation </PA> <PA> (fixedfloat) Amplitude de la rotation </PA> <PA> (fixedfloat) Fréquency de la rotation </PA> <PA> (fixedfloat) Valeur du centre du zoom </PA> <PA> (fixedfloat) Amplitude du zoom </PA> <PA> (fixedfloat) Fréquence du zoom </PA> <PA> (fixedfloat) Type de texturage </PA> </FX> |
Les deux premiers "fixedfloat" déterminent le décalage de la texture en X et Y, on peut ainsi se déplacer sur la texture. Les trois suivants contrôlent la rotation. Les trois suivants contrôlent le zoom. Le dernier paramètre peut prendre deux valeurs, à l'heure actuelle. 0 signifie "texturage complet", et 1 signifie "texturage avec couleur 0 transparente".
Pour cet effet, on va utiliser des paramètres sinusoïdaux. Alors, un sinus, ça se remplit avec...
<PA> SIN | aa | bb | cc </PA> |
Et cela rendra un "fixedfloat" qui vaudra aa + sin (bb x temps) x cc. On oscille donc entre aa + cc et aa - cc avec une fréquence de bb.
Et pour le cosinus, c'est pareil, mais avec COS.
On ne va jouer dans notre effet de twirl que sur le décalage de la texture et sur la distance (libre à vous d'expérimenter ensuite :)).
On va coder notre deuxième KPart :
<KPART> <ID> deuxieme </ID> <FX> <PA> SetPalette </PA> <PA> texture </PA> </FX> <FX> <PA> Twirl </PA> <PA> </PA> <PA> texture </PA> <PA> SIN | 0 | 1 | 0.25 </PA> Décalage en X <PA> COS | 0 | 1 | 0.25 </PA> Décalage en Y <PA> CTE | 0 </PA> start angle <PA> CTE | 0 </PA> amp. angle <PA> CTE | 0 </PA> freq angle <PA> SIN | 0 | 0.1 | 0.2 </PA> start dist. <PA> CTE | 0.4 </PA> amp.dist <PA> CTE | 16 </PA> freq dist <PA> CTE | 0 </PA> mapping type </FX> </KPART> |
Et on n'oublie pas d'y ajouter dans le KScript...
<PLAY> deuxieme | 1000 | 0 | 1 </PLAY> |
C'est un peu tristounet ça. On va ajouter un sprite qui saute aléatoirement partout au centre de l'écran, juste après le twirl.
On va choisir la fonction RND (pour random).
<PA> RND | aa | bb </PA> |
Cette fonction retourne à chaque trame un "fixedfloat" entre aa et bb, aléatoirement.
<FX> <PA> Sprite </PA> <PA> </PA> <PA> fantome </PA> <PA> RND | 0.395 | 0.405 </PA> 0.5 - 0.2/2 +/- 0.005 <PA> RND | 0.365 | 0.375 </PA> 0.5 - 0.26/2 +/- 0.005 <PA> RND | 0.595 | 0.605 </PA> 0.5 + 0.2/2 +/- 0.005 <PA> RND | 0.625 | 0.635 </PA> 0.5 + 0.26/2 +/- 0.005 </FX> |
Ah, c'est un peu mieux. Mais ça serait encore mieux avec de la musique, non ?
Musique maestro
On va faire jouer un petit module DigiBooster sympathique. Tout d'abord, vérifiez bien que la dbplayer.library est correctement installée chez vous, ainsi que AHI. Si tout plante avec une erreur 8000 000B, c'est qu'il y a un problème avec AHI.
Attention : sur certaines configurations (PowerPC et Pegasos notamment), l'utilisation de module DigiBooster peut s'avérer un peu méchante envers la stabilité du système. Pensez à prendre vos précautions.
Ensuite, on va pouvoir charger notre DBM.
<KDBM> module | data/chiptune.dbm </KDBM> |
Puis, il nous suffit d'ajouter l'effet PlayDBM dans notre première partie.
<FX> <PA> PlayDBM </PA> <PA> module </PA> </FX> |
Maintenant, pour faire les choses bien, on a plus qu'à faire un effet de fondu (fade) sur la musique à la fin de notre première démo. Le volume d'un module allant aussi de 0 à 1, on va utiliser une KTable qui va avoir pour valeur 1 sur les 900 premières trames de la dernière KPart, et qui va descendre vers 0 ensuite.
<KTABLE> fadeout | 0,1 | 899,1 | 999,0 </KTABLE> |
Enfin, il ne nous reste plus qu'à utiliser cette KTable comme paramètre de l'effet DBMVol. On va se servir de la fonction SPL qui créer une spline depuis notre KTable.
<FX> <PA> DBMVol </PA> <PA> spl | fadeout | 0 | 0 </PA> </FX> |
Et hop, voilà, une démo presque complète ! Il ne manque plus qu'un texte défilant (scroll-text) de fin, des effets 3D, du flou de mouvement (motion blur), etc. Mais on va verra cela dans de prochains articles.
Conclusion
Si on récapitule, maintenant, vous savez :
- Charger et afficher des images de fond et des sprites,
- Utiliser des textures,
- Mettre de la musique,
- Lire la documentation de Karate,
- Remplir les effets avec quelques paramètres,
- Créer votre propre fonction mathématique avec une KTable,
- Lancer une démo Karate.
La prochaine fois, je vous emmène faire un tour dans le pays des ColorTables et des effets de fou sur les palettes (entre autres).
|
|