Added rounded rect to the engine

Author: Gallasko

res/setupRenderer.pg

@@ -13,6 +13,7 @@ loadShader("2DShapes", "shader/simpleshapes.vs", "shader/simpleshapes.fs");
 loadShader("progressBar", "shader/progressbar.vs", "shader/progressbar.fs");
 loadShader("lineShader", "shader/lineshader.vs", "shader/lineshader.fs");
 loadShader("polygonShader", "shader/polygonshader.vs", "shader/polygonshader.fs");
+loadShader("RoundedRect", "shader/roundedrect.vs", "shader/roundedrect.fs");
 
 print("Shaders loaded successfully.")
 

shader/roundedrect.fs

@@ -0,0 +1,34 @@
+out vec4 FragColor;
+
+in vec4  ourColor;
+in vec2  fragUV;
+in vec2  fragSize;
+in float fragRadius;
+
+// Signed distance function for a rounded rectangle.
+// p        : fragment position relative to rect center (same units as halfSize/radius)
+// halfSize : half-extents of the rectangle
+// radius   : corner radius
+float roundedBoxSDF(vec2 p, vec2 halfSize, float radius)
+{
+    vec2 q = abs(p) - halfSize + radius;
+    return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - radius;
+}
+
+void main()
+{
+    // Map UV [0,1] to coordinates centered on the rectangle, in pixel units.
+    vec2 p        = (fragUV - 0.5) * fragSize;
+    vec2 halfSize = fragSize * 0.5;
+
+    // Clamp radius so it never exceeds half the smallest dimension.
+    float radius = min(fragRadius, min(halfSize.x, halfSize.y));
+
+    float d = roundedBoxSDF(p, halfSize, radius);
+
+    // Smooth the edge over ~1.5 pixels for anti-aliasing.
+    float alpha = 1.0 - smoothstep(0.0, 1.5, d);
+
+    vec4 color = ourColor / 255.0;
+    FragColor = vec4(color.rgb, color.a * alpha);
+}

shader/roundedrect.vs

@@ -0,0 +1,66 @@
+layout (location = 0) in vec3 aPos;
+layout (location = 1) in vec2 aTexCoord;
+
+layout (location = 2) in vec3 aWorldPos;
+layout (location = 3) in vec2 aSize;
+layout (location = 4) in float rotation;
+layout (location = 5) in vec4 aColors;
+layout (location = 6) in float aRadius;
+
+uniform mat4 model;
+uniform mat4 scale;
+uniform mat4 view;
+uniform mat4 projection;
+
+uniform float sWidth;
+uniform float sHeight;
+
+out vec4  ourColor;
+out vec2  fragUV;
+out vec2  fragSize;
+out float fragRadius;
+
+float M_PI = 3.1415926535897932384626433832795;
+
+float rad(float degree)
+{
+    return degree * M_PI / 180.0f;
+}
+
+void main()
+{
+    mat4 posMat = mat4(
+        vec4( 1.0, 0.0, 0.0, 0.0),
+        vec4( 0.0, 1.0, 0.0, 0.0),
+        vec4( 0.0, 0.0, 1.0, 0.0),
+        vec4( -1.0f + 2.0f * aWorldPos.x * (1.0f / sWidth), 1.0f + 2.0f * -(aWorldPos.y) * (1.0f / sHeight), aWorldPos.z / 100.0f, 1.0f) );
+
+    mat4 scaleMat = mat4(
+        vec4( aSize.x, 0.0f, 0.0f, 0.0f),
+        vec4( 0.0f, aSize.y, 0.0f, 0.0f),
+        vec4( 0.0f, 0.0f, 1.0f, 0.0f),
+        vec4( 0.0f, 0.0f, 0.0f, 1.0f) );
+
+    float radRotation = rad(rotation);
+
+    mat4 rotateMat = mat4(
+        vec4(cos(radRotation), -sin(radRotation), 0.0, 0.0),
+        vec4(sin(radRotation), cos(radRotation), 0.0, 0.0),
+        vec4(0.0, 0.0, 1.0, 0.0),
+        vec4(0.0, 0.0, 0.0, 1.0));
+
+    vec2 centerNDC = vec2(0.5*aSize.x, -0.5*aSize.y);
+
+    mat4 Tneg = mat4(1.0);
+    Tneg[3].xy = -centerNDC;
+
+    mat4 Tpos = mat4(1.0);
+    Tpos[3].xy =  centerNDC;
+
+    gl_Position = projection * posMat * view * scale * Tpos * rotateMat * Tneg * scaleMat * model * vec4(aPos.x, aPos.y, aPos.z, 1.0f);
+
+    ourColor   = aColors;
+    fragUV     = aTexCoord;
+    fragSize   = aSize;
+    fragRadius = aRadius;
+}

