ドット絵をきれいに表示できるCustom Elementをつくってみた - がらくたツールボックスのウェブログ

ずいぶん前のエントリーのとおり Custom Elementをつくってみたわけですが、この経験をいまいち活用できておらず、もうちょっと実用的なものを作ってみようという気持ちになりました。そこで、「ドット絵を拡大してもきれいに表示される要素」を作ってみました。

ソースコードはこちら。 github.com

実際に動いているようすはこちら。 <pixelart-img> タグで画像を描画することで、拡大してもぼやけたりしません。 garakuta-toolbox.com

（ほんとは <pixelart> タグにしたかったのですが、Custom Elementsの命名規則として「ダッシュが一つ以上入っていること」が必須（ref）のため、<pixelart-img> としています。）

Canvasをつかって、等倍のドット絵をn倍にした画像を動的に作成することで、アンチエイリアスがかからないようにしています。最近のブラウザなら image_rendering プロパティを利用して似たようなことができますが、ブラウザによって若干動作が異なったり、IEでは使えなかったりということでこのようにしてみました。

npmパッケージとして公開しているので、jsDelivrなどのnpmパッケージを配信してくれるCDNをつかって、以下のようにお気軽につかえます。　

<pixelart-img scale="2" src="path/to/pixelart.png"></pixelart-img>

<!--  スクリプトはすべての pixelart-img 要素よりも後に配置される必要があります -->
<script src="https://cdn.jsdelivr.net/npm/@piyoppi/pixelart-element@0.0.5/dist/pixelart-element.bundle.js"></script>

IEなど一部Custom Elementsに対応していないブラウザも対応したい場合は、たとえば以下のように別途Polyfillを入れる必要があります。

<html>
  <head>
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-bundle.js"></script>
  </head>

なにかつかえそうなものを作ってみたくなり、とりあえず公開してみたのでした。自分でも実際に使ってみて、適宜改善していこう～という気持ち。

ではでは～。