Label rendering a bit better

assets/games/helloworld/fonts/CMakeLists.txt

@@ -3,4 +3,21 @@
 # This software is released under the MIT License.
 # https://opensource.org/licenses/MIT
 
-tool_truetype(ysabeau_regular ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-Regular.ttf)
+tool_truetype(ysabeau_black ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-Black.ttf)
+tool_truetype(ysabeau_black_italic ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-BlackItalic.ttf)
+tool_truetype(ysabeau_bold ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-Bold.ttf)
+tool_truetype(ysabeau_bold_italic ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-BoldItalic.ttf)
+tool_truetype(ysabeau_extra_bold ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-ExtraBold.ttf)
+tool_truetype(ysabeau_extra_bold_italic ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-ExtraBoldItalic.ttf)
+tool_truetype(ysabeau_extra_light ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-ExtraLight.ttf)
+tool_truetype(ysabeau_extra_light_italic ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-ExtraLightItalic.ttf)
+tool_truetype(ysabeau_italic ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-Italic.ttf)
+tool_truetype(ysabeau_light ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-Light.ttf)
+tool_truetype(ysabeau_light_italic ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-LightItalic.ttf)
+tool_truetype(ysabeau_medium ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-Medium.ttf)
+tool_truetype(ysabeau_medium_italic ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-MediumItalic.ttf)
+tool_truetype(ysabeau_regular ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-Regular.ttf)
+tool_truetype(ysabeau_semi_bold ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-SemiBold.ttf)
+tool_truetype(ysabeau_semi_bold_italic ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-SemiBoldItalic.ttf)
+tool_truetype(ysabeau_thin ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-Thin.ttf)
+tool_truetype(ysabeau_thin_italic ${CMAKE_CURRENT_LIST_DIR}/Ysabeau-ThinItalic.ttf)

src/dawn/component/ui/UICanvas.cpp

@@ -38,9 +38,20 @@ struct RenderPassContext &ctx
 ) {
   if(this->components.empty()) return {};
 
-  data.projection = ctx.camera->getProjection();
+  glm::mat4 projection;
-  data.view = ctx.camera->getItem()->getWorldTransform();
+  glm::mat4 view;
-  data.model = this->getItem()->getWorldTransform();
+
+  // data.projection = ctx.camera->getProjection();
+  // data.view = ctx.camera->getItem()->getWorldTransform();
+  // data.model = this->getItem()->getWorldTransform();
+
+  data.projection = glm::ortho(
+    0.0f, 1280.0f,
+    720.0f, 0.0f,
+    0.0f, 1.0f
+  );
+  data.view = glm::mat4(1.0f);
+  data.model = glm::mat4(1.0f);
 
   this->passes.clear();
   this->textureBindings.clear();
@@ -57,7 +68,6 @@ struct RenderPassContext &ctx
   }
   flushPass();
 
-  std::cout << "Passes: " << passes.size() << "\n";
   return passes;
 }
 
@@ -65,11 +75,14 @@ void UICanvas::addQuad(
   const glm::vec4 quad,
   const glm::vec4 uvs,
   const struct Color color,
+  const enum UIShaderQuadStyle style,
   const std::shared_ptr<Texture> text
 ) {
-  float_t fTexture;
+  glm::vec4 styleData;
+  styleData[0] = (float_t)style;
+
   if(text == nullptr) {
-    fTexture = -1;
+    styleData[1] = -1;
   } else {
     shadertexturebinding_t texture;
     auto bindingIt = textureBindings.find(text);
@@ -84,14 +97,14 @@ void UICanvas::addQuad(
     } else {
       texture = bindingIt->second;
     }
-    fTexture = (float_t)texture;
+    styleData[1] = (float_t)texture;
   }
 
   data.quads[quadCount] = {
     quad,
     uvs,
     color,
-    fTexture
+    styleData
   };
   quadCount++;
   if(quadCount == UI_SHADER_QUAD_COUNT) flushPass();

src/dawn/component/ui/UICanvas.hpp

@@ -33,6 +33,11 @@ namespace Dawn {
     protected:
       virtual void onInit() override;
       virtual void onDispose() override;
+
+      /**
+       * Flushes all pending quads to the render pass. This doesn't actually
+       * render anything, it just flushes the data buffer to a new pass.
+       */
       void flushPass();
 
     public:
@@ -42,11 +47,21 @@ namespace Dawn {
         struct RenderPassContext &ctx
       ) override;
 
+      /**
+       * Adds a quad to the canvas and performs a flush if necessary.
+       * 
+       * @param quad The quad to add.
+       * @param uvs The UVs to use for the quad.
+       * @param color The color to use for the quad.
+       * @param style Style that the quad should be rendered in.
+       * @param texture The texture to use for the quad, can be null.
+       */
       void addQuad(
         const glm::vec4 quad,
         const glm::vec4 uvs,
         const struct Color color,
-        const std::shared_ptr<Texture> texture
+        const enum UIShaderQuadStyle style,
+        const std::shared_ptr<Texture> texture = nullptr
       );
   };
 }

