update.概要phina.jsはJavaScriptで作られたゲームライブラリです。他のゲームライブラリよりも、簡単かつ国産ということで初心者に親しみやすいことが特徴です。先日、知り合いからphina.jsのことを聞いたので調べたところ、ゲームを作る欲が満ち満ちてきました。phina.jsと打ったら・・・phina.jsのバージョンが低い。npmには最新は上がっていない模様。yarnも試しましたが変わりありませんでした。ついでにフォルダ構成やアーキテクチャも調べてみたんですが、あまり出てこず・・・。自分でまず環境を作るか!とボイラープレートを作ったという次第です。git@github.com:tosaka07/phina-boilerplate.git取ってきたら、ルートディレクトリに移動しましょう。devHTTPサーバーが立ちます。http://localhost:4444にアクセスしてみてください。phina.js!と表示されていたら成功です。buildbundleフォルダにjsが生成されていたら成功です。js/.gitignorefuse.jspackage.jsonpackage-lock.json初期はこのような状態です。実際に開発する際には、src/js/Sceneの方にフォルダを分けて開発する感じですかね。phina.jsどうやって最新のphina.jsを取って来るべきか。考えた結果、phina.jsのリポジトリから直接取ってくることにしました。masterブランチだと古いままなため、developブランチから取ってきます。installするときにブランチから取ってきますので、あんまり意識する必要ないかも。ファイルを分けたい何かコンポーネントを作ったら、index.jsに読み込みましょう。"パス";と読み込み、コンポーネント名()とメソッドを呼ぶ感じにしたら動きます。以下の部分はmainSceneとsampleShapeを別ファイルに分けたときのサンプルです。});}モジュールバンドラphina.jsの作品のコードみたらほとんどモジュール化されていない。いう設計であれば仕方がないのですが、できれば分けたいということでバンドラを用意しています。Webpack・Rollup・browserifyと沢山ありますが、今回はFuseboxを採用しました。理由は、新しくて早いからです。今思えば他のほうが良かったかもFuseboxの説明はこちらから。ルートディレクトリを指定。サーバ機能を有効化するかどうかを指定。fuse.run();});ポートはデフォルトで4444になっています。4444のところを変更してみてください。まとめ実運用に耐えるかはもうちょっと開発を進めなければわかりません。なにか修正してほしいところがあればコメントでも良いですし、githubのプルリク、issueを作っていただければ反応します。Sakaue@tosaka07iosエンジニアです。