npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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

yasshi2525

License

MIT License