--- title: AFM_Panel product: Advanced Framework Pro version: 1.0 engine: Unreal Engine 5.8 updated: 2026-10-05 canonical: https://docs.human-codeable.com/plugins/afm-panel.html --- Module # AFM_Panel Builds a rounded panel mesh from corner, side and centre pieces at runtime, so 3D UI backing plates resize without new geometry. #### What it gives you - Resizable 3D panels with constant corner radius - Border and fill colours driven from material parameters - A backing plate for world-space UI #### Requires None #### Required by None 2 assets26 API members ## Description Scaling a panel mesh distorts its corners. `BPC_Panel` avoids that by building the panel from nine pieces — four corners, four sides and a centre — and repositioning them when the size changes, so corner radius stays constant at any dimension. It is used as the backing plate behind world-space UI, and works equally well for physical panels in the scene. ## Setup 1. Enable `AFM_Panel`. 2. Add `BPC_Panel` to your actor. 3. Set **Size**, **Thickness** and the corner mesh — rounded or straight. 4. Set **Color Border** and **Color Base**. ## Usage ### Resizing at runtime Call `DrawPanel` or `UpdateSize` with the new size and pivot. The panel rebuilds its layout. ### Matching your theme Read colours from the active theme and pass them to `UpdateColor`. [![The same panel at three sizes, corners preserved](../images/AFM_Panel_sizes-1600.webp?v=3d24fee6)](../images/AFM_Panel_sizes-1600.webp?v=3d24fee6) The same panel at three sizes, corners preserved ## Key properties | Property | When to change | |---|---| | `Size` | Panel dimensions in world units | | `Pivot` | Which point the panel grows from | | `Thickness` | Border width | | `Mesh Corner` | Rounded or straight corners | ## Extending Supply your own centre, corner and side meshes through `UpdateMeshes` for a different panel style. ## Performance notes Performance Each panel is nine mesh components. For many small panels, consider a single quad with a rounded-corner material instead. ## Example map Used as the backing for world-space UI throughout the Showroom. ## Troubleshooting **Corners look stretched.** The corner mesh is being scaled rather than repositioned — call `UpdateSize` rather than scaling the component. ## API reference Every blueprint asset in this plugin. Expand an asset to see its members. ### Blueprints **BP_Panel**8 members extends `Actor` | Kind | Name | Signature | Description | |---|---|---|---| | var | `Size`Style | `Vector2D` | Width and height of the panel on this actor. The construction script pads it and scales it down before handing it to the panel component's Draw Panel, so it is not the same number as the component's own Size. A thousand by a thousand by default. | | var | `Pivot`Style | `Vector2D` | Normalised pivot the panel is built around, where 0.5, 0.5 centres it. Passed straight through to Draw Panel, so use it to grow the panel from an edge rather than from the middle. | | var | `Center Mesh`Meshes | `StaticMesh` | Mesh used for the flat centre section. The construction script pushes it into the panel component, so a change in the details panel redraws the panel in the viewport rather than waiting for play. | | var | `Corner Mesh`Meshes | `StaticMesh` | Mesh used for the four corners. Swapping the straight variant for the rounded one changes the panel's silhouette without touching its size, because the corners keep their own proportions however the panel is scaled. | | var | `Side Mesh`Meshes | `StaticMesh` | Mesh used for the four edge sections between the corners. | | var | `Opacity`State | `float` | How opaque the panel is drawn, from 0 to 1. Written into the panel component by the construction script, so it reads correctly in the viewport and not only once the game is running. | | var | `Color Border`Style | `LinearColor` | Tint of the border and frame pieces. The construction script reads it together with the base colour and writes both at once, so treat them as a pair. | | var | `Color Base`Style | `LinearColor` | Tint of the panel's background fill. Keep it the quieter of the two: the border is the edge a reader's eye finds first. | ### Components **BPC_Panel**18 members extends `SceneComponent` Scene component that builds a flat panel out of nine static meshes, a centre, four corners and four sides, scaled to Size around Pivot so the edges keep their proportions. Draw Panel creates the meshes on the owner, after which size, thickness, opacity and the border and base colours can all be changed at runtime. Add it wherever a widget or a prop needs a backing plate rather than a stretched quad. | Kind | Name | Signature | Description | |---|---|---|---| | var | `Mesh Center`Visual | `StaticMesh` | Mesh used for the flat centre section of the panel. | | var | `Mesh Corner`Visual | `StaticMesh` | Mesh used for the four corners. Swap for the straight or rounded variant to change the panel silhouette. | | var | `Mesh Side`Visual | `StaticMesh` | Mesh used for the four edge sections between the corners. | | var | `Pivot`Style | `Vector2D` | Normalised pivot of the panel, where 0.5, 0.5 centres it. Use this to grow the panel from an edge rather than the middle.in the panel bounds. | | var | `Size`Style | `Vector2D` | Width and height of the panel in world units. Changing it rebuilds the mesh layout rather than stretching it, so corners keep their radius. | | var | `Thickness`Style | `float` | Thickness of the panel border, in world units. | | var | `Material`Visual | `MaterialInterface` | Material applied to every panel section. Must expose the border and base colour parameters the panel drives. | | var | `Color Border`Style | `LinearColor` | Colour of the panel's border. | | var | `Color Base`Style | `LinearColor` | Colour of the panel's fill. | | fn | `UpdateMaterial`State | `(Material: MaterialInterface)` | Swaps the material every section of the panel is drawn with. A material that is already in place is ignored; a new one is stored, turned into a dynamic instance, given the current opacity and the border and base colours, and assigned to all nine meshes. Go through this rather than writing to Material directly, which would leave the meshes on the old instance. | | fn | `getMaterialInstance`Materials | `(out MaterialInstance: MaterialInstanceDynamic)` | Returns the dynamic material instance shared by the panel sections, so extra parameters can be driven from outside. | | fn | `UpdateColor`State | `(Color_Border: LinearColor, Color_Base: LinearColor)` | Sets the border and base colours together. | | fn | `UpdateOpacity`State | `(Opacity: float)` | Sets the panel's opacity, for fading a backing plate in or out. | | fn | `CleanupForDestroy`Destroy | `()` | Destroys the generated mesh components. Call before removing the panel to avoid leaving orphaned components. | | fn | `UpdateSize`State | `(Size: Vector2D, Pivot: Vector2D)` | Resizes and re-pivots the panel, repositioning the sections so corner geometry is preserved. | | fn | `UpdateMeshes`State | `(CenterMesh: StaticMesh, CornerMesh: StaticMesh, SideMesh: StaticMesh)` | Replaces the centre, corner and side meshes and rebuilds the panel. | | fn | `CreateComponents`Init | `()` | Creates the nine mesh components that make up the panel. Called automatically when the panel is first drawn. | | event | `DrawPanel` | `(Size: Vector2D, Pivot: Vector2D)` | Builds or rebuilds the panel at the given size and pivot. |