스니펫VR예제알맞은 순서로 눌려야 풀리는 퍼즐

알맞은 순서로 눌려야 풀리는 퍼즐 만들기

VR 콘텐츠에서 많이 사용되는 알맞은 순서로 눌려야 풀리는 퍼즐을 만들어봅시다.


click-in-order

위에는 완성 결과입니다. 숫자가 적힌 박스를 눌려 알맞은 순서로 누를 경우, 모든 박스가 사라집니다.
반대로 틀렸을 경우, 다시 비밀번호가 리셋됩니다.

박스 오브젝트 추가하기

레드브릭 스튜디오 내 에셋을 활용해서 박스를 4개 만들어 줍니다.


Touch-puzzle-in-order_1

표시해줄 수 있는 UI 오브젝트 추가하기

1번째 My Asset 버튼을 누르고 2번째 Upload 버튼을 눌려 3번째처럼 원하는 이미지를 가져와 줍니다.
그다음, 4번째 가져온 이미지를 누르면 아래 화면과 같이 이미지가 오브젝트로 들어간 것을 확인할 수 있습니다.


Touch-puzzle-in-order_2

오브젝트 UI를 통해 표시해주기

가져온 이미지를 위치와 사이즈를 알맞게 조정해줍니다.
위와 같은 방법을 통해 사진 2번째와 같이 박스의 번호, 누른 것을 표시해줄 비밀번호 UI, 힌트 UI 를 만들어줄 수 있습니다.


Touch-puzzle-in-order_3

아래와 같은 스크립트를 작성해줍니다.

이때, 위에서 제작한 퍼즐 박스 오브젝트의 이름과 UI 오브젝트 이름을 아래 스크립트를 참고해서 바꿔주셔야 합니다.
(password1, password2 … puzzle1, puzzle2 …)

// 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 puzzles = []; // 퍼즐 박스 오브젝트 배열
const answer = [1, 0, 2, 3]; // 정답
 
let puzzleAnswer = []; // 현재 입력한 퍼즐 정답 배열
let passwordsUI = []; // 퍼즐 UI 오브젝트 배열
let currentClickNum = 0; // 현재 입력한 비밀번호 길이값
let isChecking = false; // 비밀번호 확인 중인지 확인하는 변수
 
function Start() {
    // 비밀 번호 UI 오브젝트를 배열에 저장하고 처음에는 안 보이게 설정해줍니다.
    for(let i=1; i<=4; i++){
        let ui = WORLD.getObject("password" + i);
        ui.visible = false;
        passwordsUI.push(ui);
    }
    // 퍼즐 박스 오브젝트 배열에 저장하기
    for(let i=1; i<=4; i++){
        let object = WORLD.getObject("puzzle" + i);
        puzzles.push(object);
    }
    puzzles.forEach((puzzle, index) => {
        // 각 퍼즐 박스가 클릭될 때마다
        puzzle.onClick(() => {
            if(isChecking) return;
 
            puzzleAnswer.push(index); // 배열에 저장하고
            CheckAnswer(); // 정답 확인하기
            // 비밀번호 * UI 보이게 설정
            passwordsUI[currentClickNum].visible = true;
            currentClickNum++;
            if(currentClickNum === 4){
                currentClickNum = 0;
            }
        });
    });
 
    Init();
}
 
function Init(){
    puzzleAnswer = [];
}
 
// 정답 확인하기
function CheckAnswer(){
    // 4자리가 찼을 경우에만, 확인
    if(puzzleAnswer.length >= 4){
        console.log(puzzleAnswer);
        let isTrue = true;
 
        // 다 일치하는지 확인
        answer.forEach((ans, index) => {
            if(puzzleAnswer[index] != ans){
                isTrue = false;
            }
        });
 
        // 다 일치하면
        if(isTrue){
            // 퍼즐 박스 안 보이게 설정
            puzzles.forEach((obj) => {
                obj.visible = false;
            });
        }else{
            // 일치하지 않으면
            // 현재까지 입력한 비밀번호 배열 리셋 및 비밀번호 * UI 안 보이게 설정
            puzzleAnswer = [];
            isChecking = true;
            setTimeout(() => {
                passwordsUI.forEach((ui) => {
                ui.visible = false;
                });
                isChecking = false;
            }, 500);
        }
    }
}

테스트 실행하기

이후 테스트 해보면, 처음 화면과 같이 작동하는 것을 확인하실 수 있습니다.