Irricht엔진튜토리얼 06. 2D Graphics

6. 2D Graphics

Posted 2007/09/15 19:22 by 수달

-------------------------------------------------------------------------

튜토리얼 6. 2D 그래픽

--------------------

이 튜토리얼은 IRRLICHT 엔진에 2D 그래픽 사용법을 보인다. 이미지를 어떻게 그리며(draw), 스프라이트의 키컬러를 적용하고, 반투명 사각형과 다양한 폰트 표시법을 담고 있다. 이것은 IRRLICHT 엔진으로 2D 게임을 만들려고 할때 매우 유용할 것이다. 또한 3D 게임에서라도 멋진 인터페이스를 직접 구현하려면 필요하다. (역자 주 : 보통 상용 게임들은 이런 식으로 직접 인터페이스를 만든다.)

-------------------------------------------------------------------------

시작

----

자, 그럼 헤더 파일, 네임 스페이스, 라이브러리를 걸고 시작해 보자.

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

using namespace irr;

#pragma comment(lib, "Irrlicht.lib")

우선 드라이버 타입을 정하고, 엔진을 시작하며, 캡션 이름을 정한 후 비디오 드라이버 포인터를 저장한다.

int main()
{
// let user select driver type

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.2\n"\
" (d) Software Renderer\n (e) NullDevice\n (otherKey) exit\n\n");

char i;
std::cin >> i;

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

// create device

IrrlichtDevice *device = createDevice(driverType,
core::dimension2d<s32>(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();

예제의 모든 2D 그래픽은 '2ddemo.bmp'라는 한장의 텍스처 내에 들어있다. (역자 주 : 이렇게 하면 컬러키 적용 용법을 알 수 있고, 한 텍스처에 다중 이미지를 한번에 로딩한 후 구역별로 잘라 출력하는 법을 알 수 있기 때문이다. 이것만으로도 IRRLICHT 튜토리얼이 얼마나 실전적인지 알 수 있다.) 예제에서는 직접 컬러키의 색상을 말하지 않는다. 다만 엔진에게 '텍스처의 (0, 0)에 있는 색상을 컬러키 값으로 써라.'라고만 한다. 물론 개발자가 직접 driver->makeColorKeyTexture(images, video::SColor(0, 0, 0, 0));을 통해 정할 수도 있다. (역자 주 : SColor(a, r, g, b)는 빼야 할 컬러키) 만약 알파 채널을 적용하려고 하면 makeColorKeyTexture()를 사용해야 한다.

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

한 화면에 서로 다른 두 폰트로 텍스트를 그리기 위해선, 일단 그 둘을 모두 읽어야 한다. 기본적으로 기본(default) 폰트는 엔진 생성과 함께 읽혀진 상태다. (역자 주 : 그래서 font는 걍 device에서 읽었고, font2는 외부에서 폰트를 읽었다.)

gui::IGUIFont* font = device->getGUIEnvironment()->getBuiltInFont();
gui::IGUIFont* font2 =

device->getGUIEnvironment()->getFont("../../media/fonthaettenschweiler.bmp");

다음으로 화면에 출력할 빨간 임프(Imp : 몬스터)의 사각 위치를 정한다. 이 위치는 우리가 위에서 읽은 스프라이트 상의 어느 부분을 읽어 출력할 것인가를 나타낸다. 두개를 읽는 이유는 스프라이트 애니메이션(매 프레임마다 스프라이트를 번갈아 찍는 2D 애니메이션)을 위해서다.

core::rect<s32> imp1(349,15,385,78);
core::rect<s32> imp2(387,15,423,78);

모든 게 준비되었고, beginScene과 endScene 사이에서 준비된 모든 것을 그려주기만 하면 된다. 이 예제에선 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를 적용한 세 개의 스프라이트를 그린다. 마지막 인자는 makeColorKeyTexture에서 정한 알파 채널을 사용할 것인지를 지정한 것이다. 그 전 인자는 스프라이트에 적용할 색상으로 (255, 255, 255, 255)가 원래의 색상이다. (역자 주 : 이 색을 바꾸면 출력할 그림에 영향을 주어 다양한 효과를 낼 수가 있다.) 세 번째 스프라이트의 경우 시간에 따라 적용 색상을 바꿔 보았다.

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

텍스처 그리는게 가장 간단하다. 코드 자체만으로도 해석이 될 것이다.

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

마지막으로 IRRLICHT 엔진 로고를 색상 변환이나 알파값 없이 그리고, 마우스를 따라다니는 투명 사각형을 표현하자.

// draw logo
driver->draw2DImage(images, core::position2d<s32>(10,10),
core::rect<s32>(354,87,442,118));

// draw transparent rect under cursor
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;
}

-------------------------------------------------------------------------

위에서 잠시 언급한대로 튜토리얼들은 실제 게임을 만드는데 무엇이 필요한지를 잘 알고 있는 개발자에 의해 만들어졌다. 2D에 그리니, 3D에 그리니, 2.5D를 쓰니 마니 고민할 필요가 없을 정도로 쉽게 되어있다. 또한 실무에서 어떻게 그림을 떼어 화면에 보일지도 잘 나타나 있다. 앞으론 이것을 이용해야 겠다.