ツリー構造を使用してRedPoint Systemを実装する

RedPointについて言えば，皆既になじみのないものではなくなっています。ゲームであれソフトウェアであれ、スマホシステムであれ、RedPointを通して、ユーザーやプレーヤーに「新しいメッセージが届きました。チャックしてください」と通知しています。
RedPoint Systemは、ゲーム開発者にとってはかなり厄介なシステムと言えます。関わるところが多く、レイヤーが深く、論理的な判断が複雑で、パフォーマンスが多様で、サーバーの判断が必要なものもあれば、クライアントの判断が必要なものもあり、扱いに面倒なところが多いです。
 
いくつかのプロジェクトでは、初期段階ではRedPointシステムの全体的な計画がないため、後期段階ではRedPointのニーズとプレゼンテーションに問題が発生しました。3〜4セットのRedPointシステムが共存されており、再構築しても根本的に解決できません。この記事では、RedPointの方法を共有します。
 
##RedPoint Systemの概略
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/578f28ea-eb7b-dcf4-f09b-55ec31e565f8.png)



上図のように、RedPoint Systemを計画する際には、システム全体を構造層、駆動層、表示層の3つの独立した部分に分割しました。
 
構造層は、RedPoint Systemの階層構造を展開するために使用されます。RedPoint Systemの階層が深いため、ツリー構造でその階層を紹介しようと思います。
 
駆動層とは、ツリー構造を駆動して状態の変化を生成する方法、および状態の変化後に変更された動作を指定された表示層に通知して、データとプレゼンテーションをある程度分離する方法を指します。
 
表示層は、文字通りにプレゼンテーションの役割を担っています。例えば、単純な赤い点なのか、数字も表示するか、アイコンの揺れをするか、newというタグを表示するか、特殊効果を再生するか、などのような問題はこの表示層によって管理されています。
 
##構造の設計

 
最初に一つの例から確認しましょう。UGUIによって設計されたが、一応これで説明させていただきます。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/ee4ac6bd-3b6b-01b1-2ed5-ac1cbd0435c6.png)


メインインターフェイスには、アライアンス、タスク、メールの3つのメインエントランスがあることがわかります。メールインターフェースでは、システム、チーム、アライアンスの3つのタブに分かれています。
 
ツリー構造に従って分析すると、次のようになります。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/24c629ce-c313-2619-2578-59d542a4657d.png)


 
メインインターフェイスをルートノードとし、他のノードはすべてツリーの子ノードまたはリーフノードです。ここではメールモジュールだけが計画されているため、メールの下には3つのサブノードがあります。この章節も、この計画に基づき、Demoとコードを設計しようと思います。
 
##コードのデザイン

 
まずは、ツリー構造について見てみましょう。次のようになります。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/13ba78e3-2ca8-32ca-dd51-a25147df7c71.png)


constクラスを定義し、システムに従ってツリーの各ノードを分割します。たとえば、上記のRedPointツリー構造では、stringを使用してコードを完成させることができます。この定義は、構造を計画するためだけでなく、後でイベント駆動時のkeyを提供するためにも使用されます。
ツリー構造を表現した後、ノードがどのように表現されるかを見てみましょう。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/c34bf607-ea6b-23c5-09fe-a9d9ac1047a3.png)


いくつかのフィールドの意味は比較的明確なので、あまり説明しません。ノードも明確に定義されたら、RedPointSystemが何をする必要があるかを見てみましょう。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/3ea5e13d-b4f4-162a-46f2-dfdf4dcf15e0.png)


1つ目は、イベント駆動のDelegateタイプを定義すること、2つ目は、RedPointツリーのルートノードを持つこと、3つ目は、起動時の初期化を容易にするためにListに注意が必要なRedPointツリーを追加することです。
 
次は初期化です：
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/6ee3f5fe-40c1-be03-2a63-f93cf179e695.png)


コードは非常に単純です。つまり、各stringを配列に分割してから、配列をツリー構造に処理します。
 
