UDN
Search public documentation:

CanvasTechnicalGuideKR
English Translation
日本語訳
中国翻译
Interested in the Unreal Engine?
Visit the Unreal Technology site.

Looking for jobs and company info?
Check out the Epic games site.

Questions about support via UDN?
Contact the UDN Staff

UE3 홈 > 유저 인터페이스와 HUD > 캔버스 테크니컬 가이드

캔버스 테크니컬 가이드

문서 변경내역: Jeff Wilson 작성. 홍성진 번역.

개요

Canvas(캔버스) 클래스를 사용하여 그리기는 페인트 대신 이미지와 텍스트로 구성된다는 점을 빼고는 그림 그리기와 비슷합니다.

canvas_painting.jpg

화면에 그림이나 머티리얼, 모양, 텍스트와 같은 엘리먼트를 그리기 위한 특수 함수가 존재합니다. 이러한 엘리먼트를 조합하여 조밀하고 재미있으며 유용한 인터페이스를 만들 수 있습니다. 물론 캔버스 클래스가 사용되는 곳은 인터페이스나 HUD 그릴 때만은 아닙니다. ScriptedTextures(스크립팅된 텍스처)와 같이 그리기가 필요한 곳에도 쓸 수 있습니다. 어느 경우든 그리기에 캔버스가 사용될 때면 기본 개념은 같습니다.

캔버스 클래스

캔버스 클래스는 마치 빈 도화지와 같다는 데서 따다 붙인 이름입니다. 그리기에 필수적인 툴을 특수한 그리기 함수 형태로 제공해 주기도 합니다.

매번 뷰포트가 업데이트될 때마다, 새로운 캔버스 오브젝트가 생성됩니다. 무슨 뜻이냐면, 같은 캔버스 오브젝트로의 참조를 유지하여 계속 사용해서 화면에 그릴 수 없다는 뜻입니다. HUD 클래스는 현재 캔버스로의 참조를 유지하나, 메인 그리기 루프 도중이나 그 루프 도중에 실행된 함수 내에서만 접근 가능합니다. 그 외에는 캔버스가 존재한다 또는 사용 가능하다는 보장이 없습니다.

캔버스 속성

Drawing (그리기)

  • DrawColor (그리기 색) - 그리기에 사용할 색입니다. 텍스트에 사용합니다.
  • Font (폰트) - 텍스트 그리기에 사용할 폰트입니다.
  • DefaultTexture (디폴트 텍스처) - 텍스처 파라미터가 지정되지 않았을 때 텍스처 기반 엘리먼트를 그릴 때 디폴트로 사용할 텍스처입니다.

General (일반)

  • Org[X/Y] (원점) - 현재 클리핑 구역에 대한 가로 세로 원점입니다.
  • Clip[X/Y] (클립) - 현재 클리핑 구역에 대한 우하단 구석입니다.
  • Cur[X/Y/Z] (커) - 그리기를 할 현재 위치입니다.
  • CurYL (커YL) - 지난 DrawText() 호출 이후로 그려진 엘리먼트 중 세로로 가장 큰 크기입니다.
  • Size[X/Y] (크기) - 캔버스를 그릴 뷰포트의 가로 세로 치수입니다.
  • bCenter (중앙?) - 참이면 그려지는 텍스트가 중앙화됩니다.
  • bNoSmooth (스무딩 없이?) - 참이면 캔버스에 그려지는 엘리먼트에 바이리니어 필터링이 적용됩니다.

캔버스 함수

General (일반)

  • Reset [bKeepOrigin] - 각 업데이트마다 캔버스 속성 리셋을 위해 엔진이 호출하는 이벤트입니다.
    • bKeepOrigin - 참이면 OrgX 및 OrgY 속성을 리셋하지 않습니다.
  • SetPos [PosX] [PosY] [PosZ] - 캔버스의 현재 그리기 위치를 설정합니다.
    • Pos[X/Y/Z] - 그리기를 할 가로 세로 위치입니다. 디폴트 Z 값은 1.0으로, 이 함수를 호출할 땐 보통 생략됩니다.
  • SetOrigin [X] [Y] - 캔버스의 클리핑 구역용 원점을 설정합니다.
    • [X/Y] - 픽셀 단위의 가로 세로 위치입니다.
  • SetClip [X] [Y] - 캔버스의 클리핑 구역 좌하단 위치입니다.
    • [X/Y] - 픽셀 단위의 가로 세로 위치입니다.
  • SetDrawColor [R] [G] [B] [A] - 주어진 값으로 색을 만들고 캔버스의 DrawColor 를 설정합니다.
    • [R/G/B/A] - 빨강, 초록, 파랑, 알파 값입니다.
  • SetDrawColorStruct [C] - 주어진 색을 사용하여 캔버스의 DrawColor 를 설정합니다.
    • C - 사용할 색입니다.

