Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ゲームプロモーション何某
Search
hesusan
July 25, 2018
Programming
1
2.6k
ゲームプロモーション何某
ゲームプロモーションサイト制作時に利用してきたPIXI.jsの実装例を5分で紹介。Dot, Video, Maskの3テーマで構成されたライトな内容。応用編はまたいつか。
hesusan
July 25, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
940
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
180
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
870
CSC509 Lecture 05
javiergs
PRO
0
300
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3k
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1k
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
780
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
390
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
590
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.5k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
185
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
RailsConf 2023
tenderlove
30
1.2k
Unsuck your backbone
ammeep
671
58k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Thoughts on Productivity
jonyablonski
70
4.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Transcript
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 1 ゲームプロモーションサイト何某 株式会社ディー・エヌ・エー 西尾 顕 © SQUARE ENIX CO., LTD. © DeNA Co., Ltd.
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 2 自己紹介 • フロントエンドエンジニアらしい。 • バックエンドや企画じみたことをすることもある(人手不足)。 • スマホ案件9割5分、PC案件5分。 • 海外案件9割、日本案件1割。 • FINAL FANTASY Record Keeper(以降、FFRK)をはじめとし た、弊社ゲームプロモーションサイトを中心に制作している。
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 3 ゲームプロモーションサイトって何?
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. ▪リリース前の課題 • 認知度・期待感の向上 • 事前登録の確保。 ▪リリース後の課題 • 認知度の更なる向上。 • NUUやCUU、RUUやDAUといった各種数値の維持・向上、 等々 4 群雄割拠するゲームアプリ界の中で人気アプリであり続けること はさることながら、維持・向上させることはとても大変・・・ → これらの課題解決に助力する役割を担う
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 5 例えば?
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 6 ゲーム系 • 海外でも強い人気を誇るFINAL FANTASY 零式 のキャラクターにフィーチャーしたクロスワードゲーム。 • パズル完成後に出てくるキーワードを並び替え、零式キャラクターの壁紙をゲットしよう! Keepers´ Crossword
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 7 ジェネレーター系 • 海外版FFRKの3周年記念コンテンツ。壁紙ジェネレーター。 • 日替わりで増えていくテンプレートや背景、名シーンや英雄たちを組み合わせて、オリジナルの壁紙をつくろう! ANNIVERSARY WALLPAPER CREATOR
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 8 アップローダー系 • FF30周年記念海外コンテンツ。画像アップローダー。 • 皆のお気に入りのスクリーンショットをアップロードしてドット絵を完成させよう! Prompto´s Photo Contest 使用NGなので変更する
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 9 などなど・・・ • 海外版FFRKのクリスマスコンテンツ。 • 日替わりで公開されていくオーナメントを使って、自分だけのスノードームを作ってシェアしよう! Snow Globe of Wonder
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 10 FFRKサイトだけで約20本
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 11 今回はFFRKのプロモーションサイトを 通して使う簡単な技術の紹介でも
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 12
© 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までカバーしやすい。
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 14 Dot, Video, Mask
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 15 Dot
© 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
© 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を生成して配置できる。
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. ドット絵の読み込みと表示(3/3) 18
© 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
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. ドット絵テクスチャの切り替え(2/4) 20 • 簡易アニメーションを行えるPIXI.extras.AnimatedSpriteを使う。 • アクション用のテクスチャ配列を渡して再生する。 TIPS: PIXI.extras.AnimatedSpriteは細かい動きの制御に向いていない。必要に応じて適宜カスタマイズする。事項参照。 sample: animation gif
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. ドット絵テクスチャの切り替え(3/4) 21 • 実際にはもっと細かいアクションがたくさんあるため、機能を拡張する。 • ドット絵のテクスチャ配列を用意し、任意のfpsで再生できるようにする。 アクションを追加 アクションを実行
© 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
© 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]
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. ドット絵を動かす(2/3) 24 • GSAPのTimelineMaxを使って、回転ジャンプのジャンプ部分を作る。 • これに、前述のアクションを組み合わせる。 rotate win(repeat) TIPS: • TimelineLiteでもいいですし、tl.to()を使った方が記述は簡略化できます。 64px上昇・下降
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. ドット絵を動かす(3/3) 25 アニメーションライブラリとPIXI.jsの組み合わせで ドット絵を自由に動かすことができる
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 26 Video
© 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
© 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] 再生前にプリレンダリングすることでカクつきを解消。
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 動画を再生する(3/3) 29 動画演出を簡単に実装できる
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 30 Mask
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. マスク(1/5) 31 • 演出ではよくマスクを利用する。 • 例えば、「限定した箇所だけ光らせたい」「特殊な形状のトランジションをしたい」な んてことが多々ある。 この部分だけキラ リと光らせたい! 卵型のトランジシ ョンなんか雰囲気 に合うかも?
© 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を使うと映像作品のようなマスク効果を実装可能です。例えば、煙やインクの動画をマスクにしてみると面白いです。
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. マスク(3/5) 33 3.完了 1.クリック • 今回は簡易説明のため、卵状の画像をテクスチャにしたSpriteを使い、 マスク自体をGSAPでアニメーションさせる。 2.卵型に拡縮トラ ンジションをする。
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. マスク(4/5) 34 卵型のマスクを適用し、 拡縮アニメーションさせる
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. マスク(5/5) 35 [1] ボタンをクリック [2]マスクの拡大率を0へ [3]マスクの拡大率0 [4]マスクの拡大率を1へ [5] 完了 マスク演出も簡単に実装できる
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 36 PIXI.jsとアニメーションライブラリを 組み合わせると、簡単に色々な演出が できるようになる
© SQUARE ENIX CO., LTD. © DeNA Co., Ltd. All
Rights Reserved. 37 紹介 ANNIVERSARY WALLPAPER CREATOR https://3rdanniv.finalfantasyrecordkeeper.com/cpn/wallpaper/ • 海外版FFRKの3周年記念コンテンツ。壁紙ジェネレーター。 • 日替わりで増えていくテンプレートや背景、名シーンや英雄たちを組み合わせて、オリジナルの壁紙をつくろう!