デアゴスティーニ商法作業管理での24日目作業

今日の作業は「マウスがウィンドウ外に出た際の処理調整」です。

スライダー操作中にマウスがウィンドウ外に出ると、スライダーを”持ったまま”の状態が継続していまい、その後ウィンドウ外でマウスボタンを離してマウスカーソルをスライダー上に戻すと、マウスボタンを押していないのにスライダーを操作してる状態になってしまっていました。

そこで、ウィンドウ外にマウスカーソルが出た場合は、その時点のスライダー値を確定する処理を入れました。

細かい点ですが、操作上のイライラポイントを潰しました。

着実に作業は進んでいます。以上です。

デアゴスティーニ商法作業管理での23日目作業

今日はリファクタリングをしました。

リファクタリングとは、プログラミングにおいて、外部から見た動作を変えずにソースコードの内部構造を整理することです。

どう変わったか、一部イベント処理の変更前後をお見せします。

変更前のコード:

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メソッドを持たせて、処理を任せるような構成に変更しました。

外見上変わってないからって「サボってんじゃねえ!」と言ってはいけません。

リファクタリングしないプログラムなんて、ずっと掃除していないゴミ屋敷と一緒です。火がつけばあっと言う間に燃え広がりますよ?

・・・あれ?これ上手いこと言ったんじゃない?

今日の作業は以上です!

デアゴスティーニ商法作業管理での21日目作業

デアゴスティーニ商法を利用した作業管理を開始してから3週間が経ちました。

デアゴスティーニに習い、日々の作業量を最小にすることで、確実に作業に取り組めるようになりました。

1日1日の作業量が小さくても、3週間分も積み重ねればそこそこの作業量となって、UIの基本部分はかなり出来上がってきました。

この調子で4週間目も取り組んで行きます。

22日目:チェックボックスによりFPS表示のオンオフを行う。
23日目:UIのイベント処理を整理する。
24日目:マウスがウィンドウ外に出た際の処理調整。
25日目:UIの更新範囲を最小にしてパフォーマンスアップ。
26日目:ラジオボタンのテクスチャを作成する
27日目:ラジオボタンのUIを作成する(配置だけ)
28日目:予備日(次の週の予定を立てる)

以上です!

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

デアゴスティーニ商法作業管理での20日目作業

はい、見ての通り、今日はチェックボックスの追加を行いました。画面右中央に「FPS」の名前のチェックボックスがありますね。これはFPS表示の切り替えに使います。

今日は画面上に表示しただけで、実際に押しても機能しません。その部分は今後作業して機能を追加していきます。

あと、「GEN/SEC」(世代交代数/秒)のスライダーは、わかりにくいので「SPEED」に名称変更しました。

今日もサクッと終わりました。以上です!

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

デアゴスティーニ商法作業管理での18日目作業

今日の作業は「世代交代の速度値をゲームに反映する」です。

世代交代の速度は1〜240 generation/sec の範囲で指定します。例えば60fpsの場合、値が240gen/secだと、1フレームで4世代も進みます。値が60gen/secならば、ちょうど1フレームで1世代進みます。値が1gen/secならば、1秒に1回ですね。

入念に作成したスライダーのおかげで、値の変更がとてもスムーズにいきます。ライフゲームが動いている状態でリアルタイムに変更を適用できます。

今日の作業は以上です!

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

デアゴスティーニ商法作業管理での17日目作業

今日の作業は「世代交代の速度を調整するスライダーを付ける」です。

3秒で終わりました。

スライダーのUIを部品化してあったので、次のような1行を追加するだけで終わりました。

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にしました。

以上です!

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

デアゴスティーニ商法作業管理での16日目作業

今日の作業は「スライダーで変更したサイズ値をゲームに反映する」です。

途中、作業をしている最中にふとヤフオクを見てしまい、3時間くらい張り付いて入札していたため、危うく今回分の作業をすっぽかす寸前でした。1日の作業量が少ないのでなんとか今日中に終わりました。

(⁰̶̶̷ ˙̮ ⁰̴̷̷)

今まで苦労して作ったスライダーによって、ライフゲームのドットサイズがスムーズに変わるのには感動しました。

これでサイズ変更が自由自在です。今日の作業は以上です!

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

デアゴスティーニ商法作業管理での15日目作業

今日の作業は「テクスチャサイズを調整する」です。

テクスチャは1枚だけ使っていますが、ちょっとだけロードにもたつくことがあり、最長で3秒ほど画像が出ない場合があります。

そこでテクスチャサイズを小さくすることにしました。

元々のサイズが無駄に大きく、2048 * 2048 だったので、1/4 の 1024 * 1024 のサイズに変更しました。

サイズ変更後、座標データを調整して完了しました。

以上です!

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