ツリー構造が整ったので、イベント駆動を設定する必要があります。これは、このツリーにイベントコールバックをバインドするためのものです。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/01c6e402-a313-81b2-4449-e6a962077066.png)


ここで、着信文字列はstringであるため、処理した最後のノードは、実際にコールバックをバインドする必要があるノードであることに注意してください。
 
ここまで、ツリー構造は完成、イベントモニタリングも設計し終わりました。では、駆動層についてはどうでしょうか。次のように：
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/88e63d63-1add-e886-561d-b9f22b49aa4b.png)


この関数は、コールバックを設定する上記の関数と非常によく似ています。実際のプロジェクトでは、2つの共通部分をパブリック関数として抽出することを検討する必要があります。すばやく表示するために、コードは簡潔ではありません。一般に、対応するノードを見つけて、それに特定の数のRedPointを設定します。
 
つまり、RedPointの数は、RedPointシステム全体とは関係ありません。サーバーからのプロトコル通知、クライアント自体によって送信されたデータ、またはファイルから読み取られたデータの場合があります。つまり、RedPointシステム自体は、RedPointの生成、管理、およびプレゼンテーションにのみ焦点を当てており、データのソースは考慮していません。
 
上記のコードは、RedPointNode構造で記述されたSetRedPointNumの関数に関連付けられています。この関数を見てください：
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/0990fab2-50de-85c0-0517-a6fc777a37f4.png)


ここでは特別な注意を払う必要があります。RedPointツリーは厳密に階層的に定義されています。つまり、すべての非リーフノードのRedPointは、その子ノードの統計から取得する必要があります。たとえば、メインインターフェイスに示したメールの数は、メールインターフェイス内の3つのタグの数の合計で、非リーフノードのRedPointの数を直接設定することはできません。関連するロジックが必要な場合は、表示層に独立に実行することをお勧めします（各ノードはのコールバックイベントに個別にバインドできます）。
 
内部の関数にも関わったので、次のように示します。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/42bda8e2-2f27-de8c-f03a-5dbb17088c22.png)


ここまで、RedPointシステムの設計は完了しました。
 
##実際のプレゼンテーション
 
実際のパフォーマンスを見てみましょう！
 
デモコード：
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/e66ebb69-16b0-1931-bf09-8835dd10f53c.png)


 
イベントハンドラー関数：

![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/3cf968c1-e692-9280-df3c-6cd56adf2239.png)

 
インターフェイスのプレゼンテーション：
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/48556745-cfba-a082-bb0d-6626065bff04.png)


 
ログエクスポート：
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653855/0f5b4505-8665-c7b9-3e23-09062d4d5fdc.png)


 
予想通り！
 
##後記：

冒頭で述べたように、RedPointシステムには3つのモジュールがありますが、現在のデモは構造層と駆動層のみを実装されており、表示層は一括的に計画されていないが、難しいことではありません。Listen関数に統一された処理クラスにつながり、スタイルを渡して分類すれば済みます。
 
デモであるため、アイデアと効果のみを示しています。コードはあまり簡潔ではなく、パフォーマンスも最高ではないため、使用する場合は、データ構造とパフォーマンスを考慮する必要があります。
 
また、これはRedPointシステムの実装ための一つの方法に過ぎず、すべての状況を解決できるわけではありませんが、現時点では、RedPoint面のニーズのほとんどはこのソリューションで解決できます。

---
UWA Technologyは、モバイル/VRなど様々なゲーム開発者向け、**パフォーマンス分析**と**最適化ソリューション**及び**コンサルティングサービス**を提供している会社でございます。

今なら、UWA GOTローカルツールが**15日間に無償試用**できます！！
よければ、ぜひ！

UWA公式サイト：https://jp.uwa4d.com
UWA GOT OnlineレポートDemo：https://jp.uwa4d.com/u/got/demo.html
UWA公式ブログ：https://blog.jp.uwa4d.com