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

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

More than 1 year has passed since last update.

概要

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の位置は変更されます。

sknjpn
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