Урок 6. 2D Графика.

Этот урок расскажет вам, как реализовать 2D графику с помощью Irrlicht Engine. Он расскажет как выводить изображения, спрайты, прозрачные прямоугольники и различные шрифты. Вам это может показаться полезным в случае если вы делаете 2D игру, или хотите добавить оригинальный интерфейс или стартовый экран для вашей 3D игры.

Вот как будет выглядеть нижеописанная программа:

Иллюстрация к уроку #6 по Irrlicht Engine | Урок 6. 2D Графика.

Поехали!

Как всегда, я включу заголовочные файлы, подключу пространство имен irr, и скажу компоновщику подключить .lib файл.

#include <irrlicht.h>
#include <iostream>

using namespace irr;
#pragma comment(lib, "Irrlicht.lib")

Для начала мы позволим пользователю выбрать тип драйвера, после запустим движок, установим заголовок, и получим указатель на видео драйвер.

int main()
{
  // Пусть пользователь выберет тип драйвера
  video::E_DRIVER_TYPE driverType;

  printf("Please select the driver you want for this example:\n"\
" (a) Direct3D 9.0c\n (b) Direct3D 8.1\n (c) OpenGL 1.5\n"\
" (d) Software Renderer\n (e) Apfelbaum Software Renderer\n"\
" (f) NullDevice\n (otherKey) exit\n\n");
  char i;
  std::cin >> i;

  switch(i)
  {
    case 'a': driverType = video::EDT_DIRECT3D9;break;
    case 'b': driverType = video::EDT_DIRECT3D8;break;
    case 'c': driverType = video::EDT_OPENGL;   break;
    case 'd': driverType = video::EDT_SOFTWARE; break;
    case 'e': driverType = video::EDT_SOFTWARE2;break;
    case 'f': driverType = video::EDT_NULL;     break;
    default: return 0;
  }

  // создадим устройство
  IrrlichtDevice *device = createDevice(driverType,
         core::dimension2d<s32>(512, 384));
  if (device == 0) return 1;
  device->setWindowCaption(L"Irrlicht Engine - 2D Graphics Demo");
  video::IVideoDriver* driver = device->getVideoDriver();

Вся 2D графика из этого примера хранится в одной текстуре, 2ddemo.bmp. Так как мы хотим выводить спрайты, нам необходимо загрузить текстуру и указать, какая её часть должна быть прозрачна, при помощи ключевого цвета. В этом примере мы не будем непосредственно указывать этот цвет, мы просто скажем “Эй, Irrlicht Engine, ты найдешь цвет который мне нужен в точке (0, 0) текстуры.” Кроме этого возможно вызвать driver->makeColorKeyTexture(images, video::SColor(0,0,0,0)), что бы все черные точки стали прозрачными. Заметьте, makeColorKeyTexture просто создает альфа-канал основываясь на цвете.

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

Что бы иметь возможность выводить какой-нибудь текст двумя разными шрифтами, мы загрузим их. Ну ладно, загрузим мы всего лишь один шрифт, а в качестве первого мы используем стандартный, встроенный в движок.

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

Готово. Теперь мы можем отобразить все в цикле прорисовки, между вызовами начала сцены и конца сцены. В этом примере мы выводим только 2D графику, но у вас не возникнет никаких проблем при добавлении ее к 3D графике. Просто попробуйте, нарисуйте несколько 3D вершин или настройте сцену и отобразите ее.

while(device->run() && driver)
{
  if (device->isWindowActive())
  {
    u32 time = device->getTimer()->getTime();
    driver->beginScene(true, true, video::SColor(0,120,102,136));

Для начала мы нарисуем три спрайта используя альфа-канал созданный с помощью makeColorKeyTexture. Последний параметр указывает на то, что при отображении должен использоваться альфа-канал. Предпоследний параметр указывает в какой цвет должен быть раскрашен спрайт. (255,255,255,255) – это полностью белый цвет, по этому спрайт будет выглядеть как оригинал. Третий спрайт раскрашивается в разные цвета в зависимости от времени.

// выводим фон мира  fire & dragons
driver->draw2DImage(images, core::position2d<s32>(50,50),

core::rect<s32>(0,0,342,224), 0, 

video::SColor(255,255,255,255), true);

// рисуем летящего чертенка
driver->draw2DImage(images, core::position2d<s32>(164,125),
    (time/500 % 2) ? imp1 : imp2, 0, 
    video::SColor(255,255,255,255), true);

// рисуем еще одного чертенка, но уже раскрашенного
driver->draw2DImage(images, core::position2d<s32>(270,105),
    (time/500 % 2) ? imp1 : imp2, 0, 
    video::SColor(255,(time) % 255,255,255), true);

Вывод текста очень прост. Код понятен без объяснений.

// рисуем текст
if (font)
  font->draw(L"This is some text.",
       core::rect<s32>(130,10,300,50),
       video::SColor(255,255,255,255));

// нарисуем еще какой-нибудь текст
if (font2)
  font2->draw(L"This is some other text.", 
       core::rect<s32>(130,20,300,60),
       video::SColor(255,time % 255,time % 255,255));

И наконец мы рисуем логотип Irrlicht Engine (не используя цвет или альфа-канал) и прозрачный 2D прямоугольник на месте курсора.

// рисуем логотип
  driver->draw2DImage(images, core::position2d<s32>(10,10),
       core::rect<s32>(354,87,442,118));

// рисуем прозрачный прямоугольник под курсором
  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;
}

Оригинал: http://irrlicht.sourceforge.net/tut006.html

2 мая 2006 (Обновление: 24 сен 2006)