Icon

  • MakeIcon [Texture] [U] [V] [UL] [VL] - 주어진 텍스처를 사용하여 CanvasIcon(캔버스 아이콘)을 새로 만들어 반환합니다.
    • Texture - 아이콘을 뽑아낼 텍스처입니다.
    • [U/V] - 사용될 텍스처 좌상단 부분의 가로 세로 위치입니다. 텍셀 값입니다.
    • [UL/VL] - 사용될 텍스처 부분의 폭과 높이입니다. 텍셀 값입니다.
  • DrawIcon [Icon] [X] [Y] [Scale] - 주어진 스케일의 캔버스 아이콘을 위치에다 그립니다.
    • Icon - 그릴 캔버스 아이콘입니다.
    • [X/Y] - 화면상에 아이콘을 그릴 때 사용할 픽셀단위 가로 세로 위치입니다.
    • Scale - 아이콘에 적용할 스케일 값입니다.

Shapes

  • DrawRect [RectX] [RectY] [Tex] - 현재 그리기 위치에다 주어진 크기의 사각형을 현재 DrawColor 로 채워 그립니다.
    • Rect[X/Y] - 그릴 사각형의 폭과 높이입니다.
    • Tex - 옵션. 사각형을 채울 텍스처입니다. 디폴트는 캔버스의 DefaultTexture 입니다.
  • DrawBox [width] [height] - 캔버스의 현재 그리기 위치에다 주어진 크기의 사각형에다 2 픽셀 외곽선을 포함하여 그립니다.
    • width - 그릴 박스의 폭입니다.
    • height - 그릴 박스의 높이입니다.
  • Draw2DLine [X1] [Y1] [X2] [Y2] [LineColor] - 화면상에 선을 그립니다.
    • [X/Y]1 - 선을 그리기 시작할 픽셀 단위 가로 세로 위치입니다.
    • [X/Y]2 - 선을 그리기 끝낼 픽셀 단위 가로 세로 위치입니다.
    • LineColor - 선을 그리는 데 사용할 색입니다.
  • DrawTextureLine [StartPoint] [EndPoint] [Perc] [Width] [LineColor] [LineTexture] [U] [V] [UL] [VL] - 회전되고 텍스처링된 타일을 사용하여 2D 선을 그립니다.
    • StartPoint - 선을 그리기 시작할 점입니다. 화면-공간 픽셀 좌표가 있는 X와 T 컴포넌트 포함 벡터입니다.
    • EndPoint - 선을 그리기 끝낼 점입니다. 화면-공간 픽셀 좌표가 있는 X와 T 컴포넌트 포함 벡터입니다.
    • Perc - 그려낼 선의 양입니다. StartPoint 에서 EndPoint 까지의 총 거리에서 이 값을 뺀 결과가 렌더링되는 선의 총 길이가 됩니다. 렌더링되는 선은 StartPoint 와 EndPoint 사이의 중심점을 항상 가운데로 놓게 됩니다.
    • Width - 각 선의 픽셀 단위 폭입니다.
    • LineColor - 첫 선에 입힐 색입니다.
    • Tex - 선을 그리는 데 사용할 텍스처입니다.
    • [U/V] - 사용될 텍스처 좌상단 부분의 가로 세로 위치입니다. 텍셀 값입니다.
    • [UL/VL] - 사용될 텍스처 부분의 폭과 높이입니다. 텍셀 값입니다.
  • DrawTextureDoubleLine [StartPoint] [EndPoint] [Perc] [Spacing] [Width] [LineColor] [AltLineColor] [Tex] [U] [V] [UL] [VL] - 회전되고 텍스처링된 타일을 사용하여 2D 겹선을 그립니다.
    • StartPoint - 선을 그리기 시작할 점입니다. 화면-공간 픽셀 좌표가 있는 X와 T 컴포넌트 포함 벡터입니다.
    • EndPoint - 선을 그리기 끝낼 점입니다. 화면-공간 픽셀 좌표가 있는 X와 T 컴포넌트 포함 벡터입니다.
    • Perc - 그려낼 선의 양입니다. StartPoint 에서 EndPoint 까지의 총 거리에서 이 값을 뺀 결과가 렌더링되는 선의 총 길이가 됩니다. 렌더링되는 선은 StartPoint 와 EndPoint 사이의 중심점을 항상 가운데로 놓게 됩니다.
    • Spacing - 겹선의 각 선 사이 픽셀 단위 거리입니다.
    • Width - 각 선의 픽셀 단위 폭입니다.
    • LineColor - 첫 선에 입힐 색입니다.
    • AltLineColor - 둘째 선에 입힐 색입니다.
    • Tex - 선을 그리는 데 사용할 텍스처입니다.
    • [U/V] - 사용될 텍스처 좌상단 부분의 가로 세로 위치입니다. 텍셀 값입니다.
    • [UL/VL] - 사용될 텍스처 부분의 폭과 높이입니다. 텍셀 값입니다.
  • DrawDebugGraph [Title] [ValueX] [ValueY] [UL_X] [UL_Y] [W] [H] [RangeX] [RangeY] - 두 변수를 비교하는 그래프를 그립니다. 시각적인 디버깅 및 트위킹에 좋습니다.
    • Title - 그래프에 그릴 라벨로, 없애려면 "" 입니다.
    • Value[X/Y] - 그래프의 가로 세로 축에 찍을 점 값입니다.
    • UL_[X/Y] - 화면상 그래프 좌상단의 픽셀 단위 가로 세로 위치입니다.
    • [W/H] - 그래프의 픽셀 단위 폭과 높이입니다.
    • Range[X/Y] - 가로 세로 축에 대한 그래프에 표시되는 값의 범위입니다.

