I. Initialisation▲
Comme toujours, j'inclus les fichiers d'en-têtes, j'utilise l'espace de nommage « irr » et je dis à l'éditeur de lien de lier le fichier .lib.
#include <irrlicht.h>
#include "driverChoice.h"
using namespace irr;
#ifdef _MSC_VER
#pragma comment(lib, "Irrlicht.lib")
#endifEn premier lieu, nous laissons l'utilisateur sélectionner le pilote, puis nous démarrons le moteur, mettons un titre et obtenons un pointeur sur le pilote vidéo.
int main()
{
// demande un pilote a l'utilisateur
video::E_DRIVER_TYPE driverType=driverChoiceConsole();
if (driverType==video::EDT_COUNT)
return 1;
// crée le moteur
IrrlichtDevice *device = createDevice(driverType,
core::dimension2d<u32>(512, 384));
if (device == 0)
return 1; // on ne peut pas créer le pilote sélectionné.
device->setWindowCaption(L"Irrlicht Engine - 2D Graphics Demo");
video::IVideoDriver* driver = device->getVideoDriver();II. Préparation des images▲
Tous les graphismes 2D dans cet exemple sont contenus dans une seule texture : 2ddemo.png. Parce que nous voulons dessiner des images ayant une couleur définie comme transparente, nous avons besoin de charger la texture et d'indiquer au moteur quelle partie de la texture devrait être transparente en spécifiant une couleur clé.
Dans cet exemple, nous ne lui indiquerons pas directement la couleur, nous dirons juste « Hé moteur Irrlicht, tu vas trouver la couleur que je veux à la position (0,0) dans la texture ». Mais il est aussi possible d'appeler driver->makeColorKeyTexture(images, video::SColor(0,0,0,0)) pour rendre, par exemple, transparents tous les pixels noirs. Veuillez noter que makeColorKeyTexture crée juste un canal alpha en fonction de la couleur.
video::ITexture* images = driver->getTexture("../../media/2ddemo.png");
driver->makeColorKeyTexture(images, core::position2d<s32>(0,0));III. Préparation du texte▲
Pour être capable de dessiner du texte avec deux polices différentes, nous devons d'abord les charger. Ok, nous en chargeons juste une. Comme première police, nous utiliserons la police par défaut qui est incluse dans le moteur. Aussi, nous définissons deux rectangles qui indiquent la position de l'image du diablotin rouge (la petite créature volante) dans la texture.
gui::IGUIFont* font = device->getGUIEnvironment()->getBuiltInFont();
gui::IGUIFont* font2 =
device->getGUIEnvironment()->getFont("../../media/fonthaettenschweiler.bmp");
core::rect<s32> imp1(349,15,385,78);
core::rect<s32> imp2(387,15,423,78);Préparons un joli mode filtrant les rendus 2D pour les cas spéciaux.
driver->getMaterial2D().TextureLayer[0].BilinearFilter=true;
driver->getMaterial2D().AntiAliasing=video::EAAM_FULL_BASIC;IV. Rendu final▲
Tout est prêt, maintenant nous pouvons dessiner le tout dans la boucle de rendu entre le début de la scène et la fin des appels de la scène. Dans cet exemple, nous allons juste faire des graphismes 2D, mais il n'y aurait aucun problème à les mélanger avec des graphismes 3D. Testons et dessinons quelques vertex 3D ou mettons une scène avec le gestionnaire de scène et dessinons-le.
while(device->run() && driver)
{
if (device->isWindowActive())
{
u32 time = device->getTimer()->getTime();
driver->beginScene(true, true, video::SColor(255,120,102,136));Tout d'abord, nous dessinons trois images utilisant le canal alpha que nous avons créé avec makeColorKeyTexture. Le dernier paramètre spécifie la méthode de rendu que devrait utiliser le canal alpha. L'avant-dernier paramètre indique une couleur avec laquelle l'image devrait être colorée. (255,255,255) est un blanc pur donc l'image ressemblera à l'originale. La troisième image est dessinée avec le canal rouge ajusté selon le temps.
// dessine le fond de monde feu et dragon.
driver->draw2DImage(images, core::position2d<s32>(50,50),
core::rect<s32>(0,0,342,224), 0,
video::SColor(255,255,255,255), true);
// dessine le diablotin volant
driver->draw2DImage(images, core::position2d<s32>(164,125),
(time/500 % 2) ? imp1 : imp2, 0,
video::SColor(255,255,255,255), true);
// dessine le second diablotin volant avec le cycle de couleur
driver->draw2DImage(images, core::position2d<s32>(270,105),
(time/500 % 2) ? imp1 : imp2, 0,
video::SColor(255,(time) % 255,255,255), true);Dessiner un texte est vraiment simple. Le code devrait être évident.
// dessine du texte
if (font)
font->draw(L"This demo shows that Irrlicht is also capable of drawing 2D graphics.",
core::rect<s32>(130,10,300,50),
video::SColor(255,255,255,255));
// dessine un autre texte
if (font2)
font2->draw(L"Also mixing with 3d graphics is possible.",
core::rect<s32>(130,20,300,60),
video::SColor(255,time % 255,time % 255,255));Ensuite nous dessinons le logo du moteur Irrlicht (sans utiliser de couleur ni de canal alpha). Depuis que nous réduisons un peu l'image, nous utilisons le mode filtrant préparé.
driver->enableMaterial2D();
driver->draw2DImage(images, core::rect<s32>(10,10,108,48),
core::rect<s32>(354,87,442,118));
driver->enableMaterial2D(false);Finalement, dessinons un rectangle semi-transparent sous le curseur de la souris.
core::position2d<s32> m = device->getCursorControl()->getPosition();
driver->draw2DRectangle(video::SColor(100,255,255,255),
core::rect<s32>(m.X-20, m.Y-20, m.X+20, m.Y+20));
driver->endScene();
}
}
device->drop();
return 0;
}C'est tout, j'espère que cela n'a pas été trop difficile.
V. Conclusion▲
Vous pouvez désormais utiliser des graphismes 2D avec Irrlicht.
Dans le prochain tutoriel : Collisions, nous verrons comment détecter les collisions dans un monde 3D.
VI. Remerciements▲
Merci à Nikolaus Gebhardt de nous permettre de traduire ce tutoriel.
Merci à LittleWhite pour sa relecture technique ainsi qu'à f-leb pour sa relecture orthographique.