1. 図形と画像を描く

ゲームの最初の一歩は「画面に何かを出す」こと。MitiruEngine では描画の出口は 2 つあります。

• C++ ネイティブ 2D 描画 — mitiru::Screen::drawRect / drawCircle / drawRectFrame のような図形プリミティブを Game::draw() から呼ぶ。アクション・シューティング・RTS の HUD やデバッグ表示など、毎フレーム動かすものに向いています。
• CEF (HTML/CSS) — UI レイアウト、グラデーション、@keyframes を使ったアニメーションは HTML 側で書きます。RPG のメニュー、シミュレーションのパネル、アドベンチャーのダイアログなど、見た目の凝った静的〜セミアニメ要素に向いています。

ジャンルを問わず、毎フレーム動く実体は C++、綺麗に組み上げた UI は CEF がデフォルトの分担です。

C++ で図形を描く (最短)

#include <mitiru/Mitiru.hpp>

class HelloDraw : public mitiru::Game {
public:
    void draw(mitiru::Screen& screen) override {
        screen.drawRect(40, 40, 200, 120, 0xFF3344FF);    // 赤い矩形
        screen.drawCircle(400, 300, 60, 0x33AAFFFF);      // 水色の円
        screen.drawRectFrame(300, 100, 200, 80, 2, 0xFFFFFFFF); // 白い枠
    }
};

int main() {
    mitiru::Engine engine;
    HelloDraw game;
    return engine.run(game);
}

色は RGBA の 32bit 整数で、mitiru::Screen は update() の次に毎フレーム呼ばれます。テクスチャやスプライトを使うときも同じ流儀 (drawSprite(...) 系) で、update() で位置を決めて draw() で出すのが基本です。

CEF で図形 / アニメを描く

ロード時に動き出す「8 種類のアニメーションを並べたショーケース」のような、CSS だけで作れる絵は HTML 側に閉じます。

<style>
  .ball {
    width: 60px; height: 60px;
    background: radial-gradient(circle at 30% 30%, #fff, #08f);
    border-radius: 50%;
    animation: bounce 1.2s cubic-bezier(.5,0,.5,1) infinite alternate;
  }
  @keyframes bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-180px); }
  }
</style>
<div class="ball"></div>

C++ 側は EngineConfig::cefStartUrl で HTML を読み込ませるだけ。複雑なアニメや見た目の調整を C++ 側にハードコードしない、というのがエンジンの方針です。

関連 API

• mitiru::Screen — 図形・スプライト描画の入口
• mitiru::Engine / mitiru::EngineConfig — 起動・CEF ホスティング

もっと深く知る

• docs/HYBRID_RUNTIME.md — C++ と CEF をどう分担するか
• アーキテクチャ — 描画の責務をどこに置くか