Text

  • CreateFontRenderInfo [bClipText] [bEnableShadow] [GlowColor] [GlowOuterRadius] [GlowInnerRadius] - 주어진 속성을 가지고 FontRenderInfo 를 새로 만들어 반환합니다.
    • bClipText - 참이면 이 FontRenderInfo 로 그려진 텍스트가 클리핑됩니다.
    • bEnableShadow - 참이면 이 FontRenderInfo 로 그려진 텍스트가 음영됩니다.
    • GlowColor - 빛나는 텍스트에 사용할 바탕색입니다.
    • GlowOuterRadius - 빛나는 외곽선의 외부 반경(0~1, 0.5는 캐릭터 실루엣의 에지)을 지정하는 벡터2D로, 빛나는 영향력은 GlowOuterRadius.X 에서 0, GlowOuterRadius.Y 에서 1이 됩니다.
    • GlowInnerRadius - 빛나는 외곽선의 내부 반경(0~1, 0.5는 캐릭터 실루엣의 에지)을 지정하는 벡터2D로, 빛나는 영향력은 GlowOuterRadius.X 에서 1, GlowOuterRadius.Y 에서 0이 됩니다.
  • StrLen [String] [XL] [YL] - 주어진 문자열의 가로 세로 크기를 계산합니다. 텍스트 줄바꾸기도 칩니다.
    • String - 크기를 구할 텍스트입니다.
    • [X/Y]L - 출력. 텍스트의 가로 세로 크기를 출력합니다.
  • TextSize [String] [XL] [YL] - 주어진 문자열의 가로 세로 크기를 계산합니다. 클리핑된 텍스트에 사용되기에 줄바꾸기는 치지 않습니다.
    • String - 크기를 구할 텍스트입니다.
    • [X/Y]L - 출력. 텍스트의 가로 세로 크기를 출력합니다.
  • DrawText [Text] [CR] [XScale] [YScale] [RenderInfo] - 텍스트 문자열을 화면에 그립니다.
    • Text - 그릴 텍스트 문자열입니다.
    • CR - 옵션. 참이면 예전에 그린 텍스트의 크기만큼 현재 그리기 위치를 세로로 증가시킵니다.
    • [X/Y]Scale - 옵션. 텍스트에 적용할 가로 세로 스케일 값입니다.
    • RenderInfo - 옵션. 텍스트를 그릴 때 사용할 FontRenderInfo 입니다.

