#はじめに
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でアニメーションする場合とセットで使いたいですね。
インストール手順
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();