• Benvenuto in Making Videogames!
  • Dai sfogo alla tua fantasia!
  • Crea il tuo Videogioco!
Benvenuto ospite! Login Registrati




Valutazione discussione:
  • 1 voto(i) - 5 media
  • 1
  • 2
  • 3
  • 4
  • 5
Tutorial 6 - 2D Graphics
#1
Tutorial 6: 2D Graphics

[Immagine: 006shot.jpg]

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

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

    
device->setWindowCaption(L"Irrlicht Engine - 2D Graphics Demo");
    
video::IVideoDriverdriver 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::ITextureimages driver->getTexture("../../media/2ddemo.png");
    
driver->makeColorKeyTexture(imagescore::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::IGUIFontfont device->getGUIEnvironment()->getBuiltInFont();
    
gui::IGUIFontfont2 =
        
device->getGUIEnvironment()->getFont("../../media/fonthaettenschweiler.bmp");

    
core::rect<s32imp1(349,15,385,78);
    
core::rect<s32imp2(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(truetruevideo::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(imagescore::position2d<s32>(50,50),
                
core::rect<s32>(0,0,342,224), 0,
                
video::SColor(255,255,255,255), true);

            
// draw flying imp
            
driver->draw2DImage(imagescore::position2d<s32>(164,125),
                (
time/500 2) ? imp1 imp20,
                
video::SColor(255,255,255,255), true);

            
// draw second flying imp with colorcylce
            
driver->draw2DImage(imagescore::position2d<s32>(270,105),
                (
time/500 2) ? imp1 imp20,
                
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(imagescore::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<s32device->getCursorControl()->getPosition();
            
driver->draw2DRectangle(video::SColor(100,255,255,255),
                
core::rect<s32>(m.X-20m.Y-20m.X+20m.Y+20));

            
driver->endScene();
        }
    }

    
device->drop();

    return 
0;

Questo è tutto, spero non sia stato troppo difficile.

Versione pdf scaricabile QUI
 
Rispondi
  


Vai al forum:


Browsing: 1 Ospite(i)