알맞는 도형 맞추는 퍼즐
VR 콘텐츠에서 많이 사용되는 알맞는 도형끼리 맞추는 퍼즐을 만들어봅시다.
위에는 완성 결과입니다. 같은 도형끼리 클릭할 경우, 채워지며, 틀린 경우, 다시 퍼즐이 돌아가는 것을 확인할 수 있습니다.
클릭할 퍼즐 오브젝트 추가해주기
레드브릭 스튜디오 에셋을 사용해서 3가지 도형의 오브젝트를 추가해줍니다.
해당 오브젝트들은 퍼즐을 맞추기 위해 플레이어가 선택할 도형입니다.
정답 퍼즐 오브젝트 추가해주기
앞에서 추가한 오브젝트를 복사해서 위치, 색상, 투명도를 조절해줍니다.
Material > Opacity (2번째) 값을 이용해 투명도 조절이 가능합니다.
해당 오브젝트은 플레이어가 선택한 도형들의 답이 되는 오브젝트입니다.
아래와 같은 스크립트를 작성해줍니다.
이때, 위에서 제작한 오브젝트들의 이름을 아래 스크립트를 참고해서 바꿔주셔야 합니다.
아래 스크립트에서는 클릭할 오브젝트들(파랑)을 puzzle~ 이름을 지어주었습니다.
아래 스크립트에서는 답이 될 오브젝트들(분홍)을 answer~ 이름을 지어주었습니다.
// VR Option Setting
const avatar = REDBRICK.AvatarManager.createDefaultAvatar();
const camera = WORLD.getObject("MainCamera");
const followingCamera = avatar.setFollowingCamera(camera);
avatar.setDefaultController();
followingCamera.useVR({VRObject: avatar});
const puzzleBox = WORLD.getObject("puzzleBox");
const answerBox = WORLD.getObject("answerBox");
const puzzleCylinder = WORLD.getObject("puzzleCylinder");
const answerCylinder = WORLD.getObject("answerCylinder");
const puzzleEllipse = WORLD.getObject("puzzleEllipse");
const answerEllipse = WORLD.getObject("answerEllipse");
let currentPuzzleNum = 0; // 현재 들고 있는 퍼즐 값
let currentPuzzle = null; // 현재 들고 있는 퍼즐 오브젝트
let puzzles = [];
let answers = [];
function Start() {
// puzzles, answers 배열의 도형 순서를 똑같이 넣어줘야 합니다.
puzzles.push(puzzleBox); // 1
puzzles.push(puzzleCylinder); // 2
puzzles.push(puzzleEllipse); // 3
answers.push(answerBox); // 1
answers.push(answerCylinder); // 2
answers.push(answerEllipse); // 3
answers.forEach((puzzle, index) => {
puzzle.onClick(() => {
// 맞는 퍼즐을 골랐다면
if(currentPuzzle !== null && currentPuzzleNum == index){
// 위치를 맞는 쪽으로 옮겨주고
currentPuzzle.position.set(puzzle.position.x, puzzle.position.y, puzzle.position.z);
currentPuzzle.revive();
// 현재 들고 있는 퍼즐 값과 오브젝트를 리셋합니다.
currentPuzzle = null;
currentPuzzleNum = -1;
}else{
// 틀린 퍼즐을 골랐다면
if(currentPuzzle !== null){
// 현재 들고 있는 퍼즐을 다시 내려놓고
currentPuzzle.revive();
// 현재 들고 있는 퍼즐 값과 오브젝트를 리셋합니다.
currentPuzzleNum = -1;
currentPuzzle = null;
}
}
});
});
puzzles.forEach((puzzle, index) => {
// 맞출 퍼즐을 클릭하면
puzzle.onClick(() => {
// 값 저장
currentPuzzleNum = index;
currentPuzzle = puzzle;
puzzle.kill();
});
});
}
테스트 실행하기
이후 테스트 해보면, 처음 화면과 같이 작동하는 것을 확인하실 수 있습니다.
위와 같은 예제를 활용해서 아래와 같은 큐브 맞추는 게임 등을 만들 수 있습니다.