Edited at

Twitterのタイムライン上で動くブラウザゲームをJSで作りました

More than 1 year has passed since last update.


TL; DR


  • JavaScriptでブラウザゲームを作りました。

  • UFOを操作して動物を誘拐するゲームです。

  • TwitterのOGPを設定すると、ツイートに埋め込むことができます。

ss1.png


『Alien Abduction』

こちらからプレイできます。

https://alien.laineus.com/

画面をタップするだけのミニゲーム的なやつです。

ss2.png


ツイートに埋め込む

なんとツイートに埋め込むことができました!

(↑ぜひリツイートお願いします!)

TwitterのOGPのカードタイプに、playerというものがあり、オリジナルの音声・動画プレイヤーを埋め込むことができます。

これを使ってツイートすると、ツイート内にiframeでマウントされるため、canvasのコンテンツもそのまま動くようです。

playerカードは、他のカードタイプとは手順が少し異なります。


  • OGPを設定する

  • HTTPS対応する

  • Twitterへ審査に出して承認してもらう

申請や表示確認は、CardValidatorから行います。

審査は、ドメイン単位で行われ、自分の場合3日で承認されました。

<meta name="twitter:card" content="player">

<meta name="twitter:player" content="https://alien.laineus.com/fullscreen/">
〜略〜

シェア元のページはどうなっていてもよく、twitter:playerに指定されているページの方がツイートに埋め込まれます。

審査対象のドメインもtwitter:playerに指定したほうです。

また、コンテンツ自体に関しても、サイズがウィンドウにフィットしている必要があるなど、いくつかルールがあるようです。

詳しくは下記記事を参考に。


Twitterがしゃべる!?Playerカードの作成方法 - Voicy Tech Blog

http://voicetech.hatenablog.com/entry/2017/05/14/133539


審査自体は感覚的には結構ゆるいように感じました。

ただし、Twitterのカードのポリシー的にOKなのか怪しいので、削除されたりするかもしれません。

試す際は自己責任でおねがいします。


ゲーム開発用JSライブラリ「Phina.js」

ゲームの開発に使ったライブラリを紹介します。


公式サイト

http://phinajs.com/


JavaScriptでCanvasのゲームを作るための和製ライブラリです。

ゲーム進行や描画まわりの管理といった基盤となる部分や、当たり判定などさまざまなゲームに汎用的に使える機能などが提供されます。


ソースコード

GitHub

https://github.com/laineus/alien


BGM

BGMは、こちらのブラウザで動作する作曲ソフトでさくっと作りました。

http://www.audiosauna.com/

ほんとはCubaseというWindows用のちゃんとした作曲ソフトを持っているんですが、最近Linux以外のOSを使いたくなさすぎて↑を使いました。