Jump to content

complex flow with pixi js

Yonny Zohar

Recommended Posts

Hi there!

I'm converting a game of mine from as3 Starling to PIXI js and i'm wondering if i can convert the following flow to js:

create a web worker (different thread)
load a png in my worker
manipulate pixels within the loaded png
send png data back to the main thread
turn the loaded and maipulated png image into a texture atlas along with a loade json file.

Is there a way to do this with pixi?


Link to comment
Share on other sites

PIXI has no API's for that, though there'll be option to modify texture before loading in v5.

You have to write it all on your own and then upload the result to pixi: you have to modify https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/TextureManager.js and use "uploadData" instead of just "upload": https://github.com/pixijs/pixi-gl-core/blob/master/src/GLTexture.js

There's runtime atlas plugin that hacks TextureManager and adds experimental V5 API to it, you can just take it code and add one more TextureResource there : https://github.com/gameofbombs/pixi-super-atlas , see that its actually uploads arrays as mips, it suits your case.

You can also use tricks from super-atlas and from this plugin: https://github.com/pixijs/pixi-compressed-textures , its much easier.

I believe that the most costly operation in your flow is PNG decoding and its on browser side, not yours. How heavy are operations on webworker side?

Link to comment
Share on other sites

I know that its not easy, but that's the best way to add custom texture uploading mechanism to pixi. Pay attention how its textureManager differs from pixi vanilla: https://github.com/gameofbombs/pixi-super-atlas/blob/master/src/hacks/AtlasManager.ts#L94 - it calls onTextureUpload method of TextureResource that is bound to BaseTexture. You have to make new TextureResource that does something like that: https://github.com/gameofbombs/pixi-super-atlas/blob/master/src/superAtlas/SuperAtlas.ts#L215 .

I can send you invite to pixijs slack . Of course, if you're not ready to dig that far.

Link to comment
Share on other sites

web workers dont have access to the dom so you can't access the canvas or image class. i'm wondering if i can pass an instance of the canvas or the Image class to the worker and insantiate it there. from what i've seen so far, i need to load in my png into an Image class and then display it in a canvas. the canvas allows me to manipulate pixels. if i can do that on the worker- alot of my problem is solved. i still haven't found an example of how to create an atlas in pixi NOT through the loader. is there a way to create an Atlas by passing in a json and an Image?

Link to comment
Share on other sites

You're lucky! We did separate spritesheet from loader some time ago :)



That, and "BaseTexture.fromCanvas" must be enough for you.

Sorry, not all pixi is covered with examples yet. Though that goal of  https://www.patreon.com/user?u=2384552 is founded and we sure are focusing on it.

I recommend you to clone the source of the lib and make yourself acquainted with it. PIXI is a relatively lightweight lib, its supposed to be studied and modified. Unless you are on of those people who are making SLOT GAMES (HATE HATE HATE!!!)

So, what do you want to modify in canvas?

Link to comment
Share on other sites


I'll help you! Where is github or bitbucket? If its webgl i dont think we need to process spritesheets, shader palette will work just fine on mobiles.

Are you familiar with code of OpenRA?

Btw, do you know about Renegade X?

Btw, its easier to convert it to TS. If your code is actionscript, i can just use my private proprietary converter for it :)

Link to comment
Share on other sites

I currently am at the very beginning of the project so no github yet. there is a github of the as3 version....
I am familliar with open RA. i spoke to them quite alot when i started the as3 proj.
I thought about using Typescript... decided on Pure JS eventually....

Link to comment
Share on other sites

Ok, I'll look at as3 github later. Pure JS is strange choice after actionscript, TS is more natural in that case. Seriously, dont assume that people who are promoting pure js know what are they doing :) There are alternatives, like Haxe or Kotlin.

Did you consider moving your project to Haxe first, then change openfl to pixi, or something like that?

Ideally, rendering API switch and language switch are different things. Practically, yeah, everyone just rewrite their projects completely.

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...