javascript - CSS の配置の問題

Question

melonJSを使ってゲームを作っています。NPC の上にダイアログ ボックスを動的に配置したいと考えています。

全画面表示で、綺麗です。

ビューポートを縮小すると、位置が絶対的なままになり、見栄えが悪くなります。しかし、絶対的に配置しないと、NPC の座標に対して相対的に配置することができなくなります。

$("#dialogBox").css({top: game.data.currentNPC_y+50, left: game.data.currentNPC_x-50, position:'absolute'});

これを回避する方法はありますか？

---

編集：

以下を使用すると、コードは上記のようにスケーリングされませんが、少なくとも NPC の近くとキャンバス上にはまだあります。

        $("#dialogBox").css({
            top: game.data.currNPC_y+50, 
            left: game.data.currNPC_x-50, 
            position:'absolute'
        }); 

あなたが提案したコードを使用すると、キャンバスの外に表示されます。

        $("#dialogBox").css({
            position : "absolute",
            left     : (game.data.currentNPC_x - 50) * me.sys.scale.x,
            top      : (game.data.currentNPC_y - 500) * me.sys.scale.y
        });