はじめに

JSのゲームフレームワークでフィジビリティをチェックしつつ、開発工程をを簡単にするためにフレームワーク化してながら進めます。
今後モバイル対応など進めていければなあと思っています。
rubygemにしてあるので今後更新していきたいなあと思います。
デモサイト

環境

Ruby ruby 2.3.0p0
Rails 5.0

利用しているライブラリなど

1.PixiJS
http://www.pixijs.com/
シンプルなJSフレームワークでASができれば覚える事は少ないです。

2.プラグイン一覧
https://github.com/pixijs/pixi.js/wiki/Pixi-v3-Plugins
いろいろ使ってみたいですね。

3.パーティクルエディター
http://pixijs.github.io/pixi-particles-editor/#
pixi-particlesを使ってみました。
パーティクルエディターがイイ感じすぎます。

4.TwwenLite
https://greensock.com/docs/#/HTML5/
おなじみ、GSAPのライブラリが利用可能です。
domでアニメーションする場合とセットで使いたいですね。

GSAPアニメーションプラグイン
 tweenビジュアライザ

インストール手順

1. gemにpixijs_starterを追記

gem 'pixijs_starter', :git => 'git://github.com/MariMurotani/pixijs_starter',:branch => "master"

2. pixijs_starterをインストール

gem install

3. コントローラーを追加

rails generate controller pixijs index loadpoint savepoint

4. config/application.rbのプリコンパイル設定を確認

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

5.　pixijs.jsを編集

//= require pixijs/jquery-3.1.1.min
//= require pixijs/pixi.min
//= require pixijs/pixi-particles
//= require pixijs/stats
//= require pixijs/alias
//= require pixijs/resources
//= require pixijs/scene_base
//= require_tree ./pixijs
//= require pixijs/main

6.index.htmlを記述

<style type="text/css">
.parent{
  position: relative;
  height: 100%;
  width: 600px;
  margin-right: auto;margin-left:auto;
  overflow: hidden;
}
div.overflow{
  width: 500px;
  height: 600px;
}
</style>
<script type="text/javascript">
var myCanvasDrawer;
$(document).ready(function(){
  myCanvasDrawer = new CanvasDrawer(window.innerWidth,window.innerHeight,0x000000);
  myCanvasDrawer.initialize();
  myCanvasDrawer.switchStage("SceneMain","メインのシーン");
});
</script>
<div class="parent overflow" style="width:500px;">
  <div>
    <div id="stage1"></div>
    <div id="stage2"></div>
  </div>
  </div>
</div>

７.ルーティングを記述

  get 'pixijs/index'
  get 'pixijs/loadpoint'
  post 'pixijs/savepoint'

8.サーバー起動

bundle exec rails server

下記の画面が出れば設定完了
既にできてるサンプルはこちら

9.シーンの追加

下記のコマンドでシーンを追加してシーンを沢山作ってみましょう。

bundle exec rails generate pixijs_starter:add your_scene_name

逆引き辞典

各シーンはPIXI.Containerの子クラスです。
this.addChildで要素をContainer　に追加できます。
this.render()で画面を再描画できます。
start()には初期化コード,update()には更新用のコード,destroy()シーン終了処理を書き込みましょう。
作成されているシーンはPIXI.Containerの小クラスなのでPIXI.Containerと同じように扱えます。jqueryを利用可能です。

1. Spriteを追加する

WebGLのcavasにSpriteを追加します。
同じ要領で、pixiJSのオブジェクトでPIXI.Container()に追加できるものはなんでもついか可能です。

this.title = new Sprite(resources["/assets/pixijs/logo.png"].texture);
this.addChild(this.title);

2. 画面を更新する

WebGLのcavasを変更した後に呼び出す事でcanvas再描画します。

this.render();

3. overlayのオブジェクトを取得する

WebGLのcanvasのoverlayのdiv要素を取得します。

this.getStageDom()

4. overlayに要素を追加する

WebGLのcanvasのoverlayのdiv要素に要素を追加します。

this.appenedStageDom(target_html)

5. overlayから全てのdom要素を削除する

WebGLのcanvasのoverlayのdiv要素から要素を全て削除します。

this.emptyStageDom();

WebGLゲームエンジンPixiJSを始めよう