phina.js の個人的メモ

おもちゃを作るにあたり調べたことをメモ。


  • 2017/01/04 作成

Contents


概略

唐澤貴洋 福笑い (HTML5)」の説明と、これを作るときに参考にしたページたち。

福笑い (HTML5) について

以下のflashをHTMLに移植したもの。移植といってもpflのソースを覗いたわけではないので実装はほぼ独自で、仕様が所々異なる。

1月4日はどこぞの弁護士の生誕祭らしいので、この機に乗じて玩具を作った。

もともとスマホ等のflash非対応端末で動かしたいという動機もあったりしたが、ほんの少しだけ探したら一瞬で以下のようなものが見つかった。こっちを使った方が早かっただろうけどまあいいや。

この際なので、音声の再生やらTweenerやらWebFontやらTimerやらScene遷移やら、phina.jsの機能をいろいろ試してみた。

ついでに採点機能なんてのも作ってみた。これはphina.jsあんま関係ないけども。

作っていない機能も残っている。スマホ等のタッチデバイスにおける2本指での回転操作とか。たぶんpointers使ってやればできなくはない。でもこの機能はphina.jsにデフォで欲しかった。てなわけで面倒だったからしゃーない。

マウスホイールも変化量を拾えるようにするかイベント発火させるようにしておいてほしかった。PCならキーボードあるし、まあいっか、ということで今回は妥協している。したがって、部品の回転は現状ではキーボードでしかできない。スマホでは部品を回転できない。どう頑張っても完成図は福笑い状態になる。でもしゃーない。

正月を若干過ぎてしまっている感が否めないが、生誕祭が1月4日だからしゃーない。

フォントについて

各所のフリーハンドっぽい文字にはパカフォントを用いている。

phina.js について

福笑いの実装にはphina.jsを用いている。

一般男性顔メーカーのときはライブラリを何も使わずにcanvas+HTML5オンリーでゴリゴリ書いたが、さすがに疲れたのでもうライブラリにどっぷり浸かる。多少の縛りはあるものの面倒な記述は少ない。

公式のマニュアル類がほとんどないので、他の解説ページをあたる。

結構大事なこと

書いていると、「動かないんだけど!なんで!?ちゃんと書いてあるはずなのに!ググっても出てこないんだけど!」という場面に頻繁に遭遇する。

そんなときはブラウザのデバッガからphina.js本体を覗くと幸せになれる。ソースはものすごく読みやすい。たぶん読んでもらうことを前提にコメントとか入れてる。

Scene の管理

どうやら古いバージョンのphina.jsでは次のようなコードでシーン遷移を管理できたらしい。

phina.define('MyManagerScene' , {
  superClass: 'ManagerScene' ,
  init: function() {
    this.superInit({
      scenes: [
        {
          label: 'マイタイトル',
          className: 'MyTitleScene',
          nextLabel: 'マイメニュー' 
        },
        {
          label: "マイメニュー",
          className: "MyMenuScene",
          nextLabel: "マイメイン" 
        },
        ...
      ]
    });
  }
});

phina.main(function() {
  var app = GameApp();
  document.body.appendChild(app.domElement);
  app.replaceScene(MyManagerScene());
  app.run();
});

「なるほど、こうやって書けばいいのか」と思って書いてもたぶん動かない。というか、app.replaceScene(MyManagerScene());を使うとMyManagerSceneが使えるようになる代わりにアセットのロードが上手くいかなかったりその他さまざまな弊害が生じた(原因は調査してないですごめんなさい)。

なので、こう書きましょう。GameAppとかのコンストラクタの引数に突っ込めば終了。

var myscenes =  [
	{
		label: 'マイタイトル',
		className: 'MyTitleScene',
		nextLabel: 'マイメニュー' 
	},
	{
		label: "マイメニュー",
		className: "MyMenuScene",
		nextLabel: "マイメイン" 
	},
	...
];
phina.main(function() {
	var app = GameApp({
		startLabel : 'MainScene',
		assets : ASSETS,
		width: SCREEN_WIDTH,
		height: SCREEN_HEIGHT,
		scenes: myscenes,
	});
	app.run();
});

実はここでかなり躓いた。シーンの遷移を使ったサンプルが少なかったので。