toioゲーム改造（その３）、一応、完成

以下のつづきです。一応、完成しました。

月曜日からずーっと出勤していまして。。。理由は制作環境（プロジェクタとかtoioとか）が研究室にしかないからです。そんなに大きくないので自宅に持って帰ってもいいんですが家が狭いので置く場所もないし作業する場所もないので研究室になってしまう感じです。

ちなみにお盆も明けたし出勤するなんか当たり前やろ！っていう声も聞こえてきそうなのでちょっと補足ですが。大学教員は夏休みに出てくる人はそう多くないです。自宅や他の研究機関とか好きな場所で作業していることでしょう。わかりませんけど。

特に情報系の教員はネットとPCがあれば研究できる人が多いので、死ぬほど暑いところにわざわざ出かける必要がありません。ということです。

で、やったことを書いておきます。自分のメモです。

まず、toioの頭？を作りました。素のtoioでも十分かわいいのですが、やはり今回は モモとミドリのバトル なのでtoioを見たときにどっちがモモかミドリか区別できるようにした方がいいなと直感的に思ったんです。

toioのヘッド部分はLEGOプロックがマウントできるように作られているんですが、そこにまずベースとなるものをデザインする必要があります。ネットを調べると以下のSTLを作っている方がいたのでそこから拝借しました。

www.thingiverse.com

このベースにちょっとした頭をつけました。こんな感じです。もっと飾りを付けたかったのですが印刷したときにうまく出力できずシンプルなものにしました。

で、これをM5で印刷しながら、作業を進めていきました。ちなみに以下は王冠をつけたけど見事に印刷失敗したやつです💦　アナログってほんと大変です。ITばかりやっているとこういう苦労を忘れがちですが。物理世界を相手にするとうまくいかないことの方が多いですね。

あとはリザルト画面です。これもまあまあうまくできました。以前、つぶやきProcessingとかで作ったことがあるスケッチを利用しました。こういう自分で欲しい表現を作り置きしておくといいですね。いざというときに。はい。

あと、Scratchで取得したtoioの座標をProcessingに送信するためのChrome拡張を作ったのですが、これまで使ってきたやつは接続するときにイチイチ拡張機能を押さなければなりませんでした。ProcessingがWebSocketのサーバーになっているのでProcessingを停止するたびにコネクションが切れちゃうんです。これだけ書いてもわからんですよね。。。とりあえずメモなので。

で、もしコネクションが切れていたらリトライするように拡張機能を書き換えました。書いても誰も得しないと思いますが、とりあえず概要だけコードを書いておきます。参考になる人がもしかするといるかも、ということで。

function connect() {
    if (typeof ws___ !== 'undefined') {
        if (ws___.readyState == 3) { //CLOSEだったら（接続失敗したか、切断後か）
            ws___.close(); //念の為のclose（たぶん意味はない）
            connect2(); //再接続リトライ
        }
    } else { //初回接続のとき
        connect2(); //再接続リトライ
    }
}

function connect2() {
    ws___ = new WebSocket("ws://localhost:8080");
    ws___.onopen = function (e) {
        id___ = setInterval(function () {
            const x1 = document.querySelector("body > div.index_app_3Qs6X > div > div.gui_body-wrapper_-N0sA.box_box_2jjDp > div > div.gui_stage-and-target-wrapper_69KBf.box_box_2jjDp > div.stage-wrapper_stage-wrapper_2bejr.box_box_2jjDp > div.stage-wrapper_stage-canvas-wrapper_3ewmd.box_box_2jjDp > div > div.stage_stage_1fD7k.box_box_2jjDp > div.stage_monitor-wrapper_2w6m8.box_box_2jjDp > div > div > div:nth-child(1) > div > div > div > div.monitor_value_3Yexa");
 （省略）
            ws___.send(parseInt(x1.innerText) + "," + parseInt(y1.innerText) + "," + parseInt(x2.innerText) + "," + parseInt(y2.innerText));
        }, 100);
    }
    ws___.onclose = function (e) {
        clearInterval(id___);
    }
}

setInterval(connect, 5000);

これでとりあえずProcessingを再起動してもChrome拡張の接続状態を気にする必要がなくなりました。

あとは、ゲーム開始するときにいちいちMacとかScratchを操作しなければならないのは面倒なので（せっかくtoioを使って物理世界のゲームにしている意味がなくなる）、toioを所定の位置においたらゲームを開始するようにしました。下図のピングとミドリの枠のことですね。ここにtoioを置くと始まります。