【pyxel】角丸の四角形を描く

角丸を描きたい

pyxelでは、デフォルトでpyxel.rectが提供されており、
これで四角形を描くことができます。

rect(x, y, w, h, col)

しかし、実際に四角形を書く時は、少し角を丸くしたりしたいものです。（？）
そんな時用に関数を作成しました。

公式のpyxel.rect同様に、枠線のみverもあります。

塗りつぶしver

draw_rrect.py

def draw_rrect(x, y, w, h, r, col):
    """角丸四角形を描く（塗りつぶし）
    x, y: 左上の座標
    w, h: 幅と高さ
    r: 角の丸さ（半径）
    col: 色
    """
    # 中央の矩形を描く（上下）
    pyxel.rect(x + r, y, w - 2*r, h, col)
    # 中央の矩形を描く（左右）
    pyxel.rect(x, y + r, w, h - 2*r, col)
    
    # 4つの角を円で描く
    pyxel.circ(x + r, y + r, r, col)  # 左上
    pyxel.circ(x + w - r - 1, y + r, r, col)  # 右上
    pyxel.circ(x + r, y + h - r - 1, r, col)  # 左下
    pyxel.circ(x + w - r - 1, y + h - r - 1, r, col)  # 右下

枠線ver

draw_rrectb.py

def draw_rrectb(x, y, w, h, r, col):
    """角丸四角形の輪郭を描く（線のみ）
    x, y: 左上の座標
    w, h: 幅と高さ
    r: 角の丸さ（半径）
    col: 色
    """
    # 4つの角の円弧
    # 左上
    pyxel.clip(x, y, r, r)
    pyxel.circb(x + r, y + r, r, col)
    # 右上
    pyxel.clip(x + w - r, y, r, r)
    pyxel.circb(x + w - r - 1, y + r, r, col)
    # 左下
    pyxel.clip(x, y + h - r, r, r)
    pyxel.circb(x + r, y + h - r - 1, r, col)
    # 右下
    pyxel.clip(x + w - r, y + h - r, r, r)
    pyxel.circb(x + w - r - 1, y + h - r - 1, r, col)
    # clipの初期化
    pyxel.clip()
    
    # 上下左右の直線
    pyxel.line(x + r, y, x + w - r - 1, y, col)  # 上
    pyxel.line(x + r, y + h - 1, x + w - r - 1, y + h - 1, col)  # 下
    pyxel.line(x, y + r, x, y + h - r - 1, col)  # 左
    pyxel.line(x + w - 1, y + r, x + w - 1, y + h - r - 1, col)  # 右

若干苦戦しましたが、ポイントは、角の円を描画する際に
pyxel.clip(x, y, w, h)で、角っこのみを描画していることです。

完成図（全文）

draw_rounded_rectangle.py

import pyxel

def draw_rrect(x, y, w, h, r, col):
    """角丸四角形を描く（塗りつぶし）
    x, y: 左上の座標
    w, h: 幅と高さ
    r: 角の丸さ（半径）
    col: 色
    """
    # 中央の矩形を描く（上下）
    pyxel.rect(x + r, y, w - 2*r, h, col)
    # 中央の矩形を描く（左右）
    pyxel.rect(x, y + r, w, h - 2*r, col)
    
    # 4つの角を円で描く
    pyxel.circ(x + r, y + r, r, col)  # 左上
    pyxel.circ(x + w - r - 1, y + r, r, col)  # 右上
    pyxel.circ(x + r, y + h - r - 1, r, col)  # 左下
    pyxel.circ(x + w - r - 1, y + h - r - 1, r, col)  # 右下

def draw_rrectb(x, y, w, h, r, col):
    """角丸四角形の輪郭を描く（線のみ）
    x, y: 左上の座標
    w, h: 幅と高さ
    r: 角の丸さ（半径）
    col: 色
    """
    # 4つの角の円弧
    # 左上
    pyxel.clip(x, y, r, r)
    pyxel.circb(x + r, y + r, r, col)
    # 右上
    pyxel.clip(x + w - r, y, r, r)
    pyxel.circb(x + w - r - 1, y + r, r, col)
    # 左下
    pyxel.clip(x, y + h - r, r, r)
    pyxel.circb(x + r, y + h - r - 1, r, col)
    # 右下
    pyxel.clip(x + w - r, y + h - r, r, r)
    pyxel.circb(x + w - r - 1, y + h - r - 1, r, col)
    # clipの初期化
    pyxel.clip()
    
    # 上下左右の直線
    pyxel.line(x + r, y, x + w - r - 1, y, col)  # 上
    pyxel.line(x + r, y + h - 1, x + w - r - 1, y + h - 1, col)  # 下
    pyxel.line(x, y + r, x, y + h - r - 1, col)  # 左
    pyxel.line(x + w - 1, y + r, x + w - 1, y + h - r - 1, col)  # 右

# 使用例
pyxel.init(160, 120)
draw_rrect(50, 50, 80, 50, 15, 8)
draw_rrectb(10, 10, 80, 50, 15, 7)
pyxel.show()

PyxelCodeMakerに上げてみた

PyxelCodeMakerで書いて、SaveボタンからGistで保存すると、PyxelCodeMakerのリンクで共有が可能になるようです。
というわけで下記PyxelCodeMakerにて上記関数のチェック可能です。
https://kitao.github.io/pyxel/web/code-maker/?gist=7ce88fec575cb3ac71439b3475b8e2d8