HTML+CSSだけでMinecraftのスキンから頭だけを切り出して表示する方法

<b><font color="red">簡単なURLからスキンを取得することができなくなったためHTML+CSSのみでスキンを表示できなくなりました。詳しくは以下の記事を見てください。</font></b>
[マインクラフトのスキンを取得する](https://qiita.com/yuta0801/items/edb4804dfb867ea82c5a)


## 1, スキンを取得

**現在、以下のURLではスキンを取得することができません。**

スキンを取得するのは一見難しそうだが、実は、

```
http://skins.minecraft.net/MinecraftSkins/＜プレイヤー名＞.png
```

にアクセスするだけでスキンが取得できる。

ユーザー名が`yuta0801`なら、こうなる。

```
http://skins.minecraft.net/MinecraftSkins/yuta0801.png
```

![スキン](https://qiita-image-store.s3.amazonaws.com/0/83691/719f7d1e-8b1e-561a-70e5-c5d719f55abe.png)

これで上のようなスキンが取得できる。

## 2, 拡大

CSSで`width`や`height`を変更するだけだと、下のようにぼやけてしまう。

![拡大したスキン](https://qiita-image-store.s3.amazonaws.com/0/83691/1ae202c2-e012-d456-fd21-795ffb177086.png)

実はブラウザの画像レンダリングエンジンが少しでも自然に見えるようにエッジをぼやかしているのが原因。

これだけはどうすることもできないと思っていたのだが、先日、[image-rendering](https://developer.mozilla.org/ja/docs/Web/CSS/image-rendering)というプロパティを見つけることができた。

このプロパティで画像のレンダリング方法を指定してエッジをぼやけさせなくすることができる。

現在のところ、このプロパティはCSSで正式に採用されたものではないので、ブラウザによって値が違う。

[Can I use](https://caniuse.com/#search=image-rendering)を見るとEdge以外の主要ブラウザは使える。

~~Edgeなのに、きれいなEdgeを表せない。~~

以下のコードを適応させると、IE、Firefox、Chrome、Safariで綺麗に表示できる。

```css
.pixelated {
  image-rendering: pixelated;                 /* Chrome 41+, Opera 29+ (CSS4) */
  image-rendering: -webkit-crisp-edges;       /* Safari (WebKit) */
  image-rendering: -moz-crisp-edges;          /* Firefox (Gecko) */
  -ms-interpolation-mode: nearest-neighbor;   /* IE8+ */           
}
```



![image-renderingを適応したスキン](https://qiita-image-store.s3.amazonaws.com/0/83691/f8dc97a9-86c6-d884-ee9b-1fa78d024e8b.png)

上のスタイルを適応させるとこうなる。

## 4, 切り抜き

画像の切り抜きはCSSの[clip](https://developer.mozilla.org/ja/docs/Web/CSS/clip)を使用して

```css
.clipped {
  position: absolute;
  clip: rect(上 左 下 右);
}
```

のように書くことができます。

拡大する前のスキンの頭の位置は、

![スキンの頭の位置](https://qiita-image-store.s3.amazonaws.com/0/83691/70939fcd-95cd-1c91-08ca-c14542c5811a.png)

左上から8px, 8pxからの8pxの正方形なので、拡大前は、

```css
.clipped {
  position: absolute;
  clip: rect(8px 16px 16px 8px);
}
```

と書ける。あとはそれぞれの値に拡大倍率を掛けるだけ。

スキンの大きさは、64 x 32 (1.8以降は 64 x 64) なので`width: 512;`を指定した場合は

`512 / 64 = 8`なのでそれぞれの値に8を掛けて、以下のようになる。

```css
.clipped {
  position: absolute;
  clip: rect(64px 128px 128px 64px);
}
```

ここまででこのような頭が切り出せた。

![切り出した頭](https://qiita-image-store.s3.amazonaws.com/0/83691/108bd7e2-c72c-7f57-2221-98558afcad25.png)

## 5, 空白を取り除く

4まででスキンを取得し拡大して頭をくり抜けたのだが、実は頭以外の部分を消したわけではなく見えなくしただけなので、元の画像の大きさの空白ができてしまう。

そこで、マイナスの余白を付けて余分な空白を打ち消す。

先程の例の場合だと、頭の縦横をそれぞれマイナスのマージンとして与える。

```css
.clipped {
  position: absolute;
  clip: rect(64px 128px 128px 64px);
  margin-left: -128px;
  margin-top: -64px;
}
```

これで、左上の位置が揃うが、右下はまだ残っているので、一つ上の要素に頭の大きさを指定する。

```css
.box {
  height: 64px;
  width: 64px;
}
```

# まとめ

ここまで書いたことを踏まえて実際に256pxの頭を表示するソースを書いてみる。

```html
<span class="box">
  <img src="http://skins.minecraft.net/MinecraftSkins/yuta0801.png">
</span>
```

```css
.box {
   display: inline-block;
   position: relative;
   width: 64px;
   height: 64px;
}
.box img {
  width: 512px;
  image-rendering: pixelated;
  image-rendering: -webkit-crisp-edges;
  image-rendering: -moz-crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  position: absolute;
  clip: rect(64px 128px 128px 64px);
  margin-left: -64px;
  margin-top: -64px;
}
```





# 参考記事

- [CSSだけで画像をトリミング(切り抜き)する方法](https://allabout.co.jp/gm/gc/443087/)
- [プログラムでMinecraftのスキンから頭だけを抜き出す方法](https://jyn.jp/minecraft-get-head-skin/)
- [【CSS】ドット絵を拡大表示してもボケないようにする方法](https://kuzlog.com/2017/01/14/366/)