# ブラシュアップ会： cross ティザー

## 基本情報
* SGチームの新規ゲームのプロモーション案件。
* HUNTER×HUNTERのソーシャルゲーム「アリーナバトル」をDeNAさんと共同で開発中。
* 流れ的には、8月26日にハンター試験開始のお知らせとともに謎のカウントダウンサイトとハンターによってジャックされたジョルダンサイトが現れる。
* それぞれのサイトの謎をといてハンター試験のクリアを目指すのがプロモーションの趣旨。メディア的にはサイト2つとTwitterDMBotの組み合わせ
* ちなみにcrossのプロモーションだけで作るサイトがめちゃくちゃある（６個？か７個くらい？）

## github
* ジョルダン風サイト：https://github.com/kayac/cl-cross-teaser
* カウントダウンサイト：https://github.com/kayac/cl-cross-teaser-countdown

## テストサイト
* ジョルダン風サイト：https://cl-cross-teaser.kayac.cc/teaser/ (cross/jorudan)
* カウントダウンサイト：https://cl-cross-teaser-cd.kayac.cc/countdown/ (cross/final)

## フロー
1.ジョルダンサイトに行く
2.ハンター試験会場に行く
3.ツイッターアカウントをフォローする（TwitterDMbot）
4.ヒントを頼りに答えを試験会場で入力
5.ヒントを頼りにカウントダウンサイトに行って画面を叩きまくる
6.これまでを振り返って最終試験会場で答えを入力
7. Congraturation

## 分担
* ジョルダン風サイトの入り口モーダルまで： ブラウンくん
* ジョルダン風サイト一次試験、カウントダウンサイト： たがみ
* レビュー、cross全体の技術を統べるエンジニア： いえもんさん

## 技術的な話
### ジョルダン風サイト
* 使用ライブラリ：[three.js](https://threejs.org/)
* 諸事情で、慣れているthree.jsで実装。
* 単純な[ホワイトノイズ](https://thebookofshaders.com/10/?lan=jp)なので、新しいことはやっていない。

* 設計
* 多少重くても希望の演出を組み込んでほしいというオーダーだった。
* ほぼ井川さん作のgif・連番を並べて、動画をペタっとしただけ。
* ↑ 実装する道も考えましたが、時間的に厳しかったので思い切った。

* 上手く出来たところ
* なし。

* ブラッシュアップしたいところ
* とくべつ考えていない。

### カウントダウンサイト
* 使用ライブラリ：[TweenMax(GSAP)](https://greensock.com/gsap), [pixi.js](https://www.pixijs.com/)

* 設計
* 割と演出は●トリックスをリファにしてるとのこと。基本打ち文字アニメーションをベースにしてる（TweenMaxのstaggerが活躍）
* animationSprite使うの初でよくわからなかったけど、まっちーさんのおかげで動いた。その時教えてもらったやり方を元にpixiでの連番アニメーション用のクラスを作った。
* パフォーマンスが怖いので無理にpixiを使わなくていいところはCSS(TweenMax)でやりくり。今まで使ったことないようなCSSにめちゃお世話になってる（maskとかperspectiveとか）

* 上手く出来たところ
* シェーダー書いてpixiのカスタムフィルターとして読み込ませることを初めてやった。highp設定しないと死ぬことを知らなくて最初焦った。
* まだpixi.jsを使い慣れてなかったので、使ってない `PIXI.application`を適度にdestroyしないとヒープが起こってしまう現象に出くわして焦った（ブラウンくんに相談して解決した）
* パラマニアの時にdat.guiを使わなかった反省をぶつけた。TweenMaxでの値指定やpixiでのスプライト位置指定で活躍
* 立石さんの希望でライセンスカードを突っついたら動かすようにしてる。単純にX軸方向とY軸方向でどこまで傾くかの範囲を決めて、カード上でタッチした座標をその範囲にマッピングさせればできた。
* グリッチの動きはカウントダウンのところをのぞいて全てCSS

* ブラッシュアップしたいところ
* カウントダウンサイトが崩壊するところもシェーダーで書いているが、正直やり方がわからなさすぎて、いえもんさんがLGTMカメラの時に書いたグリッチシェーダーをそのまま持ってきてちょこちょこ値を変えているだけの状態。なのであまり狙った感じが出せてなくて困ってる。
https://github.com/kayac/cl-lgtm-panel/blob/develop/src/assets/shader/glitch.fs

* CSSグリッチの感じがまだ納得いってないのでパターンをあと2種くらい入れておきたい
* というか演出とかもまだ詰め込むので、なんかきになるとこあればめちゃくちゃ教えて欲しい

## まだやってない
### ジョルダン風サイト(朝時点)
* 音が入っていない。
* 一部端末で上下が見切れるらしい。

### カウントダウンサイト(朝時点)
* クリア人数取得のAPIがまだ繋げられてない
* 端末によっては画面にちょうど収まりきるサイズになってなかったりする（めちゃくちゃ直したい）
* 音が入ってない
* 諸々の演出