프로토타이핑

가위바위보 게임 프로토타입 만들기

뜨이2023. 8. 18.

질문사항

피그마로 가위바위보 게임 만들기!

피그마의 프로토타이핑 기능만으로 가위바위보게임을 만들어보겠습니다! 베리어블? 프로퍼티? 어려운 기능 하나도 사용하지 않고 오직 화면 연결만으로만 만들 수 있는 간단한 게임입니다! 화면은 총 13개인데 복붙으로만 만들 수 있어서 기본 준비만 완료하면 10분만에 만들 수 있는 예제랍니다!

답변

아래 과정을 보면서 따라 만들어보세요!

먼저 화면안에서 빠르게 움직이는 가위바위보 모션을 만들어보겠습니다. 가위바위보 아이콘(?), 일러스트(?)를 하나씩 만들어서 컴포넌트로 만들고 베리언츠로 묶어주세요! 그리고 after delay를 1ms로 설정해서 현란한 움직임을 만들어줍니다.

다음으로 시작화면을 준비해주세요! 원하는 캐릭터, 게임타이틀, 그리고 시작버튼까지 배치하면 완료!

선택화면을 만들 차례입니다! 승리, 무승부, 패배로 프레임 세개를 만들고 그 안에 앞서 만든 가위바위보 모션과 클릭을 유도하는 멘트를 배치해주세요! (저는 뒤로가기 버튼도 만들었지만 생략하셔두 무방합니다!)

만든 3개의 프레임에 가위바위보 모양의 선택버튼까지 배치해주세요! 묵찌빠버튼이라고 칭하겠습니다!

이제 각 가위바위보의 경우의 수 화면을 만들어 줍니다! 보자기로 이겼을 때, 졌을 때, 무승부일 때 이렇게하면 보자기의 화면은 3개가 나오겠죠? 보자기 3가지 경우의 수를 만들고 리플레이 버튼까지 배치해주세요! 이 과정은 가위와 묵의 경우도 만들어주세요! 그럼 총 9개의 화면을 만들게 됩니다.

이제 4번에서 만든 묵찌빠 버튼과 9개의 프레임을 연결해줄 차례입니다! 예를 들어 ‘승리’프레임 안에 있는 보자기를 누른다면 ‘빠 승리’의 화면이 나와야겠죠? ‘패배’프레임 안에 있는 주먹을 누른다면 ‘묵 패배’ 화면과 연결합니다! 이렇게 9개의 묵지빠버튼과 9개의 결과 프레임을 연결해주세요!

리플레이 버튼에 뒤로가기 프로토타이핑도 걸어주세요.

이제 랜덤으로 결과가 나오게 처리하는 과정만 남았습니다. 4번에서 만든 승리, 무승부, 패배프레임이 빠르게 바뀐다면 안에 들어있는 묵찌빠 버튼도 계속 빠르게 바뀝니다. 이 원리로 어떤 버튼을 누르게 될지 모르기 때문에 랜덤으로 결과값이 나오게 되는데요. 승리,무승부, 패배 화면은 애프터딜레이 30ms으로 연결해주세요!

마지막으로 시작버튼만 4번 프레임 중 아무프레임만 연결해주면 완성입니다!

추가로 알면 좋을 팁

링크안의 예제 파일에서 더 자세하게 살펴보세요~!