Texture/Material Drawing

  • DrawTile [Tex] [XL] [YL] [U] [V] [UL] [VL] [LColor] [ClipTile] [Blend] - 축-정렬된 쿼드에 텍스처를, 현재 그리기 위치(CurX,CurY)에다 그립니다.
    • Tex - 그릴 텍스처입니다.
    • [XL/YL] - 그릴 타일의 폭과 높이입니다.
    • [U/V] - 그릴 텍스처의 좌상단 부분의 가로 세로 위치입니다. 텍셀 값입니다.
    • [UL/VL] - 그릴 텍스처 부분의 폭과 높이입니다. 텍셀 값입니다.
    • LColor - 타일에 입힐 색입니다.
    • ClipTile - 참이면 이 타일은 클리핑 구역에 의해 클리핑됩니다.
    • Blend - 옵션. 타일을 그릴 때 사용할 EBlendMode 블렌딩 모드입니다.
  • PreOptimizeDrawTiles [Num] [Tex] [Blend] - 앞으로 계속되는 DrawTile() 호출에 대한 버텍스와 트라이앵글을, 같은 텍스처와 블렌딩 모드를 사용하여 미리-할당합니다.
    • Num - 이번 함수 호출에 잇따라 DrawTile() 을 실행시킬 횟수입니다. 이 횟수만큼의 DrawTile() 호출이 실행되기 전에 다른 (텍스트, 다른 텍스처 등의) 그리기가 실행되어 버리면 최적화가 되지 않아 메모리만 낭비하게 됩니다.
    • Tex - 잇따르는 호출에서 사용할 텍스처입니다.
    • Blend - 잇따르는 호출에서 사용할 EBlendMode 블렌딩 모드입니다.
  • DrawMaterialTile [Mat] [XL] [YL] [U] [V] [UL] [VL] [LColor] [ClipTile] [Blend] - 축-정렬된 쿼드에 머티리얼을, 현재 그리기 위치(CurX, CurY)에다 그립니다.
    • Mat - 그릴 머티리얼입니다.
    • [XL/YL] - 그릴 타일의 폭과 높이입니다.
    • [U/V] - 그릴 머티리얼 좌상단 부분의 가로 세로 좌표입니다. [0,1] 범위의 퍼센트 값입니다.
    • [UL/VL] - 그릴 텍스처 부분의 폭과 높이입니다. [0,1] 범위의 퍼센트 값입니다.
    • LColor - 타일에 입힐 색입니다.
    • ClipTile - 참이면 타일이 클리핑 구역에 의해 글리핑됩니다.
  • DrawRotatedTile [Tex] [Rotation] [XL] [YL] [U] [V] [UL] [VL] [AnchorX] [AnchorY] - 회전된 쿼드에다 텍스처를, 현재 그리기 위치(CurX, CurY)에다 그립니다.
    • Tex - 그릴 텍스처입니다.
    • Rotation - 타일의 회전을 지정하는 Rotator 입니다.
    • [XL/YL] - 그릴 타일을 폭과 높이입니다.
    • [U/V] - 그릴 텍스처 좌상단 부분의 가로 세로 위치입니다. 텍셀 값입니다.
    • [UL/VL] - 그릴 텍스처 부분의 폭과 높이입니다. 텍셀 값입니다.
    • Anchor[X/Y] - 회전의 피벗 포인트로 사용할 타일 좌상단에 상대적인 가로 세로 위치로, 픽셀 단위입니다.
  • DrawRotatedMaterialTile [Mat] [Rotation] [XL] [YL] [U] [V] [UL] [VL] [AnchorX] [AnchorY] - 회전된 쿼드에다 머티리얼을, 현재 그리기 위치(CurX, CurY)에다 그립니다.
    • Mat - 그릴 머티리얼입니다.
    • Rotation - 타일 회전을 지정하는 로테이터입니다.
    • [XL/YL] - 그릴 타일의 폭과 높이입니다.
    • [U/V] - 그릴 머티리얼 좌상단 부분의 가로 세로 좌표입니다. [0,1] 범위의 퍼센트 값입니다.
    • [UL/VL] - 그릴 텍스처 부분의 폭과 높이입니다. [0,1] 범위의 퍼센트 값입니다.
    • Anchor[X/Y] - 회전의 피벗 포인트로 사용할 타일의 좌상단에 상대적인 가로 세로 위치로, 픽셀 단위입니다.
  • DrawTileStretched [Tex] [Rotation] [XL] [YL] [U] [V] [UL] [VL] [LColor] [bStretchHorizontally] [bStretchVertically] - 현재 그리기 위치 (CurX, CurY)에 텍스처를 축-정렬된 쿼드로 늘려 그립니다. 텍스처는 타일에 맞게 늘려지며, 텍스처의 온전함은 유지됩니다. 텍스처의 외곽선 부분은 변하지 않고, 안쪽 부분만 스케일 조절되기에 어떤 크기의 박스를 그리는 데도 좋습니다.
    • Tex - 그릴 텍스처입니다.
    • [XL/YL] - 그릴 타일의 폭과 높이입니다.
    • [U/V] - 그려질 텍스처 좌상단 부분의 가로 세로 위치입니다. 텍셀 값입니다.
    • [UL/VL] - 그릴 텍스처 부분의 폭과 높이입니다. 텍셀 값입니다.
    • LColor - 타일에 입힐 색입니다.
    • bStretchHorizontally - 옵션. 참이면 타일은 스케일 조절되는 대신 가로로 늘어집니다.
    • bStretchVertically - 옵션. 참이면 타일은 스케일 조절되는 대신 세로로 늘어집니다.
  • DrawTris [Tex] [Triangles] - 화면에다 트라이앵글 배열을 그립니다.
    • Tex - 트라이앵글에 적용할 텍스처입니다.
    • Triangles - 그릴 CanvasUVTris 배열입니다.
  • DrawTexture [Tex] [Scale] - 화면에다 주어진 텍스처 전체를 지정된 스케일로 그립니다.
    • Tex - 그릴 텍스처입니다.
    • Scale - 그려진 타일에 적용할 스케일입니다. 최종 렌더링되는 타일의 치수는: (Scale * Tex.SizeX x Scale * Tex.SizeY)
  • DrawTextureBlended [Tex] [Scale] [Blend] - 화면에다 주어진 텍스처 전체를 지정된 스케일로, 지정된 블렌드 모드로 그립니다.
    • Tex - 그릴 텍스처입니다.
    • Scale - 그려진 타일에 적용할 스케일입니다. 최종 렌더링되는 타일의 치수는: (Scale * Tex.SizeX x Scale * Tex.SizeY)
    • Blend - 사용할 EBlendMode 블렌딩 모드입니다.

