IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Tutoriel Irrlicht 6

Graphisme 2D

Ce tutoriel est une traduction de l'anglais des tutoriels officiels d'Irrlicht.

Il montre comment faire des graphismes 2D avec le moteur Irrlicht. Il montre comment dessiner des images, des images ayant une couleur définie comme transparente, des rectangles transparents et différentes polices. Ceci pourra vous être très utile si vous souhaitez réaliser un jeu 2D avec le moteur ou si vous voulez dessiner une jolie interface ou un affichage tête haute pour votre jeu 3D.

Commentez Donner une note à l´article (5)

Article lu   fois.

Les trois auteurs et traducteur

Site personnel

Traducteur : Profil ProSite personnel

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Initialisation

Image non disponible

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.

 
Sélectionnez
#include <irrlicht.h>
#include "driverChoice.h"

using namespace irr;

#ifdef _MSC_VER
#pragma comment(lib, "Irrlicht.lib")
#endif

En 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.

 
Sélectionnez
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.

 
Sélectionnez
    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.

 
Sélectionnez
    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.

 
Sélectionnez
    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.

 
Sélectionnez
    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.

 
Sélectionnez
            // 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.

 
Sélectionnez
            // 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é.

 
Sélectionnez
            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.

 
Sélectionnez
            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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Neckara. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.