RPGツクールから自宅のWEBカメラを操作する

気は確かか？とか言われそうですが確かです。

昨今、あらゆる技術やサービスの敷居か下がってきていると感じたので、それらを組み合わせて何かできないかと考えた結果、このようなことになってしまいましたｗ

本件で使用した主なツールは以下のようなものです。

	■ハードウェア Raspberry Pi 3
	■サーバーソフトウェア Node-RED
	■ゲーム作成ツール RPGツクールMV

いずれも学習コストの低さが売りのツールなので、マニュアルとかを見ればすぐに扱えるようになると思います。
難易度的にも差はないと思うので、既にどれかひとつでも扱えるのなら、他のツールも余裕なはずです。
つまり、もしあなたがツクールでゲームを作れる根性があるのなら Raspberry Pi と Node-RED を駆使した IoT（モノのインターネット）くらい余裕な時代になったわけですよ！（暴論）

ラズパイとウェブカメラと百均のスピーカーとカービィとカービィ

出来上がったモノの紹介

ゲーム内で然るべき操作をすると、自宅のウェブカメラが撮影を行い、ゲーム上でその写真を確認することができます。

再現版ゲーム起動（PC・スマホ）

実動版を公開しても良かったのですが、Raspberry Pi で他のこともやりたいし、いつまで自宅で動かしてるかも分からないので、サーバー処理だけ除いたモノを公開しています。

とてもよくわかる構成と撮影の流れ

私が渾身の力を込めて描いた構成図をご覧ください。

わ　け　わ　か　ら　ん　ｗ
一応説明いたしますと、インターネットより上が自宅です。
Raspberry Pi がサーバーで、その中で Node-RED が動いていて、ゲームやら画像やらをプレイヤーに配信する、という構成で、ゲームからは以下のような流れで撮影が行われます。

1. プレイヤーがゲーム内で撮影ボタンを押す
2. すると、ゲームから Node-RED に XMLHttpRequest で HTTPリクエストが発生
3. リクエストを受け取った Node-RED が撮影と画像の更新の Linux コマンドを実行
4. その後、プレイヤーが写真を見るイベントを実行したら、ゲームのエラー表示要素「ErrorPrinter」を利用して画像を表示する

あ、図中のRPGツクールMVとは、RPGツクールMVで作られたHTML5形式のゲームということですよ。念のため。

もうちょっと詳しく

ここからは「おいらもやってみたい！」とかいう奇特な方へ向けた情報をダラダラと提供します。

それぞれどうやって入手するの？

2017年9月現在の情報です。

Raspberry Pi

買いましょう。
ラズパイ正規総代理店のアールエスコンポーネンツと契約を結んだ個人向けの正規代理店の Raspberry Pi Shop by KSY（ややこしいｗ）での購入をおすすめします。（アフィとか無いから素直にクリックしとけ）
Amazon などと比較しても安いことが多いです。

私は Raspberry Pi 3（5,000円くらい）を使用しましたが、恐ろしく安い Raspberry Pi Zero（700円くらい）とかでも可能なはずです。
初心者はACアダプターなども含まれるセットを買うのが無難です。

流行っているのでネットや本で多くの情報を得ることができます。
でも古い情報には注意です。（OSガー、ニホンゴガー、とかいう問題はもはや過去のもの）
あと、やたらコマンドを打たせたがるページが多いですが、ほとんどの作業は GUI 上でも行なえるので、CLI 恐怖症の人も安心だぞ（ちょっとウソです）

ちなみに公式サイトはこちら（英語が読めない人は Chrome の翻訳機能で頑張れ）

Node-RED

ラズパイの標準 OS 「Raspbian」に、もとから含まれています。
詳しくはこちら→Node-RED日本ユーザ会 : ドキュメント
比較的情報が少ないのがネック。

RPGツクールMV

税別7,980円。買いましょう。
ただし、まれに Steam で 80%OFF とかしているため買い時が難しいですｗ
詳しくはこちら→RPGツクールMV

ゲーム（ツクール）からどうやって XMLHttpRequest を送っているの？

PNDK_HttpRequest プラグインを利用しています。

◆プラグインコマンド：PNDK_HR clear
◆プラグインコマンド：PNDK_HR send http://sample.com:1880/shoot/

という感じに、リクエストを投げっぱなしにしてるだけです。

どうやってゲーム内に画像を表示しているの？

ぶっちゃけゲーム内じゃないんですよね。
ツクールは元々、エラー表示のために「ErrorPrinter」という ID をもつ ＜p＞ 要素が HTML 内に用意されているので、そこに ＜img＞ 要素を突っ込んでるだけです。
イベントコマンドの「スクリプト」で直接以下のような javascript を書いています。
【注】このBlogの制約で＜＞は全角になっています！

var elem = document.getElementById("ErrorPrinter");
elem.innerHTML = "＜img src='http://sample.com:1880/rpg/www/photo.jpg'＞";

消すときは以下のようなスクリプトを実行させています。

var elem = document.getElementById("ErrorPrinter");
elem.innerHTML = "";

え？なんでツクール使ってんの？HTML と JS でいいじゃん。

使いたかったからDEATH！

どうやってラズパイからWebカメラに撮影させてるの？

ラズパイに fswebcam パッケージをインストールして Node-RED の exec ノードで fswebcam コマンドを利用して撮影と画像更新を行っています。
こんな感じ（"写真を取って撮って保存"のところ）です↓

Node-RED で作ったフロー

ウェブサーバーは？

Node-RED の設定で httpStatic を指定しています。
指定したディレクトリに HTML とか JPEG とかを置いています。
詳しくこちら→ Node-RED日本ユーザ会 : 設定

ちなみに自鯖にはダイナミックDNSを利用

ダイナミックDNS（DDNS）のサービスは mydns.jp を利用しています。
先の Node-RED のフローの"1時間毎にDDNS更新"のところで IP を通知しています。

はんだ付けとかするの？

せーへんせーへん。
USB とか差し込むだけやで。

ポート開けるんだよね？

せやで。
Node-RED の初期設定での使用ポートは 1880 だに。
お使いのネットワーク機器の設定が必要たい。

最後に

べつに何千円もかけて部屋を覗かれるゲームを作りたかったわけではないですよ。ええ。

ラズパイに人感センサーとか赤外線リモコンモジュールとか追加してみたり、Node-RED で WebSocket サーバー動かしてツクールにオンライン要素追加してみたり色々やりたいことがあるので、またなんか作ったら公開したいと思います。