ゲームプロモーション何某

ゲームプロモーションサイト制作時に利用してきたPIXI.jsの実装例を5分で紹介。Dot, Video, Maskの３テーマで構成されたライトな内容。応用編はまたいつか。

Transcript

1. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 1 ゲームプロモーションサイト何某 株式会社ディー・エヌ・エー 西尾 顕 © SQUARE ENIX CO., LTD. © DeNA Co., Ltd.
2. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 2 自己紹介 • フロントエンドエンジニアらしい。 • バックエンドや企画じみたことをすることもある（人手不足）。 • スマホ案件9割5分、PC案件5分。 • 海外案件9割、日本案件1割。 • FINAL FANTASY Record Keeper(以降、FFRK)をはじめとし た、弊社ゲームプロモーションサイトを中心に制作している。
3. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 3 ゲームプロモーションサイトって何？
4. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. ▪リリース前の課題 • 認知度・期待感の向上 • 事前登録の確保。 ▪リリース後の課題 • 認知度の更なる向上。 • NUUやCUU、RUUやDAUといった各種数値の維持・向上、 等々 4 群雄割拠するゲームアプリ界の中で人気アプリであり続けること はさることながら、維持・向上させることはとても大変・・・ → これらの課題解決に助力する役割を担う
5. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 5 例えば？
6. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 6 ゲーム系 • 海外でも強い人気を誇るFINAL FANTASY 零式 のキャラクターにフィーチャーしたクロスワードゲーム。 • パズル完成後に出てくるキーワードを並び替え、零式キャラクターの壁紙をゲットしよう！ Keepers´ Crossword
7. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 7 ジェネレーター系 • 海外版FFRKの3周年記念コンテンツ。壁紙ジェネレーター。 • 日替わりで増えていくテンプレートや背景、名シーンや英雄たちを組み合わせて、オリジナルの壁紙をつくろう！ ANNIVERSARY WALLPAPER CREATOR
8. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 8 アップローダー系 • FF30周年記念海外コンテンツ。画像アップローダー。 • 皆のお気に入りのスクリーンショットをアップロードしてドット絵を完成させよう！ Prompto´s Photo Contest 使用NGなので変更する
9. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 9 などなど・・・ • 海外版FFRKのクリスマスコンテンツ。 • 日替わりで公開されていくオーナメントを使って、自分だけのスノードームを作ってシェアしよう！ Snow Globe of Wonder
10. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 10 FFRKサイトだけで約20本
11. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 11 今回はFFRKのプロモーションサイトを 通して使う簡単な技術の紹介でも
12. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 12
13. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 13 主に使用しているもの 【PIXI.js】 • 2D描画用のライブラリ。 • ver5からは一部3D表現も。 • 対応端末ではWebGLを、非対応端末ではCanvasレンダリングを採用。 【GSAP】 • アニメーションライブラリ。 • TweenLite/Maxで単純なアニメーションを、 TimelineLite/Maxでタイムラインっぽいアニメーションの管理が可能。 • PIXI用のPluginもある(PixiPlugin)。 • 時間の都合で今回はオマケ。 → 2D表現の多いFFRKサイトと相性がいい。 Android4.3以下のChromeまでカバーしやすい。
14. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 14 Dot, Video, Mask
15. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 15 Dot
16. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. ドット絵の読み込みと表示(1/3) 16 • 大量のドット絵(184体 x 各モーション)が必要なのでスプライト化する。 • Texture Packerでスプライト化し、画像とjsonファイルを出力。 dots.png 1400px 1364px dot184_00.png _dot.json
17. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. ドット絵の読み込みと表示(2/3) 17 TIPS: ・スマホでは3000 x 3000 超程度まで表示可能。スプライトシート1枚の容量は900KB未満に抑える。 ・閾値を超えると表示されなくなる。 • PIXI.jsのLoaderは前述のjsonファイルから画像をロードすることができる。 • ロード完了後、frameId(基本的にはファイル名)でSpriteを生成して配置できる。
18. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. ドット絵の読み込みと表示(3/3) 18
19. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. ドット絵テクスチャの切り替え(1/4) 19 • FFRKのドット絵は｢歩く｣｢詠唱｣｢腕上げ下げ｣等のアクションをする。 • なので、以下の様に一定時間でテクスチャを切り替えることで実装する。 [184_06] [184_07] [184_06] [184_07] [184_00] [184_02] [184_00] [184_02] [184_00] [184_01] [184_00] [184_01] walk enchant win
20. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. ドット絵テクスチャの切り替え(2/4) 20 • 簡易アニメーションを行えるPIXI.extras.AnimatedSpriteを使う。 • アクション用のテクスチャ配列を渡して再生する。 TIPS： PIXI.extras.AnimatedSpriteは細かい動きの制御に向いていない。必要に応じて適宜カスタマイズする。事項参照。 sample: animation gif
21. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. ドット絵テクスチャの切り替え(3/4) 21 • 実際にはもっと細かいアクションがたくさんあるため、機能を拡張する。 • ドット絵のテクスチャ配列を用意し、任意のfpsで再生できるようにする。 アクションを追加 アクションを実行
22. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. ドット絵テクスチャの切り替え(4/4) 22 [184_06] [184_07] [184_06] [184_07] [184_00] [184_02] [184_00] [184_02] [184_00] [184_01] [184_00] [184_01] dot.walk() dot.enchant() dot.win() 柔軟にアクションを実行できるようになった sample: animation gif
23. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. ドット絵を動かす(1/3) 23 • 最後にドット絵自体の動きを制御する。 • 例えば、回転ジャンプを実装する。 • まず、前述のDotクラスに回転アクションを追記する。 小話: • 基本的には原作に無い動きはNGとしている。なので、必死に調べてFINAL FANTASY 6 のモーグリがジャンプする事案を特定。 • 元の動画が手元にない場合はyoutubeを0.25倍再生にして目を凝らすしかない。そんなこともある。 rotate [184_11] [184_03] [184_13] [184_14] [184_12]
24. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. ドット絵を動かす(2/3) 24 • GSAPのTimelineMaxを使って、回転ジャンプのジャンプ部分を作る。 • これに、前述のアクションを組み合わせる。 rotate win(repeat) TIPS： • TimelineLiteでもいいですし、tl.to()を使った方が記述は簡略化できます。 64px上昇・下降
25. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. ドット絵を動かす(3/3) 25 アニメーションライブラリとPIXI.jsの組み合わせで ドット絵を自由に動かすことができる
26. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 26 Video
27. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 動画を再生する(1/3) 27 • スマホにおいては再生制約があるので演出に利用しづらい。 • このため、jpeg sequence等で書き出して、画像連番再生をする。 • 再生には前述のPIXI.extras.AnimatedSpriteを利用すると簡単。 TIPS: • PIXI.jsにはVideoBaseTextureという仕組みがあるが、どうも使いづらいのでこの方法を採用している。 • 前述のスプライトシート同様、1枚の画像面積や容量が閾値を超えると表示されなくなるので、適宜分割する必要がある。 VIDEO jpg jpg jpg jpg jpg jpg jpg jpg ・・・ jpeg sequence 分割して Sprite化 画像出力 _video1_1.jpg _video1_1.json _video1_1.jpg _video1_1.json _video1_0.jpg _video1_0.json
28. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 動画を再生する(2/3) 28 1. 分割されたテクスチャ配列を結合しAnimatedSprite化する。 2. 初回再生時にスプライト間のつなぎ目(スプライト1→スプライト2)でカクつく場 合がある。この場合、PIXI.prepareを使ってプリレンダリングを行う。 TIPS: • PIXI.prepareはPIXI.DIsplayObjectをプリレンダリングすることができる。 [1] AnimatedSpriteを生成して再生。カクつく場合がある [2] 再生前にプリレンダリングすることでカクつきを解消。
29. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 動画を再生する(3/3) 29 動画演出を簡単に実装できる
30. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 30 Mask
31. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. マスク(1/5) 31 • 演出ではよくマスクを利用する。 • 例えば、｢限定した箇所だけ光らせたい｣｢特殊な形状のトランジションをしたい｣な んてことが多々ある。 この部分だけキラ リと光らせたい！ 卵型のトランジシ ョンなんか雰囲気 に合うかも？
32. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. マスク(2/5) 32 • PIXI.jsには3種類のマスクのかけ方がある。 1. PIXI.Graphics ・ Graphicsオブジェクトに描画した形状でマスクする。 ・ Canvas Renderingにも対応。 2. PIXI.Sprite ・ 読み込んだ画像をそのままマスクにする。 ・ WebGL Renderingのみに対応。 3. PIXI.extras.AnimatedSprite ・ 動画マスクを実装できる。 ・ WebGL Renderingのみに対応。 TIPS: • PIXI.extras.AnimatedSpriteを使うと映像作品のようなマスク効果を実装可能です。例えば、煙やインクの動画をマスクにしてみると面白いです。
33. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. マスク(3/5) 33 3.完了 1.クリック • 今回は簡易説明のため、卵状の画像をテクスチャにしたSpriteを使い、 マスク自体をGSAPでアニメーションさせる。 2.卵型に拡縮トラ ンジションをする。
34. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. マスク(4/5) 34 卵型のマスクを適用し、 拡縮アニメーションさせる
35. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. マスク(5/5) 35 [1] ボタンをクリック [2]マスクの拡大率を0へ [3]マスクの拡大率0 [4]マスクの拡大率を1へ [5] 完了 マスク演出も簡単に実装できる
36. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 36 PIXI.jsとアニメーションライブラリを 組み合わせると、簡単に色々な演出が できるようになる
37. © SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All Rights Reserved. 37 紹介 ANNIVERSARY WALLPAPER CREATOR https://3rdanniv.finalfantasyrecordkeeper.com/cpn/wallpaper/ • 海外版FFRKの3周年記念コンテンツ。壁紙ジェネレーター。 • 日替わりで増えていくテンプレートや背景、名シーンや英雄たちを組み合わせて、オリジナルの壁紙をつくろう！