一覧に戻る

位置情報ARアプリにレーダーを表示しよう

2017.06.05技術系記事

位置情報ARアプリにレーダーを表示してARコンテンツを見つけやすくしましょう。

位置情報ARアプリの場合、その場所に行ってみないとコンテンツが分かりません。利点でもあるのですが、目に見えないためはっきりとした場所を掴むことができません。そこでWikitudeではレーダーと呼ばれる機能を用意しています。

レーダーでは周囲にあるARコンテンツを可視化してくれます。コンパスも内蔵されているので自分が向いている方向にあるのかどうかすぐに分かります。今回は ARコンテンツを動的に読み込むロケーションベースアプリを作る をベースにレーダーを追加してみたいと思います。

HTML側の修正

ar.htmlを次のように修正します。div#radarContainerの追加と、そのスタイルシート設定です。

<style type="text/css">.radarContainer_left {
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:100px;
}</style>
 

レーダーの表示場所はスタイルシートで設定できます。上記の設定は左上に表示するものです。

レーダーの表示

レーダーは次のようなJavaScriptで追加できます。 AR.radar.container でレーダーを表示するDOMを指定します。また、背景画像やレーダーの枠となる画像を設定しています。そちらはサンプルにある radar_bg.pngradar_north.png を www/assets 以下に保存しています。

var PoiRadar = {
  show: function () {
      // DOMを設定
      AR.radar.container = document.getElementById("radarContainer");
     
      // レーダーの背景画像指定
      AR.radar.background = new AR.ImageResource("assets/radar_bg.png");
     
      // レーダーの枠(東西南北を表示)画像を指定
      AR.radar.northIndicator.image = new AR.ImageResource("assets/radar_north.png");
     
      // レーダーの中心を指定。通常0.5=50%でOKです。
      AR.radar.centerX = 0.5;
      AR.radar.centerY = 0.5;
     
      // レーダーの半径
      AR.radar.radius = 0.3;
      AR.radar.northIndicator.radius = 0.0;
     
      // 最後にレーダーを有効にします
      AR.radar.enabled = true;
  },
};
PoiRadar.show();

最後に PoiRadar.show(); を実行するとレーダーが表示されます。

レーダー表示アイコンを作成

次にレーダーに表示するアイコンを設定します。 AR.Circle にて定義します。透明度や色を設定できます。

radarCircle = new AR.Circle(0.03, {
    horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.CENTER,
    opacity: 0.8,  // 透明度
    style: {
        fillColor: "#ffffff" // 色
    }
});
radardrawables = [];
radardrawables.push(radarCircle);

ARコンテンツにレーダー表示を指定

最後にARコンテンツにレーダー表示アイコンを設定します。レーダーの中にオブジェクトを追加するのではないので注意してください。

var obj = new AR.GeoObject(location, {
                            drawables: {
                              cam: [modelEarth],
                              radar: radardrawables // 追加
                            }
                          });

ここまでできるとアプリの中にレーダーが表示されるようになります。アプリを動かすとレーダーやアイコンも動きます。そして、自分の見ている方向にARコンテンツがあると実際に表示されるようになります。

昔懐かしいドラゴンレーダーのような楽しさもありますし、ARコンテンツを探すのも容易になります。位置情報を使ったARアプリの場合はぜひレーダーを使ってみてください。

他にも選択された位置情報だけ色を変えたりとJavaScriptとスタイルシートを組み合わせたカスタマイズも可能です。詳細はWikitude SDK Android JavaScript APIドキュメントをご覧ください。

今回のコードはmoongift/WikitudeDemoRadarにアップロードしてあります。不明点があれば参考にしてください。