DTBのリスペクトゲームを作った、よ
あけましておめでとうございます
そりゃ新年ですから。もう16日ですけど。
はじめに
本年はこんな感じの年賀状を、少ない友人に送りつけました。
いわゆるDTB(どうぶつタワーバトル)っぽさを狙ったデザインです。
右上にQRコードを置いたのですが、これが絵がかけない人なりのおまけってことです。
どこに繋がってるかというと→DogTowerBattle
これまたDTBっぽいゲームが出てきました。
そうです、おまけでDTBのリスペクトゲームを作りました。
本編
元々QRコードで公開する予定だったので、OSに依存にしないWebアプリとして作りました。
と、同時にUnityのWebGLやってみたいなぁ、という気持ちがあったのを思い出して、UnityのWebGLで公開することを決めました。
まだ正式にはモバイルでwebGLをサポートしてないみたいですけど、まぁ3Dのゲームじゃないし大丈夫っしょ。←実際大丈夫でした(iPhone6s Chrome)。
作成
本作は、最初にTitle Sceneに降りたって、Play Sceneへ移動、終わったらその上にResult Sceneを重ねるという構成にします。Result後はまたPlay Sceneへ移動もできるようにします。
Title
Canvasにそれっぽいタイトルを作成し、Pushテキストを表示する。←これは表示するテキスト以上の大きさのオブジェクトにして、Play Sceneへ移動するタッチイベントを設定する。
上部のRank Text「高く積み上げて点数を稼ごう!」は、非同期でDBへユーザーのハイスコアを取得していって、取得でき次第切り替える。(参考:当記事の画像2枚目)
DB参考↓
qiita.com
あと、ランダムでテキトーにDogを降らせます。賑やかしですね。
Play
あー、CanvasとMainCameraの表示エリアの大きさの差が大きすぎる~~
フィールドはBoxで作って、回転ボタンは左右を用意。
新しいパーツを出すタイミングは、最新のパーツが静止したタイミングRigidbody2D.IsSleeping()
で出します。
本家と同様、落ちたらゲーム終了です。
Result
Play Sceneに重ねます。
ボタンは再挑戦(→Play Scene読込)と、Tweet(→Tweet Intentで結果をツイート)の2種。
その上のResult Textは、DBへ非同期でアクセスして、取得でき次第順位を表示します。
おわりに
以上が簡単な作った内容です。
説明が少なすぎると思うので、githubのリンクを貼っておきます。
github.com
色々と配慮して足りてないので、あくまでもソースコードなどの参考用ということで。
im@sparqlで読み取るアイドルちゃんのデータ
こちらはアイドルマスターアドベントカレンダー6日目の記事です。前日は、popkirbyさんのカラースキームを作ろうです。
一昨日ぶりです。
im@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しかない!
やっと家に帰って暇になった〜。ちゃんと動きますね。 pic.twitter.com/oPya9EWiUS
— croMisaP (@croMisa) 2017年5月23日
というわけで、試行錯誤の上に以下の構成へたどり着きました。
私の環境が、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コンテンツを作っていきます。
こちらを参考に使います。
- https://docs.argonjs.io/tutorial/part4/
- https://github.com/argonjs/docs/tree/gh-pages/code/4-vuforia
というか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向けにビルドできなかったのでこの方法を取りました...
— croMisaP (@croMisa) 2017年4月9日
長々となってしまいましたが、この記事がアイマスエンジニアなど多くの方の新たなプロデュースに結びつければ良いなと思っております。
アイマスエンジニアといえば、、、、
12/16日にアイマスハッカソンがありますね!
参加は難しいな、興味はあるけどなぁ、という方はYouTube Liveにて配信を行うみたいですので、IM@Studyを要チェックです!
ここまで読んでいただきありがとうございます!
アイドルマスターアドベントカレンダー4日目の記事でした。明日は、popkirbyさんのカラースキームを作ろうです。