鉄拳のゲームコマンドをSVG化してはてなブログで表示したいから調べてた

☆格闘ゲームコマンドってのはこういうの

TEKKEN OFFICIAL|『鉄拳7FR』ロケテスト情報　～「豪鬼」コマンド技表　公開！～

格闘ゲームの記事とか見てると皆画像使って頑張ってるんだけれど、はてなブログで画像使うのも結構面倒そうなので、SVG画像でもいいんじゃないの？とか思って調べてみました。

☆GimpでコマンドのパスをSVG化

とりあえずSVG吐ける無料ツールを探してたらGimpを見つけました。

• 円ツールでもなんでもいいからそれっぽいコマンドボタン4つの円を作る
• [編集(S)]->[色域を選択(B)]で選択する
• 右下のパスタブの領域で右クリックすると、[選択範囲をパスに(O)]ってのがあるのでそれを押すと、パスが表示される。
• もっかい右クリックして[パスをエクスポート]を押して***.svgってファイルを出力する

※適当に128x128pxで作ってます。

☆svgファイルを貼り付け

svgファイルの中身をテキストエディタで開いて、svgタグ(<svg ～ /svg>まで)を貼り付けます。

svgタグを貼り付けた表示

<svg xmlns="http://www.w3.org/2000/svg"
     width="0.366667in" height="0.36in"
     viewBox="0 0 110 108">
  <path id="選択範囲"
        fill="none" stroke="black" stroke-width="1"
        d="M 23.00,1.28
           C 15.27,3.30 9.42,6.93 5.36,14.00
             -3.95,30.24 7.36,50.76 26.00,51.91
             53.17,53.58 63.54,16.39 39.00,3.83
             35.99,2.29 32.38,1.30 29.00,1.28
             26.63,0.95 25.30,1.15 23.00,1.28 Z
           M 80.00,1.28
           C 72.27,3.30 66.42,6.93 62.36,14.00
             53.05,30.24 64.36,50.76 83.00,51.91
             110.17,53.58 120.54,16.39 96.00,3.83
             92.99,2.29 89.38,1.30 86.00,1.28
             83.63,0.95 82.30,1.15 80.00,1.28 Z
           M 22.00,56.28
           C 14.27,58.30 8.42,61.93 4.36,69.00
             -4.95,85.24 6.36,105.76 25.00,106.91
             52.17,108.58 62.54,71.39 38.00,58.83
             34.99,57.29 31.38,56.30 28.00,56.28
             25.63,55.95 24.30,56.15 22.00,56.28 Z
           M 78.00,56.28
           C 70.27,58.30 64.42,61.93 60.36,69.00
             51.05,85.24 62.36,105.76 81.00,106.91
             108.17,108.58 118.54,71.39 94.00,58.83
             90.99,57.29 87.38,56.30 84.00,56.28
             81.63,55.95 80.30,56.15 78.00,56.28 Z" />
</svg>

☆左上ボタン(LP)に色をつけてみよう

<svg xmlns="http://www.w3.org/2000/svg"
     width="0.366667in" height="0.36in"
     viewBox="0 0 110 108">
  <path id="選択範囲"
        fill="none" stroke="black" stroke-width="1"
        d="M 23.00,1.28
           C 15.27,3.30 9.42,6.93 5.36,14.00
             -3.95,30.24 7.36,50.76 26.00,51.91
             53.17,53.58 63.54,16.39 39.00,3.83
             35.99,2.29 32.38,1.30 29.00,1.28
             26.63,0.95 25.30,1.15 23.00,1.28 Z
           M 80.00,1.28
           C 72.27,3.30 66.42,6.93 62.36,14.00
             53.05,30.24 64.36,50.76 83.00,51.91
             110.17,53.58 120.54,16.39 96.00,3.83
             92.99,2.29 89.38,1.30 86.00,1.28
             83.63,0.95 82.30,1.15 80.00,1.28 Z
           M 22.00,56.28
           C 14.27,58.30 8.42,61.93 4.36,69.00
             -4.95,85.24 6.36,105.76 25.00,106.91
             52.17,108.58 62.54,71.39 38.00,58.83
             34.99,57.29 31.38,56.30 28.00,56.28
             25.63,55.95 24.30,56.15 22.00,56.28 Z
           M 78.00,56.28
           C 70.27,58.30 64.42,61.93 60.36,69.00
             51.05,85.24 62.36,105.76 81.00,106.91
             108.17,108.58 118.54,71.39 94.00,58.83
             90.99,57.29 87.38,56.30 84.00,56.28
             81.63,55.95 80.30,56.15 78.00,56.28 Z" />
  <path id="選択範囲"
        fill="black" stroke="black" stroke-width="1"
        d="M 23.00,1.28
           C 15.27,3.30 9.42,6.93 5.36,14.00
             -3.95,30.24 7.36,50.76 26.00,51.91
             53.17,53.58 63.54,16.39 39.00,3.83
             35.99,2.29 32.38,1.30 29.00,1.28
             26.63,0.95 25.30,1.15 23.00,1.28 Z" />
