【Unity】バナー広告のようなスライドをDotweenで簡単実装！

スマホアプリで良く見かけるバナー広告のスワイプ処理を作成しました。

 作成フロー

1. バナー広告用オブジェクトを作る。
2. スクリプトを作成し、ドラッグ判定を行う。
3. ドラッグ後にDotweenでバナーをスライドさせる。
4. スライド後に位置を調整する。

使用するPlugin

• DoTween

 バナー広告用オブジェクトを作る

オブジェクトの全体図説明

• bg... 背景画像
• Mask... 表示したいバナー以外を隠す
• parent... バナーリストの親オブジェクト
• image... バナー画像

Maskの範囲

今回はバナーオブジェクト ( Image ) のサイズ ( w : 500 h : 250 ) に合わせて作っています。

バナーの親オブジェクト

位置は任意でお願いします。

スライド処理はこのオブジェクトを動かす事で表現します。

バナーオブジェクト

メインとなるバナー画像。

スライド表現用に3つ必要です。

スクリプトの作成

Banner.csを作成しました。 

・BannerList... スライドさせるバナーオブジェクトリスト

・Rt... スライド用の親オブジェクト

ドラッグ処理用のI nterfaceを導入しています。

ドラッグ判定処理を実装

Unityではドラッグ判定用のinterfaceが用意されています。

・IBeginDragHandler...ドラッグ開始判定

・IDragHandler... ドラッグ中の判定

・IEndDragHandler... ドラッグ終了後の判定

これらの処理を実行するにはEventSystemが必要なので消さないで下さい。

ドラッグ後にDotweenでバナーをスライドさせる

 本題に入ります。

今回はDotweenを使用してスライドを表現します。

Dotweenとは簡単に説明すると 移動アニメーションなどをスクリプト側で設定できる超便利アセットです。

Dotweenの処理の流れは

• DOAnchorPosX... アンカーポジションからX座標のみを動かす ( 動かす値 , 時間)
• SetRelative()...相対値で移動する
• OnComplete()... 移動終了後の処理

Dotweenの移動処理は絶対値で判定されます。

上記のDOAnchorPosXなら、Rtオブジェクトを500fの座標に1秒で移動する ことになります。

しかし、SetRelative()を使うことで Rtオブジェクトの座標 から 500f移動する計算になります。

スライド後に位置を調整する

スライド後の流れです。

今回は右にスライドすると処理なので

 ・1.バナー画像を入れ替える。

 ・2.バナーの親オブジェクトを初期値に戻す

処理を実装します。

スライド後も違和感なく表現されていますね。

まとめ

いかがだったでしょうか！

改良点を上げると

・左側スライド処理も実装する

・左右どちらにドラッグしたかで処理を切り替える。

これらも実装したいですね。

スライド処理は基本この形で表現できるため、皆さんも是非使ってみてください。