2018年、去年と比較してphina.js周りでクリティカルな変化というのは無かったと思いますが、一点だけ変化らしい変化があったので、念の為触れておこうとおもいます。
R.I.P. rawgit
公式サイトのサンプルコードもそうなってますが、（ローカルダウンロードせず）ホストされたphina.jsを使う際、以下のような記述をよく行っていました。
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Getting started | phina.js</title>
<script src='http://cdn.rawgit.com/phi-jp/phina.js/v0.2.0/build/phina.js'></script>
<script>
// めっちゃ面白いゲームのプログラムコード
</script>
</head>
<body>
</body>
</html>
rawgitというCDNサービスを通してgithub上のphina.jsライブラリが配信されており、それを利用していました。
しかし先日、マルウェア対策コストの問題でrawgit.comがお亡くなりになってしまいました。
RawGit has reached the end of its useful life
2018年9月までに配信されたコンテンツについては2019年8月まで引き続きホストされるとのことなので、上のようなサンプルコードもしばらくは動作しますが、今後は別のCDNを利用したほうが良いでしょう。
本題：代替にはjsDelivrを使おう
先のrawgitもオススメしてますが、jsDelivrが代替サービスとして一番使い勝手が良さそうです。
例えばv0.2.2の配信URLは
なので先のサンプルコードは以下のように書き直せばOKです。
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Getting started | phina.js</title>
<script src='https://cdn.jsdelivr.net/npm/phina.js@0.2.2/build/phina.min.js'></script>
<script>
// とんでもなく面白いゲームのプログラムコード
</script>
</head>
<body>
</body>
</html>
ちなみにバージョンの部分を省くと自動的にnpm上の最新版(latest)を取得します。
ただしバージョンが変わるとコードが動かなくなる可能性もあるので、基本的にはバージョンを固定しておくことが推奨されます。（あと執筆地点でnpm最新版v0.2.3はバグがあってローディングで止まることがあるのでおすすめしません）
npmではなくgithub版や、forkしたオレオレ魔改造phina.jsを使うこともできます。
phina.js@[ブランチ名]などとするとブランチ指定もできます。
- github開発版：
https://cdn.jsdelivr.net/gh/phi-jp/phina.js@develop/build/phina.min.js - オレオレ版の例：
https://cdn.jsdelivr.net/gh/pentamania/phina.js@chimera/build/phina.min.js
あと細かい点ですがhttpsのsをつけ忘れないようにします。
（httpsで配信されているサイトは同じくhttpsで配信されたコンテンツしか読み込めないため。たまに読め込めなくなってるプロジェクトがあったりする…）
ホストされてるのはライブラリだけじゃない
本題はこれで終わりですが、このままではphina.jsというよりjsDelivrの使い方の話じゃないかヤダー！
となってしまうので、phina.jsパッケージ特有の他の配信コンテンツについても触れてみます。
phina.jsパッケージにはライブラリ本体だけでなく画像、フォント、サウンドなども含まれており、これらも引っ張ってきて使うことができます。
例：ホストされたコンテンツだけで簡単アニメーション
パッケージに何が含まれているかは以下のファイル一覧で確認できます。
https://cdn.jsdelivr.net/npm/phina.js@0.2.3/assets/
pngやmp3、otfは説明不要だと思いますが、おそらくtmssっていう拡張子だけ見慣れないと思うので説明すると、これはスプライトシートアニメーション用の設定ファイルで、実態はただのjsonです。
例えばcharacter.tmssの内容は、images/character/以下の野菜系キャラのスプライト画像すべてに対応しています。
（おそらくphina.jsの前身であるtmlib.js用のsprite*s*heetという意味でこのような拡張子になってると思われます。）
ともかく、これを使えばわざわざ自分でアニメーション設定を書かなくて良くなります。（わざわざ書いてました...）
/* アニメーションを組み込んだSprite拡張クラス */
phina.define('phina.display.AnimationSprite', {
superClass: phina.display.Sprite,
init: function(image, ss) {
this.superInit(image);
ss = (ss) ? ss : image;
this.animation = phina.accessory.FrameAnimation(ss)
.attachTo(this);
},
setAnimation: function(animation) {
this.animation.gotoAndPlay(animation);
return this;
},
})
phina.globalize();
phina.main(function() {
var app = GameApp({
startLabel: 'main',
assets: {
image: {
tomapiyo: "https://cdn.jsdelivr.net/npm/phina.js@0.2.3/assets/images/character/tomapiyo.png",
},
spritesheet: {
tomapiko_tmss: "https://cdn.jsdelivr.net/npm/phina.js@0.2.3/assets/tmss/character.tmss"
}
}
});
app.run();
});
phina.define('MainScene', {
superClass: 'DisplayScene',
init: function(options) {
this.superInit(options);
var gx = this.gridX;
var gy = this.gridY;
this.tomapiyo = AnimationSprite('tomapiyo', 'tomapiyo_tmss')
.setAnimation('fly')
.setPosition(gx.center(), gy.center())
.addChildTo(this);
},
});
ちょっとしたゲームならホストされたコンテンツのみで作れる気がします。縛りプレイ的な感じで挑戦するのも面白いかもしれません。