透視投影時反轉z軸

Question

我正在製作節奏遊戲。但我沒有使用節拍器來計算屏幕上的音符位置（遊戲界面）。我所擁有的是帶有筆記貼圖的文件，與字幕文件非常相似。

問題是，當我以透視方式投影筆記時，筆記未正確顯示。我似乎已經倒置了Z軸，我無法改變它。我想知道如何正確更改軸，因爲。或者如果有人可以用其他解決方案來幫助我，我將不勝感激。我嘗試了不同的東西，但我無法正確顯示筆記。

Here is the fiddle，以及我執行透視計算的功能。

function updateNotes() { 
    currentPosition = (sound.seek() * 1000); 

    notes.forEach(function(note, index) { 
    var notePosition = (currentPosition * noteSpeed) - ((note.position * noteSpeed) - deadLine); 

    if (notePosition > offScreenY && notePosition < height) { 
    var ball = new Ball3d(5, '#000000'); 
    var scale = fov/(fov + notePosition); 
    console.log(notePosition); 
    ball.x = halfWidth; 
    ball.y = halfHeight + notePosition * scale; 
    ball.scaleX = ball.scaleY = scale; 
    ball.draw(context); 
    balls.push(ball); 
    } else { 
    // elimino la nota 
    balls.splice(index, 1); 
    } 
    }); 
} 

在此先感謝。

Answer 1

z軸沒有倒置，音符是從上到下的，但它們看起來好像越來越遠，因爲它們縮小了，所以你必須調整你的縮放比例。使用var scale = (fov + notePosition)/fov;時，看起來更像是他們正在向用戶走來，但您必須稍微調整一下您的配方，才能讓它看起來更美觀。

// init variables 
 
    var canvas = document.getElementById('canvas'), 
 
    context = canvas.getContext('2d'), 
 
    width = canvas.width = window.innerWidth, 
 
    height = canvas.height = window.innerHeight, 
 
    halfWidth = width/2, 
 
    halfHeight = height/2, 
 
    deadLine = height - 100, 
 
    fov = 250, 
 
    offScreenY = -100, 
 
    currentPosition = 0, 
 
    balls = [], 
 
    noteSpeed = 0.3, 
 
    animId; 
 

 
    var sound = new Howl({ 
 
    src: ['https://rawcdn.githack.com/noeszc/atwood/master/assets/sounds/mario.ogg'], 
 
    onload: function(){ setup(); }, 
 
    onend : function(){ stop(); } 
 
    }); 
 

 
    function setup(){ 
 
    sound.play(); 
 
    sound.mute(); 
 
    drawDeadLine(); 
 
    gameLoop(); 
 
    } 
 

 
    function gameLoop() { 
 
    animId = requestAnimationFrame(gameLoop, canvas); 
 
    context.clearRect(0, 0, width, height); 
 
    updateNotes(); 
 
    drawDeadLine(); 
 
    } 
 

 
    function updateNotes() { 
 
    currentPosition = (sound.seek() * 1000); 
 

 
    notes.forEach(function(note, index) { 
 
     var notePosition = (currentPosition * noteSpeed) - ((note.position * noteSpeed) - deadLine); 
 

 
     if (notePosition > offScreenY && notePosition < height) { 
 
     var ball = new Ball3d(5, '#000000'); 
 
     var scale = (fov + notePosition)/fov; 
 
     ball.x = halfWidth; 
 
     ball.y = halfHeight + notePosition * scale; 
 
     ball.scaleX = ball.scaleY = scale; 
 
     ball.draw(context); 
 
     balls.push(ball); 
 
     } else { 
 
     // elimino la nota 
 
     balls.splice(index, 1); 
 
     } 
 
    }); 
 
    } 
 

 
    // dibuja la linea base donde deben llegar las notas al ritmo 
 
    function drawDeadLine() { 
 
    context.beginPath(); 
 
    context.moveTo(0, deadLine); 
 
    context.lineTo(width, deadLine); 
 
    context.stroke(); 
 
    } 
 

 
    function stop() { 
 
    context.clearRect(0, 0, width, height); 
 
    cancelAnimationFrame(animId); 
 
    drawDeadLine(); 
 
    console.log('======= end music ========='); 
 
    console.log(balls); 
 
    }

body { 
 
    margin: 0; 
 
} 
 
canvas { 
 
    display: block; 
 
}

<script src="https://rawcdn.githack.com/noeszc/atwood/master/scripts/ball3D.js"></script> 
 
<script src="https://rawcdn.githack.com/noeszc/atwood/master/scripts/notes.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.2/howler.min.js"></script> 
 
<canvas id="canvas"></canvas>