Jump to content

Question about pixi-spine


rhythmras
 Share

Recommended Posts

18 分鐘前,ivan.popelyshev 說:

您確定要導出正確的圖集(無 pma)嗎?

thanks for being able to answer me,I am Chinese, English is not good, the following content is translated by google

The version I use is

pixi.js:6.3.2  
pixi-spine:3.0.13

Sorry I need to explain, I don't know the structure of the spine.The data for the spine is what I got through elsewhere,I don't know what PMA is

When I select Unpremultiply alpha in the texture unpacker of spine, it can be displayed normally, I think this is the reason,I can get the normal display effect by re-exporting in spine, but the generated images will be much more,Is there a way for pixi-spine to solve this

QQ截图20220602003008.png

QQ图片20220602002900.png

Link to comment
Share on other sites

Yes, you can tell spine that texture is already premultiplied. Specify alphaMode for all baseTexture that pixi loads. I remember that there's also a special flag 

res.spineboypro.spineAtlas.pages[0].baseTexture.alphaMode = PIXI.ALPHA_MODES.PMA;

Alternatively, I remember there's also special metadata in loader for that

.add('spineboypro', 'lalala.json', 
         { metadata: { imageMetadata: { alphaMode: PIXI.ALPHA_MODES.PMA } }
})

 

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

35 minutes ago, ivan.popelyshev said:

Yes, you can tell spine that texture is already premultiplied. Specify alphaMode for all baseTexture that pixi loads. I remember that there's also a special flag 

res.spineboypro.spineAtlas.pages[0].baseTexture.alphaMode = PIXI.ALPHA_MODES.PMA;

Alternatively, I remember there's also special metadata in loader for that

.add('spineboypro', 'lalala.json', 
         { metadata: { imageMetadata: { alphaMode: PIXI.ALPHA_MODES.PMA } }
})

 

Awesome, successfully solved my problem, thank you very much!!

Link to comment
Share on other sites

  • 2 weeks later...

sorry,I have a problem again,I have high GPU usage when loading,Roughly bounces between 15% and 100%

864635120_QQ20220612233211.png.56e69f21bd6287969aecc91e742976b0.png561811383_QQ20220612233303.png.e5b370ad6c61e3b732baf142293ff28a.png

These 2 pictures are like this when I opened it for the first time,

1111111111111111111.thumb.png.0b334a869c1b0348f7447707f85a5eb2.png

in vue component:

import { spine2d } from '@/assets/spine'
 methods: {
async createSpine2d (spine) {
      let result = await this.API.musumeaccess(spine)
      musume = spine2d(result.data)
      this.$refs.spimewidth.appendChild(musume.view);
    }
 
 
Link to comment
Share on other sites

  beforeDestroy () {
      musume.destroy(true)
  }

I try to destroy him when leaving the component,Also used PIXI.utils.clearTextureCache(),but didn't solve my problem,what should I do

On 6/2/2022 at 5:48 PM, ivan.popelyshev said:

Yes, you can tell spine that texture is already premultiplied. Specify alphaMode for all baseTexture that pixi loads. I remember that there's also a special flag 

res.spineboypro.spineAtlas.pages[0].baseTexture.alphaMode = PIXI.ALPHA_MODES.PMA;

Alternatively, I remember there's also special metadata in loader for that

.add('spineboypro', 'lalala.json', 
         { metadata: { imageMetadata: { alphaMode: PIXI.ALPHA_MODES.PMA } }
})

 

 

Link to comment
Share on other sites

image.thumb.png.1c4134443b0fd639e7ff6544f45d3146.png

I also tried this way of writing, but it doesn't seem to be the correct way to write it,

I repeatedly jump from a route to the route rendered by pixi, he will prompt

ContextSystem.ts?fffe:141 WARNING: Too many active WebGL contexts. Oldest context will be lost.image.png.76b5822ade41f55892685ae938256177.png

n this way, the GPU is normal, but the CPU usage is very high, and there is still a lag

Link to comment
Share on other sites

35 minutes ago, ivan.popelyshev said:

If you are asking how to make sure that your memory is OK and all objects are destroyed - sorry, that's a big topic. Really big. I cant answer on that just in one post.

As for CPU usage, try to use profiler?

I want to cache the loaded png, so that I don't need to reload the existing png in the process of repeatedly entering the component, only load .skel and .atlas, the above loadTexture function is that .skel, .atlas and png are all cached , but the warning WARNING: Too many active WebGL contexts. Oldest context will be lost. I don't know what to do with it, I use destroy(true) when leaving the component only to get him back to the initial state, which doesn't seem to fix it.

I feel that the way I write is not correct, but I really do not know how to write,This problem bothered me for 3 days and finally I gave up.Because itself is also a relatively small projec

I may rewrite it in vue3+vite later,Then try to solve the problem again.

Finally, thanks for your answer,I am very happy because almost no one answered me in other forums,Thank you ! ?

Link to comment
Share on other sites

Yes, its possible, people did that many times, please look through issues in pixi-spine github. 

Using same IMAGE: according to https://github.com/pixijs/spine/blob/c7859f31d0653ac4a4ba81a79572c93ad0479e1e/packages/loader-base/src/loaders.ts#L152 , if there's existing entry in resources, it wont. You can just manually copy the resource many times there, wait when it loads and then

Using same ATLAS: its easier, preload atlas before everything and pass it to metadata. Use devtools debug to correct names for those options:

Here's the doc: https://github.com/pixijs/spine/blob/master/examples/single_atlas_multiple_models.md

This problem bothered me for 3 days and finally I gave up

Maybe the next guy will actually make better docs for this case. 

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

  • 1 month later...
On 6/16/2022 at 9:41 PM, ivan.popelyshev said:

Maybe the next guy will actually make better docs for this case. 

Hello, I'm back again, the previous problem has been solved, it was caused by a problem with my own writing, every time I jump to the route, I call new PIXI.Application.

Now, I have a new problem.It still seems to be a problem with Unpremultiply alpha, how can I fix it

QQ图片20220814171131.png

QQ图片20220814171109.png

Link to comment
Share on other sites

On 8/18/2022 at 4:25 PM, ivan.popelyshev said:

I'll look but im quite busy at the moment )

Sorry I just found out why

Blending will have no effect if backgroundAlpha is transparent

But i need transparent background,Besides modifying png, is there any good way to solve this problem

Edited by rhythmras
Link to comment
Share on other sites

I just want to do a simple spine display, not going to do something too complicated

On 8/25/2022 at 2:04 AM, ivan.popelyshev said:

Why do you need transparent background in your pixijs canvas?

I have added a background image to the body element. If there is a background on the canvas, it will not look good ╯︿╰

It seems that there is no mix with transparent background together with the normal use of the method, I do not know if you have read the spine file I sent above

Currently I have added another image to the stage to solve this problem

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.

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

Loading...
 Share

  • Recently Browsing   0 members

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