Slide 1
Slide 1 text
“MORE INTERACTIVE”
Slide 2
Slide 2 text
THEME
Slide 3
Slide 3 text
2Dと3Dを連携して、より自分らしい表現をめざそう
Slide 4
Slide 4 text
LIBRARIES
Slide 5
Slide 5 text
２D描画
Pixi.js Create.js Lottie
3D描画
Egret Cocos2d
Phaser
2Dゲームエンジン 2D物理演算
Three.js Babylon.js Playcanvas
Box2D LiquidFun
Matter.js Planck.js
Cannon.js Oimo.js
ammo.js
P5.js
Processing.js
3D物理演算
インタラクティブな表現に使えるJSライブラリ（一例）
Slide 6
Slide 6 text
2D LIBRARY
Slide 7
Slide 7 text
今回は、自分が使用経験があるPixi.js、Create.js、Lottieから検討します。
Slide 8
Slide 8 text
ActionScript3的な記述が可能 ActionScript3的な記述が可能 基本的なコントロールのみ可能
※再生・停止など
Adobe Animate CCからも出力可能
※エクステンション
Adobe Animate CCから出力可能
※オフィシャルサポート
Adobe AfterEffectsから出力可能
ビジュアル
エディティング
プログラミング
WebGL対応が微妙
• WebGLのみ未対応の機能が多い
（2017年時点）
• AnimateCCからの出力はCanvas
WebGLファースト
AnimateCCからの出力が微妙
• どこまでエクスポートできるかは
ドキュメント不足のため不明
基本のシェイプやモーションしか出
力できない。エフェクトは対象外
https://airbnb.io/lottie/#/supporte
d-features
備考
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
シェーダーの組み込みが簡単。フィルタも多量に用意されています。 https://pixijs.io/pixi-filters/tools/demo/
Slide 11
Slide 11 text
create.jsと比較して処理速度が早いです。
※2017年時点
https://ics.media/entry/5140/
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Create.jsはAdobe Animateから出力できるため、タイムラインをベースにした直観的なアニメーション作成が可能です。
Slide 14
Slide 14 text
ラインやシェイプなどの描画については、Create.jsの方がPixi.jsより滑らかです。https://ics.media/entry/5140/
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
LottieはAfterEffectsからHTML5用のアニメーションを出力できるエクステンションです。https://airbnb.design/lottie/
Slide 17
Slide 17 text
TODAY’S DEMO
Slide 18
Slide 18 text
今回のデモでは、Pixi.jsとLottieを使用します。
Slide 19
Slide 19 text
• ハイレベルなアニメーション編集機能
• 外部からコントロールできる柔軟性
があるが・・・
「コードがタイムラインにも書けてしまう」
「構造がAnimateからしか確認できない」
• gitで差分がわからない
• 作業体制がつくりにくい
Create.jsの懸念点
Create.jsはAdobe Animate経由で非常に高機能なアニメーションが作成できますが、Flash時代の課題をそのまま抱えています。
Slide 20
Slide 20 text
フロント開発の一部
として扱う
組み込み用のアニメーションと
して扱う
• コードはタイムラインにできるだけ書かない
• コードを書ける人が命名や構造の規則を策定する
• コードを書ける人がアニメーションも作成する
• インタラクティブ性はもたせない
Create.jsを導入する場合
チーム開発に導入する場合は、コードとアニメーション双方に精通したメンバーが
Animateのポジショニングを明確にし、使用ルールを策定するのが望ましいです。※個人の場合はその限りではありません
Slide 21
Slide 21 text
3D LIBRARY
Slide 22
Slide 22 text
今回は、自分が使用経験があるThree.js、Babylon.jsから検討します。
Slide 23
Slide 23 text
3Ｄ描画ライブラリ
現在は圧倒的にthree.jsがメジャーです。用途がWEBのフロントであれば、Three.js一択でも問題ないと思います。
https://medium.com/@hiteshkrsahu/player-2-has-joined-the-game-three-js-vs-babylon-dea49bf00466
Slide 24
Slide 24 text
Babylon.js
ただ、マイクロソフトが注力していることもあり、最近になってBabylon.jsが採用されるケースも増えてきています。
特にゲーム関連が多く、日本でもICSが導入しています。https://ics.media/entry/18881/
Slide 25
Slide 25 text
TODAY’S DEMO
Slide 26
Slide 26 text
今回のデモでは、単なる好みとライブラリの習熟度からBabylon.jsを使用します。（Three.jsではなくすいません）
WebGL総本山にBabylon.jsだけで6回掲載
（他に使ってる人が少ないｗ）
オフィシャルサイトにも何度か掲載
Slide 27
Slide 27 text
DEMO
Slide 28
Slide 28 text
今回のテーマ
2Dと3Dを連携して、より自分らしい表現をめざそう
Slide 29
Slide 29 text
デモデータ
https://github.com/sretks/200410_sample
Slide 30
Slide 30 text
全体の動作確認
「reference / master」ブランチで確認します。
「yarn」でパッケージインストール後、「yarn dev」でdev serverを起動します。
※パーミッションエラーが出た場合は「dist」フォルダの中身を削除してください
ブラウザでhttp://localhost:3000を開くと以下の動作が確認できます。
STARTボタンを押すとアニメがはじまります。 キューブを押すとふきだしが現れます。
Slide 31
Slide 31 text
今回の構造
babylonCanvas
pixiContainer
startButton
lottieContainer
HTMLElement
2D
3D
• インタラクション（ボタンなど）
• 情報
• エフェクトなど
• コンテンツ本体
Slide 32
Slide 32 text
各ライブラリが連携した状態では
それぞれの機能を把握しにくいので
個別にみていきましょう
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Babylon.jsの動作確認
「reference / babylonjs」ブランチで確認します。※Lottie、Pixi.js関連のファイルがない状態です
「yarn」でパッケージインストール後、「yarn dev」でdev serverを起動します。
ブラウザでhttp://localhost:3000を開くと上記の画面になります。
キューブをクリックすると色が変わります。
Slide 35
Slide 35 text
BabylonJs.jsの確認
「src/js/BabylonJs.js」を開いてください。ファイル内部は上記の構成になっています。
BabylonJs.jsの中身
・constructor
→Babylon.jsのエンジンとシーンを準備する
・initCamera
→カメラを準備する
・initLight
→ライトを準備する
・initMesh
→メッシュ（3Dモデル）を準備する
Slide 36
Slide 36 text
Babylon.jsのエンジンとシーンを準備する
今回は、カメラやメッシュを配置するためにエンジンとシーンを準備しています。
Slide 37
Slide 37 text
カメラを準備する
今回は、ターゲットを中心に回転できるAcroRotateCameraを使用しています。
他のカメラはこちら→ https://doc.babylonjs.com/babylon101/cameras
Slide 38
Slide 38 text
カメラを準備する
camera.attachControl(this.canvas, true)で、マウスと矢印キーにより視点の回転や移動（カメラ種類による）ができます。
Slide 39
Slide 39 text
ライトを準備する
今回は、Positionを中心として球状に減衰するPointLightを使用しています。
他のライトはこちら→ https://doc.babylonjs.com/babylon101/lights
https://docs.unity3d.com/ja/2018.4/Manual/Lighting.html
Slide 40
Slide 40 text
ライトを準備する
「light.diffuse = new BABYLON.Color3(x,x,x)」でライトの色を変更できます。
※色はRGBで各0～1
Slide 41
Slide 41 text
メッシュ（3Dモデル）を準備する
今回は、縦横5つずつボックスを配置しています。ボックスの生成はBABYLON.MeshBuilder.CreateBoxで実行します。
Slide 42
Slide 42 text
メッシュ（3Dモデル）を準備する
BABYLON.MeshBuilder.CreateBoxをCreateSphereに変更すると、球を生成できます。
※生成できるメッシュの種類はhttps://doc.babylonjs.com/how_to/set_shapesを参考にしてください。
Slide 43
Slide 43 text
メッシュ（3Dモデル）を準備する：マテリアル
マテリアルは、メッシュの色や光沢などの質感を設定するために使用します。「EmissiveColor」とは、周囲の環境やライトに影響とは別に
「自身が発光する色」を指します。https://doc.babylonjs.com/babylon101/materials
様々な質感の設定が可能
material.diffuseColor = new BABYLON.Color3(1, 0, 1);
material.specularColor = new BABYLON.Color3(0.5, 0.6, 0.87);
material.emissiveColor = new BABYLON.Color3(1, 1, 1);
material.ambientColor = new BABYLON.Color3(0.23, 0.98, 0.53);
Slide 44
Slide 44 text
メッシュ（3Dモデル）を準備する：マテリアル
「diffuseColor」にランダムな値を入れると、メッシュが様々な色に変わります。
Slide 45
Slide 45 text
メッシュ（3Dモデル）を準備する：クリック
メッシュをクリックした場合のインタラクションを作成しています。
クリックしたメッシュのemissiveColorを変更しています。
クリックしたメッシュのY位置を変更しています。
Slide 46
Slide 46 text
メッシュ（3Dモデル）を準備する：クリック
メッシュのクリックに対しイベントを返しています。
ここでは戻り値にクリックした位置を入れています。
オブジェクトのIDや状態をいれれば、
より複雑なコントロールが可能なはずです。
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
Pixi.jsの動作確認
「reference / pixijs」ブランチで確認します。※Lottie、Babylon.js関連のファイルがない状態です
「yarn」でパッケージインストール後、「yarn dev」でdev serverを起動します。
※パーミッションエラーが出た場合は「dist」フォルダの中身を削除してください
ブラウザでhttp://localhost:3000を開くと真っ白な画面になりますが・・・
画面中央をクリックするとふきだしが現れます。
Slide 49
Slide 49 text
PixiJs.jsの確認
「src/js/PixiJs.js」を開いてください。ファイル内部は上記の構成になっています。
「src/images/serif01.png」はふきだし用の画像ファイルです。
PixiJS.jsの中身
・constructor
→Pixi.jsのAppを準備する
・createSerifContainer
→ふきだし画像をアニメーションさせるためのコンテナを準備する
・createSerifSprite
→コンテナにふきだし画像を配置する
・showSerif
→セリフ付きでふきだしを表示する
Slide 50
Slide 50 text
Pixi.jsのAppを準備する
new Pixi.Applicationで生成したCanvasをdivにappendしています。
Slide 51
Slide 51 text
ふきだしの構成
今回のふきだしは上記のような構成になっています。実際にアニメーションを設定するのはContainerになります。
Container
Sprite
HELLO! Text
複数のSpriteやTextなどを配置する
画像データ
Slide 52
Slide 52 text
ふきだし画像をアニメーションさせるためのコンテナを準備する
「new Pixi.Container」でコンテナを生成し、初期の位置やスケールを設定します。
※ふきだしは拡大して現れるので、初期のスケールはゼロにしています。
Slide 53
Slide 53 text
コンテナにふきだし画像を配置する
画像ファイルからTextureを作成し、さらにTextureを格納するためのSpriteを作成しています。
「pivot」は原点の位置となります。今回はふきだしが下から拡大して現れるので、位置を調整しておきます。
原点が中央（デフォルト）の場合
原点を調整した場合
Slide 54
Slide 54 text
コンテナにふきだし画像を配置する
先ほど生成したコンテナにSpriteを配置しています。
Slide 55
Slide 55 text
セリフ付きでふきだしを表示する
引数のX・Y位置にあわせて、ふきだしを表示するアニメーションを再生しています。
今回はふきだしのアニメーションにTweenMaxを使用しています。
Slide 56
Slide 56 text
セリフ付きでふきだしを表示する
ふきだしの上にはランダムでテキストを表示します。テキストは「new Pixi.Text」で生成しています。
HELLO!
Slide 57
Slide 57 text
セリフ付きでふきだしを表示する
最後に、クリック位置を送るためのイベントと関数を「index.js」内に記述しています。
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
Lottieの動作確認
「reference / lottie」ブランチで確認します。※Pixi.js、Babylon.js関連のファイルがない状態です
「yarn」でパッケージインストール後、「yarn dev」でdev serverを起動します。
※パーミッションエラーが出た場合は「dist」フォルダの中身を削除してください
ブラウザでhttp://localhost:3000を開くとスタートボタンが表示されます。
クリックでアニメーションを開始します。
Slide 60
Slide 60 text
LottieJs.jsの確認
「src/js/LottieJs.js」を開いてください。ファイル内部は上記の構成になっています。
「src/datas/data.json」はAfterEffectから出力されたJSONファイルです。
LottieJS.jsの中身
・constructor
→アニメーションを準備する
・run
→アニメーションを再生する
・loadComplete
→アニメーションの読み込み完了をハンドルする
Slide 61
Slide 61 text
アニメーションを準備する
Lottie.loadAnimationでアニメーションの初期設定をしています。autoplayをtrueにすることで自動再生も可能です。
※今回はSTARTボタンを押したら再生を開始したいため、falseにしています。
Slide 62
Slide 62 text
アニメーションを再生する
「play()」で明示的に再生開始できます。
Index.js
LottieJs.js
Slide 63
Slide 63 text
おまけ・Lottieのインストール
Lottieのインストールについてはhttps://github.com/airbnb/lottie-webを参考にしてください。
「aescripts + aeplugins」もしくは「adobe store」からダウンロード可能です。（Bodymovinという名前になっています）
aescripts + aeplugins adobe store
Slide 64
Slide 64 text
おまけ・AfterEffectsからの出力設定
AfterEffectsのメニューバーにある「エクステンション」から設定画面を表示できます。
Slide 65
Slide 65 text
おまけ・AfterEffectsからの出力設定
用途にあわせて複数の出力方法が用意されています。
Standard
・アニメーションの設定だけdata.jsonに出力される
Demo
・html1ファイルにlottieとアニメーションの設定が組み込まれている
Standalone
・data.jsonにlottieとアニメーションの設定が組み込まれている
（だと思う）
Slide 66
Slide 66 text
SUMMARY
Slide 67
Slide 67 text
1. インタラクティブな表現ができるライブラリはたくさんある
2. ライブラリごとに強みがあるのでそれぞれの特性を生かす
3. 複数のライブラリを組み合わせれば、よりリッチなコンテン
ツが生み出せる（重いかもしれない・・・けど）
Slide 68
Slide 68 text
あとは触って考えよう