Jump to content

How hack PIXI in NPM module system


Recommended Posts

Hello everyone!

I founded solution with correct croping images/videos inside PIXI app.

I created test appliction and made some hacks inside pixi-legacy.js and it successfully works for me.

When I started implement it inside npm module I found it not so easy. Tryed a lot of everything but still have no luck.

Could somebody explain me how correctly hack PIXI and make it work as NPM module?

Do I need make some module extensions? My current code definetly cause some core changes because I entered 3 new parameters. So how can I put it all together?

Bellow my code:

Inside this function FilterSystem.prototype.push = function (target, filters) I added 3 new parameters under "var autoFit = filters[0].autoFit;" :

var autoFit = filters[0].autoFit;
var autoFitY = filters[0].autoFitY;
var autoFitWidth = filters[0].autoFitWidth;
var autoFitHeight = filters[0].autoFitHeight;

After if(autoFit){...} I wrote this code:

//Autofit by height
if (autoFitY) {
  var sourceFrameProjected = this.tempRect.copyFrom(renderTextureSystem.sourceFrame);
  // Project source frame into world space (if projection is applied)
  if (renderer.projection.transform) {
  	this.transformAABB(tempMatrix.copyFrom(renderer.projection.transform).invert(), sourceFrameProjected);
  state.sourceFrame.fitY(sourceFrameProjected, autoFitWidth, autoFitHeight);

Also I wrote this function. You can add it under Rectangle.prototype.fit =  function (rectangle) :

* Fits by height with determined width and height.
* @param {PIXI.Rectangle} rectangle - The rectangle to fit.
* @return {PIXI.Rectangle} Returns itself.
Rectangle.prototype.fitY = function (rectangle, width, height) {
  this.x = (rectangle.width - width)/2;
  this.y = Math.max(this.y, rectangle.y);
  this.width = width;
  this.height = height;
  return this;


Link to comment
Share on other sites

Fortunately, you dont add any API to FilterSystem, only to Rectangle, and Rectangle is actually exists in GlobalMixins.

https://github.com/pixijs/picture - here is the plugin that modifies FilterSystem a bit and introduces custom filter that have extra fields.

and here's the plugin that actually adds something to global typings, you can mention Rectangle in global.d.ts : https://github.com/pixijs/pixi-heaven

What you can do: you can take stuff from pixi-heaven, change names, remove unnecessary deps (look at deps in picture) , remove "eslint" from packagejson because its annoying for small plugins, and it'll be good

Link to comment
Share on other sites

Hello Ivan! Thank you so much again for your support!!!


Is there any other ways to implement this few hacks?

I found it little bit complicated for me. I installed PIXI-HEAVEN but unfortunately I couldn`t run it. It always writes me:

"Module not found: Can't resolve 'pixi-heaven'" But I definetly know that I installed this module.

About half of the day I tryed a lot of different hacks but still have no result :)

It`s really ease to extend PIXI.Rectangle but I don`t get how modify FilterSystem because it inside PIXI.Filter


For my project I using pixi-legacy.js that,  if I correct, resolve some problems.

So at first I importing this: import * as PIXI from "pixi.js-legacy";

I have an idea just download PIXI.JS from github, edit some code as I need and upload it on my github. Than I can install it to my project.

But in this case I have an error:

error Can't add "pixi.js-monorepo": invalid package version undefined.

Can I go this way and how can I resolve this error?

Link to comment
Share on other sites

sorry, i dont understand any of those problems fully. "monorepo" is stuff that bigtimebuddy made for me and shukant, and i didnt use it yet, its for making several modules, not just one.

pixi-heaven doesnt work? please give me minimal demo on how it doesnt work, its sad new s for me.

FilterSystem isnt inside Filter, its in PIXI.

I can make a demo for you and other people based on your code, is that ok? ill put it in https://github.com/pixijs/pixi-plugin-example later


Link to comment
Share on other sites

Here is it: https://github.com/pixijs/pixi-plugin-example

You can copy it and publish in your npm namespace or where do you want it. However to use it , you have to actually call `applyFsMixins` from your app, otherwise this thing will be tree-shaken away

I expect an answer from you ASAP because i just restored 5-years-old plugin and i need to know whether you, as general audience, is able to understand it.

Edited by ivan.popelyshev
Link to comment
Share on other sites

Hello Ivan!

Sorry for late response.

I so appreciate your help, just can`t find the words to thank you for the so much helping me and other people who wants to use PIXI.JS!!!

And about plugin. I did everything using your detaled instruction, even learned how to publish npm packages, it`s really awesome ?:


But for some unknown for now reasone it writes me in both cases (in your pixi-plugin-example and my pixi-autofit-y versions?

Module not found: Can't resolve 'pixi-plugin-example'

When I importing this module:

import {applyFsMixins} from "pixi-autofit-y";


import {applyFsMixins} from "pixi-plugin-example";

Do you know what can be the reason of this problem?

Link to comment
Share on other sites

When this will be completed I will publish correct and tested version for any sizes and proportions of the media content.

I think it may help those one who will be searching for correct size autofiting for Filter in PIXI and everyone who will want to create they own PIXI plugin.

Therefore, thank you again, Ivan!

Link to comment
Share on other sites

It works. I do not know what are you talking about: https://codesandbox.io/s/testing-pixi-autofit-z6r2r?file=/src/index.ts

Probably your webpack configuration or whatever you use is wrong.

Once again I remind that I hate modules. You guys are failing with your configurations because some assholes decided to publish truly undercooked solution for whole JS community. In the end I'm one  of those who have to clean up this mess.

Edited by ivan.popelyshev
Link to comment
Share on other sites

Ivan, I`m sorry if I hurted you. Your help is really awesome and thank you so much for all you doing, I`m sure that it`s very important for many-many people !!!

It`s strange, but after reloading my docker - everything started work! Filters showing correct video/image without deformation. This is really awesome!

I`ll do my best to upgrade this module and make it much better, so anyone can use it and maybe it will help someone, I hope so.

I`ve already updated module with instruction how to use it, for those who searching for solution, you can find it here: https://www.npmjs.com/package/pixi-autofit-y

Thank your so much again, Ivan!!!

Edited by martiniti
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...