phina.jsとは「ゲームやツールを簡単に作る事ができるJavaScript製のゲームライブラリ」（オフィシャルより）です。詳細はオフィシャルページを見てもらうとわかりやすいと思いますが、JavaScriptでできているため、PCやスマートフォンなどを問わずブラウザ上で実行できる、便利なライブラリです。たとえばこれとかおもしろいですよね。とくに2Dのブラウザ上で動くゲームを作りたいってなったら、結構イケると思います。
ゲームライブラリでJavaScriptって言ったらPhaserあたりが有名だと思うのですが、今回は「国産」ってところでphina.jsを贔屓しています。もちろんPhaserもいいライブラリなので、また別の機会に触ってみたいと思います。
いきなり出鼻をくじくようでアレなんですが、今回は触りってことでテンプレートとして使える簡単なデモ用のスクリプトです。クリックでランダムに「何か」が変わるようなもの、っていう簡単なテンプレートです。
（2020年1月追記）ちょっとした落ちものゲームを作ってみました。
いきなりですが完成形です。
See the Pen phina.js sample by ysko909 (@ysko909) on CodePen.
画面のテキトーな場所をクリックすると、文字色が変わります。なんかそれっぽいボタンがありますが、画面のどこでも反応するので関係ないです。
// 戦闘画面サンプル
// 画面サイズ
const W = 960;
const H = 640;
// 素材asset
const ASSETS = {
font: {
digiFont: "https://db.onlinewebfonts.com/t/55ea8f43f01d7f6e293a0b84be8861eb.woff2"
}
};
phina.globalize();
/*
* メインシーン
*/
phina.define("MainScene", {
// 継承
superClass: 'DisplayScene',
// 初期化
init(param) {
// 親クラス初期化
this.superInit({
width: W,
height: H,
});
// 背景色
this.backgroundColor = 'black';
let button = DisplayButton('fuga');
button.setPosition(this.gridX.center(), this.gridY.center(2)).addChildTo(this);
},
update(app) {
let p = app.pointer;
if (p.getPointing()) {
let hue = Random.randint(0, 360);
let color = 'hsl({0}, 75%, 50%)'.format(hue);
console.log('hoge');
let txt = Label({
fill: color,
text: 'hoge',
});
txt.setPosition(this.gridX.center(), this.gridY.center()).addChildTo(this);
}
},
});
/*
* ボタンを表示するクラス
*/
phina.define("DisplayButton", {
// 継承
superClass: 'Button',
init(text) {
// 初期化
this.superInit({
width: 150, // 横サイズ
height: 70, // 縦サイズ
text: text, // 表示文字
fontSize: 32, // 文字サイズ
fontColor: '#FFF19E', // 文字色
cornerRadius: 10, // 角丸み
fill: '#6A93CC', // ボタン色
stroke: '#DEE3FF', // 枠色
strokeWidth: 5, // 枠太さ
fontFamily: "digiFont",
});
},
});
/*
* メイン処理
*/
phina.main(function () {
// アプリケーションを生成
let app = GameApp({
assets: ASSETS,
// MainScene から開始
startLabel: 'main',
width: W,
height: H,
});
// fps表示
app.enableStats();
// 実行
app.run();
});
このテンプレートであまり利用していませんが、音や画像（スプライトって言ったりする）の表示もわりと簡単に実装できそうです。ライブラリ本体のソースコードが非常に読みやすいので、最悪詰まってしまった場合はライブラリの本体を読めばなんとかなりそう、というのもポイントが高いと思います。
ネックなのはドキュメントがちょっと少ないところでしょうか。いや、ないわけじゃないんですけどね。ただ、世界的に利用されているとその分ドキュメントが多くなって、玉石混交はあるにせよドキュメントの絶対量が増えれば「なんとかなる確率」も相対的に上がるんですよね。最悪本文が英語とか日本語以外で読めなくても、ソースコードを読めばなんとかなる、ってのがプログラマーあるあるなので、とにかくドキュメントってあったほうがいいです。
自分が今後phina.jsを利用するか？と言われれば、ちょっとわからないです、と答えるしかないのがちと辛いところ。いや、使いやすいしソースも読みやすいんです。だけど、対抗馬のPhaserと比較すると、どうしても「困ったときにググったりして解決できそうか否か」っていう問題が頭をよぎるんですよね。まして自分みたいなJS初心者には。
とりあえずPhaserも使ってみて、自分に合う方を利用しようと思います。
ちょっとした落ちものゲームを作ってみました。任意の場所にソースをクローンして、main.htmlをブラウザで開くと動作するはずです。ゲーム自体はオフライン環境でも実行できますが、fontawesomeを利用しているため、結局ネット環境は必要です。