Transform

  • Project [location] - 3D 월드-공간 벡터를 2D 화면 좌표로 변형합니다.
    • location - 변형할 월드-공간 벡터입니다.
  • DeProject [ScreenPos] [WorldOrigin] [WorldDirection] - 2D 화면 좌표를 3D 월드-공간 원점 및 방향으로 변형합니다. 곧이어 이는 광선-고르기(ray-picking)를 하기 위한 추적에 사용될 수 있습니다.
    • ScreenPos - 변형시킬 화면 좌표를 나타내는 Vector2D로, 픽셀 단위입니다.
    • WorldOrigin - 출력. 월드-공간 원점 벡터를 출력합니다.
    • WorldDirection - 출력. 월드-공간 방향 벡터를 출력합니다.
  • PushTranslationMatrix [TranslationVector] - 캔버스 위에다 옮기기 매트릭스를 푸시(push)합니다.
    • TranslationVector - 옮기기 매트릭스를 만드는 데 사용할 옮기기 벡터입니다.
  • PopTransform - 캔버스 변형 스택으로부터 최상위 매트릭스를 팝(pop)합니다.

캔버스 그리기

캔버스는 본질적으로 그릴 수 있는 가상의 구역입니다. 폭과 높이가 있으며, 보통은 캔버스가 연결된 뷰포트의 치수가 됩니다. 또한 캔버스에는 클리핑 구역(clipping region)이 있어서, 그 구역 밖에 그려진 엘리먼트를 클리핑 또는 잘라내거나, 지정된 영역 내로 텍스트 줄바꾸기(wrap)하게 하는 데 쓸 수 있습니다.

