トップビューのマーカーのx, y座標を座標変換してアイソメトリック座標へマッピングしたい

Question

実現したいこと

• canvasでトップビューとアイソメトリックビュー（クオータービュー）のグリッドマップを表示する。
• トップビューのマーカーのx, y座標を座標変換してアイソメトリック座標へマッピングしたい
• アイソメトリック上でも移動可能範囲の判定を行いエリアから出ないようにしたい
• トップ、アイソメトリック共に向かって左右に移動した際は対応した向きに変えたい（左右の2パターンのみで良い）

前提

Javascript, Vue, html, cssでwebコンテンツを作っています。
ただ、ゲーム関連の専門知識はありません。
アイソメ図の一枚絵の背景がありその特定の絵柄の範囲内のみDOMが移動可能。
タイルマップデータ（タイル素材、タイルマップエディタの書き出しデータ）はありません。

発生している問題

参考コードを元にトップビューとアイソメトリックビュー間の座標変換とマッピングを実装してみましたが、
移動方向の連動まではできているのですが、座標のオフセット処理がわからず座標がずれてしまっています。
borderOffsetの設定が原因と思われますが、
ここをアイソメトリックビューのグリッド開始座標で設定してみましたがこの値の求め方が間違っていそうなので
どのようにこの値を求めたらいいか、もしくは別の間違いがあるのか知りたいです。

該当のソースコード

動作確認用デモ

        /**
         * アイテムをアイソメトリック座標に描画
         */
        drawHeroIso() {
          let isoPt = { x: 0, y: 0 };
          let heroCornerPt = {
            x: this.marker.x,
            y: this.marker.y
          };
          console.dir(heroCornerPt);
          // 2Dマップからアイソメトリック座標を見つける
          isoPt = this.cartesianToIsometric(heroCornerPt.x, heroCornerPt.y);
          console.dir(isoPt);
          
          let heroWidth = 10;
          let heroHeight = 10;
          // こちらの値に何を設定すべきか、その求め方が理解できていない 
          let borderOffset = {
            x: this.area.x,
            y: this.area.y
          };
          this.testTarget.x = isoPt.x + borderOffset.x + heroWidth;
          this.testTarget.y = isoPt.y + borderOffset.y - heroHeight;
          console.dir(this.testTarget);
        },

        /**
         * デカルト座標からアイソメトリック座標に変換
         * 参考：https://jsfiddle.net/juwalbose/w1tnu9qc
         * @param {int} cartX デカルト座標 X
         * @param {int} cartY デカルト座標 Y
         */
        cartesianToIsometric(cartX, cartY) {
            console.dir(`cartX: ${cartX}, cartY: ${cartY}`);
            let tempPoint = { x: 0, y: 0 };
            tempPoint.x = cartX - cartY;
            tempPoint.y = (cartX + cartY) / 2;
            console.dir(`iso_x: ${tempPoint.x}, iso_y: ${tempPoint.y}`);
            return tempPoint;
        },

試したこと

参考コードの設定を見るとアイソメトリックビューの開始地点を設定しているように見えたのでarea.x, area.yを設定してみましたがそれでずれが生じていました。
どのようにこの値を求めたらいいか、もしくは別の間違いがあるのか知りたいです。

補足情報（FW/ツールのバージョンなど）

まだ調整が必要ですがcartesianToIsometricに渡す座標をミニマップ内での座標にしたら理想に近くなりました
https://codepen.io/merrymistake/pen/PogVOWM

Comments

[kotori_a]

minimapとisomwpで初期位置がずれる原因についてヒントですが、cartesianToIsometric関数の中でScaleを考慮して変換する必要があるのと、drawHeroIsoの中でthis.testTarget.x,yに、heroWidthとheroHeightをそのまま足している点です。
コードだとminimapはグリッド間隔tileW=50に対して0.3のスケールをかけて書いています。
一方cartesianToIsometricの中では、minimaの間隔が50である前提で変換しています。したがってcartesianToIsometricの中でもScaleを掛けないと、想定する移動量と異なる移動量に変換されてしまいます。
（動かす方向がずれないように見えるのは、方向の変換自体は想定通りになっているから）

[merry]

ありがとうございました。
各所でscaleを考慮する必要があること気づけました。
細かい微調整は必要ですがおおむね良さそうな動きになりました。

[merry]

コメントありがとうございます。ご指摘の内容を確認し試行錯誤ところ問題が解決しました。
ベストアンサーに選びたいので同じ内容を回答欄に投稿いただけますでしょうか？

[kotori_a]

回答を投稿しました。

Answer 1

minimapとisomapで初期位置がずれる原因についてヒントですが、

• cartesianToIsometric 関数の中で Scale を考慮して変換していない
• drawHeroIsoの中で this.testTarget.x, y に、heroWidth と heroHeight をそのまま足している

この点が原因です。

コードだと minimap はグリッド間隔 tileW(=50)に対して 0.3 のスケールをかけて書いています。
一方 cartesianToIsometric の中では、minimap の間隔が50である前提で変換しています。
したがって cartesianToIsometric の中でも Scale をかけないと、
想定する移動量と異なる移動量に変換されてしまいます。

（動かす方向がずれないように見えるのは、方向の変換自体は想定通りになっているから）

Comments

[merry]

回答ありがとうございます。
理想にだいぶ近づきました。
ベストアンサーに選ばせていただきました。