JavaScript
Twitter
canvas

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

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を使いたくなさすぎて↑を使いました。