技術書典5に出そうと思っていた新刊を落としました…… 最悪電子書籍で出せなくもないけれど、ちょっと本にまで持っていくのに時間的・体力的・クオリティ的に難しいと判断したのでブログの記事として書いていこうと思います。
出来なかった経緯とかは以下のスライドを見て察して貰えれば幸いです。

正直ちゃんと考えて作業した方がよかったなと後悔しています。
次回はどうするか決めていませんが、書く機会があれば書いてみたいと思います。
次こそは絶対に落とさないように…！

ちなみに、複数人でサークル参加して出したので世間一般的には落としてないことになっています。当日は「プログラム言語神経衰弱」を配布しました。
詳しくは以下の記事を読んでください。

note.mu

はじめに

私は個人的に「簡単・シンプル」というライブラリやフレームワークを好んで使っています。
というのも、物を作る際に一番大切だと思っているのは「何が作りたいか」だと思っているからです。
作るものに集中して、出来るだけツールやライブラリ・フレームワーク等にかける学習コストは最小に抑えたいと考えています。

今回としばらくの記事で parcel と phina.js でゲーム開発できる環境を作る方法を紹介します。

ツール＆モジュール

parcel

ウェブフロント用のビルドツールです。
ここ最近のフロントエンド開発では Browserify や Webpack などのビルドツールの使用は必要不可欠です。
ただ、Webpack の設定は割と大変で他人が読むことも非常に困難になってきています。
parcel はこれまでのビルドツールと異なり、「設定ファイルを必要としない」という特徴を持っています。
つまり、設定ファイルなしで各種ファイルのトランスパイルやビルド、HMR、CodeSpliting などが出来ます。
使い方も簡単で

$ parcel index.html

とエントリーファイルを指定するだけで、依存関係のあるファイルを自動で探索して、ビルドしてくれます。
本番用にビルドする場合も

$ parcel build index.html

で実行出来ます。出力されたファイルは全てミニファイされています。
また、ビルド速度もキャッシュがあるので実際に使う分には問題ない速度さでビルドされます。
最近のアップデートで依存関係があるモジュールが未インストールだった場合、自動でインストールしてビルドしてくれるようになりました。
もはやちょっと怖い領域ですね（笑）

このようにビルドや開発環境構築などを全て自動で行なってくれます。
開発者はよりアプリケーションの開発に注力出来ます。

phina.js

javascript で作られた国産ゲームライブラリです。
プログラミング初心者でも使いやすく、上級者の要望に応えられるカスタマイズ性も持っています。
タイトル画面やゲームオーバー画面はデフォルトのテンプレートが既に用意されています。
この機能はプログラミング初心者はインゲームを作るのに集中できるし、上級者はサクッと作りたい場合にも使いやすいです。
簡単なタイトルとかでもいざ実装しようとすると手間ではあるのでこういった機能はありがたいです。
また、pixi.js や three.js など外部ライブラリとの連帯も行えます。
なので、よりパフォーマンスを求められる場合に一部 pixi.js を使うことも可能です。
これ以外にも、衝突判定、トゥーンアニメーション、入力系のサポートなどなど様々な便利機能が標準で用意されており、スムーズにゲーム開発を行えます。

parcel と phina.js を組み合わせる意味

parcel と phina.js を使った開発で一番の特徴は「インゲームに集中出来る」だと思います。
インゲームは「メインのゲームロジックが動く箇所」という意味を指しています。
なので、ビルドの設定、開発環境の構築、タイトル画面などはインゲームに含まれません。
上記の説明を読み返してもらえばわかりますが parcel と phina.js を使えばインゲーム以外の部分は最小のコストで実装出来ることがわかります。
そのため、parcel と phina.js の組み合わせでは「インゲームによりコストをかけた開発」が行えます。

一連の記事では parcel と phina.js を使ってゲーム開発環境の構築方法について解説していきます。
といっても、ほとんどないので後半では、webへの公開方法やスマホアプリやデスクトップアプリとしてビルド・公開する方法の解説を行います。
少しでも parcel と phina.js に興味を持っていただければ幸いです。