src/Editor/Gui/contextmenu.cpp

@@ -105,7 +105,8 @@ namespace editor
                        "Add Button",    makeCallable<CreateElement>(UiComponentType::BUTTON),
                        "Add TextInput", makeCallable<CreateElement>(UiComponentType::TEXTINPUT),
                        "Add List",      makeCallable<CreateElement>(UiComponentType::LIST),
-                       "Add Prefab",    makeCallable<CreateElement>(UiComponentType::PREFAB));
+                    //    "Add Prefab",    makeCallable<CreateElement>(UiComponentType::PREFAB),
+                       "Add RoundRect", makeCallable<CreateElement>(UiComponentType::ROUNDEDRECT));
 
         hide();
     }
@@ -237,6 +238,20 @@ namespace editor
                 break;
             }
 
+            case UiComponentType::ROUNDEDRECT:
+            {
+                LOG_INFO(DOM, "Create rounded rect at (" << cX << ", " << cY << ")");
+                ecsRef->sendEvent(CreateInspectorEntityEvent{[cX, cY](EntitySystem* ecsRef) -> EntityRef {
+                    auto newElement = makeRoundedRect2DShape(ecsRef, 10, 50, 50);
+                    newElement.get<PositionComponent>()->setX(cX);
+                    newElement.get<PositionComponent>()->setY(cY);
+
+                    return newElement;
+                }});
+
+                break;
+            }
+
             default:
                 break;
         }

src/Editor/Gui/contextmenu.h

@@ -20,7 +20,8 @@ namespace pg
         TTFTEXT,
         TEXTINPUT,
         LIST,
-        PREFAB // Todo to implement !
+        PREFAB, // Todo to implement !
+        ROUNDEDRECT
     };
 
     class Input;

src/Engine/2D/simple2dobject.cpp

@@ -264,4 +264,172 @@ namespace pg
 
         changed = true;
     }