canvas_regions.jpg

그리기 함수가 실행되면, 그 함수가 그린 엘리먼트는 캔버스의 현재 그리기 위치에 놓이게 됩니다. 일반적으로 현재 그리기 위치는 각각의 엘리먼트를 새로 그리기 전에 설정되어야 합니다만, 텍스트 그리기에 관련된 몇몇 경우에는 각각의 호출마다 캐리지 리턴을 실행시켜서 연속적인 그리기 호출로 여러 줄의 텍스트를 빠르게 그릴 수 있습니다.

Project 및 DeProject

Projection(투영)이란 월드 좌표와 화면 좌표 사이의 변형을 말합니다. 특정한 상황에는 매우 유용한 개념입니다. 플레이어 위에 떠다니는 것과 같이 월드의 특정 위치에 있는 것처럼 보이는 HUD 위에 엘리먼트를 그리는 데 사용할 수도 있고, 또는 플레이어가 조준하고 있거나 마우스 커서 아래 있는 월드의 오브젝트가 무엇인지를 결정하는 데도 쓸 수 있습니다. RTS 게임은 월드상의 유닛을 선택하기 위해 이와 같은 개념에 크게 의존하게 됩니다. 월드의 아이템에 대해 타당한 정보를 표시하는 기능은 어떤 종류의 게임에도 유용할 것입니다.

투영은 두 가지 메인 함수의 사용을 통해 이루어집니다:

  • Project - 3D 월드-공간 벡터를 2D 화면 좌표로 변형합니다.
  • DeProject - 2D 화면 좌표를 3D 월드-공간 원점 및 방향으로 변형합니다.

Project

Project() 함수는 액터의 위치와 같은 월드-공간의 벡터를 받은 다음, 그것을 2D 화면 좌표로 변형합니다.

project_game.jpg

컴퓨터 화면이 게임 월드를 들여다 보고 있는 창이라고 상상해 보십시오. 그리고 눈에서부터 "창" 반대편에 있는 월드상의 액터로 선 추적을 한다 해 봅시다. 그 선과 창이 만나는 지점이 Project() 함수에 의해 반환되는 화면 좌표가 될 것입니다.

project_window.jpg

화면상의 액터 위치 계산을 통해서, 관련된 액터의 월드상 위치에다 그래픽이나 텍스트 또는 그 둘의 조합을 겹쳐 나타나게 하는 것이 간단해 집니다. 이 기능의 기본적인 사용 예는 아마도 게임 내 플레이어 위에 이름이 떠다니게 하는 것 정도입니다.

player_names.jpg

DeProject

DeProject() 함수는 화면 좌표 세트를 Vector2D의 형태로 받은 다음 그것들을 광선의 컴포넌트인 원점 및 방향 벡터로 변형합니다.

deproject_window.jpg

원점 및 방향 벡터는, 마우스가 현재 떠 있는 월드상의 위치에다 십자선을 투영하거나 마우스 선택 등의 동작을 하기 위해 Trace() 함수에 사용할 시작 및 끝 벡터를 만드는 데 사용할 수 있습니다.

mouse_reticle.jpg

블렌딩 모드

블렌딩 모드는 언리얼 엔진 3의 머티리얼 시스템을 사용해 본 사람이라면 익숙할 것입니다. 블렌드 모드는 그려질 현재 엘리먼트가 이미 프레임버퍼에 있는 것과 혼합되는 방식을 나타내는 것입니다. 캔버스 그리기 측면에서 볼 때 이는 HUD에 그려진 텍스처가 그 뒤에 렌더링되는 월드와 혼합되는 방식을 뜻할 수도 있으며, ScriptedTexture 에 그려진 텍스처가 그 ScriptedTexture의 현재 내용과 혼합되는 방법을 뜻할 수도 있습니다.

