pixijs / assetpack Goto Github PK

License: MIT License

JavaScript 4.09% TypeScript 95.88% Shell 0.03%

assetpack's Introduction

PixiJS — The HTML5 Creation Engine

This project aims to provide a fast, lightweight 2D library that works across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast.

If you want to keep up to date with the latest PixiJS news then feel free to follow us on Twitter @PixiJS and we will keep you posted! You can also check back on our site as any breakthroughs will be posted up there too!

We are now a part of the Open Collective and with your support you can help us make PixiJS even better. To make a donation, simply click the button below and we'll love you forever!

What to Use PixiJS for and When to Use It

PixiJS is a rendering library that will allow you to create rich, interactive graphics and cross-platform applications and games without having to dive into the WebGL API or deal with browser and device compatibility.

PixiJS supports WebGPU with fallback support for WebGL. As a library, PixiJS is a fantastic tool for authoring interactive content. Use it for your graphics-rich, interactive websites, applications, and HTML5 games. Out-of-the-box, cross-platform compatibility and graceful degradation mean you have less work to do and more fun doing it! If you want to create polished and refined experiences relatively quickly without delving into dense, low-level code, all while avoiding the headaches of browser inconsistencies, then sprinkle your next project with some PixiJS magic!

Boost your development and feel free to use your imagination!

Current features

WebGL renderer (with automatic smart batching, allowing for REALLY fast performance)
WebGPU renderer (new to the latest browsers!)
Canvas renderer (Fastest in town!)
Full scene graph
Super easy to use API (similar to the flash display list API)
Support for texture atlases
Asset loader / sprite sheet loader
Auto-detect which renderer should be used
Full Mouse and Multi-touch Interaction
Text
BitmapFont text
Multiline Text
Render Texture
Primitive Drawing
Masking
Filters
Community-Supported Plugins
- React
- Spine
- Filters
- Animate
- Lights
- UI
- Layout
- GIF
- And more!

Setup

It's easy to get started with PixiJS! Simply download a prebuilt build!

Alternatively, PixiJS can be installed with npm or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page.

NPM Install

npm install pixi.js

There is no default export. The correct way to import PixiJS is:

import * as PIXI from 'pixi.js';

CDN Install

Via jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>

Or via unpkg:

<script src="https://unpkg.com/[email protected]/dist/pixi.min.js"></script>

Basic Usage Example

import { Application, Sprite, Assets } from 'pixi.js';

// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container
const app = new Application();

// Wait for the Renderer to be available
await app.init();

// The application will create a canvas element for you that you
// can then insert into the DOM
document.body.appendChild(app.canvas);

// load the texture we need
const texture = await Assets.load('bunny.png');

// This creates a texture from a 'bunny.png' image
const bunny = new Sprite(texture);

// Setup the position of the bunny
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;

// Rotate around the center
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;

// Add the bunny to the scene we are building
app.stage.addChild(bunny);

// Listen for frame updates
app.ticker.add(() => {
    // each frame we spin the bunny around a bit
    bunny.rotation += 0.01;
});

Learn

Website: Find out more about PixiJS on the official website.
Getting Started:
- Check out the getting started guide.
- Also, check out @miltoncandelero's PixiJS tutorials aimed toward videogames with recipes and best practices here
Examples: Get stuck right in and play around with PixiJS code and features right here!
API Documentation: Get to know the PixiJS API by checking out the docs.
Guide: Supplementary usage guides to the API Documentation here.

Demos

Community

Forums: Check out the discussions and Stackoverflow -- both friendly places to ask your PixiJS questions.
Chat: You can join us on Discord to chat about PixiJS.

How to build

Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our prebuilt releases. The only time you should need to build PixiJS is if you are developing it.

If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm:

npm install

Then, to build the source, run:

npm run build

How to generate the documentation

The docs can be generated using npm:

npm run docs

Contribute

Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request, or you fancy owning a task from the road map above, feel free to get in touch.

Make sure to read the Contributing Guide before submitting changes.

License

