Edited at

UnityやCSSで使える9スライス画像を自動生成するWebアプリを作った

この記事は個人開発 #2 Advent Calendar 2018の11日目です。

昨日は @yuji_saito さんの 「ファンサイトの個人開発と、片手間運用のためのRPA」 でした。


作ったもの


9 SLICER



https://zprodev.github.io/9-slicer/demo/

ドラッグ&ドロップで9スライス画像をサクッと生成できるWebアプリです。

全てフロントのJavaScriptで処理してます。裏で画像抜いたりしてないので安心してご利用ください。

生成した画像は、Unityなら9SliceSprite、Webサイトならborder-image

HTML5ゲーム界隈ならPixiJSでNineSlicePlaneとして使用できます。


9 SLICER の使い方

↓の点線内に

こんなPNG画像をドロップすると

スライス後の画像が下にプリッと出てきます

スライス結果として下記情報が画像上に表示されます。


  • reducation : 削減率(スライスできない画像だと0%表示です)

  • width : 元の画像の横幅

  • height : 元の画像の高さ

  • top/bottom/left/right : 境界

スライス後の画像は「DOWNLOAD」ボタン、情報は「COPY JSON」ボタンで取得できます。

右上のボタンから一括ダウンロードもできます。


9スライス画像の使い方

生成された画像とスライス情報の使い方を簡単に紹介します。


生成された画像とスライス情報

{"width":420,"height":240,"left":46,"right":45,"top":48,"bottom":48}


Unityで使う場合

スライス後の画像をプロジェクトに取り込み、Sprite Editorで top bottom left rightを設定します。

GameObject > UI > Image で作成したオブジェクトに画像をアタッチしてwidth heightを設定します。

これでUnity上に元画像の表示が再現できます。


CSSで使う場合

CSSでwidth heighttop right bottom left を設定します。

#sampleDiv {

width: 420px;
height: 240px;
box-sizing: border-box; /* width height の内側にボーダーを納める設定 */
border-style: solid; /* 指定しないとボーダーが表示されない */
border-image: url(sample.png) 48 45 48 46 fill / 48px 45px 48px 46px; /* 数値は top right bottom left の順で書く */
}

CSSを適用する要素をHTMLに書きます

<body>

<div id="sampleDiv"></div>
</body>

これでブラウザ上に元画像の表示が再現できます。


PixiJSで使う場合

NineSlicePlaneに width heighttop right bottom left を設定します。

import * as PIXI from 'pixi.js';

const SCREEN_WIDTH = 500;
const SCREEN_HEIGHT = 500;

const app = new PIXI.Application(SCREEN_WIDTH, SCREEN_HEIGHT);
document.body.appendChild(app.view);

/* 数値は left top right bottom の順で書く */
const nineSlice = new PIXI.mesh.NineSlicePlane(PIXI.Texture.fromImage('sample.png'), 46, 48, 45, 48);
nineSlice.width = 420;
nineSlice.height = 240;
app.stage.addChild(nineSlice);

これでブラウザのWebGL上に元画像の表示が再現できます。


おわりに

このWebアプリにはnpmで公開したモジュール「9-slicer」を使用しています。

9-slicerはNode.js環境でフロントエンド開発に使用することが本来の目的でしたが、せっかくJavaScriptで書くならブラウザでも軽量に動くものにしようと。

でもこのモジュールをブラウザで使ってくれるような人はまず現れないだろうなと。

ならせめてデモとして、ブラウザで動くようにした意味を持たせようということで、Webアプリ「9 SLICER」は生まれました。

ぜひ使ってやってください!