src/dawn/display/font/TrueTypeCharacter.hpp

@@ -10,6 +10,7 @@ namespace Dawn {
   struct TrueTypeCharacter {
     glm::vec2 advance;
     glm::vec2 size;
+    glm::vec2 offset;
     glm::vec4 quad;
   };
 }

src/dawn/display/font/TrueTypeTexture.cpp

@@ -29,8 +29,8 @@ void TrueTypeTexture::setFace(const FT_Face face) {
   
   // Set the texture size
   texture->setSize(
-    fontSize * 26,
+    fontSize * 24,
-    fontSize * 26,
+    fontSize * 24,
     TextureFormat::R,
     TextureDataFormat::UNSIGNED_BYTE
   );
@@ -75,13 +75,17 @@ void TrueTypeTexture::setFace(const FT_Face face) {
     // Determine the texture position
     if(textureX + face->glyph->bitmap.width >= texture->getWidth()) {
       textureX = 0;
-      textureY += rowHeight + 1;// Tiny gap between rows
+      textureY += rowHeight + 2;// Tiny gap between rows
       rowHeight = face->glyph->bitmap.rows;
     } else {
       rowHeight = Math::max<int32_t>(rowHeight, face->glyph->bitmap.rows);
     }
 
     // Set the quad positions
+    info.offset = glm::vec2(
+      face->glyph->bitmap_left,
+      -face->glyph->bitmap_top
+    );
     info.quad = glm::vec4(
       textureX,
       textureY,
@@ -119,7 +123,7 @@ void TrueTypeTexture::setFace(const FT_Face face) {
     }
 
     // Increment textureX
-    textureX += face->glyph->bitmap.width + 1;// I add a tiny gap between chars
+    textureX += face->glyph->bitmap.width + 2;// I add a tiny gap between chars
   }
 
   this->texture->buffer(buffer);

src/dawn/ui/UIComponent.hpp

@@ -11,8 +11,27 @@
 namespace Dawn {
   class UIComponent {
     protected:
+      /**
+       * Virtual method overridden by the UIComponent to get the quads for the
+       * component.
+       * 
+       * @param t The translation of this component already applied.
+       * @param ctx The canvas to add the quads to.
+       */
       virtual void getSelfQuads(const glm::vec2 t, UICanvas &ctx) = 0;
+
+      /**
+       * Virtual method overridden by the UIComponent to get the children of
+       * this component.
+       */
       virtual std::vector<std::shared_ptr<UIComponent>> getChildren();
+
+      /**
+       * Method called by the UICanvas to get the quads for this component.
+       * 
+       * @param parent The parent translation to apply to the component.
+       * @param ctx The canvas to add the quads to.
+       */
       void getQuads(const glm::vec2 parent, UICanvas &ctx);
 
     public:

src/dawn/ui/UILabel.cpp

@@ -9,9 +9,8 @@ using namespace Dawn;
 
 void UILabel::getSelfQuads(const glm::vec2 t, UICanvas &ctx) {
   std::vector<struct UIShaderQuad> quads;
-  if(this->texture == nullptr) return;
+  if(this->texture == nullptr || this->text.empty()) return;
 
-  const std::wstring text = L"Hello World";
   glm::vec2 position = t;
   glm::vec4 quad;
 
@@ -19,19 +18,37 @@ void UILabel::getSelfQuads(const glm::vec2 t, UICanvas &ctx) {
     auto info = texture->getCharacterData(c);
     ctx.addQuad(
       {
-        position.x,
+        position.x + info.offset.x,
-        position.y,
+        position.y + info.offset.y,
-        position.x + info.size.x,
+        position.x + info.size.x + info.offset.x,
-        position.y + info.size.y
+        position.y + info.size.y + info.offset.y
+      },
+      {
+        info.quad.x,
+        info.quad.y,
+        info.quad.z,
+        info.quad.w
       },
-      info.quad,
       COLOR_WHITE,
+      UIShaderQuadStyle::FONT,
       texture->texture
     );
     position += info.advance;
   }
 }
 
+std::shared_ptr<TrueTypeTexture> UILabel::getFont() {
+  return this->texture;
+}
+
+std::wstring UILabel::getText() {
+  return this->text;
+}
+
 void UILabel::setFont(std::shared_ptr<TrueTypeTexture> texture) {
   this->texture = texture;
+}
+
+void UILabel::setText(const std::wstring &text) {
+  this->text = text;
 }

src/dawn/ui/UILabel.hpp

@@ -11,11 +11,38 @@ namespace Dawn {
   class UILabel final : public UIComponent {
     private:
       std::shared_ptr<TrueTypeTexture> texture = nullptr;
+      std::wstring text = L"Hello World";
 
     protected:
       void getSelfQuads(const glm::vec2 t, UICanvas &ctx) override;
 
     public:
+      /**
+       * Returns the font used for this label.
+       * 
+       * @return The font used for this label.
+       */
+      std::shared_ptr<TrueTypeTexture> getFont();
+
+      /**
+       * Returns the text used for this label.
+       * 
+       * @return The text used for this label.
+       */
+      std::wstring getText();
+
+      /**
+       * Sets the font to use for this label.
+       * 
+       * @param texture TrueType texture to use for this label.
+       */
       void setFont(std::shared_ptr<TrueTypeTexture> texture);
+
+      /**
+       * Sets the text to use for this label.
+       * 
+       * @param text The text to use for this label.
+       */
+      void setText(const std::wstring &text);
   };
 }

src/dawn/ui/UIRectangle.cpp

@@ -13,6 +13,7 @@ void UIRectangle::getSelfQuads(const glm::vec2 t, UICanvas &ctx) {
     glm::vec4(t, t + size),
     uv,
     color,
-    nullptr
+    UIShaderQuadStyle::TEXTURED,
+    texture
   );
 }

src/dawn/util/Math.hpp

@@ -105,7 +105,7 @@ namespace Dawn {
        * @return Rounded number.
        */
       template<typename T>
-      static T round(float_t n) {
+      static T round(const float_t n) {
         return (T)roundf(n);
       }
 
@@ -115,8 +115,41 @@ namespace Dawn {
        * @return Rounded number.
        */
       template<typename T>
-      static T floor(float_t n) {
+      static T floor(const float_t n) {
         return (T)floorf(n);
       }
+
+      /**
+       * Get the square root of a number.
+       * 
+       * @param n Number to get the square root of.
+       * @return float_t 
+       */
+      static float_t sqrt(const float_t n) {
+        return sqrtf(n);
+      }
+
+      template<typename T>
+      static T ceil(const float_t n) {
+        return (T)ceilf(n);
+      }
+
+      /**
+       * Returns the next power of two for the given number.
+       * 
+       * @param n Number to get the next power of two for.
+       * @return The next power of two.
+       */
+      template<typename T>
+      static T nextPowerOfTwo(T n) {
+        n--;
+        n |= n >> 1;
+        n |= n >> 2;
+        n |= n >> 4;
+        n |= n >> 8;
+        n |= n >> 16;
+        n++;
+        return n;
+      }
   };
 }

src/dawnglfw/display/RenderHost.cpp

@@ -100,6 +100,8 @@ void RenderHost::update(const std::shared_ptr<Game> game) {
   assertNoGLError();
   glEnable(GL_DEPTH_TEST);
   assertNoGLError();
+  glEnable(GL_BLEND);
+  assertNoGLError();
 
   // Pipeline
   renderPipeline.render(game);

src/dawnhelloworld/scene/HelloWorldScene.cpp

@@ -1,3 +1,4 @@
+
 // Copyright (c) 2023 Dominic Masters
 // 
 // This software is released under the MIT License.
@@ -22,15 +23,16 @@ using namespace Dawn;
 std::shared_ptr<TrueTypeTexture> texture;
 
 void Dawn::helloWorldScene(Scene &s) {
-  texture = s.getGame()->assetManager.get<TrueTypeTexture>("ysabeau_regular", 32);
+  std::string font = "ysabeau_medium";
+  texture = s.getGame()->assetManager.get<TrueTypeTexture>(font, 24);
 
-  while(!s.getGame()->assetManager.isLoaded("ysabeau_regular")) {
+  while(!s.getGame()->assetManager.isLoaded(font)) {
     s.getGame()->assetManager.update();
   }
 
   auto cameraItem = s.createSceneItem();
   auto camera = cameraItem->addComponent<Camera>();
-  cameraItem->lookAt({ 1200, 1200, 1200 }, { 0, 0, 0 }, { 0, 1, 0 });
+  cameraItem->lookAt({ 120, 0, 300 }, { 120, 0, 0 }, { 0, 1, 0 });
   camera->clipFar = 99999.99f;
 
   // auto quad = s.createSceneItem();
@@ -53,22 +55,15 @@ void Dawn::helloWorldScene(Scene &s) {
   auto uiCanvasItem = s.createSceneItem();
   auto uiCanvas = uiCanvasItem->addComponent<UICanvas>();
 
-  // auto rect = std::make_shared<UIRectangle>();
+  auto rect = std::make_shared<UIRectangle>();
-  // rect->position = { -32, -32 };
+  rect->position = { 32, 32 };
-  // rect->size = { 8, 8 };
+  rect->size = { texture->texture->getWidth(), texture->texture->getHeight() };
-  // rect->color = COLOR_MAGENTA;
+  rect->color = COLOR_MAGENTA;
-  // uiCanvas->components.push_back(rect);
+  rect->texture = texture->texture;
+  uiCanvas->components.push_back(rect);
 
-  // auto rect2 = std::make_shared<UIRectangle>();
+  auto label = std::make_shared<UILabel>();
-  // rect2->color = COLOR_BLUE;
+  label->setFont(texture);
-  // uiCanvas->components.push_back(rect2);
+  label->position = { 32, 650 };
-
+  uiCanvas->components.push_back(label);
-  for(float_t x = -20; x <= 20; x++) {
-    for(float_t y = -20; y <= 20; y++) {
-      auto label = std::make_shared<UILabel>();
-      label->setFont(texture);
-      label->position = { x * 64, y * 32 };
-      uiCanvas->components.push_back(label);
-    }
-  }
 }

src/dawnopengl/display/shader/UIShader.cpp

@@ -33,14 +33,14 @@ void UIShader::getStages(
           "vec4 quad;\n"
           "vec4 uv;\n"
           "vec4 color;\n"
-          "float texture;\n"
+          "vec4 style;\n"
         "};\n"
         "layout (std140) uniform ub_Quad {\n"
           "UIShaderQuad quads[" MACRO_STRINGIFY(UI_SHADER_QUAD_COUNT) "];\n"
         "};\n"
         "out vec2 v_TextCoord;\n"
         "out vec4 v_Color;\n"
-        "out float v_TextureIndex;\n"
+        "out vec4 v_Style;\n"
         "void main() {\n"
           "vec4 pos;\n"
           "vec2 coord;\n"
@@ -52,29 +52,29 @@ void UIShader::getStages(
             "pos.x = quad.quad.x;\n"
             "pos.y = quad.quad.y;\n"
             "coord.x = quad.uv.x;\n"
-            "coord.y = quad.uv.w;\n"
+            "coord.y = quad.uv.y;\n"
           "} else if(vertexIndex == 1) {\n"
             "pos.x = quad.quad.z;\n"
             "pos.y = quad.quad.y;\n"
             "coord.x = quad.uv.z;\n"
-            "coord.y = quad.uv.w;\n"
+            "coord.y = quad.uv.y;\n"
           "} else if(vertexIndex == 2) {\n"
             "pos.y = quad.quad.w;\n"
             "pos.x = quad.quad.x;\n"
             "coord.x = quad.uv.x;\n"
-            "coord.y = quad.uv.y;\n"
+            "coord.y = quad.uv.w;\n"
           "} else if(vertexIndex == 3) {\n"
             "pos.x = quad.quad.z;\n"
             "pos.y = quad.quad.w;\n"
             "coord.x = quad.uv.z;\n"
-            "coord.y = quad.uv.y;\n"
+            "coord.y = quad.uv.w;\n"
           "}\n"
           "pos.z = 0;\n"
           "pos.w = 1;\n"
           "gl_Position = u_Projection * u_View * u_Model * pos;\n"
           "v_TextCoord = coord;\n"
           "v_Color = quad.color;\n"
-          "v_TextureIndex = quad.texture;\n"
+          "v_Style = quad.style;\n"
         "}"
       );
       
@@ -83,12 +83,13 @@ void UIShader::getStages(
         "#version 330 core\n"
         "in vec2 v_TextCoord;\n"
         "in vec4 v_Color;\n"
-        "in float v_TextureIndex;\n"
+        "in vec4 v_Style;\n"
         "uniform sampler2D u_Texture[" MACRO_STRINGIFY(UI_SHADER_TEXTURE_COUNT) "];\n"
         "out vec4 o_Color;\n" 
         "void main() {\n"
           "vec4 texColor = vec4(1, 1, 1, 1);\n"
-          "int vTextInd = int(round(v_TextureIndex));\n"
+          "int vStyle = int(round(v_Style[0]));\n"
+          "int vTextInd = int(round(v_Style[1]));\n"
           "switch(vTextInd) {\n"
             "case -1:\n"
               "texColor = vec4(1, 1, 1, 1);\n"
@@ -112,7 +113,15 @@ void UIShader::getStages(
               "texColor = texture(u_Texture[5], v_TextCoord);\n"
               "break;\n"
           "}\n"
-          "o_Color = texColor * v_Color;\n"
+          "switch(vStyle) {\n"
+            "case 0:\n"
+              "o_Color = texColor * v_Color;\n"
+              "break;\n"
+            "case 1:\n"
+              "o_Color.rgb = v_Color.rgb;\n"
+              "o_Color.a = texColor.r * v_Color.a;\n"
+              "break;\n"
+          "}\n"
         "}\n"
       );
       break;
@@ -157,27 +166,27 @@ void UIShader::getStages(
     ShaderOpenGLStructureType::STD140,
     [&](const struct UIShaderQuad &rel, std::vector<struct ShaderParameter> &parameters) {
       parameters.push_back(ShaderParameter(
-        "u_Quad",
+        "quad",
         &rel.quad,
         ShaderParameterType::VEC4
       ));
 
       parameters.push_back(ShaderParameter(
-        "u_UV",
+        "uv",
         &rel.uv,
         ShaderParameterType::VEC4
       ));
 
       parameters.push_back(ShaderParameter(
-        "u_Color",
+        "color",
         &rel.color,
         ShaderParameterType::COLOR
       ));
 
       parameters.push_back(ShaderParameter(
-        "u_Texture",
+        "style",
-        &rel.texture,
+        &rel.style,
-        ShaderParameterType::TEXTURE
+        ShaderParameterType::VEC4
       ));
     },
     UI_SHADER_QUAD_COUNT

src/dawnopengl/display/shader/UIShader.hpp

@@ -10,12 +10,16 @@ namespace Dawn {
   #define UI_SHADER_QUAD_COUNT 1024
   #define UI_SHADER_TEXTURE_COUNT 16
 
+  enum class UIShaderQuadStyle {
+    TEXTURED = 0,
+    FONT = 1
+  };
+
   struct UIShaderQuad {
     glm::vec4 quad;
     glm::vec4 uv;
     struct Color color;
-    float_t texture;
+    glm::vec4 style;
-    glm::vec3 padding;
   };
   
   struct UIShaderData {