浮かせてよ 牌のお尻を

突然ですが、NSは本日を以てブログをやめます。

嘘です。

日附が変わったらやめておこうと思っていたんですが、余裕で間に合ってしまった…まあ、一応ね?

はい、そんなことよりちょっとちょっと、聞きました?奥さん!

愛宕の奥さん、41歳なんですってー(公式発表あり)

airmaster-25-116(194)a.png

23歳の誕生日の四日後に洋榎を産んでることになるので、今のインハイ世代の保護者たちの中でもかなり若い方と思われます。
まじめな話、綺麗なアラフォーですよね。

あ、世の中には可愛いアラフォーもいますけどね!

atiga-5-123-01a(16).png

優希ちゃん、今日の本題は何でしたっけ?

saki-141-06-04.png

そうそうこういうやつ。

saki-141-06-03.png

これとかも。

nakinoryuu.png

不要牌を切り出すとき、その牌を浮かせて表現するんですよね。
たったそれだけのことなのに、ブログの記事で画像タグを並べるやり方だと、なかなか調節が難しいわけです。
「浮いた牌」を別画像として登録すればいいんですけど、別途約40枚の画像ファイルを用意するのは大変。
<align>タグを使う手もありそうですが、浮かしてまた戻すのを、具体的にどうやるんだかわっかんにゃー。

そこで先日も紹介したスプライトさんに、再びお出で願おうと、こういうわけですよ。

SP_ancoro_blue2.png

スプライトさん(初代)です。
今回はわかりやすいように、透明な部分はグリーンで表示しています。
作るときに浮かせる場合があると考慮してればよかったんですが、今更言っても仕方ない。
なので、これをベースにver.2を作ることにしました。

saki-141-06-03a.pngまず、ハイテクノロジーによって表示されている上のダヴァンさんの手牌の画像をお手本に、AとBの長さを測ります。ここはもちろん目測でもいいんですけど。
次に同じ比率の隙間が何ピクセルになるか計算し、スプライト画像の上半分の40牌を、列ごとにずらします。
今回は書き出しサイトのお世話にはならず、画像編集ソフトでパパッと済ませました。

SP_ancoro_blue2.png

この画像をアップロードしたら、最後ににスタイルシートを書き変えます。
縦にすらしただけなのでx座標の値はそのまま。
y座標も、二列目以降にずらした分を足し算して(値はマイナスですが)オフラインのテキストエディタで置換すればすぐに終わります。
そして、今回の目玉、浮かせる牌用のクラスを新たに定義しなければなりません。
これは浮かせない牌の高さに隙間のピクセル数を足すだけなので、結局

  1. 浮かせない牌のクラスをコピペ
  2. 浮かせる牌のクラス名を適当に置換( { _k{ など)
  3. 浮かせる牌のheightの値を書き変え

の3ステップで終わりです。
あ、2,3では範囲指定を忘れないようにします。

以上で必要な作業は終わりです。
いじったのは画像とスタイルシートの関連づけだけですから、過去記事のHTMLのコードはそのまま使えます。

では最後に、この新しいスプライトで牌画を表示してみましょう。

メグの手牌
  

竜の手牌
     

   

   

   

ていうか竜さんのツモすごいっすね。
NS所蔵の哭きの竜1巻がどこかの地層に埋もれ中で発見できなかったので、上の画像は急遽ネットで拾ってきたやつです。


しかしその後いろいろ調べてみると、今はSVG画像というフォーマットが主流になりつつあり、ラスタ画像のCSSスプライトはもう古い技術らしいです。
うーん、もっと勉強しなくては…


カテゴリー: 未分類 タグ: パーマリンク

コメントを残す

メールアドレスが公開されることはありません。