나는 이런 물건을 만들고 있다.

https://playcanv.as/b/iAPwWXqY/
※ 본 해설보다 개발이 앞선 점 양해 부탁드립니다.

이건 게임이 아니야.

성대를 조작할 수 있는 곳에 왔지만 게임처럼 해야 한다.
어쨌든 미로를 만들어 보자.(Tetto)
JSON 파일로 벽, 시작, 목표의 설정을 정의하고 게임을 시작할 때 프로그램을 파일로 읽어들여 미로를 만든다.

미로 데이터(JSON)

JSON 파일로 미로를 정의합니다.
12×12칸짜리 격자지 위에 정사각형을 놓는 것을 상상해 보세요.
JSON 파일

세계 좌표에 설치된 벽의 위치

송어의 수량(종횡, 이번에는 12×12)

1칸 크기

송어의 배치(벽, 기점, 종점, 아무것도 없음)

매트릭스

{
    "startPosX":1,
    "startPosZ":1,
    "offsetX":-24,//マスを置き始めるワールドX座標
    "offsetZ":-24,//マスを置き始めるワールドZ座標
    "unitX":12,//マスの数（X軸方向）
    "unitZ":12,//マスの数（Z軸方向）
    "sizeX":4,//マスの大きさ（X軸方向）
    "sizeZ":4,//マスの大きさ（Z軸方向）
    "matrix":"999999999999910000000009900999999009909900000009900099999999909000000009909099099999909090099009909090000009909999009909900000900929999999999999"//行列
}

'행렬'은 칸의 배치 자체를 가리키는데, 원래는

999999999999
910000000009
900999999009
909900000009
900099999999
909000000009
909099099999
909090099009
909090000009
909999009909
900000900929
999999999999

이런 숫자는 한 줄로만 늘어섰다.
9는 벽, 1은 시작점, 2는 끝점, 0은 아무것도 없다.
ASSETS의 src 디렉토리에서 미리 몇 개를 만듭니다.

프로그램을 시작할 때 이 설정을 불러와서 미로를 만듭니다.

편집기에서 재료 준비하기

프로그램이 미로를 만들 때 사용하는 소재는 편집기에서 만듭니다.
templates 디렉터리를 만들고 그 중에서'wall','start','goal'을 미리 만듭니다.

초록색 원통은 시작점, 빨간 옥수수는 끝점, 회색 입방체는 벽이다.
templates 바로 아래의 실체는 프로그램에서 사용하는 복사원본으로만 사용되기 때문에,templates의 Enabled를 닫고 숨기십시오.

생성 프로그램 만들기

Root에 Script 구성 요소를 추가합니다.

'<>Root'의 표시라고 생각합니다.
그런 다음 색인에 "createMaze"라는 이름의 Script를 만듭니다.


"createMaze.js"를 인코딩합니다.
먼저 스크립트 속성 "mazeData"를 만듭니다.
createMaze.js

CreateMaze.attributes.add('mazeData', {
    type: 'asset',
    assetType: 'json'
});

속성이 완성되면 편집기에서Parse를 진행하면 마즈데이터 항목이 나타나서 ASSETS의 JSON 파일을 드래그합니다.

여기에 설정된 JSON 파일은 게임 시작 시 프로그램에서 읽힙니다.
다음은 미로 생성 부분이다.
createMaze.js

// initialize code called once per entity
CreateMaze.prototype.initialize = function() {
    // JSONデータ取得
    var mazeData = this.mazeData.resource;

    // templates以下の素材（非表示）のインスタンスを取得しておく
    var templates = this.app.root.findByName('templates');
    var wall = templates.findByName('wall');
    var start = templates.findByName('start');
    var goal = templates.findByName('goal');

    //スタート位置を格納
    var startPos = new pc.Vec3();

    //マスの数だけループして素材を配置していく
    for (var z = 0; z < mazeData.unitZ; z++) {
        for (var x = 0; x < mazeData.unitX; x++) {
            switch(mazeData.matrix.charAt(mazeData.unitZ * z + x)){//if(Math.random() > 0.5){
                case "9":
                    // wallをクローンします
                    var w = wall.clone();
                    w.setPosition(
                        mazeData.offsetX + x * mazeData.sizeX + mazeData.sizeX/2, 
                        0, 
                        mazeData.offsetZ + z * mazeData.sizeZ + mazeData.sizeZ/2);
                    this.app.root.addChild(w);
                    break;
                case "2":
                    // goalをクローンします
                    var g = goal.clone();
                    g.setPosition(
                        mazeData.offsetX + x * mazeData.sizeX + mazeData.sizeX/2, 
                        0, 
                        mazeData.offsetZ + z * mazeData.sizeZ + mazeData.sizeZ/2);
                    this.app.root.addChild(g);
                    break;
                case "1":
                    // startをクローンします
                    var s = start.clone();
                    s.setPosition(
                        mazeData.offsetX + x * mazeData.sizeX + mazeData.sizeX/2, 
                        0, 
                        mazeData.offsetZ + z * mazeData.sizeZ + mazeData.sizeZ/2);

                    // シーンの階層にタイルを追加します。
                    this.app.root.addChild(s);

                    //プレイヤー用にスタート位置を取得しておく
                    startPos = s.getPosition();

                    break;

            }
        }
    }

    //スタート位置にサンディちゃんを置く
    var mainCharacter = this.app.root.findByName('Player');
    startPos.y = startPos.y+1;
    mainCharacter.rigidbody.teleport(startPos);
};

성대를 기점의 대상 위치로 모시겠습니다.
어째서!

왼쪽 상단에서 시작하여 오른쪽 하단이 끝점입니다.

화면의 2점(유저의 엉덩이를 쫓는 카메라와 굽어보는 카메라)

이러다 내려다보는 2D 게임이나 다름없다.
3D를 만들었기 때문에 카메라를 늘리고 TPS 시점을 늘렸다.
편집기에서 카메라 엔티티를 추가합니다.

포인트는 성대의 자실체로서 뒤에 놓인다.
카메라를 성대의 뒤에 고정시키면 성대의 엉덩이에 자주 붙인다.(이 변태☆)
Position은 [X:0, Y:2.5, Z:5, Rotation은 [X:10, Y:180, Z:0]입니다.
카메라 두 개의 Viewport을 구하려고 합니다.
초점이 흩어진 카메라는 수평 방향에서 두 개를 배열하는데 각각 [X:0.5, Y:0, W:0.5, H:1이다. 새 카메라는 수평 방향에서 [X:0, Y:0, W:0.5, H:1]이다.

좀 멍청한 광경이지만 화면은 두 부분으로 나뉘어져 있다.
엉덩이... 안 보이네.
다음은 직접 인코딩하세요(웃음)