블렌딩 모드용으로 쓸 수 있는 옵션의 열거형 EBlendMode 에는 다음 항목이 포함됩니다:

  • BLEND_Opaque - 최종 색 = 원본(Source) 색. 이 블렌드 모드는 라이팅과 호환됩니다.
  • BLEND_Masked - OpacityMask < OpacityMaskClipValue 이면 최종 색 = 원본 색. 아니면 픽셀은 버려집니다. 이 블렌드 모드는 라이팅과 호환됩니다.
  • BLEND_Translucent - 최종 색 = 원본 색 * 불투명(Opacity) + 대상(Dest) 색 * (1 - 불투명). 이 블렌드 모드는 다이내믹 라이팅과 호환되지 않습니다.
  • BLEND_Additive - 최종 색 = 원본 색 + 대상 색. 이 블렌드 모드는 다이내믹 라이팅과 호환되지 않습니다.
  • BLEND_Modulate - 최종 색 = 원본 색 * 대상 색. 이 블렌드 모드는 데칼 머티리얼이 아니고서야 안개나 다이내믹 라이팅과 호환되지 않습니다.
  • BLEND_SoftMasked - BLEND_Masked 와 유사하나, 불투명 및 투명 경계 사이가 뿌얘집니다. 이 모드를 사용하는 데는 약간의 제약이 있습니다. 자세한 정보는 SoftMaskedKR 페이지를 참고해 주시기 바랍니다.
  • BLEND_AlphaComposite - 알파가 미리 곱해진(premultiplied) 텍스처를 가진 머티리얼에 사용됩니다. 즉 알파가 이미 곱해진 컬러 채널이기 때문에, 프레임 버퍼와 블렌딩할 때 GPU가 전형적으로 알파 블렌딩에 사용하는 (SrcAlpha * SrcColor) 연산을 건너뛸 수 있습니다. 이 블렌드 모드는 스케일폼 GFx 통합의 일부로 추가되었는데, 여기서는 보통 UI 텍스처의 블렌딩에 이런 종류의 모드를 사용하기 때문입니다.

일반적으로 캔버스에서 사용할 만한 옵션은 BLEND_Opaque, BLEND_Additive, BLEND_Modulated 모드 정도입니다. 다른 모드는 머티리얼 시스템 이외에서는 쓸 수 없는 파라미터에 의존하기에, 머티리얼 시스템 내부용입니다.

캔버스 아이콘

화면에 그래픽을 그리는 함수는, 거기에 필요한 파라미터의 양을 볼 때 꽤나 느릴 수가 있습니다. 텍스처에 대한 좌표 역시도 바꿔줘야 하는데, 텍스처를 사용할 때마다 일일히 그리기 루프를 파헤쳐 가며 검색해서 바꿔줘야만 한다면 그것도 바람직하지는 않은 일이겠습니다. 여기서 캔버스 아이콘(Canvas Icon)이 등장합니다. 캔버스 아이콘의 디폴트 속성에다 텍스처와 좌표를 지정하고, 개별 파라미터를 일일히 전달하는 대신 그 캔버스 아이콘을 그리기 함수에 전달하는 식으로, 그런 문제를 해결할 수 있습니다. 변경해 줄 값이 어딘지 바로 알 수 있으니, 그리기 코드를 훨씬 깨끗하게 유지되고 반복처리 효율도 훨씬 높아집니다.

디폴트로 캔버스 클래스에 제공되는 캔버스 아이콘 그리기용 유일의 함수는 DrawIcon() 입니다. 이 함수는 캔버스 아이콘의 속성을 사용하여 단순히 DrawTile() 호출을 수행합니다. 캔버스 아이콘을 늘여 그린다든지 특수한 함수성이 필요한 경우에는, 그 처리를 위해 HUD 클래스에 커스텀 그리기 함수를 만들어야 합니다.

예제: 

/**
 * CanvasIcon 을 특정 캔버스 위치에다 늘여서 그립니다.
 */
final function DrawIconStretched(CanvasIcon Icon, float X, float Y, optional float ScaleX, optional float ScaleY)
{
   if (Icon.Texture != None)
   {
      // 속성 가용여부 확인
      if (ScaleX <= 0.f)
      {
         ScaleX = 1.f;
      }

      if (ScaleY <= 0.f)
      {
         ScaleY = 1.f;
      }

      if (Icon.UL == 0.f)
      {
         Icon.UL = Icon.Texture.GetSurfaceWidth();
      }

      if (Icon.VL == 0.f)
      {
         Icon.VL = Icon.Texture.GetSurfaceHeight();
      }

      // 캔버스 위치 설정
      Canvas.SetPos(X, Y);

      // 그리고 텍스처 그리기
      Canvas.DrawTileStretched(Icon.Texture, Abs(Icon.UL) * ScaleX, Abs(Icon.VL) * ScaleY,
                           Icon.U, Icon.V, Icon.UL, Icon.VL,, true, true);
   }
}

