Beginner 3 sections ~10 min C++17/20

Align Helpers

Position components relative to each other using instance methods on Positionable or static methods on ml::Align. No pixel arithmetic required.

Introduction

Two Positioning APIs

Malena has two equivalent approaches to relative positioning. Use whichever feels more natural in context.

Instance Methods on Positionable
Called on the object being positioned
objA.setRightOf(objB, spacing)
Available on every ml::Core object
More readable for sequential layout chains

Static Methods on ml::Align

Called as a utility function
ml::Align::setRightOf(objB, objA, spacing)
Also accepts raw sf::FloatRect and sf::Vector2
Useful when reference isn't a Positionable

1Core Concepts

Instance Methods — Positionable

Method	Description
`setRightOf(ref, spacing=0)`	Place this immediately to the right of ref
`setLeftOf(ref, spacing=0)`	Place this immediately to the left of ref
`setBelow(ref, spacing=0)`	Place this immediately below ref
`setAbove(ref, spacing=0)`	Place this immediately above ref
`center(ref)`	Center within ref's bounds (both axes)
`centerHorizonally(ref)`	Center horizontally within ref
`centerVertically(ref)`	Center vertically within ref
`centerText(sf::Text&)`	Center an sf::Text within this object's bounds

    Sequential layout chain
    cpp
  

// Build a horizontal toolbar with chained relative positions
ml::RectangleButton fileBtn, editBtn, viewBtn, helpBtn;
fileBtn.setSize({80.f, 32.f});
fileBtn.setPosition({10.f, 10.f});

editBtn.setSize({80.f, 32.f});
editBtn.setRightOf(fileBtn, 4.f);   // 4px gap to the right of fileBtn

viewBtn.setSize({80.f, 32.f});
viewBtn.setRightOf(editBtn, 4.f);   // chained

helpBtn.setSize({80.f, 32.f});
helpBtn.setRightOf(viewBtn, 4.f);   // chained

// Vertical layout inside a card
ml::Text titleText, descText, badgeText;
titleText.setPosition({card.getPosition().x + 16.f, card.getPosition().y + 16.f});
descText.setBelow(titleText, 6.f);   // 6px below title
badgeText.setBelow(descText, 10.f);  // 10px below desc

// Center an icon inside a card
icon.center(card);
label.centerHorizonally(background);

2Core Concepts

Static Methods — ml::Align

    ml::Align static methods — three reference types
    cpp
  

// ── Reference: framework object ──────────────────────────────────────
ml::Align::setRightOf(labelA, labelB, 10.f);  // place labelB right of labelA
ml::Align::centerOn(panel, icon);             // center icon in panel
ml::Align::centerHorizontally(panel, label);
ml::Align::centerText(panel, mySfText);       // center sf::Text in panel

// ── Reference: sf::FloatRect ─────────────────────────────────────────
sf::FloatRect windowRect = {{0,0}, {1280,720}};
ml::Align::centerOn(windowRect, mainMenu);        // center dialog in window
ml::Align::centerHorizontally(windowRect, title); // center title horizontally

// ── Reference: sf::Vector2 (size anchored at origin) ─────────────────
sf::Vector2f screenSize = {1280.f, 720.f};
ml::Align::centerOn(screenSize, panel);
ml::Align::setRightOf(screenSize, sidePanel, 0.f);

Rule of thumb: Use instance methods (obj.setBelow(other)) for chains where each item positions relative to the previous. Use ml::Align:: static methods when the reference is a raw sf::FloatRect like a window or texture region.