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

#はじめに
JSのゲームフレームワークでフィジビリティをチェックしつつ、開発工程をを簡単にするためにフレームワーク化してながら進めます。
今後モバイル対応など進めていければなあと思っています。
[rubygem](https://github.com/MariMurotani/pixijs_starter)にしてあるので今後更新していきたいなあと思います。
[デモサイト](http://ec2-52-196-206-32.ap-northeast-1.compute.amazonaws.com:3333/pixijs/index)

## 環境
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アニメーションプラグイン](https://github.com/noprotocol/gsap-pixi-plugin/issues)
[tweenビジュアライザ](http://greensock.com/ease-visualizer)

## インストール手順
### 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
```

下記の画面が出れば設定完了
既にできてるサンプルは[こちら](https://github.com/MariMurotani/pixijs_starter_examples)

![スクリーンショット 2016-10-08 22.09.35.png](https://qiita-image-store.s3.amazonaws.com/0/89997/7d655074-4729-04e6-2876-2248bef8222e.png)

### 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();
```