캔버스 HUD 예제

이 예제는 Canvas 클래스에서 찾아볼 수 있는 다양한 그리기 메서드를 사용하여 플레이어의 이름과 생명력을 표시하는 초간단 HUD 만들기 예제입니다.

UDNHUD.uc 

class UDNHUD extends MobileHUD;

var Texture2D DefaultTexture;
var Font PlayerFont;
var float PlayerNameScale;

var CanvasIcon HealthIcon;
var CanvasIcon HealthBackgroundIcon;

function DrawHUD()
{
   local Vector2D TextSize;

   super.DrawHUD();

   //플레이어 생명력 그리기
   Canvas.DrawIcon(HealthIcon, 8, 8, 0.5);
   Canvas.Font = PlayerFont;
   Canvas.SetDrawColorStruct(WhiteColor);
   DrawIconStretched(HealthBackgroundIcon, 0, 0, 2.167, 0.875);
   Canvas.TextSize(PlayerOwner.Pawn.Health, TextSize.X, TextSize.Y);
   Canvas.SetPos(96 - (TextSize.X * PlayerNameScale / RatioX),0);
   Canvas.DrawText(PlayerOwner.Pawn.Health,,PlayerNameScale / RatioX,PlayerNameScale / RatioY);

   //플레이어 이름 그리기
   Canvas.SetPos(0, SizeY - 64);
   Canvas.DrawTileStretched(DefaultTexture,256, 64, 8, 72, 112, 48, ColorToLinearColor(GreenColor), true, true, 1.0);
   Canvas.TextSize(UTPlayerController(PlayerOwner).PlayerReplicationInfo.PlayerName, TextSize.X, TextSize.Y);
   Canvas.SetPos(128 - ((TextSize.X * PlayerNameScale / RatioX) / 2), SizeY - 28 - ((TextSize.Y * PlayerNameScale / RatioY) / 2));
   Canvas.DrawText(UTPlayerController(PlayerOwner).PlayerReplicationInfo.PlayerName,,PlayerNameScale / RatioX,PlayerNameScale / RatioY);
}

/**
 * CanvasIcon을 특정 캔버스 위치에다 늘여서 그립니다.
 */
final function DrawIconStretched(CanvasIcon Icon, float X, float Y, optional float ScaleX, optional float ScaleY)
{
   if (Icon.Texture != None)
   {
      // 속성 가용여부 확인
      if (ScaleX <= 0.f)
      {
         ScaleX = 1.f;
      }

      if (ScaleY <= 0.f)
      {
         ScaleY = 1.f;
      }

      if (Icon.UL == 0.f)
      {
         Icon.UL = Icon.Texture.GetSurfaceWidth();
      }

      if (Icon.VL == 0.f)
      {
         Icon.VL = Icon.Texture.GetSurfaceHeight();
      }

      // 캔버스 위치 설정
      Canvas.SetPos(X, Y);

      // 그리고 텍스처 그리기
      Canvas.DrawTileStretched(Icon.Texture, Abs(Icon.UL) * ScaleX, Abs(Icon.VL) * ScaleY,
                           Icon.U, Icon.V, Icon.UL, Icon.VL,, true, true);
   }
}

defaultproperties
{
   DefaultTexture=Texture2D'UDNHUDContent.UDN_HUDGraphics'
   PlayerFont="UI_Fonts.MultiFonts.MF_HudLarge"
   PlayerNameScale=0.25
   HealthIcon=(Texture=Texture2D'UDNHUDContent.UDN_HUDGraphics',U=72,V=8,UL=48,VL=48)
   HealthBackgroundIcon=(Texture=Texture2D'UDNHUDContent.UDN_HUDGraphics',U=8,V=8,UL=48,VL=48)
}

UDNGame.uc 

class UDNGame extends UTGame;

defaultproperties
{
   bUseClassicHUD=true
   HUDType=class'UDNExamples.UDNHUD'
}