[게임메이커 강좌-기초][GMS2]나인슬라이스

 

 

GAME MAKER 강좌

 

KAYAN

 

 

 

 

 

◈ 나인슬라이스

 

 

나인 슬라이싱은 세부정보를 유지하기 위해 직사각형 이미지의 크기를 변경했을 때 원래 이미지 형태를

유지하여 표시하는 유용한 기능입니다.

 

(▲ 나인 슬라이스를 사용한 텍스트 팝업)

 

이 기능은 이미지를 9개로 나누고 이미지를 변형하여 표시할 때, 모서리 부분은 크기 조정 중,

동일한 크기로 표시되고, 가장자리와 가운데 부분은 설정에 따라 늘어나거나 반복되어 공간을 채웁니다.

 

일반적으로 버튼, 텍스트 팝업과 같은 UI 이미지를 표시할 때 사용됩니다.

 

나인 슬라이스를 사용하려면 먼저 스프라이트 이미지가 필요합니다.

그리고 Nine Slice 탭을 클릭하면 세부설정을 관리할 수 있습니다.

 

(▲ 나인 슬라이스 설정)

 

   ◎ Activate Nine Slice : 나인 슬라이스를 활성화합니다. 나인 슬라이스를 사용하려면 체크하세요.

 

   ◎ Guides: 나인 슬라이스를 가운데 슬라이스를 중심으로 나눕니다.

 

   ◎ Highlight : 미리보기의 슬라이스 선택 표시

 

                    - Inverted : 반전(선택부분은 비표시)

                    - Overlay : 오버레이(선택부분만 표시)

 

   ◎ Selected Slice : 각 슬라이스의 타일 유형을 편집합니다.

 

   ◎ Tile Mode : 타일 유형을 선택할 수 있습니다.

 

                    - Stretch :늘이기

                    - Repeat : 반복

                    - Mirror : 미러링

                    - Blank Repeat : 슬라이스가 늘어나거나 반복되지 않고 그 뒤에 빈 영역이 생깁니다.

                    - Hide : 숨김

 

나인 슬라이스를 사용하기 위해서는 Activate Nine Slice 를 활성화해야합니다.

 

(▲ 나인 슬라이스 활성화)

 

미리 보기에서 왼쪽은 세부 설정을 할 수 있고, 오른쪽은 설정이 적용된 미리보기입니다.

슬라이스 크기는 Guides 에서 설정할 수 있는데, 옆의 화면의 가이드 라인을 드래그하면

간단하게 설정할 수 있습니다.

 

Selected Slice 를 클릭하여 설정하고 싶은 슬라이스 조각을 선택할 수 있습니다.

또는 옆의 화면에서 조각을 선택해도 됩니다.

 

(▲ 슬라이스 조각 선택)

 

Tile Mode 는 변형했을 때, 이미지를 어떻게 표시할 지를 선택할 수 있습니다.

 

※ 적용된 미리보기에서 가장자리를 드래그하면 적용된 모드를 확인할 수 있습니다.

 

(▲ 슬라이스 타일 모드)

 

모드는 5가지 입니다.

 

   - Stretch :늘이기

   - Repeat : 반복

   - Mirror : 미러링

   - Blank Repeat : 슬라이스가 늘어나거나 반복되지 않고 그 뒤에 빈 영역이 생깁니다.

   - Hide : 숨김

 

(▲ 슬라이스 미리 보기 - 오른쪽 화면에서 마우스로 테스트할 수 있음)

 

Stretch 는 변형했을 때 해당 슬라이스 조각을 늘려 표시합니다.

(▲ Stretch)

 

Repeat 은 해당 슬라이스 조각을 반복 타일 형태로 표시합니다.

 

(▲ Repeat)

 

Mirror 는 해당 슬라이스 조각을 뒤집기를 반복하여 표시합니다.

 

(▲ Mirror)

 

Blank Repeat는 슬라이스가 늘어나거나 반복되지 않고, 슬라이스 조각을 표시 후,

그 뒤에 빈 영역이 생깁니다.

 

(▲ Blank Repeat)

 

Hide 는 슬라이스 조각을 표시하지 않습니다.

 

(▲ Hide)

 

나인 슬라이스를 사용은 간단합니다.

이미지를 원하는 크기만큼 늘려 표시하기만 하면 됩니다.

예를 들자면, 오브젝트에 나인 슬라이스가 활성화된 이미지를 지정하고,

image_xscale, image_yscale 로 늘려 표시하면 됩니다.

표시할 값은 아래와 같이 계산합니다.

 

 

   ◎ 변형값 = 표시할 크기 / 스프라이트 이미지 크기

 

      예) image_xscale = 320/32; image_yscale = 240/32;

 

 

또는 [Draw 이벤트]에서 draw_sprite_ext로 늘려 표시해도 됩니다.

 

예)

 

draw_set_font(font_kr1);    draw_set_halign(fa_center);    draw_set_valign(fa_middle);        var text,c,xs,ys,w,h;        text="게임메이커\n나인 슬라이스 테스트";        w=string_width_ext(text,-1,320)+16;    h=string_height_ext(text,-1,320)+16;        xs=w/32;    ys=h/32;    draw_sprite_ext(Spr_nine_slice,0,x,y,xs,ys,0,c_white,1);        c=c_black;draw_text_ext_color(x,y,text,-1,320,c,c,c,c,1);

 

(▲ 테스트 화면)