(@seisuke)です。Consoleと言われる聞きなれないジャンルのプロダクトであるTIC-80をLIFFで動かしてみました。得た知識などを共有できればと思い、この記事を書くことにしました。Fukuokaでは毎年Hackathonを開催しており(去年のレポート)、何人かのプレゼンターが開発企画の提案を行い、それに興味をもった4,5人のチームで2日間開発を行うのが、基本の形となります。その際に普段自分の業務ではあまり縁のない技術を使うチームも少なくないです。中で動作させるという企画を行い、開発することになりました。Consoleというプロダクトになります。Consoleは日本語に訳すなら「架空のゲーム機」となります。いうpythonで作られた物が話題になりました。架空という言葉を使うのでしょうか?この場合のリアルに当たるものはMSXやMS-DOSなどのシングルタスクOSを搭載したホームコンピュータになります。Consoleは実在のコンピュータをエミュレートすることは目的ではありません。ゲームを作るということに集中して取り組めるための”環境”を用意しようという目的を持って開発されています。制約された環境を用意し、その制約に適したAPI、プログラムするためのコードエディター、ドット絵作成ツール、音源作成ツールなどが提供されています。ゲームを遊ぶ環境と作る環境が合わせて一つとして提供されています。そのため自分が遊んでいるゲームがどのようなコードや素材で作られているか、その場で簡単に確認することができるのです。TIC-80では通常Luaを使ってプログラムを組みますが、JavaScriptやPythonなどの複数言語で開発を行うこともできます。TIC-80の仕様の一部を抜粋すると以下のように非常にミニマムなスペックとなっています。16個の波形を組み合わせるコードサイズは64KBまでこの仕様上cartと呼ばれるゲームそのもののサイズも非常に小さく、cartのシュアなども簡単に行うことができます。Consoleの目的と相性がいいのでないかと思い、Hackathonの題材としました。Hackathonで作ったサービスの概要Sinatraで作ったシンプルなウェブアプリをHerokuで運用しました。TIC-80のコンソールからcartをuploadを行えます。uploadが完了するとトーク画面にdownloadするURLが表示され、それを友人にシェアすれば、友人はLINEのLIFF上でゲームをプレイすることができます。LIFFでTIC-80を動かす工夫LIFFはLINEのメッセンジャーアプリ内で動作するウェブアプリのプラットフォームで、トーク画面上でLINEのユーザーIDなどを連携することができます。TIC-80はもともとWebAssemblyでビルドできるようになっているため、一応ブラウザ上で動かすことは元からできています。携帯のブラウザからプレイすることはあまり考慮されておらず、なおかつ本物のゲームパッドやキーボードを接続してプレイすることが期待されています。そこでLIFFで快適にTIC-80を操作するため、いくつか注意することがあります。画面の幅WebAssemblyでは起動時に指定したCanvasに描画が行われますが、このCanvasの大きさは元のバイナリの描画サイズが自動で適用されるようです。左右マージン16×2)で描画されるように設定を行い、viewportを以下のように512pxに設定して描画するようにしました。user-scalable=0">本当は元のTIC-80からマージンの描画自体を取り除き、全ての描画設定をCSSでするほうが望ましいと思います。ゲームパッドの実装TIC-80はバーチャルゲームパッドの機能を持ってるようなのですが、WebAssemblyでは動作しないように設定されています。その部分は深入りせずに、JavaScriptでバーチャルゲームパッドを実装することによって、LIFFからゲームをプレイできるようにしました。KeyboardEvent(name,{'keyCode':code}));このように通常のKeyboardEventを実行すれば、すんなりとTIC-80にキー入力が伝わります。ゲームの場合、長押し同時押しなどにしっかり対応しなければいけないため、その部分の実装は少し工夫がいります。実際ゲームを快適にプレイするためには斜め押しなどが必要になるのですが、それについては今回は諦めることにしました。キーボードからの入力TIC-80では、多くのオープンソースなマルチプラットフォームのゲームプログラムのようにSDL2を利用してキーボード入力を処理しています。前項のゲームパッドも同様です。TIC-80でのキーボード入力は別フレームでキーボードの押し下げ、押し上げを取得すること前提でコードが書かれています。iPhoneなどのバーチャルキーボードは押し下げ、押し上げが一瞬で発生するため、キーボードの入力を正常に取得することできていませんでした。押し下げ、押し上げがたまたまフレームを跨いだ時のみしか取得できないのです。この部分はTIC-80自体に修正を加えて解決しました。スペースキーの対応スペースキーの入力があるとLIFF自体がスクロールしてしまうため、JavaScriptでWindowへの入力を止める必要があります。WebAssemblyとJavaScriptの連携WebAsseblyではCとJavaScriptで相互に関数を実行して連携することができます。JavaScriptを書くことができる、EM_JSを使いました。LIFFのウェブアプリ上でグローバルなJavaScript関数を用意しておけば、簡単にC言語からそれを呼ぶことができます。cartをアップロードする機能はTIC−80のコマンドで実行しますが、実際の中身はJavaScriptからHackathonで作成したサーバーAPIを叩いているだけです。通常のXMLHttpRequestを使い、APIは成功時にアップロードしたゲームをダウンロードするURLを返します。callback関数でLIFFの機能を使いトーク上にメッセージを表示します。JavaScriptとして実装して、LIFFのメッセージ表示部分はウェブアプリ部分に実装しています。今後の展望2日間という限られた時間のため、最低限の機能をなんとか実装するという状況でHackathonを終えました。手を加えていけば、面白いものになるかもしれないという手応えは感じることができました。今回実現できませんでしたが、LINEのユーザーIDを利用した得点のアップロード機能や、ランキング機能の実現などもアイデアとして存在しました。LIFFで取得したLINEのユーザーIDをTIC-80の起動時にコマンドライン引数として渡すことができます。あとはTIC-80のAPIとして提供しておけば、ゲーム作成者が必要なパラメーターを渡して実行すれば、サーバー側にランキングデータとして蓄積されるというの物です。Consoleは子供がプログラミングに興味を持ち、Scratchなどのビジュアルプログラミングを体験した後のステップとして適していると思っています。そのためには日本語対応や、機能をシンプルにするなどの対応が必要になります。実際TIC-80に日本語ドットフォントを追加してみたりなどの機能追加を試していますが、もともとのUIの特性上ある程度の機能は実現できても、後付けではなかなか難しい部分も多いです。Consoleにチャレンジしてみるのも面白いと考えています。その応用(論文紹介)」です。Developers日本語English。