- はじめに
- 1．まずはテンプレートを動かしてみる
- 2．入門サイトを上から順にやってみる
- 3．とりあえず何か作ってみる
- 4．グループ管理を試してみる
- 5．SpriteSheetでアニメーションを付けてみる
- 6．phina.jsのクラスを学ぶ
- 7．シーン遷移を学ぶ
- 終わりに
はじめに
phina.js始めてから数か月しか経っていないペーペーですが、以下のような流れで一通り使えるようになりました。
大体、2か月くらいで一通り使えるようになると思います。早い人はもっと早いです。
JavaScriptについてあまり詳しくない人は、2～3か月くらい掛かると思います。
参考までにどうぞ。
1．まずはテンプレートを動かしてみる
まずは公式サイトからテンプレートをコピペして動かすことから始めました。
↑のサイトで下の方へ行くと、index.htmlとmain.jsがあるので、それをコピペして自分の環境で動かしました。
superClassやsuperInitについては、最初はよくわからなくても大丈夫だと思います。
まずはinitの中を色々といじってみて、phina.jsに慣れていくことからです。
2．入門サイトを上から順にやってみる
とりあえず試してみたいって方のための phina.js 入門 | phiary
こちらのサイトを上から順番にやってみるといいです。
コードの全文を見たい場合は、「runstant」と書いてあるリンクを押すと見ることができます。
addChildTo(親要素)と書いてあって「親要素ってなんだよ」と思うかもしれませんが、とりあえずthisって書いとけば最初は大丈夫です。
もしaddChildToの親要素について知りたい場合は、
【phina.js】グループ管理の基本テクニック - Qiita
を見ると何となくわかるかもしれません。
3．とりあえず何か作ってみる
現状できる範囲で何か作ってみます。
僕の場合は、一定時間ごとに下からブロックが湧いてくるやつとかを作って遊んでいました。
4．グループ管理を試してみる
phina.jsでは、オブジェクトをグループごとに管理することができます。
グループ化することで、複数のオブジェクトを一度に動かすことが出来るようになります。
また、当たり判定などもシンプルに書けるようになります。
5．SpriteSheetでアニメーションを付けてみる
SpriteSheetというのはアニメーションの各コマが一枚の画像に収まっているやつです。
表示領域を各コマに絞り、連続して切り替えることでアニメーションを付けることができます。
phina.jsではSpriteSheetを元に、FrameAnimationとgotoAndPlayいう関数を使って実装することが可能です。
↑こちらの記事を参考にすると分かりやすいと思います。
6．phina.jsのクラスを学ぶ
JavaScriptのクラス定義ではなく、phina.jsのクラス定義を学びます。
新しいシーンを追加する際に、DisplaySceneの継承は絶対に必要になるので勉強しておきます。
↑僕はこの2つの記事を参考に勉強しました。
個人的にはSpriteクラスとDisplaySceneクラスは、実際にクラスを作ってみて感覚をつかんでおくといいと思います。
7．シーン遷移を学ぶ
シューティングゲームを作る際に、1面・2面といったようにシーンを遷移させることがあると思います。
phina.jsでは、DisplaySceneクラスを継承してシーンを作り、作ったシーンをリストにまとめ、GameAppのscenesプロパティに渡すことで、自由に遷移させることができます。
終わりに
ここまでやれば一通りのことは出来るようになると思います。
分からないことがあったら、こちらから探すといいと思います。
検索しても分からないことがある場合は、ツイッターやSlackで質問することもできるようです。
phina.jsの魅力の一つに、親切なサポート体制があります。 Twitterで#phina_jsタグをつけて質問したり、slack(gitterから移行）に参加して質問すれば、作者の @phi さんを始め、他のメンバーが優しく真剣に答えてくれます。些細なことでも良いので、構えずに質問してみて下さい。
引用元：phina.js事始め - Keep On Coding
