完全に軌道に乗りました。
ʕ•̫͡•ʕ*̫͡*ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ*̫͡*ʔ-̫͡-ʔ
デアゴスティーニ商法を利用した作業管理を初めてはや４週間、一日も欠かすことなく作業を継続し続けています。
YoutubeやFactorioを避けつつ、この調子で5週間目も作業していきます。
29日目：ラジオボタンを動作させる。
30日目：ラジオボタンをライブラリ化する。
31日目：ラジオボタンライブラリのタイトル有無対応。
32日目：ラジオボタンライブラリを文字と絵の両対応に。
33日目：色選択ラジオボタンで色を変える。
34日目：画面クリック時の動作選択ラジオを追加。
35日目：予備日(次の週の予定を立てる)
ʕ•̫͡•ʕ*̫͡*ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ*̫͡*ʔ-̫͡-ʔ
今日は「ラジオボタンのUIを作成する(配置だけ)」です。
色選択用のラジオボタンを追加しました。とりあえず赤、緑、青の３色です。
例によって配置しただけで、まだ動作はしません。
開発中、ずっと赤だけでテストしてたので、早く緑や青に変えてみたいです。
今日の作業はこれだけ！
今日の作業は「UIの更新範囲を最小にしてパフォーマンスアップ」です。
今までは何かするたびにUI全体を再描画していましたが、変更した箇所だけ更新するようにしました。
例えばスライダーならメモリの位置と数値、チェックボックスならチェック部分だけですね。
WebGLの「bufferSubData」を使い、最小のデータのみGPUに送って更新することが出来ました。
スライダーがつるっつるつるっつる動くようになりました。
以上です！
今日の作業は「マウスがウィンドウ外に出た際の処理調整」です。
スライダー操作中にマウスがウィンドウ外に出ると、スライダーを”持ったまま”の状態が継続していまい、その後ウィンドウ外でマウスボタンを離してマウスカーソルをスライダー上に戻すと、マウスボタンを押していないのにスライダーを操作してる状態になってしまっていました。
そこで、ウィンドウ外にマウスカーソルが出た場合は、その時点のスライダー値を確定する処理を入れました。
細かい点ですが、操作上のイライラポイントを潰しました。
着実に作業は進んでいます。以上です。
今日はリファクタリングをしました。
リファクタリングとは、プログラミングにおいて、外部から見た動作を変えずにソースコードの内部構造を整理することです。
どう変わったか、一部イベント処理の変更前後をお見せします。
変更前のコード：
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」に名称変更しました。
今日もサクッと終わりました。以上です！
ʕ•̫͡•ʕ*̫͡*ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ*̫͡*ʔ-̫͡-ʔ
今日の作業は「チェックボックスのテクスチャを作成する」です。
・・・以上です！
ʕ•̫͡•ʕ*̫͡*ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ*̫͡*ʔ-̫͡-ʔ