やりたいことの整理

[sthairno]

対象にしたい人

GUIを実装したいOpenSiv3D(旧Siv3Dではない)のユーザー

• 高専プロコンにおいて、ビジュアライザとしてSiv3DをGUIに採用する層
  • https://x.com/NachiaVivias/status/1859500463642771756/photo/1
  • https://note.com/hachi_mori_/n/n444c9203bab6
• Siv3Dをゲーム開発に使う層
• 研究や機能サンプルのデモ画面を作る際に、パラメーター調整のUIとしてSimpleGUIを使う層
  → 本来ならDear ImGuiも選択肢としてあっていいはず、認知度不足もあるかも

参考：https://siv3d.github.io/ja-jp/#siv3d-%E3%81%AE%E7%94%A8%E9%80%94

Web系は触れたことがあるけどSiv3D,C++未経験の人 (優先度低め)

• 個人のスキルが大きく分かれる部活動,サークルの中では、共同でSiv3Dの開発をしようとするとC++を使える人だけが開発に参加できるという状況が生まれる
• Webの人でもデザインできる、馴染みのあるHTMLを使えるような環境がほしい

自分自身 (優先度もっと低め)

• ロマン
• 実装したい欲を満たす
• Reactの勉強
• OpenSiv3Dでプレゼンする夢を見たい
• パワポよりもインタラクティブでかっこいい見た目の画面が作れそう✨️

課題

• 凝ったレイアウトが作りづらい
  • 現状は座標直打ちで、横に並べるなどの操作は難しい
    • フォントの場合：font(U"aaa").region()でサイズ取得→font(U"aaa").draw()で描画→位置を格納して次の要素を描画
• 実装コストの問題
  • GUI特有の処理(カーソル判定,レイアウト,スクロール)などが提供されておらず、1からGUIエンジンを実装する必要がある
  • 例：
    • https://github.com/sumidawara/pixel_shooter/tree/main/ri-rehi/GUI
• 完成度の問題
  • 前の項目と関連して、作品のコアとなる部分の実装やUXの調整に集中しづらい
  • 悪い意味で「Siv3Dらしい」のっぺりとした見た目のUIになる
  • 高専プロコンの自由課題部門では完成度が評価に影響する
• カスタマイズ性の低さ
  • SimpleGUIは色や大きさなどの細かいカスタマイズができない

やりたいこと

Yogaを使ったレイアウトシステム (90%完了)

• レイアウトのやりたいことはだいたい揃っている
  • 横に引き伸ばす
  • 右上に固定
  • 縦横に並べて配置
  • 間隔の調整
• HTMLのdisplay: flexと同じ仕組み
  • Webと同じ画面が作れる→連携がしやすくなる
  • Web系の人にも馴染みがある
• React NativeやUnityにも採用されている
  • https://docs.unity3d.com/ja/2020.3/Manual/UIE-LayoutEngine.html

Webデザイナーの実装 (60%完了)

Siv3Dを知っているがWebは知らない人向け、もしくはどちらも知らない人向け

#6

GUIシステムの開発 (0%完了)

• イベントシステムや表示順の制御などを実装する
• 見た目をカスタマイズ可能なUIコンポーネントの実装
  • デフォルトの見た目は用意する (SimpleGUIぽい配色にする予定)
  • draw関数を好きに置き換えられるようにする
    • ボタンであれば押し込み状態などを共有し、更新ロジックはシステム側で、状態の描画はユーザー関数でできるように
      • OpenSiv3Dはすでに描画に関するAPIはかなり充実しているため、そこまでカバーする必要はない
    • ゲームやハッカソンなど、テーマに沿ったデザインにできる (実戦に耐えうる形にできる)
• Main.cppに書く行数は最小限にする

  • void Main()
    {
        FlexLayout::Layout layout(...);
        
        // ユーザー描画関数の設定
        layout.setRenderer(U"Button", [](State state){
            // stateの描画
        });
    
        // 参照の取得
        Button btn = layout.findButtonById(U"btnid");
    
        while (System::Update())
        {
            layout.update();
            
            // ボタンクリック時の処理
            if (btn.clicked())
            {
                Print << U"Clicked!";
            }
            
            layout.draw();
        }
    }