[phina.js]基本 - テンプレートについて - ほろほろりドットコム

[phina.js]基本 — テンプレートについて

最近Three.jsやらWebGLやらに手を出し始めたんですが、まったくphina.jsを触ってないと忘れそうで怖いので、自分のための備忘録の意味でも、まだ使いこなせているわけでもないけど、ここまでなら何とか分かった！(様な気がする)ということを書き留めておこうかと思い立ち、この記事を作成しております。

もしも、phina.jsいじってみたい！って方や、プログラミングしてみたい！って方など、どなた様かの役に立てれば幸いです。

※2018年10月18日加筆・修正を行いました。

今回やること

今回の記事は、まずは、テンプレートとして、『Hello, phina.js!』と表示するだけのものです。なお、コーディングは、Runstantやrunstant liteを使って試されることをおすすめします。

ソースコード

まずはhtmlファイルです。

index.html

<!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>【phina.js】 テンプレートサンプル</title>
  </head>
  <body>
    <script src='https://cdn.jsdelivr.net/gh/phi-jp/phina.js@0.2.3/build/phina.js'></script>
    <script src="main.js"></script>
  </body>
</html>

そしてjsファイルです。

main.js

// グローバル領域に展開
phina.globalize();

/*
 * メインシーン
 */
phina.define("MainScene",{
  // 継承
  superClass:"DisplayScene",
  // コンストラクタ
  init: function(){
    // 親クラスの初期化
    this.superInit();
    // 背景色
    this.backgroundColor = "orange";
    // ラベル
    const label = Label({
      text:"Hello, phina.js!",
      fontSize:60,
      fill:"white",
    }).addChildTo(this)
      .setPosition(this.gridX.center(),this.gridY.center());
  },
  // 更新
  update: function(){

  },
});

/*
 * メイン処理
 */
phina.main(function(){
   // アプリケーションを生成
   var app = GameApp({
     // MainSceneから開始
     startLabel: "main",
   });
   // fps表示
   //app.enableStats();
   // 実行
   app.run();
});

解説

ほんのちょっとですが、まずhtmlファイルの方を解説します。

<script src='https://cdn.jsdelivr.net/gh/phi-jp/phina.js@0.2.3/build/phina.js'></script>: ここでphina.jsを読み込んでいます。

後日追記：phina.js公式サイトでは、index.htmlで、phina.jsを読み込むコードが、

<script src='http://cdn.rawgit.com/phi-jp/phina.js/v0.2.0/build/phina.js'></script>

と、なっていますが、RawGitサービス終了に伴い、今後は他のサービスを利用しての読み込みが必要になるかと思います。
私の場合、代替にjsDelivrを利用させていただいておりますので、上記のコードとなっております。

そして、肝心のjsファイルの方についてです。

phina.globalize();: コメントの通り、phina.jsをグローバル領域に展開しています。
phina.define(…): クラスを定義しています。
MainScene: MainSceneはデフォルトで用意されているシーン用のクラスで、DisplaySceneクラスを継承している子クラスです。実は他にもタイトルシーンやリザルトシーンなど、シーンが有ったりするのですが、そこの説明は[phina.js-Tips]デフォルトで用意されているSceneについて知るが大変参考になるかと思いますのでもっと知りたいという方は是非ご覧ください。
init:function(){…}: (更新処理以外)基本的には処理を書いていきます。
this.superInit(): MainSceneの初期化をしています。
this.backgroundColor: 背景色を変更できます。今回はオレンジを指定しています。色の指定は、今回のように”orange”でも、”#ff9900″や、”hsla(36, 100%, 50%, 1)”などでも指定できます。
Label(): お察しの通り、文字を表示するためのクラスです。今回使ったプロパティだけさっと解説します。

text	表示したい文章
fontSize	文字の大きさ
fill	何色で文字を表示したいか

関連記事：[phina.js]基本 — ラベルオブジェクトについて

そして、そのあとに繋げてあるメソッドについてですが、

addChildTo(this): ここで、this(つまりここではメインシーン)の子供にする。といったことをしています。ここでこれをしないと『Hello, phina.js!』が表示されません。
setPosition(this.gridX.center(), this.gridY.center()): ざっくり言ってしまうとここで真ん中に表示するということを指定しています。setPositionはオブジェクトをどこに表示するかを指定でき、()の中の、gridXやら、gridYやらというのは、シーンにデフォルトで用意されているGridクラスというのがあるのですが、要は位置を指定するのに使用できるクラスです。Gridについて詳しく知りたい場合は【phina.js】Gridクラスを使いこなそうが分かりやすいかと思われますので、どうぞ。※もちろん、数値での位置指定も可能なのでsetPosition(320, 480)とやっても同じく真ん中に表示されます。(phina.jsを使った時のデフォルトの画面サイズは640×960)

ちなみにphina.jsは、メソッドチェーン指向なのだそうで、今回やった、

    const label = Label({
      text:"Hello, phina.js!",
      fontSize:60,
      fill:"white",
    }).addChildTo(this)
      .setPosition(this.gridX.center(),this.gridY.center());

のように、Label({…}).addChildTo(this).setPosition(…)というような、処理を繋げて記述することを、メソッドチェーンと言うんだそうですよ。

update: function(){…}: ここに更新処理を記述します。
phina.main(function(){…}): メイン処理とコメントされているここは、今回のコードで記述されているのは最後なのですが、じつはphina.jsがグローバル領域に展開されてからのプログラム開始の入り口だったりします。
GameApp({…}): ここでアプリケーションを生成して、phina.jsで記述したプログラムを使って描画できるようにしています。
startLabel: “main”: 各シーンに登録されているラベルを識別して、どのシーンからプログラムをスタートするかというのを指定しているのですが、この”main”は、MainSceneにデフォルトで指定されているラベルなので、メインシーンからプログラムを始めるということを指示しています。
app.enableStats(): これはコメントの通りfps(フレームレート)を表示させる記述です。コメントアウトを解除すれば使えます。
app.run(): ここでプログラムを実行しています。

まとめ

phina.jsを読み込むには、scriptタグから、’https://cdn.jsdelivr.net/gh/phi-jp/phina.js@0.2.3/build/phina.js’を読み込む。
まずは有無を言わさずphina.globalize()。
phina.define(…)でクラスを定義して、基本的な処理はMainSceneのinitの中、更新処理はupdate内に記述する。※initの中でthis.superInit()で初期化も忘れずに！
this.backgroundColorでthis(今回の場合メインシーン)の背景色を変更する。
Label()でtextって文章をfontSizeな大きさで、fill色で表示するには、addChildTo(this)でthisの子供にする。真ん中に居てほしい場合は、setPosition(this.gridX.center(),this.gridY.center())。(無理やりすぎて文章が変だ(^_^;))
phina.jsの全てのプログラムはphina.main(function(){…})で始まる。
一番最初のシーンはGameAppの中のstartLabelで指定して、app.run()でプログラムを実行する。
fpsを表示したい場合、app.enableStats()

お疲れさまでした。長文となってしまいましたが、お付き合いくださりありがとうございましたm(_ _)m