[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Игровые движки » IrrLicht Engine » Туториал №6: 2D графика
Туториал №6: 2D графика
MerGC_TeamДата: Среда, 02.04.2014, 22:07 | Сообщение # 1
Веселый админ
Группа: Администраторы
Сообщений: 32
Статус: Оффлайн
Этот урок покажет как рисовать 2d графику в движке IrrLicht. В нем вы узнаете как рисовать изображения, спрайты, полупрозрачную геометрию и различные шрифты. Все это пригодится вам при вашем желании раскрасить 2d интерфейс в вашей игре или у вас появится возможность взглянуть на IrrLicht, как на движок для 2d игр.

Как обычно подключаем заголовочный файл IrrLicht, объявляем пространство имен 'irr' включенным.

Код
#include < irrlicht.h >
#include "driverChoice.h"

using namespace irr;

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

Код
int main()
{
         // запрашиваем драйвер (DirectX, OpenGL и тд.
         video::E_DRIVER_TYPE driverType=driverChoiceConsole();
         if (driverType==video::EDT_COUNT) return 1;

         // создаем корневой объект(движок)

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

         if (device == 0)  return 1; // ошибка при создании движка, выходим.

         device->setWindowCaption(L"Irrlicht Engine - 2D Graphics Demo");

         video::IVideoDriver* driver = device->getVideoDriver();


Вся 2d графика для этого примера размещена в одной текстуре 2ddemo.png. Т.к. мы хотим рисовать спрайты по цветовому ключу, мы должны не только загрузить текстуру, но и указать движку какой цвет использовать в цветовом ключе для определения прозрачных областей спрайта.

Для этого после загрузки текстуры надо вызвать driver->makeColorKeyTexture(images, video::SColor(0,0,0,0)), что будет означать что все пиксели черного цвета - прозрачные. Или, как сделаем мы, укажем координату пикселя, цвет которого отвечает за прозрачный. Заметьте что метод makeColorKeyTexture просто создает альфа канал на базе переданного в метод цвета.

Код
video::ITexture* images = driver->getTexture("../../media/2ddemo.png");
         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);


Включим билинейную фильтраци и антиалиасинг.

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


Все готово, теперь в главном цикле начнем рисовать. Мы будем рисовать только 2d графику, но ее вывод без проблем можно совмещать с выводом 3d графики.

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

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


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

Код
// рисуем огонь & дракона на фоне сцены
                         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 demo shows that Irrlicht is also capable of drawing 2D graphics.",
                    core::rect< s32 >(130,10,300,50),
                    video::SColor(255,255,255,255));

                         // рисуем другой некоторый текс вторым шрифтом
                         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));


Нарисуем наш логотипчик Irrlicht Engine (как есть без альфа канала, но слегка отмаштабированный).

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


В довершени в положении курсора мыши будем рисовать белый квадрат 20 на 20 пикселей с уровнем прозрачности 100

Код
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;
}


Как видите, ничего сложного, осталось скомпилировать и запустить.
 
Форум » Игровые движки » IrrLicht Engine » Туториал №6: 2D графика
  • Страница 1 из 1
  • 1
Поиск: