v0.45以降、ミニマップの座標を動かせないバグ

https://gyazo.com/dc74ea39a23d89e115a30ba4d6f333ae

code:js

var camera = new Camera(330, 0, 150, 100) // 新しくカメラを作る（X,Y,横幅、縦幅）

こう書かれているので、正しくはミニマップが画面右に来ているべき

0.45.3以前ではそうなっていた

https://gyazo.com/474665a1fc9f5bd9f82e521d72dbce89

v0.45.4で何があった？

コードを書き換えた箇所がないか調べる＆それぞれのhashでビルドして動作確認

Babel monorepoのバージョンアップのみ

このcommit hashの時点で、Node.js v12ではnpm installできなかった

Node.js v14にしてnpm ciしたところ、問題が再現できた

つまり原因はNodeのバージョンかBabelのバージョンアップのどちらかが引き起こしている

ビルドに使うNode.jsのバージョンを14に変更

TypeScriptのバージョンアップのみ

ひとつ手前のバージョンのcommit hashに戻って試す

問題は起きなかった

table:こういう状況

Node.js v12 Node.js v14

Babel v7.5 OK ✅ OK ✅

Babel v7.15 ビルド❌ バグ🐛

Webpackのバージョンが怪しい

table:Webpack Version

Node.js v12 Node.js v14

Babel v7.5 4.43.0 4.43.0

Babel v7.15 - 5.56.0

では、Node.js v14 / Babel v7.15 / Webpack 4.43.0 の組み合わせだとどうなる？

- options has an unknown property 'disableHostCheck'. These properties are valid:

object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

webpack.config.jsの書き方がまるっきり変わっていて、全然ビルドが通らない

そもそもWebpack v5にしたのはいつなんだ？なんでBabelのupdateの共に変わっているんだ…？

HEADに戻ってきたはずなのに、npm installが出来ない…😭

node-pre-gyp難しすぎる

CIと同じバージョンを使ってもinstall出来ない！！！

一瞬でinstall終わった…

コレ使いたい...🥺

Node.js v14を使うと手元でもinstallできたので、v14を使うことにした

code:camera.ts

console.log(r.x, r.y, r.width, r.height, 0, 0, this.w, this.h);

this.image.context.drawImage(

Hack.map._surface._element,

r.x,

r.y,

r.width,

r.height,

0,

0,

this.w,

this.h

);

log

camera.ts:304 0 16 480 320 0 0 480 320

camera.ts:304 0 0 1500 1000 0 0 150 100

どちらかはメインカメラだけど、どちらかは新しく作ったカメラで、そっちはx=330のはず

バグる前のbranchのlog

camera.ts:338 0 16 480 320 0 0 480 320

camera.ts:338 0 0 1500 1000 0 0 150 100

同じだったorz

code:js

const { cvsRender } = camera;

camera.cvsRender = (context) => {

camera._x = camera.x;

camera._y = camera.y;

camera._dirty = true;

cvsRender.call(camera, context);

}

これをゲームのコードに追加すれば動くとのこと

試してみたら本当に動いた！

console.log(camera._x, camera.x) // (0, 330)

なぜ代入されない？

code:js

x: {

get: function() {

return this._x;

},

set: function(x) {

if (this._x !== x) {

this._x = x;

this._dirty = true;

}

}

}

code:camera.ts

class Camera extends enchant.Sprite {

...

public x: number;

public y: number;

この２行をコメントアウトしたところ、動いた

試しにbabeljs.io/replしてみたところ、このコードは

code:js

var Camera = function Camera() {

_defineProperty(this, "x", void 0);

};

みたいな感じになるらしい。こりゃ動かないわ…

というわけで、原因特定

master

v0.47.5

0.46.x

v0.46.5

0.45.x

v0.45.9