Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AnimatedSprite can't be a child of Container in TypeScript #43

Closed
wizcas opened this issue Feb 26, 2019 · 5 comments
Closed

AnimatedSprite can't be a child of Container in TypeScript #43

wizcas opened this issue Feb 26, 2019 · 5 comments

Comments

@wizcas
Copy link

wizcas commented Feb 26, 2019

both pixi.js & pixi-layers are installed by npm packages
After importing pixi-layers, the AnimatedSprite can't pass type check when being added as a child of Container.

It seems that the error is caused by different function signatures. The paramter renderer of function renderWebGL in class Layer is of type PIXI.WebGLRenderer, whereas it's PIXI.Renderer in Container.

Which one is correct? And how can I make a quick fix for this temperorily?


Here's the compiling error:

TS2345: Argument of type 'AnimatedSprite' is not assignable to parameter of type 'DisplayObject'.
  Types of property 'renderWebGL' are incompatible.
    Type '(renderer: Renderer) => void' is not assignable to type '(renderer: WebGLRenderer) => void'.
      Types of parameters 'renderer' and 'renderer' are incompatible.
        Type 'WebGLRenderer' is missing the following properties from type 'Renderer': globalUniforms, mask, context, shader, and 10 more.
@ivanpopelyshev
Copy link
Collaborator

Its because i didnt update it this plugin for v5 yet.

Why do you need pixi-layers, whats your case? I can make it this week instead of next if you explain me that your project is awesome enough, or i can tell you how to use easier solutions.

@wizcas
Copy link
Author

wizcas commented Feb 26, 2019

@ivanpopelyshev Thanks for you super fast reply! Sorry I didn't noticed I was using Pixi 5... Always thought I was on 4 ;)

I'm making a stage like this:

image

Currently the sprites are added in a bottom-up order, so the upper ones are painted after the lower ones. I need to control their painting order by sprites' y-pos, making lower ones on top. Looks like pixi-layers fits right into it.

@ivanpopelyshev
Copy link
Collaborator

well, actually v5 has zIndex field. If all of your sprites are in the same container, you can just assign element.zIndex = element.pos.y , maybe with different sign.

layers are for more extreme cases: to allow things to be rendered not in parent but somewhere else. Character has sprite, shadow, healthbar - to render them in correct order you have to move them into different containers and its bad. Layers allow you to specify where do you want to render them, but leave them with their logic parent :)

Also, layers allows some renderTexture hacks in case you dont want to manage fullscreen render textures yourself.

@ivanpopelyshev
Copy link
Collaborator

ivanpopelyshev commented Feb 26, 2019

It is ok to use simple algorithms and move to hard ones when the time comes.

@wizcas
Copy link
Author

wizcas commented Feb 27, 2019

I'll check out the zIndex field, thanks!

Actually I do have the needs for complex layered rendering like shadows and overlay FXs. There will also be overlay UI, which is attached to player, that needs to be rendered on the topmost layer.

So I'm still looking forward to the new release that supports Pixi v5 and hopefully everything goes well😉

@wizcas wizcas closed this as completed Mar 3, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants