DTBのリスペクトゲームを作った、よ

あけましておめでとうございます

そりゃ新年ですから。もう16日ですけど。

はじめに

本年はこんな感じの年賀状を、少ない友人に送りつけました。
f:id:crssnky:20180116220802p:plain:w350
いわゆるDTB(どうぶつタワーバトル)っぽさを狙ったデザインです。
右上にQRコードを置いたのですが、これが絵がかけない人なりのおまけってことです。
どこに繋がってるかというと→DogTowerBattle
f:id:crssnky:20180116222023p:plain:w350
これまたDTBっぽいゲームが出てきました。
そうです、おまけでDTBのリスペクトゲームを作りました。

本編

元々QRコードで公開する予定だったので、OSに依存にしないWebアプリとして作りました。 と、同時にUnityのWebGLやってみたいなぁ、という気持ちがあったのを思い出して、UnityのWebGLで公開することを決めました。
まだ正式にはモバイルでwebGLサポートしてないみたいですけど、まぁ3Dのゲームじゃないし大丈夫っしょ。←実際大丈夫でした(iPhone6s Chrome)。

作成

f:id:crssnky:20180116231014p:plain:w350
本作は、最初にTitle Sceneに降りたって、Play Sceneへ移動、終わったらその上にResult Sceneを重ねるという構成にします。Result後はまたPlay Sceneへ移動もできるようにします。

Title

f:id:crssnky:20180116232229p:plain:w350
Canvasにそれっぽいタイトルを作成し、Pushテキストを表示する。←これは表示するテキスト以上の大きさのオブジェクトにして、Play Sceneへ移動するタッチイベントを設定する。
上部のRank Text「高く積み上げて点数を稼ごう!」は、非同期でDBへユーザーのハイスコアを取得していって、取得でき次第切り替える。(参考:当記事の画像2枚目)
DB参考↓ qiita.com

あと、ランダムでテキトーにDogを降らせます。賑やかしですね。

Play

f:id:crssnky:20180116234203p:plain:w350
f:id:crssnky:20180116234427p:plain:w350
あー、CanvasとMainCameraの表示エリアの大きさの差が大きすぎる~~
フィールドはBoxで作って、回転ボタンは左右を用意。
新しいパーツを出すタイミングは、最新のパーツが静止したタイミングRigidbody2D.IsSleeping()で出します。
本家と同様、落ちたらゲーム終了です。

Result

f:id:crssnky:20180116235340p:plain:w350
Play Sceneに重ねます。
ボタンは再挑戦(→Play Scene読込)と、Tweet(→Tweet Intentで結果をツイート)の2種。
その上のResult Textは、DBへ非同期でアクセスして、取得でき次第順位を表示します。

おわりに

以上が簡単な作った内容です。
説明が少なすぎると思うので、githubのリンクを貼っておきます。
github.com

色々と配慮して足りてないので、あくまでもソースコードなどの参考用ということで。

im@sparqlで読み取るアイドルちゃんのデータ

こちらはアイドルマスターアドベントカレンダー6日目の記事です。前日は、popkirbyさんのカラースキームを作ろうです。

一昨日ぶりです。
im@sparqlはご存知でしょうか?
広がるアイマスワールドをオープンデータ化しようというもので、僕が精力的に取り組んでいるプロジェクトです。
名前の由来は、

im@s + sparql = im@sparql
でして、アイマスの世界観をSPARQLで検索できるようにするのが目的です。
SPARQLというのが分からないという方はWikipedia仕様(日本語訳)を見ていただければ...

im@sparqlではいろんなものが登録されています。アイドル,スタッフのプロフィールからユニット情報、セリフテキストや総選挙結果などがあります。
これらの情報から、欲しい情報の条件を決めてSPARQLでクエリを立てることで、アイマスのDBを持つこと無く、また自分でいちいち手で調べること無く欲しい情報が手に入ります。

これをim@sparqlへコピペして送ると結果が表示されます。
僕のgist.githubには他にもたくさんのサンプルクエリを用意しているので、SPARQLのリファレンスと併せて見ていただければ望みのデータが得られると思います。(アイドルの体表面積を3つの計算方法で取得し、デュポア式で並び替えなんていうものを用意しております。)

ただクエリを打ってデータが返ってきて喜ぶのは僕だけだと思うので、一般的な使い方も説明します。
https://sparql.crssnky.xyz/spql/imas/queryに、GetやPostメソッドで送ることでデータを返してくれます。Getを例にするとそのURLにqueryパラメータでURLエンコードしたクエリを入れることでクエリをSPARQLサーバーへ渡せます。
例:im@sparqlの誕生日お祝いメッセージJS

(d3.js使ってるのは僕がアホだからです。お好きなのを使って下さい。)
基本はJSONですが、outputパラメータでxmlを指定できます。(他にもあるのかな...?

以上が基本的な説明と使い方です。
手の付けられないほど大きくなったアイマスワールドですが、一度アイドルちゃんのデータを整理して見るのも一興では無いでしょうか?

追伸:
im@sparqlはオープンソースのオープンデータとなっていま す。
GitHub - imas/imasparql: imasparql's RDFs
まだまだ足りないですし、僕の書いたことが間違ってる事もあります。
ぜひみなさんのアイマスの知識をお貸しください!!

アイドルマスターアドベントカレンダー6日目の記事でした。明日は、iUratakuさんのデレステの廃課金の結果です。

#スニリプ をARで見よう[Vuforia + argon.js]

こちらはアイドルマスターアドベントカレンダー4日目の記事です。前日は、導線さんのデレマス声優事務所探訪です。

はじめに

みなさんは#スニリプを覚えているでしょうか?
#スニッカーズの写真ツイートでシンデレラガールズからリプが届くかも!?略して #スニリプ
今年の4月から6月にかけてTwitter上で行われたデレマスとスニッカーズのコラボキャンペーンです。
現在は公式サイトが見つからなくなっていますが、実際にちひろさん(?)が運用していたTwitterアカウント@sni_repは残っているので、どのようなものか思い出せない方は覗いてみると良いかもしれません。

このキャンペーンの概要は、「#スニリプ」とハッシュタグを付けて、スニッカーズの映った写真ツイート(事実上のネタツイ)を行うことで、アイドルからリプが届く(かも!?)というものです。

つまり、スニッカーズからアイドルのリプが出てくるってことじゃないか!

この妄想を体現するにはARしかない!

というわけで、試行錯誤の上に以下の構成へたどり着きました。 f:id:crssnky:20171203150252p:plain 私の環境が、iPhone持ちのWindows使いという残念なため、ネイティブアプリやUnityを使った製作は諦めました。
Web側は、node.js+express(ejs)でJSで動くサーバーサイド+フレームワークとして珍しくない(と思う)組み合わせで作りました。
黄色い「Ar」は、argon.jsというフレームワークと組み合わせて使うArgon4というブラウザです。argon.jsとはブラウザ上でARを動かそうというもので、カメラ映像をブラウザ上に載せるためにArgon4を使います。カメラ映像を使わない(向きやGPSだけ)ならば、普通のブラウザにも対応しています。
argon.jsではARにVuforiaというARプラットフォームを用います。単なる画像だけでなく、立体やテキストといったものを高精度で認識できるものです。
例:

これらを使って、スニッカーズからアイドルのリプが浮かびだすARを作っていきます。

サーバーサイド

はじめはnode.jsで、ツイートコンテンツを取り出します。
node-twitter-apiを用いてAPIのキーやらトーンやらを取得します。(npmにSampleあるので省略)
twitterを使って、目的のコンテンツを探します。

var TweetGet = function (ret) {
    var d = Q.defer();
    var client = new Twitter({
        consumer_key: consKey,
        consumer_secret: consSec,
        access_token_key: ret.token,
        access_token_secret: ret.Secret
    });
    var params = {
        screen_name: 'sni_rep',
        count: 5
    }

    client.get('statuses/user_timeline', params, function (error, tweets, response) {
        if (!error) {
            for (var index in tweets) {
                var i = tweets[index];
                if (i.text.indexOf('@') > -1) {
                    var name = i.text.split('【')[1].split('】')[0];
                    var text = i.text.split('】')[1].split('#')[0] || "NO TEXT.";
                    for (var jndex in i.entities.media) {
                        var j = i.entities.media[jndex];
                        if (j.media_url_https.indexOf('https') > -1) {
                            var url = j.media_url_https;
                            break;
                        }
                    }
                    break;
                }
            }
            d.resolve({ "name": name, "text": text, "url": url });     //抜き出したのを次へ渡す
        } else {
            console.log(error);
        }
    });
    return d.promise;
}

メディアの無いツイート(宣伝とか開始アナウンスとか)を覗いた最新のリプっぽいツイートを見つけたら、

  • アイドル名
  • セリフテキスト
  • 画像のURL

を荒々しくも抜き出しています。この3つをexpressのレンダラであるejsへ渡します。

ブラウザサイド

ejsでは、送られてきた3つのツイートコンテンツを使って、ARコンテンツを作っていきます。
こちらを参考に使います。

というかgithubの改変です。中心となっているコードは次のリンクにあります。
ejsの一部だよ · GitHub
サンプルコードでは、文字を3Dモデルに変換するライブラリを呼び出していますが、今回は使わないので代わりに先程ツイートから抜き出した背景画像とデレステ風のセリフテキスト背景を読み出すのに利用しました。
【台詞枠】デレステっぽいメッセージ背景【素材配布中】 / おたもん さんのイラスト - ニコニコ静画 (イラスト)
読み込んだついでに、板に透過を有効にして2枚を貼り付けています。そして、小さくして見えなくしています。

Vuforiaを初期化したらいよいよARに関する記述です。 api.objectTracker.createDataSetでは、VuforiaにARターゲットを登録した時に提供される.xmlのファイルを読み込ませます。これがトラッキングするための情報です。それらにはいくつかのターゲットを登録できるので、ターゲット名を指定して目的のターゲットを取り出します。
app.context.updateEventはいわゆる描画ループで、ARターゲットが映ってる時(KNOWN)、現れた時(FOUND)、消えた時(LOST)に分けて処理を書きます。
KNOWでは、常にターゲットの位置、向きをvar gvuBrochureObject = new THREE.Object3Dにコピーしています。このオブジェクトに、ARで操作したいものを追加することでまとめて操作できます。親みたいなものです。
FOUNDでは、実際にgvuBrochureObjectに``argonTextObject```というARで表示したいものが入ったオブジェクトを追加しています。逆にLOSTでは、別のオブジェクトへ追加することでARターゲットを追従しないようにしています。

最後に文字のオブジェクトを作ります。three.jsでは文字を3D空間上に描画するクラスは無いみたいなので、こちらを利用しました。
three.jsで文字列を利用する方法
こちらのクラスで名前部分とセリフテキスト部分を作ります。ただ、はみ出ても改行はしてくれないので、40文字ごとに分割して改行させています。
これらを背景画像と同じようにargonTextObjectへ追加することで完成です。

かなり端折りましたが、説明は以上です。
今回はブラウザからARするという聞き慣れない方法で行いましたが、実はVuforiaはUnityとも連携しており、Unityだともっと簡単にARが出来ます。ただ、Windowsだし(今はまだ)iOS向けにビルドできなかったのでこの方法を取りました...

長々となってしまいましたが、この記事がアイマスエンジニアなど多くの方の新たなプロデュースに結びつければ良いなと思っております。 アイマスエンジニアといえば、、、、
12/16日にアイマスハッカソンがありますね!
参加は難しいな、興味はあるけどなぁ、という方はYouTube Liveにて配信を行うみたいですので、IM@Studyを要チェックです!

ここまで読んでいただきありがとうございます!
アイドルマスターアドベントカレンダー4日目の記事でした。明日は、popkirbyさんのカラースキームを作ろうです。