1편 링크 : aaag.tistory.com/1
이 글은 시리즈로 이어서 쓰고 있습니다.
필요한 편수만 봐도 상관없지만 처음부터 따라 하며 만들어 보고 싶은 분이거나 내용 이해가 잘 안 될 시 전편 내용들을 봐주세요😃
[사전 준비]
» 게임에 사용할 이미지를 준비해야 합니다.
» 저는 테스트를 위해 무료 이미지 사이트인 픽사베이를 사용했습니다.
[2편에서 배울 내용]
» 브라우저에 이미지를 입혀 내 게임 소개 페이지의 타이틀 위치에 화면을 보여준다
» 생성 가능한 오브젝트를 하나씩 생성해보고 기능을 확인해본다
[시작]
1. 워크샵 화면을 선택하세요
2. 오른쪽 중간에 edit 버튼을 클릭하세요.
» browse에 사용할 게임 이미지를 change 버튼을 누른 후 선택하세요
» save 버튼 클릭
» 뒤에 제가 설정한 주사위 화면으로 변경이 됐네요
» 게임 소개 화면에도 변경됐는지 확인해 볼까요? tabletopia.com/games/생성한 게임의 이름명 접속
» 잘 적용된 걸 확인할 수 있습니다😄
» 게임 소개 페이지는 게임을 플레이하는 건 아니지만 게임의 얼굴 역할(?) 및 유저들이 처음 게임을 접하기 전에 최대한 정보나 내 게임의 분위기, 성격 등을 표현하기 위한 공간이니 게임을 만드는 거 못지않게 중요해요.
» 이제 게임을 만들어 볼까요?
» 워크샵 화면으로 돌아가서 setups에 1-8 players를 선택
» 위 화면을 보시면 오브젝트를 생성하거나 이미 있는 오브젝트들을 선택할 수 있는 버튼 2개가 있어요.
» create object를 선택하면
» 위 화면과 같이 다양한 오브젝트들을 생성할 수 있어요.
» 카드를 선택해보죠
» 카드의 앞과 뒤 그림을 넣을 수 있는 공간과 그 외 옵션들(있다 설명)이 있군요
» 원하는 카드 이미지를 앞과 뒤에 각각 change 버튼을 눌러 선택 후 name 칸에 카드 이름을 적어주세요
» 위 사진처럼 적용했으면 save 선택
» preview 선택
» 와~ 잘 적용됐네요! 근데.. 뭔가 이상하죠? 카드가 사각형 모양의 카드가 아니라 심볼 모양만 보이는데.. 뒷면을 확인해 보죠
» 으아니~?! 이게 무슨 일이요 얼굴이 반토막(?)이 나다니!!😄
» 위와 같이 이미지가 출력된 이유는 두 가지인데요.
첫째. 이미지 자체의 문제
이미지를 선택 시 사각형 모양의 배경이 채워져 있는 이미지를 올릴 경우 정상적으로 출력됩니다.
제가 올린 이미지는
위 이미지처럼 배경이 바둑판처럼 되어있는 이미지는 배경이 없는 이미지입니다.
따라서 저런 이미지를 선택해서 카드 이미지로 사용할 경우 사각형의 카드 이미지가 아니라는 점!
둘째. 카드 뒷면은 앞면의 이미지 사이즈를 따라간다
이게 무슨 말이냐면~ 최초 카드 앞면을 선택해서 업로드했으면 뒷면 이미지를 이어서 업로드할 때 앞면 이미지의 크기를 뒷면 이미지가 자동으로 따라 하게끔 되어 있어요.
그래서 아까 전과 같이 뒷면 이미지도 얼굴이 반토막(?) 났던 거였죠😆
» 카드 생성 옵션에 대해 좀 더 알아볼까요?
» Magnetic map은 정렬 및 회전 시 사용할 목적으로 만든 기능이에요
» 밑에 체크 박스들은 해당 오브젝트가 Magnetic map를 지원할 수 있는지 체크하는 버튼입니다.
» 링크: help.tabletopia.com/knowledge-base/magnetic-map
» 위에 보이는 퍼센트를 200%, 400%로 확대해서 실행해보면
» 저렇게 오브젝트 크기를 조절할 수 있어요😉
» Size in Hand는 손패로 카드를 가져왔을 때의 카드 크기이고 Hexagonal Form는 키보드'Q' or 'E' Key를 누를 시 오브젝트 회전을 기존 90도에서 60도로 변경하는 기능이에요😊
» Name : 오브젝트 생성 시 생성할 이름명
» Language : 오브젝트가 언어에 따라 밀접하게 연결돼있을 경우 사용
» 위 두 가지를 주로 사용하고 나머지는 필요에 따라 적용하시면 돼요
» 이제 카드덱 생성으로 넘어가 볼까요?
» 카드 설정과 다른 점은 기본 뒷면은 공유하고 앞면을 여러 개 업로드할 수 있네요
» 보통 카드들 뒷면은 같은걸 사용하니 카드덱 기능으로 생성할 경우 한 번에 공장 찍어내듯이 앞면만 업로드해가며 오브젝트를 생성할 수 있겠죠?😋
» 이름은 자동으로 생성해 주네요
» 위 그림을 보시면 가운데 카드를 제외한 양옆의 카드는 앞면 이미지만 다르게 업로드해서 한 번에 만든 카드덱 오브젝트예요.
» 이번엔 카운터 컴포넌트를 만들어 볼까요?
» 사이드와 폰트 크기 조절 및 색상 변경을 할 수 있는 옵션이 있군요
» 카운트를 증가시키거나 감소시킬 수 있는 기능이 자동으로 설정돼있고 마우스로 더블 클릭을 하면
» 카운터를 조절할 수 있는 화면이 나와요~
»제대로 조절되는지 + 버튼을 눌러봐요
» 정상으로 작동하네요😎
» 이제 픽처 카운터 기능을 볼까요?
» 카운터와 픽처 카운터의 차이점은 숫자로 표현하느냐 이미지로 표현하느냐의 차이예요
» 첫 번째 슬라이드 이미지를 설정하면 그 후 추가되는 이미지들은 첫 번째 이미지의 크기를 따라가요😍
» 숫자가 아닌 이미지로 카운터 기능이 필요할 때 유용하네요😘
» 다음으로 다이스 기능을 볼까요?
» 주사위 이미지를 변경하거나 몇 면체 주사위로 할지 설정할 수 있는 기능이 있네요
» customize view를 선택하면 텍스처나 노말 맵, 주사위 재질 등을 설정할 수 있어요.
» 중요한 건 Texture 이미지인데요! 이유는 조금 있다 설명드리고 텍스처에 이미지를 업로드해보고 실행해 보면
» 위 화면과 같이 이상한(?) 모양으로 생성됨을 볼 수 있어요😗
» F Key를 눌러 주사위 회전을 해도 다 같은 모양인데요. 이유는 위에 설명한 텍스처 이미지처럼 하나의 이미지에 보여줄 주사위 모습을 저런 식으로 만들어야 주사위에 제대로 표현이 돼요!
» 주사위를 만들 땐 자신이 원하는 면체를 생각해서 이미지를 만들면 돼요🥰
» 주사위 옵션 중 Material 값을 보면
» 위와 같은 3가지 종류가 있는데 어떤 특징이 있는지 확인해 볼까요?
» Glow 기능을 선택하면
» 위 화면처럼 세부 옵션을 설정할 수 있는데요
» 간단하게 주사위에 광원 효과를 넣어주는 기능이라고 생각하시면 이해하기 쉬워요
» 위 설정 후 생성해보면
» 위 화면처럼 주사위의 숫자가 빛이 나네요!😚😚 예쁘다~
» Matte 옵션은 반질반질한 효과(?)를 내게 하는데요 생성해서 보면
» 처음 보여드렸던 플라스틱 주사위와 비교할 때 좀 더 부드러우면서 반질반질한 느낌(?)이 드는 옵션이에요🤩
» 게임보드 생성 기능을 볼까요?
» 위 화면에서 게임보드 이미지를 업로드하고 생성하면
» 제대로 생성한 걸 볼 수 있어요
» 스카이 박스를 생성해 볼까요?
» 스카이 박스 기능은 우리가 보드게임을 할 때 주변 불을 끄고 한다던가 아니면 특별한 장소(바닷가, 공원 등)에 가서 할 때 주변 배경에 영향을 받든 게임의 주변 공간을 이미지를 업로드하여 꾸미는 기능이에요
» 이렇게 원하는 위치(정면, 후면, 옆면 등)에 이미지를 올려 게임 공간을 꾸밀 수 있어요😙
» 이제 타일 생성에 대해 알아볼까요?
» complex collider는 오브젝트끼리 충돌 시 체크 판정을 해주는 기능이에요
» 생성하게 되면
» 타일이 정상적으로 생성된 걸 볼 수 있어요😚
»타일 덱 기능은 그전 카드덱 기능과 동일하기 때문에 패스하고 마지막 토큰 기능을 볼까요?
» Type 은 세 가지 유형이 있는데 하나씩 확인해볼까요?
» Horizontal 은 생성 시
»위 모습처럼 바닥을 기준으로 놓여 있는 일반적인 토큰이고요.
» Standee을 선택하면
» 위 모습과 같이 따로 보여줄 이미지를 추가하는데요 이미지를 추가하고 생성 시
» 위 이미지처럼 보이는데요 주로 캐릭터 말 이 필요할 경우 이 옵션을 사용하면 쉽게 만들 수 있겠죠?🤗
» Vertical Vertical을 선택하면
» 위 모습과 같이 따로 보여줄 이미지를 추가하는데요 이미지를 추가하고 생성 시
» 위 이미지처럼 보이는데요 토큰이 서있거나 누워있게끔 만들 필요가 잇는 상황에 쓰기 좋은 타입이에요🙂
» 지금까지 생성 가능한 컴포넌트의 종류와 기능들을 확인해봤어요
» 여기까지 따라오시느라 수고하셨습니다!