6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Siv3DAdvent Calendar 2019

Day 7

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

Last updated at Posted at 2019-12-06

概要

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

6
4
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?