今日の作業は「マウスがウィンドウ外に出た際の処理調整」です。
スライダー操作中にマウスがウィンドウ外に出ると、スライダーを”持ったまま”の状態が継続していまい、その後ウィンドウ外でマウスボタンを離してマウスカーソルをスライダー上に戻すと、マウスボタンを押していないのにスライダーを操作してる状態になってしまっていました。
そこで、ウィンドウ外にマウスカーソルが出た場合は、その時点のスライダー値を確定する処理を入れました。
細かい点ですが、操作上のイライラポイントを潰しました。
着実に作業は進んでいます。以上です。
今日はリファクタリングをしました。
リファクタリングとは、プログラミングにおいて、外部から見た動作を変えずにソースコードの内部構造を整理することです。
どう変わったか、一部イベント処理の変更前後をお見せします。
変更前のコード：
function handleMouseDown(event) {
let x = event.pageX - _canvasOffsetX;
let y = event.pageY - _canvasOffsetY;
〜略〜
if (_ui.vals.size.hitBtn(x, y)) {
// スライダーのつまみ
_ui.vals.size.touchStartBtn(x);
} else if (_ui.vals.size.hitDown(x, y)) {
// ダウン
if (_ui.vals.size.down(1)) {
_ui.create(_gl, _bFS);
_life = new SF_Life(_gl, _canvas, _canvas.width / _ui.vals.size.now, _canvas.height / _ui.vals.size.now);
}
} else if (_ui.vals.size.hitUp(x, y)) {
// アップ
if (_ui.vals.size.up(1)) {
_ui.create(_gl, _bFS);
_life = new SF_Life(_gl, _canvas, _canvas.width / _ui.vals.size.now, _canvas.height / _ui.vals.size.now);
}
} else if (_ui.vals.size.hitSlider(x, y)) {
// スライダーのどこか
if (_ui.vals.size.touchStart(x)) {
_ui.create(_gl, _bFS);
}
}
if (_ui.vals.gen.hitBtn(x, y)) {
// スライダーのつまみ
_ui.vals.gen.touchStartBtn(x);
} else if (_ui.vals.gen.hitDown(x, y)) {
// ダウン
if (_ui.vals.gen.down(1)) {
_ui.create(_gl, _bFS);
_updateTime = 1000.0 / _ui.vals.gen.now;
_updateElapsed = 0;
}
} else if (_ui.vals.gen.hitUp(x, y)) {
// アップ
if (_ui.vals.gen.up(1)) {
_ui.create(_gl, _bFS);
_updateTime = 1000.0 / _ui.vals.gen.now;
_updateElapsed = 0;
}
} else if (_ui.vals.gen.hitSlider(x, y)) {
// スライダーのどこか
if (_ui.vals.gen.touchStart(x)) {
_ui.create(_gl, _bFS);
}
}
〜略〜
}
変更後のコード
function handleMouseDown(event) {
let x = event.pageX - _canvasOffsetX;
let y = event.pageY - _canvasOffsetY;
〜略〜
for (let key in _ui.vals) {
if (void 0 != _ui.vals[key].touchMove) {
_ui.vals[key].touchMove(x, y);
}
}
〜略〜
}
各UIのクラスにtouchMoveメソッドを持たせて、処理を任せるような構成に変更しました。
外見上変わってないからって「サボってんじゃねえ！」と言ってはいけません。
リファクタリングしないプログラムなんて、ずっと掃除していないゴミ屋敷と一緒です。火がつけばあっと言う間に燃え広がりますよ？
・・・あれ？これ上手いこと言ったんじゃない？
今日の作業は以上です！
オン時↓
オフ時↓
以上です！
デアゴスティーニ商法を利用した作業管理を開始してから3週間が経ちました。
デアゴスティーニに習い、日々の作業量を最小にすることで、確実に作業に取り組めるようになりました。
１日１日の作業量が小さくても、３週間分も積み重ねればそこそこの作業量となって、UIの基本部分はかなり出来上がってきました。
この調子で４週間目も取り組んで行きます。
22日目：チェックボックスによりFPS表示のオンオフを行う。
23日目：UIのイベント処理を整理する。
24日目：マウスがウィンドウ外に出た際の処理調整。
25日目：UIの更新範囲を最小にしてパフォーマンスアップ。
26日目：ラジオボタンのテクスチャを作成する
27日目：ラジオボタンのUIを作成する(配置だけ)
28日目：予備日(次の週の予定を立てる)
以上です！
ʕ•̫͡•ʕ*̫͡*ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ*̫͡*ʔ-̫͡-ʔ
はい、見ての通り、今日はチェックボックスの追加を行いました。画面右中央に「FPS」の名前のチェックボックスがありますね。これはFPS表示の切り替えに使います。
今日は画面上に表示しただけで、実際に押しても機能しません。その部分は今後作業して機能を追加していきます。
あと、「GEN/SEC」(世代交代数/秒)のスライダーは、わかりにくいので「SPEED」に名称変更しました。
今日もサクッと終わりました。以上です！
ʕ•̫͡•ʕ*̫͡*ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ*̫͡*ʔ-̫͡-ʔ
今日の作業は「チェックボックスのテクスチャを作成する」です。
・・・以上です！
ʕ•̫͡•ʕ*̫͡*ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ*̫͡*ʔ-̫͡-ʔ
今日の作業は「世代交代の速度値をゲームに反映する」です。
世代交代の速度は1〜240 generation/sec の範囲で指定します。例えば60fpsの場合、値が240gen/secだと、1フレームで4世代も進みます。値が60gen/secならば、ちょうど1フレームで1世代進みます。値が1gen/secならば、1秒に1回ですね。
入念に作成したスライダーのおかげで、値の変更がとてもスムーズにいきます。ライフゲームが動いている状態でリアルタイムに変更を適用できます。
今日の作業は以上です！
ʕ•̫͡•ʕ*̫͡*ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ*̫͡*ʔ-̫͡-ʔ
今日の作業は「世代交代の速度を調整するスライダーを付ける」です。
3秒で終わりました。
スライダーのUIを部品化してあったので、次のような１行を追加するだけで終わりました。
JSやべえ。超楽だわ。
this.vals.gen = new Val(canvas, this.iconS, 60, 1, 240, “GEN／SEC”);
唯一悩んだのが、”1秒あたりの世代交代” generation per sec を、GPSと略すのか、それともちょっと長くなるけどGEN/SECにするかの選択でした。GPSは、あのGPSと勘違いされる恐れがあるのでGEN/SECにしました。
以上です！
ʕ•̫͡•ʕ*̫͡*ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ*̫͡*ʔ-̫͡-ʔ
今日の作業は「スライダーで変更したサイズ値をゲームに反映する」です。
途中、作業をしている最中にふとヤフオクを見てしまい、３時間くらい張り付いて入札していたため、危うく今回分の作業をすっぽかす寸前でした。１日の作業量が少ないのでなんとか今日中に終わりました。
(⁰̶̶̷ ˙̮ ⁰̴̷̷)
今まで苦労して作ったスライダーによって、ライフゲームのドットサイズがスムーズに変わるのには感動しました。
これでサイズ変更が自由自在です。今日の作業は以上です！
ʕ•̫͡•ʕ*̫͡*ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ*̫͡*ʔ-̫͡-ʔ
今日の作業は「テクスチャサイズを調整する」です。
テクスチャは1枚だけ使っていますが、ちょっとだけロードにもたつくことがあり、最長で３秒ほど画像が出ない場合があります。
そこでテクスチャサイズを小さくすることにしました。
元々のサイズが無駄に大きく、2048 * 2048 だったので、1/4 の 1024 * 1024 のサイズに変更しました。
サイズ変更後、座標データを調整して完了しました。
以上です！
ʕ•̫͡•ʕ*̫͡*ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ*̫͡*ʔ-̫͡-ʔ