</svg>

左上ボタン部分だけコピーして、pathタグで追加してfill="black"にするとボタンに色が付いたね！！

これなら戦えそうだ！

☆base64エンコードしてみる

blog.s0014.com
大石制作ブログさんのSVGのbase64エンコードツールを使わせてもらいました。

これでsvgタグでなくてimgタグで書けるぞ！

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%220.366667in%22%20height%3D%220.36in%22%20viewBox%3D%220%200%20110%20108%22%3E%20%3Cpath%20id%3D%22%E9%81%B8%E6%8A%9E%E7%AF%84%E5%9B%B2%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20d%3D%22M%2023.00%2C1.28%20C%2015.27%2C3.30%209.42%2C6.93%205.36%2C14.00%20-3.95%2C30.24%207.36%2C50.76%2026.00%2C51.91%2053.17%2C53.58%2063.54%2C16.39%2039.00%2C3.83%2035.99%2C2.29%2032.38%2C1.30%2029.00%2C1.28%2026.63%2C0.95%2025.30%2C1.15%2023.00%2C1.28%20Z%20M%2080.00%2C1.28%20C%2072.27%2C3.30%2066.42%2C6.93%2062.36%2C14.00%2053.05%2C30.24%2064.36%2C50.76%2083.00%2C51.91%20110.17%2C53.58%20120.54%2C16.39%2096.00%2C3.83%2092.99%2C2.29%2089.38%2C1.30%2086.00%2C1.28%2083.63%2C0.95%2082.30%2C1.15%2080.00%2C1.28%20Z%20M%2022.00%2C56.28%20C%2014.27%2C58.30%208.42%2C61.93%204.36%2C69.00%20-4.95%2C85.24%206.36%2C105.76%2025.00%2C106.91%2052.17%2C108.58%2062.54%2C71.39%2038.00%2C58.83%2034.99%2C57.29%2031.38%2C56.30%2028.00%2C56.28%2025.63%2C55.95%2024.30%2C56.15%2022.00%2C56.28%20Z%20M%2078.00%2C56.28%20C%2070.27%2C58.30%2064.42%2C61.93%2060.36%2C69.00%2051.05%2C85.24%2062.36%2C105.76%2081.00%2C106.91%20108.17%2C108.58%20118.54%2C71.39%2094.00%2C58.83%2090.99%2C57.29%2087.38%2C56.30%2084.00%2C56.28%2081.63%2C55.95%2080.30%2C56.15%2078.00%2C56.28%20Z%22%20%2F%3E%20%3Cpath%20id%3D%22%E9%81%B8%E6%8A%9E%E7%AF%84%E5%9B%B2%22%20fill%3D%22black%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20d%3D%22M%2023.00%2C1.28%20C%2015.27%2C3.30%209.42%2C6.93%205.36%2C14.00%20-3.95%2C30.24%207.36%2C50.76%2026.00%2C51.91%2053.17%2C53.58%2063.54%2C16.39%2039.00%2C3.83%2035.99%2C2.29%2032.38%2C1.30%2029.00%2C1.28%2026.63%2C0.95%2025.30%2C1.15%2023.00%2C1.28%20Z%22%20%2F%3E%3C%2Fsvg%3E" />

☆emサイズ指定いろいろ

文字サイズと同じ1emだよ→

style="width:1em"

こちらは2em→

style="width:2em"

★でっかくしてもベクター画像だから綺麗

style="width:256px

☆ここまできたらやりたい事は見えてきたぞ

• レバーの方向キーもSVGで作る
• ボタンパターンとやじるしパターンを用意してbase64エンコード化したimgタグを辞書ツールにでも設定したら使いやすくなりそうだ

あれ、方向キー8通り、ボタンは14通り(?)ぐらいあるな…結構大変だな…。22回頑張らないといけないな。
けど画像を用意するよりも便利そうかな…

☆svgの回転も使えそうだ

ちなみに方向キーについては一個つくって、transformのrotateを使う事で8パターン作れそうだ。

<!--中心を起点に45度回転-->
transform="rotate(45,88,76)"

rotateの第2、第3引数は、中心座標のx,yなのだけれど、そもそもの矩形領域の設定はsvgタグのviewBox属性で以下のように指定されている。

viewBox="0 0 177 153"

なので、x座標の中心なら177/2 ≒ 88 って具合に座標を設定している。

回転して矩形領域をはみ出ると表示がカケちゃうので、回転前程で画像を作る必要がありますねん。

回転無し

45度回転

90度回転