Help us understand the problem. What is going on with this article?

OpenSiv3DでUnityみたいにUIを作れるシステムを作ってみた

概要

OpenSiv3Dを使うと簡単に綺麗な表現を作ることが出来ますが、複雑なUIを作ろうとすると途端にUpdate関数がごちゃごちゃして難しくなります。
そこで、今回は複雑なUIを作れる仕組みであるEasyViewerをUnityを参考に作ったので、そのご紹介をしようと思います。

EasyViewerの特徴

EasyViewerは、EasyViewerを継承した描画用のクラスを用意することで動かせます。
EasyViewerはchildViewerを複数設定することができ、Unityと同じように階層的にViewerを設計することが出来ます。
また、MouseOverの判定もChildViewerに防がれているかどうかも判定してくれるので、ボタン入力も正確に行えます。
childViewerやparentViewerの取得はtemplate関数を用いているので、childViewerに与えられた入力もスムーズに取得可能です。

ex.png

複雑に構築されたUIはシーン遷移などで消すのが大変になることが多いですが、EasyViewerではdestory関数を呼ぶことでchildViewerをすべて再帰的に削除することが出来ます。

EasyViewerのサンプル

まず、どんなものが出来るのか見てみましょう。
https://twitter.com/sknjpn/status/1194623601833459713
https://www.nicovideo.jp/watch/sm35973445
こちらが、EasyViewerを使って出来たものです。

今回、よさそうなサンプルが思いつかなかったので、代わりに最近EasyViewerを使って開発したFrom the Planetのコードを公開します。(クラス名がEasyViewerではなくViewerになっていますが、中身は同じです)
https://github.com/sknjpn/From-the-Planet
このプロジェクトでは、GUIButtonなど多くのクラスがViewerの派生クラスになっており、コードをシンプルに保ちつつ複雑なUIを実現しています。

EasyViewerのコード

こちらのEasyViewer.hファイルをincludeすることで使えます。
https://github.com/sknjpn/ViewerSystem/blob/master/EasyViewer.h

基本的な使い方は
https://github.com/sknjpn/From-the-Planet
を参考にしてください。

使い方の流れ

1、描画用のクラスを作成し、EasyViewerを継承する
2、void init() override関数に初期化時の動作を記述する(コンストラクタの時点ではparentViewerとchildViewersはnullptrなので参照しない)
3、void update() override関数に更新時の動作を記述する

その他

描画位置はmoveDrawPos関数でずらすことができます。
描画領域はsetViewerRectInLocal関数で設定できます。
ParentViewerの位置を変更すると再帰的にChildViewerの位置は変更されます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away