はじめに
enchantMOONで三輪オムニロボットを操作してみました。動画はこちら。
経緯など
以前、「Firefox OSとRaspberry Piで三輪オムニホイールロボットを操作してみた」というエントリで、JavaScriptの勉強のために、Firefox OSで三輪ロボットを操作するという実験を行いました。
三輪ロボット側のRaspberry Piでnode.jsを動かし、websocket.ioを用いてFirefox OSと通信を行う、というものでした。
Firefox OS+JavaScriptという組み合わせで操作できるなら、enchantMOON+JavaScriptでもいけるのでは？というのが今回の着想です。
しかし、それほど簡単ではなかったので、以下に注意点をまとめます。
注意点
- enchantMOONで動かすsocket.io.jsはesmasuiさんが手を加えたものを用います
公式のsocket.io.jsでは通信ができませんでした。また、サーバーであるロボット側は前回はwebsocket.ioを用いましたが、enchantMOONに合わせてサーバー側もsocket.io.jsを用いるように変更しました（こちらは公式のものでOK）。
- enchantMOONのバージョンはver.2.6.0 (r1880)以上を用いる
これより前のバージョンでは、つながったりつながらなかったりと、通信が不安定でしたが、ver.2.6.0では安定しています。その理由は「enchantMOONのXHRでresponseTextの末尾にゴミデータがつく」問題が、version 2.6.0で改善されたからだそうです。esmasuiさん、ありがとうございます。
ソースの構成など
enchantMOON側のソースの構成は下記のようにしました。
hack.js
main.js
lib/MOON.js
lib/socket.io.js : esmasuiさんのもの
lib/enchant.js
タッチイベントを使いたかったので、parachesさんの『enchantMOONで「簡易版とことんぷよぷよ」を遊べるようにしてみた』を参考にenchant.jsを使ってみました。
タッチイベントを使いたかったので、parachesさんの『enchantMOONで「簡易版とことんぷよぷよ」を遊べるようにしてみた』を参考にenchant.jsを使ってみました。
importJS(['lib/MOON.js', 'lib/enchant.js', "lib/socket.io.js"], function() {
var sticker = Sticker.create();
sticker.ontap = function() {
var script=document.createElement('script');
script.src="main.js";
script.type='text/javascript';
script.language='javascript';
document.body.appendChild(script);
};
sticker.register();
});
main.jsの内容の一部
enchant();
var URL = 'http://192.168.1.5:8888'; // サーバーのアドレス
var width = 240
var height = 320
var socket;
var game = new Game(width,height);
game.onload = function () {
socket = io.connect(URL, {'transports': ["xhr-polling"]});
var touchPanel = new Sprite(width,height);
touchPanel.x = 0;
touchPanel.y = 0;
touchPanel.addEventListener('touchstart', function(e) {
moonTouched(e.x, e.y);
});
touchPanel.addEventListener('touchmove', function(e) {
moonTouched(e.x, e.y);
});
touchPanel.addEventListener('touchend', function(e) {
stopMotors();
});
game.rootScene.addChild(touchPanel);
}
game.start();
function moonTouched(keyx, keyy) {
//ここにタッチエリアに応じた処理を書く。
//上の動画では、４つのモーターにデータを送りたいので、
//コンマ区切りの数値を送っている。
//例えば以下のように
//socket.send('90,0,0,0');
}
function stopMotors() {
//例えば以下のようにモーターを停止させている
//socket.send('90,0,0,0');
}
コントロール画面はこんな感じです。やっつけで書きました。絵心がある人だったら、面白いコントロール画面を描けると思います。
