TadaoYamaokaの開発日記

個人開発しているスマホアプリや将棋AIの開発ネタを中心に書いていきます。

Pythonの麻雀ライブラリを作る その2

前回作成したPythonの麻雀ライブラリ「cmajiang」に、手牌をSVG画像で表示する機能を追加した。

Jupyterノートブックで、

from cmajiang import *

Shoupai("m340p123z1z1,s340-,z2222")

のようにすると、このようにSVG画像が表示される。

牌の画像

牌の画像は、Gutenberg LaboのGL-MahjongTileを使用した。
改変も再配布も許可されている。

オープンタイプフォントから、opentype-svgを使用してSVGに変換を行った。

fonts2svg -av GL-MahjongTile.otf

オプションで、「-av」(adjust-viewbox)を付けないと原点座標が画像外の位置になる。

原点が左下になっていなかったため、pathタグに「transform="translate(-30, -35)"」を付けて座標移動を行った。

また、副露した面子で、牌を横向きにする場合、「transform="translate(795, 30) rotate(-90)"」で座標移動と回転を行うことで、横向き画像の左下が原点になるようにした。

赤牌は、pathのfill属性で色を変えると、牌の外枠の色も変わってしまうため、Inkscapeで、外枠のパスを削除して色を指定した後に、白の牌の外枠をコピーして、2つのpathで構成して、gタグでグループ化した。

手牌のSVG表示

Pythonのクラスに_repr_svg_メソッドを定義して、SVGを文字列で返すことで、JupyterノートブックでSVG画像が表示されるようになる。

C++のクラスをpybind11で、Pythonで扱えるようにしているため、C++のクラス側に_repr_svg_メソッドの実装を行った。
C++で、XMLの編集が必要になるため、TinyXML2を使用した。

SVGXMLでは、牌の定義を、defsで行って、各牌はuseで参照するようにした。

まとめ

前回作成した麻雀ライブラリに手牌をSVG画像で表示する機能を追加した。

役の判定と合わせて使うと便利かもしれない。

hule(Shoupai("m340p123z1z1,s340-,z2222"))
自風 南	1翻
赤ドラ	2翻
60符 3翻 7900点

時間ができたときに、盤面についてSVG画像で表示できるようにしたい。