この記事は、dwango advent calenderの13日目の記事です。

導入

最近、スマホゲームが隆盛を極めていますね。
しかし、Android用、iOS用とアプリを作るのは骨が折れます。
そこで、HTML5なゲームを作れば楽なんじゃないか、と思っています。

リバースエンジニアリングしやすいとか、いろいろ課題はありますが、PCやスマホにダウンロードなりインストールなりしなければいけない、通常のゲームアプリケーションに比べると、HTML5ゲームはユーザーが遊びはじめるのにハードルが低いため、大きなメリットがあると思います。
PCやスマホの性能も上がっていますし、セキュリティ的にも比較的安全です。

一方で、Scalaは型があって、Javaより融通がきいて、個人的にとても好きな言語です。おすすめです。

ということは、ScalaでHTML5なゲームを作れたら楽しいだろう、という趣旨の記事になります。

ゲームは作るのも楽しいですが、人に遊んでもらうともっと楽しいので、最後にRPGアツマールへ投稿します。

RPGアツマール

dwangoの運営しているゲーム公開サイトです。
RPGツクールで作ったゲームの公開に便利なよう¹ですが、ただのJSで書いたプログラムも動くようです。

Why Scala.js?

Javaで使えてHTML5ゲームに対応しているフレームワークというと、libGDX。
しかし、libGDXは、JSに変換するのにGWTを使っているため、Scalaは使えません²。

どうしてもScalaでゲームを作りたい。
ならScalaで生JSを吐けばいいじゃないか。

ということで、Scala.jsを使います。

CreateJS

最近？³メジャーバージョンアップしてWebGLに対応した神ライブラリ。
EaselJSは、特に2D描画をするのに便利で、普通の3Dライブラリと比べ、文字の描画や、複雑な図形描画が簡単にできます。

CreateJS配下には、音声出力を司るSoundJSや、
アニメーションを司るTweenJSなどがあります。

とりあえず動くものを作る

準備

インストールする

が必要になります。

サンプルプロジェクトのClone

https://github.com/sujoyu/scala-atsumaru をgit cloneしてきます。

git clone https://github.com/sujoyu/scala-atsumaru.git
cd scala-atsumaru

source-mapを有効にするために、

npm install

も走らせておきます。

ScalaをJSに変換する

以下のコマンドを実行します。

sbt fastOptJS

index-fastopt.htmlをブラウザで開くと、ゲームが動くと思います。

Scalaを書き換えたら自動で変換する

以下のコマンドを実行します。

sbt ~fastOptJS

敵の動きがイマイチですね。

ここの関数を書き換えてみましょう。
render関数は、1フレーム毎に呼ばれます。
deltaTimeには前回の描画から何ms後に描画されたかが渡ってきます。
x, yに敵機の座標を入れます。

コンパイルが終わったら、ブラウザをリロードしてみましょう。
思うように動きましたか？

プロダクション用の最適化したJSに変換する

以下のコマンドを実行します。

sbt fullOptJS

index.htmlをブラウザで開くと、ゲームが動くと思います。

RPGアツマールに投稿する

作ったゲームをzipに固める

以下のように、不要なファイルを除いたディレクトリ構造をつくり、zipに固めます。

.
├── index.html
└── target
    └── scala-2.12
        ├── scala-atsumaru-tutorial-jsdeps.min.js
        └── scala-atsumaru-tutorial-opt.js

アップロードする

RPGアツマールにとびます
ログインします（アカウントがない場合は、お手数ですが作成してください）
右上のボタンをクリックします
ゲームファイルアップロードボタンからアップロード、必要事項を入力します
保存ボタンをクリックし、数秒 ~ 数分待てば、投稿完了です

実際に投稿したゲームは以下です。
https://game.nicovideo.jp/atsumaru/games/gm5351?key=4372c6088ebe

最後に

今回のサンプルプロジェクトを土台にして、ゲームを作ると楽かもしれません。
最初は、敵の動きや弾の制御を作ると面白いかも。
タイトル画面やゲームオーバー、スコア辺りを実装するとSTGっぽくなってきます。

イマイチな部分も多いので、一から作ったほうが良いかもしれませんけどね。

皆さんがもっと手軽にゲームを作って、公開していける世の中になるといいですね。

RPGツクールで作ったゲームをアップロードしたことがないので... ↩
GWTはScalaに対応していない。
Scala+GWTというプロダクトもあるけど、ぜんぜん更新されてない... ↩
最近時が経つのが早い ↩