SDL2 で GUI 部品を作る(ボタン)

　SDL は GUI を持たないので、自前で GUI 部品を作ってみたいと思いました。まずは、ボタンの描画を行ってみたいと思います。

灰色で矩形を塗りつぶしてみる

　まず、灰色で矩形を描いてみます。

    SDL_SetRenderDrawColor(renderer, 0xaf, 0xaf, 0xaf, SDL_ALPHA_OPAQUE);
    rect.x = 110;
    rect.y = 70;
    rect.w = 100;
    rect.h = 40;
    SDL_RenderFillRect(renderer, &rect);
灰色の矩形

　ボタンという感じはしません。ただの灰色の四角ですね。やはり、ボタンは出っ張っていて、押すと凹む様に見えないと駄目ですね。

陰影を付ける

　立体的に見せるためには、陰影を付ける必要があります。画面の左上から光があたっている状態を想定して陰影を付けると立体的に見えます。具体的には、矩形の上辺と左辺を明るい色で、下辺と右辺を暗い色で輪郭を書きます。

    SDL_SetRenderDrawColor(renderer, 0xbf, 0xbf, 0xbf, SDL_ALPHA_OPAQUE);
    SDL_RenderDrawLine(renderer, 110, 70, 210, 70);
    SDL_RenderDrawLine(renderer, 110, 70, 110, 110);
    SDL_SetRenderDrawColor(renderer, 0x6f, 0x6f, 0x6f, SDL_ALPHA_OPAQUE);
    SDL_RenderDrawLine(renderer, 110, 110, 210, 110);
    SDL_RenderDrawLine(renderer, 210, 70, 210, 110);
陰影を付ける

　ボタンに見えますね。

押されたボタン

　今度は押されて引っ込んでいるボタンを描きます。ボタンをちょっと暗く描画して陰影を逆にします。

    SDL_SetRenderDrawColor(renderer, 0x8f, 0x8f, 0x8f, SDL_ALPHA_OPAQUE);
    rect.x = 110;
    rect.y = 130;
    rect.w = 100;
    rect.h = 40;
    SDL_RenderFillRect(renderer, &rect);
    SDL_SetRenderDrawColor(renderer, 0x6f, 0x6f, 0x6f, SDL_ALPHA_OPAQUE);
    SDL_RenderDrawLine(renderer, 110, 130, 210, 130);
    SDL_RenderDrawLine(renderer, 110, 130, 110, 170);
    SDL_SetRenderDrawColor(renderer, 0xbf, 0xbf, 0xbf, SDL_ALPHA_OPAQUE);
    SDL_RenderDrawLine(renderer, 110, 170, 210, 170);
    SDL_RenderDrawLine(renderer, 210, 130, 210, 170);
押す前のボタン（上）と押したボタン（下）

　ちゃんと凹んで見えます。

　見た目はこれでいいですが、処理はまた後で考えます。

SDL2

Posted by sirius