今日は「ラジオボタンライブラリを文字と絵の両対応に」を行いました。

以上です以上です以上です。

今日の作業内容を、イメージだけで伝えます。

何が変わったか分かりましたでしょうか？

ラジオボタンって、名称付けなくても選択内容(上記で言えば色)がはっきりしてれば大丈夫そうです。

これで、自家製ラジオボタンUIライブラリの汎用性が上がりました。

今日は以上です！

今日の作業は「ラジオボタンをライブラリ化する」です。

場所箇所や選択イメージを指定するだけで、簡単にラジオボタンが作成可能なライブラリを作成しました。

外見上の変化は一切ありませんが、今後のUI作成時の効率がめっちゃ上がると思います。

本当だよ。

今日はいつもより、より簡単ですが以上です！

今日の作業は「ラジオボタンを動作させる」です。

はい、クリックすると選択が切り替わるようになりました。

もちろん、UIの更新は最小範囲に抑え、スムーズに選択が切り替わります。

今日は以上です！

完全に軌道に乗りました。

ʕ•̫͡•ʕ*̫͡*ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ*̫͡*ʔ-̫͡-ʔ

デアゴスティーニ商法を利用した作業管理を初めてはや４週間、一日も欠かすことなく作業を継続し続けています。

YoutubeやFactorioを避けつつ、この調子で5週間目も作業していきます。

29日目：ラジオボタンを動作させる。
30日目：ラジオボタンをライブラリ化する。
31日目：ラジオボタンライブラリのタイトル有無対応。
32日目：ラジオボタンライブラリを文字と絵の両対応に。
33日目：色選択ラジオボタンで色を変える。
34日目：画面クリック時の動作選択ラジオを追加。
35日目：予備日(次の週の予定を立てる)

ʕ•̫͡•ʕ*̫͡*ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ*̫͡*ʔ-̫͡-ʔ

今日は「ラジオボタンのUIを作成する(配置だけ)」です。

色選択用のラジオボタンを追加しました。とりあえず赤、緑、青の３色です。

例によって配置しただけで、まだ動作はしません。

開発中、ずっと赤だけでテストしてたので、早く緑や青に変えてみたいです。

今日の作業はこれだけ！

今日はラジオボタンを作成しました。

一番左が未選択状態の、左から２つ目が選択状態のラジオボタンですね。

とりあえず色選択のラジオボタンを作ろうと思っていて、右３つは赤、緑、青の選択色となります。

この色の模様は何か気になったでしょうか？え？気になってない？

気になるよね？気になるよね？気になるよね？

お願いだから気になってください。

ヽ(｀д´)ﾉ うわーん

これはgliderです。

Wikipediaより引用：グライダー (glider) は、ライフゲームにおける代表的な移動物体である。ライフゲームにおいて最初に発見された移動物体であり、最小の移動物体でもある。

今日の作業は以上です！

今日の作業は「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);
        }
    }
〜略〜
}