COMMUNITY

home 커뮤니티 > KI기자단

KI기자단

제목 '트랜지션'은 무엇일까? 작성자 최고관리자
등록일 2017-08-24 조회수 60
안녕하세요! KIGS 기자단 박선우, 정초원입니다.

점점 날씨가 더워지고 있는데요, 여러분의 더위 해소에 조금이나마 도움이 될 수 있도록
저희 기자단은 게임의 연출에 대한 재미있는 기획 기사를 가지고 왔어요. ^^

오늘 기사의 주제는 ‘트랜지션’에 관한 것 입니다!
‘트랜지션’이란 이미지가 사라지거나 나타날 때 적용하는 화면 전환 효과를 뜻해요.
이미지가 그냥 사라지거나 나타나는 것보다 상황에 맞는 트랜지션을 활용하면 보다 재미있는 게임 연출이 가능하겠죠?


트랜지션이 주로 사용되는 곳은 캐릭터들 간의 대화 이벤트인데요.
이와 같은 대화 이벤트를 주 컨텐츠로 가지고 있는 게임은 주로 비주얼 노벨 장르의 게임입니다.
비주얼 노벨은 문장 / 그림 / 소리를 기본 구성으로 이를 효과적으로 조합하여 일반 텍스트 보다 현장감 있게 문장을 유저가 체감할 수 있게 하는데, 다음의 동영상 링크를 보시면 이해하시기 쉬울 거에요.



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



[마계전기 디스가이아 5의 대화 이벤트.]
(마계전기 디스가이아 5 에피소드1-1)

이러한 구조는 비주얼 노벨 뿐만이 아니라, 다양한 장르의 게임에서 게임 스토리나 캐릭터 에피소드의 대화 이벤트 처리 등으로도 자주 사용되고 있어요.



(대전격투 게임 ‘블레이 블루’의 스토리 이벤트. 스텐드CG에 트랜지션이 적용.)
 

(모바일 수집형 RPG인 ‘확산성 밀리언 아서’의 대화 이벤트도 비주얼 노벨 방식.)

위와 같은 비주얼 노벨 방식의 대화 이벤트에서 SCG(Stand CG)가 등장하거나 사라질 때 트랜지션을 사용해서 보다 부드러운 장면 전환을 할 수 있습니다.



기본 트랜지션의 종류는 다음과 같아요.




fade : 0.5초에 걸쳐 화면을 검은색으로 만들었다가 새로운 화면으로 0.5초에 걸쳐 서서히 전환.




dissolve : 0.5초에 걸쳐 이전 화면에서 새 화면으로 서서히 전환.




pixellate : 0.5초에 걸쳐 이전 화면을 색이 다른 작은 사각형으로 만든 후, 0.5초 후 새로운 화면으로 전환.





move : 0.5초에 걸쳐 이미지의 위치를 바꿈.
moveinright : 0.5초에 걸쳐 각 트랜지션에 지정된 위치에서 이미지를 화면으로 들여옴. (moveinleft, moveintop, moveinbottom 포함)
moveoutright : 0.5초에 걸쳐 각 트랜지션에 지정된 위치쪽으로 이미지를 화면에서 내보냄. (moveoutleft, moveouttop, moveoutbottom 포함)




ease : move 계열 트랜지션과 비슷하나 트랜지션 시작 시에는 천천히 동작했다가 점점 빨라지며 트랜지션 종료 시에 다시 속도가 줄어드는 트랜지션.
트랜지션 작동 시간이 코사인 커브를 기반으로 함. (easeinright, easeinleft, easeintop, easeinbottom, easeoutright, easeoutleft, easeouttop, easeoutbottom 포함)





zoomin : 0.5초에 걸쳐 이미지를 확대하면서 화면에 표시.
zoomout : 0.5초에 걸쳐 이미지를 축소하면서 화면에서 사라지도록 함.
zoominout : 0.5초에 걸쳐 화면에 표시하려는 이미지는 확대되면서 나타나도록 하며, 화면에서 사라지려는 이미지는 축소하면서 사라지도록 함.




vpunch : 0.25초에 걸쳐 화면을 세로로 흔듬.
hpunch : 0.25초에 걸쳐 화면을 가로로 흔듬.




blinds : 1초에 걸쳐 버티컬 블라인드가 걷히고 펼쳐지는 것처럼 화면 전환.




squares : 1초에 걸쳐 작은 사각형들이 각자 트랜지션을 하면서 화면 전환.




wipeleft : 트랜지션에 지정된 방향대로 화면을 닦아냄. (wiperight, wipeup, wipedown 포함)




slideleft : 트랜지션에 지정된 방향대로 새로운 화면을 들여옴. (slideright, slideup, slidedown 포함.)
slideawayleft : 트랜지션에 지정된 방향대로 새로운 화면을 밀어냄. (slideawayright, slideawayup, slideawaydown 포함)




irisin : 사각형의 카메라 조리개처럼 새 화면을 나타내거나 이전 화면을 사라지게 함.(irisout 포함)


이러한 트랜지션 효과들은 스토리 진행 상황에 맞게 적용하여 연출 효과를 극대화 시킬 수 있는 장점이 있습니다.


[Fate Stay night - Realta Nua의 이벤트 CG 중 한 장면]인
아래의 이벤트 CG들이 그냥 순서대로 장면 전환 되는 것보다.

 
 



 
각 이미지 마다 위에서부터 ‘드러내기’ 효과를 적용해 화면 전환을 한다면, 이미지의 선이 화면의 위쪽부터 하나씩 내려와서 추가되는 연출을 만들 수 있습니다.


마찬가지로 아래의 이미지를 Moveleft 효과를 적용해 화면 전환을 하면, 이미지 하단쪽의 캐릭터가 오른쪽으로 이동하는 느낌의 연출이 가능해요.


(Dies Irae - Acta est Fabula의 이벤트 CG 중 한 장면)


방금 위에서 설명 드린 효과들을 직접 보여드리기 위해 GIF작업을 하였으나… 이 곳에선 GIF가 재생되지 않네요.... 또륵.
야밤에 AE까지 찾아보면서 만들었는데… 이래서 뭐든 먼저 알아보고 하는 게 중요한 거군요..

대신! 실제로 돌아가는 비주얼 노벨 영상들을 링크로 보여드릴게요.
백문이 불여일견! 직접 보시면 단순한 일러스트가 얼마나 역동적으로 연출되는지 보실 수 있을 거에요.



[마법사의 밤 - 쿠온지 아리스 vs 아오자키 토우코]


[마법사의 밤 - 제 5마법 ‘청’]



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



오늘은 이처럼 트랜지션 효과들과 그에 따른 연출을 알아보았는데요.
단순한 일러스트 이미지라도 트랜지션 효과에 따른 연출에 따라 
애니메이션 못지 않은 연출이 가능하다는 사실!


트랜지션 효과는 비주얼 노벨에만 국한되어 있는 것이 아니라 다른 여러 장르의 게임의 대화 이벤트에도 폭 넓게 사용되니,
트랜지션 효과가 어떤 식으로 사용되는지 인지하고 계신다면 다양한 연출 작업에서 수준 높은 작업물을 만들 수 있을 것이라 생각합니다.

여러분들도 트랜지션 효과를 잊지 마시고 좋은 연출의 게임을 만들길 바래요!
그럼 재미있는 시간되셨길 바라면서 본 기자는 여기서 인사드립니다.ㅎㅎ
다들 좋은 하루 되세요~~!

첨부파일 : 19.jpg