스니펫VR예제알맞는 도형 맞추는 퍼즐

알맞는 도형 맞추는 퍼즐

VR 콘텐츠에서 많이 사용되는 알맞는 도형끼리 맞추는 퍼즐을 만들어봅시다.


shapes-puzzle

위에는 완성 결과입니다. 같은 도형끼리 클릭할 경우, 채워지며, 틀린 경우, 다시 퍼즐이 돌아가는 것을 확인할 수 있습니다.

클릭할 퍼즐 오브젝트 추가해주기

레드브릭 스튜디오 에셋을 사용해서 3가지 도형의 오브젝트를 추가해줍니다.
해당 오브젝트들은 퍼즐을 맞추기 위해 플레이어가 선택할 도형입니다.


shapes_puzzle_1

정답 퍼즐 오브젝트 추가해주기

앞에서 추가한 오브젝트를 복사해서 위치, 색상, 투명도를 조절해줍니다.
Material > Opacity (2번째) 값을 이용해 투명도 조절이 가능합니다.
해당 오브젝트은 플레이어가 선택한 도형들의 답이 되는 오브젝트입니다.


shapes_puzzle_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();
        });
    });
}

테스트 실행하기

이후 테스트 해보면, 처음 화면과 같이 작동하는 것을 확인하실 수 있습니다.
위와 같은 예제를 활용해서 아래와 같은 큐브 맞추는 게임 등을 만들 수 있습니다.


shapes_puzzle_3