Code Monkey home page Code Monkey logo

Comments (2)

floooh avatar floooh commented on August 16, 2024 1

I have two examples where a custom font is used, both have the font data embedded in the program though, not loading it from a file (as that wouldn't work in browsers).

See here for an example that just replaces the default font with a TTF font:

// setup sokol-imgui, but provide our own font
simgui_desc_t simgui_desc = { };
simgui_desc.no_default_font = true;
simgui_desc.dpi_scale = sapp_dpi_scale();
simgui_setup(&simgui_desc);
// configure Dear ImGui with our own embedded font
auto& io = ImGui::GetIO();
ImFontConfig fontCfg;
fontCfg.FontDataOwnedByAtlas = false;
fontCfg.OversampleH = 2;
fontCfg.OversampleV = 2;
fontCfg.RasterizerMultiply = 1.5f;
io.Fonts->AddFontFromMemoryTTF(dump_font, sizeof(dump_font), 16.0f, &fontCfg);
// create font texture for the custom font
unsigned char* font_pixels;
int font_width, font_height;
io.Fonts->GetTexDataAsRGBA32(&font_pixels, &font_width, &font_height);
sg_image_desc img_desc = { };
img_desc.width = font_width;
img_desc.height = font_height;
img_desc.pixel_format = SG_PIXELFORMAT_RGBA8;
img_desc.wrap_u = SG_WRAP_CLAMP_TO_EDGE;
img_desc.wrap_v = SG_WRAP_CLAMP_TO_EDGE;
img_desc.min_filter = SG_FILTER_LINEAR;
img_desc.mag_filter = SG_FILTER_LINEAR;
img_desc.content.subimage[0][0].ptr = font_pixels;
img_desc.content.subimage[0][0].size = font_width * font_height * 4;
io.Fonts->TexID = (ImTextureID)(uintptr_t) sg_make_image(&img_desc).id;

And this example uses the default font, but adds an additional icon font:

https://github.com/floooh/v6502r/blob/f2185ca6ccf0ce18ea3258e8ba163027abeefa0d/src/ui.cc#L46-L87

You need to set .no_default_font = true when calling simgui_setup(), so that the font isn't already constructed in the call to simgui_setup(), instead this must be done completely by your own code.

So the important steps are:

  • call simgui_setup with .no_default_font
  • add your own fonts to ImGui's GetIO().Fonts object
  • let ImGui rasterize the font, and get the pixel data and dimensions (
    io.Fonts->GetTexDataAsRGBA32(&font_pixels, &font_width, &font_height);
    )
  • create a sokol-gfx texture from that data and use the returned sg_image handle-id as ImGui's TexID:
    sg_image_desc img_desc = { };
    img_desc.width = font_width;
    img_desc.height = font_height;
    img_desc.pixel_format = SG_PIXELFORMAT_RGBA8;
    img_desc.wrap_u = SG_WRAP_CLAMP_TO_EDGE;
    img_desc.wrap_v = SG_WRAP_CLAMP_TO_EDGE;
    img_desc.min_filter = SG_FILTER_LINEAR;
    img_desc.mag_filter = SG_FILTER_LINEAR;
    img_desc.content.subimage[0][0].ptr = font_pixels;
    img_desc.content.subimage[0][0].size = font_width * font_height * 4;
    io.Fonts->TexID = (ImTextureID)(uintptr_t) sg_make_image(&img_desc).id;

I haven't used PushFont/PopFont so far though, but with the procedure above to create the custom font, this should work too.

from sokol-samples.

atticus5 avatar atticus5 commented on August 16, 2024 1

It works, thank you very much @floooh ! Did not know that I need to create an atlas for it to work:)

from sokol-samples.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.