@yasshi2525/pixi-image-packer
v0.3.7
Published
generates image using pixi.js and save them locally as image files.
Downloads
97
Readme
pixi-image-packer
pixi.js でレンダリングした画像データをローカルファイルシステムに保存します。
レンダリング結果をブラウザで確認することもできます。
描画対象は Hot Reload されるため、ソースコード修正のたびにブラウザを開いて保存するなどの手間が省けます。
Usage
画像生成スクリプトの作成
Promise<AssetsParameters>
を返す関数を定義し、export = <関数名>
としてください。
後述の pixi-image-packer-cli
コマンドを利用すると、実行時・本スクリプト変更時に描画内容をローカルファイルシステムに保存します。
import {AssetsParameters } from 'pixi-image-packer';
import * as PIXI from 'pixi.js'
import {GlowFilter} from "pixi-filters";
const main = async (): Promise<AssetsParameters> => {
return [
{ name: 'graphics', width: 50, height: 50, data: generateCircle() },
{ name: 'sprite', width: 50, height: 50, data: await generateSprite() },
{ name: 'animation', width: 500, height: 50, srcWidth: 50, srcHeight: 50, frames: 10,
data: await generateAnimationSheet(), tick: (i) => generateAnimation(i) }
]
}
const generateCircle = () => {
const data = new PIXI.Graphics()
data.beginFill(0x448866)
data.lineStyle(5, 0x886644)
data.drawCircle(25, 25, 25)
data.endFill()
data.filters = [new GlowFilter()]
return data
}
const generateSprite = () => {
const data = PIXI.Sprite.from('/images/flower.png')
data.localTransform.scale(0.125, 0.125)
data.filters = [new GlowFilter()]
return data
}
const generateAnimationSheet = async () => {
await PIXI.Texture.fromURL('/images/flower.png')
const data = new PIXI.Container()
for (let i = 0; i < 10; i++) {
const item = await generateAnimation(i)
item.localTransform.translate(i * 50, 0)
data.addChild(item)
}
return data
}
const generateAnimation = (tick: number) => {
const data = PIXI.Sprite.from('/images/flower.png')
data.anchor.set(0.5, 0.5)
data.localTransform
.rotate(tick * 0.1 * Math.PI)
.scale(0.125, 0.125)
data.filters = [new GlowFilter()]
return data
}
export = main
Reference
pixi-image-packer-cli
コマンド
pixi-image-packer-cli [options] <src-file>
<src-file>
には画像生成スクリプトファイルパスを指定してください。TypeScriptのみ対応しています。
Options
| パラメタ名 | 短縮名 | 説明 | デフォルト値 |
|---------------------|---------------|------------------|---------------------|
| --outDir <path>
| -o <path>
| 画像出力先ディレクトリ | .
|
| --port <number>
| -p <number>
| 描画確認用サーバのポート番号 | 18080
|
| --timeout<number>
| -t <number>
| 画像保存時のタイムアウト(ms) | 30000
(30秒) |
| --fontDir <path>
| -f <path>
| フォント格納ディレクトリ | なし |
| --imageDir <path>
| -i <path>
| 元画像格納ディレクトリ | なし |
| --lang <string>
| | htmlの表示言語 | ja
|
| --title <string>
| | htmlのタイトル | pixi-image-packer
|
| --sync
| -s
| クロール後終了 | false
|
| --onlyCreate
| | 既存ファイルを削除するか | false
|
指定例
pixi-image-packer-cli -o out -i assets/images -f assets/fonts src/index.ts
details
--outDir <path>
(-o <path>
)
指定したディレクトリにレンダリング後の画像が格納されます。
ファイル名は画像生成スクリプトの戻り値配列の各要素、<name>.png
(Glyphの場合、<name>.json
) です。<name>
に /
を入れることでサブディレクトリに保存されます。
たとえば
--fontDir <path>
(-f <path>
)
フォントファイルが格納されたディレクトリを指定します。
ディレクトリ配下のファイルは拡張子を除いた <filename>
という名前で、font-family
として使うことができます。
--imageDir <path>
(-i <path>
)
スプライトに使う元画像が格納されたディレクトリを指定します。
ディレクトリ配下のファイルは /images/<file>
というパスにマッピングされます。
AssetsParameters
型
単一フレーム
{
name: string, // 出力ファイル名 (拡張子なし)
data: PIXI.Container, // 描画対象
width: number, // 出力画像サイズ幅
height: number, // 出力画像サイズ高さ
glyph?: Object // グリフ情報 (任意)
}
複数フレーム (アニメーション)
{
name: string, // 出力ファイル名 (拡張子なし)
data: PIXI.Container, // 描画対象
width: number, // 出力画像サイズ幅 (srcWidth * frames)
height: number, // 出力画像サイズ高さ
glyph?: Object // グリフ情報 (任意)
frames: number, // フレーム数
srcWidth: number, // フレームごとの画像サイズ幅
srcHeight: number, // フレームごとの画像高さ
tick: (frame: number) => Container // アニメーション関数
}
Author
License
MIT License