[Chip]

Tutorial 6: 2D Graphics

Questo totorial mostra come creare grafica 2D con Irrlicht Engine. Verranno mostrati come disegnare immagini, sprites, rettangoli trasparenti e vari fonts. Il tutorial servirà a chi ha intenzione di creare giochi 2D o per creare interfaccie o HUD per il vostro gioco 3D. Come sempre partiamo dal file header dove attiviamo i namespace per irr e indichiamo al linker il file .lib di Irrlicht.

Codice PHP:

#include <irrlicht.h>
#include "driverChoice.h"

using namespace irr;

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


Per primo lasciamo all'utente la possibilità di scegliere il tipo di driver per l'engine, quindi lo avviamo; poi impostiamo un titolo per la finestra che conterrà la grfica e prendiamo il puntatore al driver video nuovo.

Codice PHP:

int main()
{
    // ask user for driver
    video::E_DRIVER_TYPE driverType=driverChoiceConsole();
    if (driverType==video::EDT_COUNT)
        return 1;

    // create device

    IrrlichtDevice *device = createDevice(driverType,
        core::dimension2d<u32>(512, 384));

    if (device == 0)
        return 1; // could not create selected driver.

    device->setWindowCaption(L"Irrlicht Engine - 2D Graphics Demo");
    video::IVideoDriver* driver = device->getVideoDriver(); 


Tutta la grafica 2d in questo esempio è contenuta in un' unica immagine, 2ddemo.png. Poiché abbiamo intenzione di disegnare sprite che fanno uso di un canale di colori indicizzato dobbiamo indicare, durante il caricamento dell'immagine, quale sia il colore da considerare trasparente.
In questo esempio, invece di indicare il canale trasparente direttamente, lo facciamo indicando la posizione sulla texture dove si trova tale colore "Guarda Irrlicht Engine, troverai il colore di trasparenza in posizione (0,0) dentro l'immagine stessa.".
Altrimenti è sempre possibile farlo richiamando driver->makeColorKeyTexture(images, video::SColor(0,0,0,0)), con cui andiamo ad indicare tutti i pixel neri come fossero trasparenti. Notate che con makeColorKeyTexture si crea solo un canale alpha di trasparenza per quel colore.

Codice PHP:

video::ITexture* images = driver->getTexture("../../media/2ddemo.png");
    driver->makeColorKeyTexture(images, core::position2d<s32>(0,0)); 


Per poter scrivere del testo utilizzando due differenti font occorre prima di tutto caricarli. Ok, in realtà ne stiamo caricando solo uno, questo perché l'altro sarà quello di default preimpostato nell'engine. Andiamo anche a definire due rettangoli specificando la posizione degli imp rossi (le piccole creature volanti) che si trovano dentro l'immagine comune.

Codice PHP:

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); 


Prepariamo un bel materiale 2d per renderizzare le nostre immaginiering 2d.

Codice PHP:

driver->getMaterial2D().TextureLayer[0].BilinearFilter=true;
    driver->getMaterial2D().AntiAliasing=video::EAAM_FULL_BASIC; 


Tutto è pronto, ora possiamo disegnare dentro al nostro loop tra la chiamate della prima e dell'ultima scena. In questo esempio creeremo solo grafica 2d ma non ci sarebbe alcun problema a mixare anche grafica 3d. Provateci, disegnate un vertice 3d lo impostate in una scena e lo disegnate.

Codice PHP:

while(device->run() && driver)
    {
        if (device->isWindowActive())
        {
            u32 time = device->getTimer()->getTime();

            driver->beginScene(true, true, video::SColor(255,120,102,136)); 


Prima disegniamo 3 sprites utilizzando il canale alpha di trasparenza che avevamo creato con makeColorKeyTexture. L'ultimo parametro specifica proprio che il metodo di disegno deve far uso del canale alpha. Segue il parametro che indica il colore con cui disegnare lo sprite (255,255,255,255) che è un bianco pieno in modo da far apparire la colorazione dello sprite uguale all'originale. Il terzo sprite è disegnato tramite il modulo 255 (operatore %) sul valore “time” sulla componente rossa.

Codice PHP:

// draw fire & dragons background world
            driver->draw2DImage(images, core::position2d<s32>(50,50),
                core::rect<s32>(0,0,342,224), 0,
                video::SColor(255,255,255,255), true);

            // draw flying imp
            driver->draw2DImage(images, core::position2d<s32>(164,125),
                (time/500 % 2) ? imp1 : imp2, 0,
                video::SColor(255,255,255,255), true);

            // draw second flying imp with colorcylce
            driver->draw2DImage(images, core::position2d<s32>(270,105),
                (time/500 % 2) ? imp1 : imp2, 0,
                video::SColor(255,(time) % 255,255,255), true); 


Il disegno del testo è molto semplice, il codice si commenta da solo.

Codice PHP:

// draw some text
            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));

            // draw some other text
            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)); 


Dopo andiamo a disegnare il logo di Irrlicht (senza usare colori o canali alpha). Scaliamo un po' l'immagine e usiamo il filtro che avevamo preparato.

Codice PHP:

driver->enableMaterial2D();
            driver->draw2DImage(images, core::rect<s32>(10,10,108,48),
                core::rect<s32>(354,87,442,118));
            driver->enableMaterial2D(false); 


Alla fine andiamo a disegnare un rettangolo semitrasparente sotto il cursore del mouse.

Codice PHP:

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;
} 


Questo è tutto, spero non sia stato troppo difficile.

Versione pdf scaricabile QUI