When I try to use fonts all of ImGui disappears.

[hapgood-brian]

First of all, awesome library. I'm hoping you can help me if you get the time, I'm sure you're swamped. Or not, ImGui is just that good. I think I've set up everything correctly, but when I enable the code path that tries to use my TTFs I get nothing. Nothing draws at all. I found one magic bullet, calling io.Fonts->Build() because before that the runtime just crashed. Another topic. I easily got past that.

The return result for AddFontFromFileTTF is a valid pointer. Again, no crashes when I PushFont and PopFont. Just nothing draws.

          if( e_getCvar<bool>( "LOAD_GUI_FONTS"_64 )){
            if( !g_pRobotoReg14 ){
              const string kRobotoRegAbs( "~/Roboto/Roboto-Regular.ttf" );
              const string kRobotoRegOS( kRobotoRegAbs.os() );
              ImGuiIO& io = ImGui::GetIO();
              ImFontConfig config{};
              config.OversampleH = 2;
              config.OversampleV = 1;
              config.GlyphExtraSpacing.x = 1.f;
              config.MergeMode = false;
              g_pRobotoReg14 = io.Fonts->AddFontFromFileTTF(
                  kRobotoRegOS
                , 14
                , &config );
              g_pRobotoReg22 = io.Fonts->AddFontFromFileTTF(
                  kRobotoRegOS
                , 22
                , &config );
              io.Fonts->Build();
            }
          }

I'm just keying off g_pRobotoReg14 because I only want it to ever be done once. In my code this is placed in the screen initializer and that's re-entrant.

So I'm figure that looks good. I couldn't find anywhere any documentation on config.MergeMode without digging into the code. So I'm not sure if it MUST be true when using more than one font. In your example in the FONTS page there was no storing of the return value from AddFontFromFileTTF so I was confused. What do I push in PushFont?

