pixijs / customize Goto Github PK
View Code? Open in Web Editor NEWCustomize the list of packages to use for PixiJS v5
Home Page: https://pixijs.io/customize
Customize the list of packages to use for PixiJS v5
Home Page: https://pixijs.io/customize
The thing is @pixi/* modules don't have any type declarations (as everything is in pixi.js module),
so typescript has no type information when importing directly.
It will compile, but systems like webpack at-loader treat this as fatal generating
TS2339: Property does not exist on type ...
Current selects ".min.js" bundles by default. Probably should add an option to toggle this.
cc @englercj
Here's an example of JSFiddle POST API for auto-filling:
https://docs.jsfiddle.net/api/display-a-fiddle-from-post
Basically, there are two pieces of information that I post to JSFiddle and CodePen: a snippet of JS code that bootstraps all the plugins, and a list of external resources that are loaded in a specific order. I also set an initial title/description.
This could probably work with PixiPlayground as Settings > Custom URL > External Scripts. And contents to populate the code area.
Are there any docs describing what each dependency is responsible for (in context of PIXI.js customize tool)? It should give more clear understanding of what to include to compose a build for your needs.
For ex:
// To make very base PIXI build it must include these dependencies which are ticked by default
'@pixi/constants';
'@pixi/math';
'@pixi/runner';
'@pixi/settings';
'@pixi/ticker';
'@pixi/utils';
'@pixi/core';
// and the Application to run PIXI app (which has stage, view, ticker etc)
'@pixi/app'
// If you are going to use Containers and be able to calculate its Bounds, you have to include
'@pixi/display'
etc...
If you do not have time, I can help with the base tips and examples for it
Currently uses "dev" browser bundles, ability to customize this to select a branch or valid v5 tag.
Download pixijs pack by promise and GZIP packerer
Some people want manual download
you just need to sync the selected link in the build and found a way to add in the array pixiJSbuild
var Promise = window.Promise;
function multiImport(modules) {
return Promise.all(modules.map(function(m) {
return import('https://unsafe-production.jspm.io/' + (m.name?m.name:m))
.then(({default: module}) => ([(m.varName ? m.varName : m), module]))}))
.then((modules) => {
let mods = {};
modules.forEach((mod) => mods[mod[0]] = mod[1]);
return mods
});
}
multiImport(
[
{ name: "file-saver" , varName: "fileSaver" },
{ name: "jszip" , varName: "JSZip" },
{ name: "jszip-utils", varName: "JSZipUtils" }
])
.then((modules) => {
const JSZip = modules.JSZip;
const JSZipUtils = modules.JSZipUtils;
const saveAs = modules.fileSaver.saveAs;
const zip = new JSZip();
// store here the selected js files
const pixiJSbuild = [
"https://pixijs.download/dev/packages/prepare.min.js",
"https://pixijs.download/dev/packages/settings.min.js",
"https://pixijs.download/dev/packages/mesh.min.js",
];
pixiJSbuild.forEach(url=>{
zip.file(url.replace(/.*\//, ""), new Promise((resolve, reject) => JSZipUtils.getBinaryContent(url, (err, data) => (err) ? reject(err) : resolve(String.fromCharCode.apply(null, new Uint8Array(data))))))
});
zip.generateAsync({type:"blob"}).then((pixiZip) => saveAs(pixiZip, "pixiJS.zip"), (e) => console.log(e));
});
Both Current Development and Latest Release are using v6.0.0-rc as the package source.
See here https://pixijs.download/release/packages/core.min.js
I think release/package should still be v5.3.8
Ability to select other plugins (https://github.com/pixijs/pixi-sound) and filters (https://github.com/pixijs/pixi-filters).
Somehow I ended up on the non-secure version of the customize page and was confused when the output didn't match what I expected. I posted a separate issue (#16) about this thinking that the minimal setup was wrong but it turns out this isn't an issue for the https page. Seems to me like the site should force https anyway but regardless it seems like an issue that the output would differ based on the protocol.
Hi there,
I'm trying to get a minimal bundle working as a proof of concept. If you uncheck all of the non-required options, the Bundler
output is as follows, which doesn't actually export anything:
// Renderer plugins
import { Renderer } from '@pixi/core';
I'm trying to get a slightly less minimal app (basically, the required options + text, graphics, and application) and am running into issues. Specifically, the error I'm getting is this.currentRenderer is undefined
(the sourcemap links to this line, if that's helpful).
I'm thinking that I need to call some method on the Renderer to wire up some of the internals but I'm not certain what that should actually look like. If you need further clarification I'm happy to try to put together a minimal codepen. Thanks!
Add a bar to estimate overall filesize/download size of PixiJS
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.