complex flow with pixi js

[Yonny Zohar]

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?

Thanks!
 

[ivan.popelyshev]

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?

[ivan.popelyshev]

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.

[Yonny Zohar]

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?

[ivan.popelyshev]

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

https://github.com/pixijs/pixi.js/blob/dev/src/core/textures/Spritesheet.js 

http://pixijs.download/dev/docs/PIXI.Spritesheet.html

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?

[Yonny Zohar]

My day job is making slots games
But that's not what this project is for.
I'm converting a C&C clone i made in starling.
http://yonnyzohar.co.il/#Command_and_Conquer_Mobile

All sprite sheets are loaded on a different thread- and the images are colored according to their team.

Thanks for all the help!

[ivan.popelyshev]

OH YES YES YES YES YES

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

[Yonny Zohar]

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

[ivan.popelyshev]

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.