+
+    // ---------------------------------------------------------------------------
+    // RoundedRect2DObject serialize / deserialize
+    // ---------------------------------------------------------------------------
+
+    template <>
+    void serialize(Archive& archive, const RoundedRect2DObject& value)
+    {
+        LOG_THIS(DOM);
+
+        archive.startSerialization(RoundedRect2DObject::getType());
+
+        serialize(archive, "cornerRadius", value.cornerRadius);
+        serialize(archive, "colors", value.colors);
+
+        archive.endSerialization();
+    }
+
+    template <>
+    RoundedRect2DObject deserialize(const UnserializedObject& serializedString)
+    {
+        LOG_THIS(DOM);
+
+        if (serializedString.isNull())
+        {
+            LOG_ERROR(DOM, "Element is null");
+            return RoundedRect2DObject{};
+        }
+
+        LOG_INFO(DOM, "Deserializing a RoundedRect2DObject");
+
+        auto cornerRadius = deserialize<float>(serializedString["cornerRadius"]);
+        auto colors = deserialize<constant::Vector4D>(serializedString["colors"]);
+
+        return RoundedRect2DObject{cornerRadius, colors};
+    }
+
+    // ---------------------------------------------------------------------------
+    // RoundedRect2DObjectSystem
+    // ---------------------------------------------------------------------------
+
+    void RoundedRect2DObjectSystem::init()
+    {
+        LOG_THIS_MEMBER(DOM);
+
+        Material mat;
+
+        mat.shader = masterRenderer->getShader("RoundedRect");
+
+        mat.nbTextures = 0;
+
+        mat.uniformMap.emplace("sWidth", "ScreenWidth");
+        mat.uniformMap.emplace("sHeight", "ScreenHeight");
+
+        // Instance layout: worldPos(3), size(2), rotation(1), color(4), cornerRadius(1) = 11 floats
+        mat.setSimpleMesh({3, 2, 1, 4, 1});
+
+        materialId = masterRenderer->registerMaterial(mat);
+
+        auto group = registerGroup<PositionComponent, RoundedRect2DObject>();
+
+        group->addOnGroup([this](EntityRef entity) {
+            LOG_MILE("Rounded Rect 2D System", "Add entity " << entity->id << " to rounded rect group!");
+            updateQueue.push(entity->id);
+            changed = true;
+        });
+
+        group->removeOfGroup([this](EntitySystem* ecsRef, _unique_id id) {
+            LOG_MILE("Rounded Rect 2D System", "Remove entity " << id << " from rounded rect group!");
+            auto entity = ecsRef->getEntity(id);
+            ecsRef->detach<RoundedRect2DRenderCall>(entity);
+            changed = true;
+        });
+    }
+
+    void RoundedRect2DObjectSystem::execute()
+    {
+        if (not changed)
+            return;
+
+        while (not updateQueue.empty())
+        {
+            auto entityId = updateQueue.front();
+
+            auto entity = ecsRef->getEntity(entityId);
+
+            if (not entity)
+            {
+                updateQueue.pop();
+                continue;
+            }
+
+            auto ui  = entity->get<PositionComponent>();
+            auto obj = entity->get<RoundedRect2DObject>();
+
+            if (entity->has<RoundedRect2DRenderCall>())
+            {
+                entity->get<RoundedRect2DRenderCall>()->call = createRenderCall(ui, obj);
+            }
+            else
+            {
+                ecsRef->_attach<RoundedRect2DRenderCall>(entity, createRenderCall(ui, obj));
+            }
+
+            updateQueue.pop();
+        }
+
+        renderCallList.clear();
+
+        const auto& renderCallView = view<RoundedRect2DRenderCall>();
+
+        renderCallList.reserve(renderCallView.nbComponents());
+
+        for (const auto& renderCall : renderCallView)
+        {
+            renderCallList.push_back(renderCall->call);
+        }
+
+        finishChanges();
+    }
+
+    RenderCall RoundedRect2DObjectSystem::createRenderCall(CompRef<PositionComponent> ui, CompRef<RoundedRect2DObject> obj)
+    {
+        LOG_THIS_MEMBER(DOM);
+
+        RenderCall call;
+
+        call.processPositionComponent(ui);
+
+        call.setOpacity(OpacityType::Additive);
+
+        call.setRenderStage(renderStage);
+
+        call.setMaterial(materialId);
+
+        call.setViewport(obj->viewport);
+
+        // 11 floats: x, y, z, width, height, rotation, r, g, b, a, cornerRadius
+        call.data.resize(11);
+
+        call.data[0]  = ui->x;
+        call.data[1]  = ui->y;
+        call.data[2]  = ui->z;
+        call.data[3]  = ui->width;
+        call.data[4]  = ui->height;
+        call.data[5]  = ui->rotation;
+        call.data[6]  = obj->colors.x;
+        call.data[7]  = obj->colors.y;
+        call.data[8]  = obj->colors.z;
+        call.data[9]  = obj->colors.w;
+        call.data[10] = obj->cornerRadius;
+
+        return call;
+    }
+
+    void RoundedRect2DObjectSystem::onEvent(const EntityChangedEvent& event)
+    {
+        LOG_THIS_MEMBER(DOM);
+
+        auto entity = ecsRef->getEntity(event.id);
+
+        if (not entity or not entity->has<RoundedRect2DObject>())
+            return;
+
+        updateQueue.push(event.id);
+
+        changed = true;
+    }
 }