search

RobotlegsJS / RobotlegsJS-Framework

An architecture-based IoC framework for JavaScript/TypeScript
13 stars 2 forks source link

Pixi JS v6 #36

Closed danrostron closed 2 years ago

danrostron commented 2 years ago

Hi there, any plans to update Robotlegs to work with Pixi v6? I get a load of errors on compile currently, and can't see it mentioned in Readme?

tiagoschenkel commented 2 years ago

Hi @danrostron, would you like to contribute to the Pull Request?

There is a patch folder with specific logic that we had to embed in the plugin in order to make it work with the current Pixi implementation.

Since v6 has some breaking changes, we probably need to make some changes in our patch in order to make it work.

danrostron commented 2 years ago

Yes, I would like to help actually as we're very dependent on this framework, and will eventually want to update to Pixi v6 or later.

How would I go about testing these patches against v6?

tiagoschenkel commented 2 years ago

I already created a pull request in order to do this migration. Had to rewrite some internal logic of the @robotlegsjs/pixi package, since now it's kind of hard to augment the pixi.js module because they are already using dynamic global mixins.

The example project of the @robotlegsjs/pixi package is already running, but there are some test cases that are being skipped, I'm unsure yet if those are still required or could be deleted.

Please take a look at the pull request https://github.com/RobotlegsJS/RobotlegsJS-Framework/pull/41.

The following packages would need to be updated as well since they are based on the @robotlegsjs/pixi package:

There are also some games that are based on the @robotlegsjs/pixi package so they would need to be migrated as well:

To get a better understanding of how the mono repo structure works, please take a look at the contributing guidelines, all the necessary build commands should be listed there.

For example, you can already check out the branch upgrade-pixijs-to-v6 and then run rush install at the root of the repo. Then go to the packages/pixi folder and run npm start to see the example, or npm test to run the test cases.

cd RobotlegsJS-Framework
rush install
cd packages/pixi
npm start
npm test

Take a look and please let me know if you can help me with the migration of the other packages and examples. At least, we would need to review all changes, test a little bit and update the documentation before merging the PR.

danrostron commented 2 years ago

OK will take a look over the next few days.

tiagoschenkel commented 2 years ago

I managed to upgrade the remaining packages and games, they all are already working with the newest version of pixi.js.

I also included the information regarding the support of v6 in the README's.

I still need to figure out what to do with test cases that are being ignored, this could take a while.

Note that I had to remove the patch extending the Pixi objects (DisplayObject and Container) that was turning them into EventDispatcher's.

The Mediator class now is using the IEventEmitterMap internally instead of the IEventMap. The IEventEmitterMap is a specialized version of the IEventMap that is able to recognize EventEmitter3 events as well.

This change will cause breaking changes, but they will be easy to solve.

Instead of using this.eventMap.mapListener to add listeners to view elements:

this.eventMap.mapListener(this.view.homeButton, "click", this.homeButton_onClick, this);

You should use this.eventMap.on to add listeners to view elements:

this.eventMap.on(this.view.homeButton, "click", this.homeButton_onClick, this);
danrostron commented 2 years ago

Ok great, that will be easy enough to change for us.

I will try to understand these changes, so that I can help in future development.

Please let me know once you merge and publish this on npm

danrostron commented 2 years ago

I tried to update my project to use this branch, but having difficulty installing a specific package from Github due to the Monorepo thing. Using npm i https://github.com/RobotlegsJS/RobotlegsJS-Framework/tree/upgrade-pixijs-to-v6/packages/core doesn't work.

I guess I'll just wait for you to publish on npm unless you have any other ideas?

tiagoschenkel commented 2 years ago

Hey @danrostron, I published all packages to npm. Please notice that all pixi.js related packages were upgraded to major versions with breaking changes, so you would need to upgrade your project to use the following versions:

"dependencies": {
    "@robotlegsjs/core": "^3.1.0",
    "@robotlegsjs/pixi": "^4.0.0",
    "pixi.js": "^6.3.2",
    "reflect-metadata": "^0.1.13",
    "tslib": "^2.3.0"
},

Also notice that we are still using version ~4.2.4 of the typescript package. The latest version of the pixi.js library is already 6.4.2, but I saw they already bumped typescript to version ^4.3.0, and this apparently is already causing some compilation errors.

Please comment here if you plan to use the version ^6.4.2 of pixi.js with the version ^4.3.0 of typescript. This should be handled in a separate issue.