XELF개발자모드를 활용한 유미의 패션매거진 제작 가이드

 

개발자 모드로 콘텐츠를 만들어볼까요?

저번 포스팅에서 가로세로 퀴즈 게임 제작하는 방법에 대해 설명을 해드렸는데요!
http://blog.xelf.io/?p=1191

이번 포스팅에서는 플레시게임의 옛 추억 게임인 옷 입히기 게임 제작하는 방법에 대해 살펴보도록 하겠습니다.

유미의 패션매거진

유미의 패션매거진 게임은 옛 추억의 게임이었던 옷입히기 게임을 재해석한 게임으로 캐릭터를 자신의 스타일로 스타일링 하여 패션 잡지의 주인공이 되는 캐주얼 게임입니다.

https://xelf.io/land/ad8edb3b-7809-425c-90f2-b1f242712ab7

 

 

 

 

 

 

 

 

 

 

유미의 패션매거진 게임은 이전 게임들에서 설명드렸던 중심적인 개발 기능들이 모두 종합적으로 들어간 게임이어서 해당 제작 가이드를 잘 따라오신다면 이전에 설명해드렸던 게임들은 모두 마스터 하실 수 있습니다!!

이번 포스팅에서는 앞에서 자세히 다루지 못했던 XELF 액션에 관한 API들을 설명해드리면 어떨까 싶어 XELF 액션 API의 종류에 대해 간단히 살펴보고 가겠습니다.

XELF 액션 API

이 기능들은 모두 디자인 모드에서 오브젝트에 걸 수 있는 액션들 입니다.

● playOpacity : 투명도 조절

● playSize : 크기 조정

● playScale : 비율 조절

● playToggle : 상태 변경 액션을 실행

● playVisible : 보이기 / 숨기기

● playMove : 좌표 이동

● playRotate : 회전 조절

● playBackground : 배경색 변경

● playFill : 채우기 색 변경

● playStroke : 선 색 변경

● playFonColor : 글자 색 변경

● playFontSize : 글자 사이즈 변경

액션 API 파라미터로 보낼 공통 옵션

● targets 오브젝트 아이디 리스트(Type : Array<string>)

● duration 실행되는 시간 (Type : number)

● ease 이징 옵션(Type : string, Default: ‘linear’)

유미의 패션매거진 코드를 보며 하나씩 살펴보도록 하겠습니다.

changeAnotherIconList 라는 함수에서 playVisible API를 이용하였습니다.

changeAnotherIconList 함수는 헤어, 상의, 하의…등의 아이콘을 클릭할 때마다 클릭한 아이콘에 관련된 옷의 리스트들이 나오며 이전에 선택되었던 리스트들은 안보이도록 사라지게 됩니다.

코드를 보시면 playVisible에서 위에서 설명드린 공통옵션이 기본적으로 들어가 있습니다.

targets에 getObjectIdsByName API를 이용하여 데이터 값을 넣었는데요.이는 getObjectIdsByName이 return 되는 Type이 배열이기 때문에 그대로 적용되어있는 것입니다.

만약 getObjectIdsByName return 되는 배열에 여러개의 데이터가 들어있어 그중 한개만 사용하고 싶다 하신다면 이와 같이 사용하시면 되겠습니다.

duration은 playVisible로 오브젝트가 보이고 숨겨질때 얼마동안 보이고 숨겨질지를 정하는 시간입니다.

Tip

기본적으로 100단위 이상을 정하여 사용하시는것이 좋으며 1초 === 1000 입니다.

ease는 duration만으로는 밋밋하게 보일 수 있는 것을 ease를 넣어 애니메이션적인 효과를 보일 수 있도록 만들어주는 옵션입니다.

옵션에 ease 옵션을 넣지않아도 기본적으로 ‘linear’ 효과가 들어가게 됩니다.

마지막 옵션으로 show 입니다. show 옵션은 playVisible에만 있는 옵션효과 입니다. 옵션에 따라 true === 보이기, false === 숨기기를 선택할 수 있습니다.

추가적으로 더 자세한 API에 대한 매뉴얼을 보고 싶다면 아래 링크를 참고해주세요!
http://manual.xelf.io/library/

지금까지 유미의 패션매거진 게임 개발에 관련된 중심적인 코드들을 살펴보았는데요.

해당게임은 프로젝트 재사용이 가능하니 코드들을 수정하여 원하시는 콘텐츠를 만들어보세요!