Next piece of code: where I'm using the font.

      void Gepetto::onImmediateMaterialKit(){

        //----------------------------------------------------------------------
        // Setup the window metrics.
        //----------------------------------------------------------------------

        if( !m_tFlags->bImSetupMkInit ){
          m_tImMaterialKitBounds.min.x = f32( e_cxWindow() - 512.f ) * 0.5f;
          m_tImMaterialKitBounds.min.y = f32( e_cyWindow() - 768.f ) * 0.5f;
          m_tImMaterialKitBounds.max.x = m_tImMaterialKitBounds.min.x + 512.f;
          m_tImMaterialKitBounds.max.y = m_tImMaterialKitBounds.min.y + 768.f;
          ImGui::SetNextWindowSize({ 512, 768 });
          ImGui::SetNextWindowPos({
              m_tImMaterialKitBounds.min.x.as<float>()
            , m_tImMaterialKitBounds.min.y.as<float>() });
          m_tFlags->bImSetupMkInit = 1;
        }

        //----------------------------------------------------------------------
        // Add the window.
        //----------------------------------------------------------------------

        if( m_bImMaterialKitActive ){
          ImGui::SetNextWindowSizeConstraints(
              {  256,  256 }
            , { 1024, 1536 }
            , nullptr
            , nullptr );
          ImGui::Begin( "Material Kit", &m_bImMaterialKitActive );

            //------------------------------------------------------------------
            // Add UI for depth buffer materials.
            //------------------------------------------------------------------

            ImGui::PushFont( g_pRobotoReg14 );
            ImGui::Text( "Material Info:" );
            ImGui::PopFont();
            ImGui::InputText( "Comment"
              , &m_aImMaterialKitName[ 0 ]
              ,  m_aImMaterialKitName.capacity() );

            //------------------------------------------------------------------
            // Add a combo-box containing all the material names.
            //------------------------------------------------------------------

            std::vector<Material::handle> materials;
            Class::foreach<Material>(
              [&]( const auto& m ){
                Material::handle hMaterial( m.UUID );
                materials.push_back( hMaterial );
              }
            );
            if( ImGui::BeginCombo( "##materials", m_sImMaterialKitCurItem )){
              for( auto& hMaterial : materials ){
                auto& m = *hMaterial;
                const auto& name = m.toName();
                if( *name == '#' ){
                  continue;
                }
                const auto isSelected=( name == m_sImMaterialKitCurItem );
                if( ImGui::Selectable( name, isSelected )){
                  m_aImMaterialKitDiff[ 0 ] = m.inAttributes( 0 ).r.as<float>();
                  m_aImMaterialKitDiff[ 1 ] = m.inAttributes( 0 ).g.as<float>();
                  m_aImMaterialKitDiff[ 2 ] = m.inAttributes( 0 ).b.as<float>();
                  m_aImMaterialKitDiff[ 3 ] = m.inAttributes( 0 ).a.as<float>();
                  m_aImMaterialKitSpec[ 0 ] = m.inAttributes( 1 ).r.as<float>();
                  m_aImMaterialKitSpec[ 1 ] = m.inAttributes( 1 ).g.as<float>();
                  m_aImMaterialKitSpec[ 2 ] = m.inAttributes( 1 ).b.as<float>();
                  m_aImMaterialKitSpec[ 3 ] = m.inAttributes( 1 ).a.as<float>();
                  m_aImMaterialKitEmis[ 0 ] = m.inAttributes( 2 ).r.as<float>();
                  m_aImMaterialKitEmis[ 1 ] = m.inAttributes( 2 ).g.as<float>();
                  m_aImMaterialKitEmis[ 2 ] = m.inAttributes( 2 ).b.as<float>();
                  m_aImMaterialKitAmb [ 3 ] = m.inAttributes( 2 ).a.as<float>();
                  m_aImMaterialKitAmb [ 0 ] = m.inAttributes( 3 ).r.as<float>();
                  m_aImMaterialKitAmb [ 1 ] = m.inAttributes( 3 ).g.as<float>();
                  m_aImMaterialKitAmb [ 2 ] = m.inAttributes( 3 ).b.as<float>();
                  m_aImMaterialKitAmb [ 3 ] = m.inAttributes( 3 ).a.as<float>();
                  m_hImMaterialKitCurHandle = hMaterial;
                  m_sImMaterialKitCurItem = name;
                }
                if( isSelected ){
                  ImGui::SetItemDefaultFocus();
                }
              }
              ImGui::EndCombo();
            }

            //------------------------------------------------------------------
            // Color pickers.
            //------------------------------------------------------------------

            ImGui::ColorEdit4( "Base", &m_aImMaterialKitDiff[ 0 ]);
            ImGui::ColorEdit4( "Spec", &m_aImMaterialKitSpec[ 0 ]);
            ImGui::ColorEdit4( "Emis", &m_aImMaterialKitEmis[ 0 ]);
            ImGui::ColorEdit4( "Amb",  &m_aImMaterialKitAmb [ 0 ]);

            //------------------------------------------------------------------
            // Apply will set material data on the current material selection.
            //------------------------------------------------------------------

            if( m_hImMaterialKitCurHandle ){
              if( ImGui::Button( "Apply" )){
                for( auto& hMaterial : materials ){
                  auto& m = *hMaterial;
                  if( m.toName() == m_sImMaterialKitCurItem ){
                    if( IEngine::screen.isa<SceneView>() ){
                      e_asScreen<SceneView>()->setGepetto( this );
                      IEngine::screen->sendResponse(
                                     "MaterialAppliedFromImGui"_64 );
                      e_asScreen<SceneView>()->setGepetto( nullptr );
                    }
                    m.inAttributes( 0 ).r = m_aImMaterialKitDiff[ 0 ];
                    m.inAttributes( 0 ).g = m_aImMaterialKitDiff[ 1 ];
                    m.inAttributes( 0 ).b = m_aImMaterialKitDiff[ 2 ];
                    m.inAttributes( 0 ).a = m_aImMaterialKitDiff[ 3 ];
                    m.inAttributes( 1 ).r = m_aImMaterialKitSpec[ 0 ];
                    m.inAttributes( 1 ).g = m_aImMaterialKitSpec[ 1 ];
                    m.inAttributes( 1 ).b = m_aImMaterialKitSpec[ 2 ];
                    m.inAttributes( 1 ).a = m_aImMaterialKitSpec[ 3 ];
                    m.inAttributes( 2 ).r = m_aImMaterialKitEmis[ 0 ];
                    m.inAttributes( 2 ).g = m_aImMaterialKitEmis[ 1 ];
                    m.inAttributes( 2 ).b = m_aImMaterialKitEmis[ 2 ];
                    m.inAttributes( 2 ).a = m_aImMaterialKitAmb [ 3 ];
                    m.inAttributes( 3 ).r = m_aImMaterialKitAmb [ 0 ];
                    m.inAttributes( 3 ).g = m_aImMaterialKitAmb [ 1 ];
                    m.inAttributes( 3 ).b = m_aImMaterialKitAmb [ 2 ];
                    m.inAttributes( 3 ).a = m_aImMaterialKitAmb [ 3 ];
                    break;
                  }
                }
              }
            }

          ImGui::End();
        }
      }

I only set the position and bounds once so I can actually move the window. Seemed like the right thing to do.

This is probably not the place to ask the following question but... How do I change all fonts everywhere? I like having the power of changing fonts surgically but I'd love to change them all in one place. That's an aside btw.

Thank you for your time,

Today is my first day using ImGUI and it's been pretty straightforward.

Brian.

[hapgood-brian]

[thedmd]

You can recreate atlas texture in Metal using these functions:

IMGUI_IMPL_API bool ImGui_ImplMetal_CreateFontsTexture(id<MTLDevice> device);
IMGUI_IMPL_API void ImGui_ImplMetal_DestroyFontsTexture();