enchantMOONで三輪オムニロボットを操作してみた

はじめに

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を使ってみました。

hack.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');
}

コントロール画面はこんな感じです。やっつけで書きました。絵心がある人だったら、面白いコントロール画面を描けると思います。

今回参考にさせて頂いたサイト

• enchantMOONでSocket.IOを使ってみる
• enchantMOONで「簡易版とことんぷよぷよ」を遊べるようにしてみた

皆さんに感謝です。

こちらもどうぞ

• Firefox OSとRaspberry Piで三輪オムニホイールロボットを操作してみた