This content is released under the (http://opensource.org/licenses/MIT) MIT License.

assetpack's People

Contributors

Stargazers

Watchers

Forkers

ehtick snrn-pontus luke-thompson-vgw gregvgw miltoncandelero eva2show ginzzp ratimavgw gabrielecirulli ddenisyuk play-co saxibuni study-pixijs

assetpack's Issues

Feature: Improve configuration options for Pixi Manifest generation

Thanks for the great work on assetpack, I've been experimenting to see if I can integrate it into a project and an into a couple of issues related to creating a Pixi manifest.

The first issue is with customising output directory.

The manifest plugin generates file paths for the manifests "srcs" property, but I can't see a way to prepend to that file path.

I'm using Vite and directing assetpack to output to the 'public' directory deletes everything in that folder so I can't host any public assets not handled by assetpack.

I think it would be useful to be able to prepend to the file path that is created by the manifest plugin so the files handled by assetpack can all be placed in a sub directory and the "srcs" property in the Pixi manifest still be correct.

The second issue is with handling Spine files.

I would like to have the Spine json files added to the generated Pixi manifest, but not the atlas files. It currently adds the Spine json, atlas and png files all to the manifest then Pixi fails when it tries to load the atlas file as an image.

What I think would work is if we could add an ignore property to the manifest plugin options so that we can specify which files should not be added to the manifest. Whilst still allowing assetpack to move the files to the output directory.

Bug: Manifest considers a multipack atlas the same file

A multipack atlas is exported like this:

    {
      "name": "game",
      "assets": [
        {
          "name": [
            "E.json"
          ],
          "srcs": [
            "game/game-1.json",
            "game/game-0.json"
          ],
          "data": {
            "tags": {
              "tps": true,
              "m": true
            }
          }
        }
      ]
    },

And free-tex-packer doesn't have a multi pack field so Assets only downloads the first json and the rest of the spritesheet is never loaded

RangeError: WebAssembly.Instance(): Out of memory: wasm memory

Trying to build assets from any of the game:
https://github.com/pixijs/open-games

For ex:
https://github.com/pixijs/open-games/tree/main/bubbo-bubbo
npm run build-assets

Error:

RangeError: WebAssembly.Instance(): Out of memory: wasm memory
    at instantiateSync (C:\work\projects\open-games\puzzling-potions\node_modules\ttf2woff2\jssrc\ttf2woff2.js:1:8181)
    at createWasm (C:\work\projects\open-games\puzzling-potions\node_modules\ttf2woff2\jssrc\ttf2woff2.js:1:9223)
    at Object.<anonymous> (C:\work\projects\open-games\puzzling-potions\node_modules\ttf2woff2\jssrc\ttf2woff2.js:1:34304)

Node.js v16.14.0.
Windows 11

To tinify for specific assets

How can I enable or disable tinifying for some specific assets in the manifest.json?

Feature: Add msdf & sdf font generation

With this we can convert ttf files to msdf

Feature: Add audio packing

Add support for converting audio into audio sprites

texture-packer: Handle different exporters

So assetpack is great and I'm very thankful to the Pixi team for working on this.

Currently, the texture-packer plugin use Pixi exporter:

function pixiTexturePacker(options) {
    return texturePacker({
        ...options,
        texturePacker: {
            ...options?.texturePacker,
            exporter: 'Pixi',
        },
    });
}

which makes sense since Pixi made assetpack.
But unfortunately, I use Phaser 3 for my project and Phaser and Pixi use a different format for JSON texture atlas.

The texturepacker plugin code has some code that expects the Pixi exporter and cause exceptions when using another exporter, despite free-tex-packer-core allowing several exporters to be used.

So my question is: would you consider making this tool work for other exporters format than Pixi's one ? Or is it out of the scope of this project ?

If yes, I'll do my best to provide a PR that enables support for Phaser 3 exporter. If not, I'll fork this project and won't annoy you anymore. Thanks for reading ☺

Bug: Manifest can't link woff2 and msdf from the same file

Warn: [Cache] already has key: [...]project/assets/initialLoad{m}/fonts{wf}{msdf}/arial/ArialRoundedMT.ttf

The manifest only links one of the two fonts, either the woff2 or the msdf one.

It doesn't matter if I tag the folder, the file or the file and the folder.

Question: Why ffmpeg plugin make changes in transform step, but not in post?

First of all, thank you for such a great tool.
We're enjoying it a lot and find it really helpful.

So my question is about the ffmpeg plugin and why it runs at transform step instead of post (like compress do).

Let me give some more context:
In the realm of caching I created a new plugin for unique assets paths, and it overrides output paths for files.
It works great with compress, that makes it stuff at "post" step, so hash in filenames saves for newly created files and it works like a charm.
But with ffmpeg (for audio files) the same trick does not work out of the box, mainly because it write files async at transform step and my custom hash plugin can't manage these files...

So, can you help me with it or maybe fix it? :)

Thank you.

General Question - Webp image format

Hi,

Is webp a recommended image format for games using the PIXI.js engine?

if not, what is your best recomendation on use, file types and so forth.

Thanks

H.B

Bug: glob pattern matching is not relative

Currently the full file patch is considered for the pattern matching

Meaning you have to add **/ at the start

