検索対象:検索ほろほろりなゲーム置き場ジャンル雑多なゲーム・ゲーム制作関連のブログ記事置き場。最近はBlender中心に学習中。最近Three.jsやらWebGLやらに手を出し始めたんですが、まったくphina.jsを触ってないと忘れそうで怖いので、自分のための備忘録の意味でも、まだ使いこなせているわけでもないけど、ここまでなら何とか分かった!(様な気がする)ということを書き留めておこうかと思い立ち、この記事を作成しております。phina.jsいじってみたい!って方や、プログラミングしてみたい!って方など、どなた様かの役に立てれば幸いです。加筆・修正を行いました。phina.js!』と表示するだけのものです。liteを使って試されることをおすすめします。ソースコードまずはhtmlファイルです。</body></html>そしてjsファイルです。app.run();});解説ほんのちょっとですが、まずhtmlファイルの方を解説します。src='https://cdn.jsdelivr.net/gh/phi-jp/phina.js@0.2.3/build/phina.js'></script>ここでphina.jsを読み込んでいます。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(...)クラスを定義しています。MainSceneMainSceneはデフォルトで用意されているシーン用のクラスで、DisplaySceneクラスを継承している子クラスです。実は他にもタイトルシーンやリザルトシーンなど、シーンが有ったりするのですが、そこの説明は[phina.js-Tips]デフォルトで用意されているSceneについて知るが大変参考になるかと思いますのでもっと知りたいという方は是非ご覧ください。init:function(){...}(更新処理以外)基本的には処理を書いていきます。this.superInit()MainSceneの初期化をしています。this.backgroundColor背景色を変更できます。今回はオレンジを指定しています。1)”などでも指定できます。Label()お察しの通り、文字を表示するためのクラスです。今回使ったプロパティだけさっと解説します。ラベルオブジェクトについてそして、そのあとに繋げてあるメソッドについてですが、addChildTo(this)ここで、this(つまりここではメインシーン)の子供にする。いったことをしています。phina.js!』が表示されません。this.gridY.center())ざっくり言ってしまうとここで真ん中に表示するということを指定しています。setPositionはオブジェクトをどこに表示するかを指定でき、()の中の、gridXやら、gridYやらというのは、シーンにデフォルトで用意されているGridクラスというのがあるのですが、要は位置を指定するのに使用できるクラスです。Gridについて詳しく知りたい場合は【phina.js】Gridクラスを使いこなそうが分かりやすいかと思われますので、どうぞ。480)とやっても同じく真ん中に表示されます。.setPosition(this.gridX.center(),this.gridY.center());のように、Label({...}).addChildTo(this).setPosition(...)というような、処理を繋げて記述することを、メソッドチェーンと言うんだそうですよ。function(){...}ここに更新処理を記述します。phina.main(function(){...})メイン処理とコメントされているここは、今回のコードで記述されているのは最後なのですが、じつはphina.jsがグローバル領域に展開されてからのプログラム開始の入り口だったりします。GameApp({...})ここでアプリケーションを生成して、phina.jsで記述したプログラムを使って描画できるようにしています。“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()お疲れさまでした。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。twitterfeed当ブログと管理人についてはをご覧ください。twitterfeed。