{
     files: ['**/raw-assets/spritesheet2{tps}'],
     tags: ['tps'],
     settings: {
     texture: {
         texturePacker: {
             removeFileExtension: false
        }
    }
}

This should be relative to the entry path

e.g. ./spritesheet2{tps}

Feature: Add watch functionality

Add a watch command that listens for when the input folder changes and recompiles the assets

Feature: Allow for multiple plugins of the same type

plugins: {
        texture: texturePacker({
            texturePacker: {
                exporter: 'Pixi',
            }
        }),
        texture2: texturePacker({
            texturePacker: {
                exporter: 'Css',
            }
        }),
        manifest: pixiManifest({}),
    },

This should produce both css and json outputs, both being saved to the manifest

Currently this causes a key clash in SaveableAssetCache

bug: ffmpeg doesn't work if you don't have ffmpeg already installed.

use @ffmpeg-installer/ffmpeg to explain fluent ffmpeg where it is

https://www.npmjs.com/package/@ffmpeg-installer/ffmpeg

const ffmpegPath = require('@ffmpeg-installer/ffmpeg').path;
const ffmpeg = require('fluent-ffmpeg');
ffmpeg.setFfmpegPath(ffmpegPath);

Feature: multiple passes / process generated assets

The ability to run plugins on generated assets rather than the input ones.

Motivation:

Compressing images exported by texture packing
Deduplicating manifest: Checking all created files and if two have the same checksum, keep only one copy and reference multiple times in the assets plugin

Current workarround:
Having multiple configuration files and multiple folders and run assetpack sequentially leapfrogging the assets until they reach the final state

Bug: Tags are not being applied from files field

when setting a tag using the files field it is not being applied

e.g. this folder is not processed by texture packer

{
    files: [
        {
             files: ['spritesheet'],
             tags: ['tps']
        }
    ]
}

feature: metadata files for the manifest creator

say I have myAsset.png and I want to add metadata to the manifest, I could have a myAsset.png.metadata file next to the png that inside has the json metadata I want to add to my file in the manifest.

Consider documenting behavior of TexturePacker `resolutionOptions`

I'm using AssetPack's pixiTexturePacker to create a spritesheet. I intentionally exported the original assets from Figma at 10x their actual resolution so that I'd have freedom in scaling them down via AssetPack. However I got stumped when the following config was not working:

export default {
  entry: "./raw-assets",
  output: "./static/assets",
  plugins: {
    compressPng: compressPng(),
    manifest: pixiManifest(),
    pixiTexturePacker: pixiTexturePacker({
      resolutionOptions: { resolutions: { "1x": 0.1, "2x": 0.2, "3x": 0.3 } },
    }),
  },
};

All I would get out of TexturePacker was a spritesheet where all the assets would remain at 10x resolution.

I dove into the code and noticed that I must specify what the "largest resolution" is, so I changed resolutionOptions as follows and it worked:

      resolutionOptions: { resolutions: { original: 1, "1x": 0.1, "2x": 0.2, "3x": 0.3 } },

Please consider documenting the requirement for specifying the base/largest resolution as part of the options. I don't fully understand the need for it, as I had assumed that only specifying resolutions like 0.1 would be enough for TexturePacker to assume that I wanted images to become 0.1 times the original size.

Feature: Add basis compression

Add support for converting images into basis

add support for animated sprite sheets

Currently when generating sprite sheets, there is no way to mark it as an animated sprite sheet.

This would allow for use in Pixi's AnimatedSprite, as the generated JSON would contain the animations property (listing the textures used as part of the animated sprite).

Feature: Add 3D model plugins

Internal version of this tool has a couple of 3D model plugins e.g fbx -> obj

These should be ported over

Feature: Add compress avif

Add support for converting images into avif files

Unsupported engine when running install

I'm using linux, and this is the issue i encounter when I run the command: npm install --save-dev @assetpack/core @assetpack/cli

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '[email protected]',
npm WARN EBADENGINE required: { node: '>=14' },
npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '[email protected]',
npm WARN EBADENGINE required: { node: '>=14.14' },
npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@assetpack/[email protected]',
npm WARN EBADENGINE required: { node: '>=16.0.0' },
npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@assetpack/[email protected]',
npm WARN EBADENGINE required: { node: '>=16.0.0' },
npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' }
npm WARN EBADENGINE }

Feature: Add an option to ignore files which match the requested file extensions to not be generated in the manifest

At the moment, there is no option to ignore some files to not be generated by the manifest.
In our case, we have .atlas files that we would not want them to be loaded by Assets.loadBundle.

I have a pr coming for you to check out my solution :)