ivan.popelyshev

Members
  • Content Count

    2,855
  • Joined

  • Last visited

  • Days Won

    19

Everything posted by ivan.popelyshev

  1. ivan.popelyshev

    How to get correct fragment shader UV in Pixi 5.0 RC0?

    Btw new default filter has different attributes, beware! Here's the new displacement: https://github.com/pixijs/pixi.js/tree/dev/packages/filters/filter-displacement/src
  2. ivan.popelyshev

    How to get correct fragment shader UV in Pixi 5.0 RC0?

    I figured it out. You dont pass your own vertex shader code to constructor, it'll take default, and in 5.0.0-rc it doesn't have old attributes => it doesnt trigget "legacy" mode , and old uniforms dont appear in it. That mode exists to support pixi-v3 and v4 filter shaders. https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/filters/FilterSystem.js#L254 Here are new uniforms, you can see that old filterArea was moved partially to outputFrame and to inputSize. I hope this version of filter uniforms is easier to understand than the one from v4.
  3. ivan.popelyshev

    How to get correct fragment shader UV in Pixi 5.0 RC0?

    My telepathy doesn't work on this case (sometimes it works). Please make a demo at https://www.pixiplayground.com/
  4. ivan.popelyshev

    Beginner Questions

    "Next" has a few criticals at the moment, but we'll update it in a day or two.
  5. ivan.popelyshev

    Beginner Questions

    1. those gui tools aren't that difficult to update for latest version of pixi. Some plugins dont even care about pixi version because they use very stable parts of API. I'll update all my plugins and whatever my hands when v5 is released. I recommend to use LATEST v5 https://pixijs.download/dev/pixi.js , because we found several criticals in last three weeks There's pixi-ui that I will definitely rewrite for v5 with many fixes. I believe you can convert EZGUI without a problem, maybe it'll work without changes. 2. there are many angular/vui/react threads here and in pixijs issues on github, and i believe i saw angular boilerplates somewhere. Yes, DOM elements over canvas make sense if you have enough idle time in your app performance profile to trade for your coding time
  6. Kawase is multi-pass filter, swap textures magic breaks everything. For that kind of filter we need actually secondary mask filter that deals with backdrop - apply mask before or after kawase, we dont need to modify kawase fragment shader at all. I'll make the demo later. You can try to do it yourself - make a very stupid filter that takes backdrop and just multiplies it by sampler alpha, like pixelate one but no pixelate() at all. Take Kawase as second spriteFilters = [myStupidMask, kawase]
  7. ivan.popelyshev

    Pixi.js Showcase

    https://github.com/eXponenta/gstatsjs is based on mrdoob creation, but it shows more than FPS
  8. ivan.popelyshev

    Pixi.js Showcase

    Good job! We'll add it to https://github.com/cursedcoder/awesome-pixijs and wiki If you use slack, I can send you an invite to pixijs community slack. If you use telegram and know russian - there are two russian gamedev html5 chats.
  9. ivan.popelyshev

    Pointerevents on unclosed polygon

    Yeah, that's the problem - interaction doesn't work with Graphics edges. There's no packaged solution for that, nor plugins. I have solutions in my projects that i dont want to publish. 1. (HARD) modify containsPoint that way if there are WebGL representation of Graphics available, check all of its triangle buffer, if they contain mouse position. 2. (SUPER-HARD) Implement LineCap, there is existing PR (thought its closed for some time) for pixijs v5. 3. (MY USUAL WORKDAY) Swap all the shaders that way they have mouse coord input and put object number in color in that pixel, then readPixels() it.
  10. PixelateFilter example: https://www.pixiplayground.com/#/edit/Co68RDM9MbIf5lqcsAjHP OK, what did I do. 1. put PixelateFilter in the example 2. add backdropSampler, that'll be our background, and take color from it , not from the uSampler 3. take only alpha channel of uSampler, without pixelation , multiply result by it 4. in renderer constructor manually specify two uniforms - backdropSampler, and size. pixi-picture doesn't work if we dont specify it manually 5. put a fullscreen filter on stage. pixi-picture requires that background is rendered inside a framebuffer, i mean Filter or RenderTexture, otherwise "copySubTexImage2D" wont work.
  11. Hm, its not that easy, backdrop has different size than uSampler.. a few more minutes I think I'll make article based on that hack after we test it. UPDATE: false alarm, its easy as i thought, give me two more minutes.
  12. Filter code: https://github.com/pixijs/pixi-filters/blob/master/filters/pixelate/src/PixelateFilter.js Frag shader: https://github.com/pixijs/pixi-filters/blob/master/filters/pixelate/src/pixelate.frag , put it instead of FRAGMENT param in filter. You don't need VERTEX param, pass undefined there, pixi has default vertex shader. Now, the idea is that we need extra sampler, uBackdropSampler, and we should specify it both in frag shader and in constructor: super( undefined, myFragmentShaderCode, { uBackdropSampler: PIXI.Texture.WHITE.baseTexture // default value, just a pure baseTexture, nothing special, we dont use it } ); this.backdropUniformName = 'uBackdropSampler'; That should work with pixi-picture plugin, of course you need to include it just after pixi.js. Also, we can use defualt uSampler to get alpha of whatever you mask that way it pixelates stuff only when alpha is not zero.. OK, I know I want to do it right now, wait a few minutes.
  13. Alternativelyif your background is just one sprite, make another one, apply a filter and specify filterArea at the right top
  14. Nope, it doesnt work. I'm afraid you have to fix the plugin itself or modify PixelateFilter that way it has another uniform for backdrop. Can you do that, or should I do it?
  15. This plugin allows to create filters that affect only certain area of BACKGROUND, that is under that container: https://github.com/pixijs/pixi-picture Demo: https://gameofbombs.github.io/examples-heaven/#/picture/displacement-backdrop.js You can enable that for pixelateFilter if you specify " filter.backdropUniformName='uSampler' " . Put that filter on a fake sprite that will cover that corner, sprite can be obtained by " sprite = new PIXI.Sprite(PIXI.Texture.WHITE); sprite.width = 100; sprite.height = 100; " I'll try it in a few minutes and confirm if it works.
  16. ivan.popelyshev

    Sprite not added to the stage when game is over

    ticker also holds `app.render()` thingy that calls `app.renderer.render(app.stage)` , please study the sources of Application class. I don't know if you use v4 or v5 , so I cant point you to correct sources. However, https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop , is correct for both v4 and v5, except "interaction" thing, its always inside the renderer, no need to create it. As for your case , I recommend to remove your functions from ticker when the game ends, and don't touch other things. Or you can make your ticker events to check if game exists.
  17. ivan.popelyshev

    Sprite not added to the stage when game is over

    I'm not sure if loader can be used twice, you wont get that `complete` event. You should create another loader for it If you want to know more about pixi loader, please read the code and issues of https://github.com/englercj/resource-loader If I were on your place, I could just test this thing what it can do and what it cant. I dont see this answer in first page of closed issues, but I remember that there were threads about it in this subforum. Or just use `Texture.from` or `Sprite.from` , you wont need ready method to use it.
  18. ivan.popelyshev

    How to update hitArea of a sprite

    yeah, because hitArea is supposed to be local. If you want it to be global, name it something else , or it will affect interaction. toGlobal() wont work on rectangle, you have to develop your own method (THE HORROR!) of transforming stuff. I think I gave you enough links to source code to get some info from it We are talking about intersection of two rectangles each with their own transform, that's a 1st grade college material, I dont know how to explain simple things, I just sit and write them like they are nothing special
  19. ivan.popelyshev

    How to update hitArea of a sprite

    yeah, its a good idea, but getBounds() is not related to hitArea and to get collisions you have to convert that hitArea to global coords first... Maybe you need you own field there , and convert it every frame? I don't know , there are so many ways to do that, and its just general JS game implementation problem, not pixi problem. And if you start rotations there , getBounds() will still get you normal and not rotated rectangle, so it'll collide on corners where its not supposed to.. Its a big topic, I don't believe I have time to discuss it. What I can is to give you the references, but you have to look in docs and sources yourself. "Bounds.addFrame(transform, x0, y0, x1, y1)" can convert local bounds to global using element transform, of course if you understand what `Bounds` is and why did we make that class. You have to store your stuff in different field, because hitArea exists for interaction and not for collision. In general, NOTHING in pixi exists for collision, collision has to be your engine problem, the engine you are building on top of pixi.
  20. ivan.popelyshev

    How to update hitArea of a sprite

    Exactly. But sprite checks that rectangle anyway in `containsPoint`. you are not sure that its different from your sprite dimensions. However, hitArea behaviour is different if element has children, I cant explain it, just give you the code: https://github.com/pixijs/pixi.js/blob/dev/packages/interaction/src/InteractionManager.js#L1030 https://github.com/pixijs/pixi.js/blob/dev/packages/interaction/src/InteractionManager.js#L1105 So, why do you need hitArea?
  21. ivan.popelyshev

    How to update hitArea of a sprite

    Here is Sprite default area: https://github.com/pixijs/pixi.js/blob/dev/packages/sprite/src/Sprite.js#L433 , Pixi converts coords to local and then it checks rect (-anchor.x * w, -anchor.y * h, (1-anchor.x)*w, (1-anchor.y) * h) If you want different w,h , your hitArea has to be relative that (0,0) that is CENTER of your sprite because you specified anchor=0.5. It'll be like (-30, -10, 60, 20)
  22. ivan.popelyshev

    How to update hitArea of a sprite

    HitArea is not absolute, you can specify (0,0, 60, 20) there and it'll be fine Is (x,y) your left-top corner?
  23. ivan.popelyshev

    Apply tween on group of image

    Yeah, what @Exca said. I forgot that you might not know that pixi doesnt have built-in tweens.
  24. ivan.popelyshev

    Apply tween on group of image

    tween "width" and "height", i guess?
  25. ivan.popelyshev

    Collision between one and multiple object

    500 lines, no working app, and my eyes dont see a problem there. I just dont understand where do you check it with multiple objects, i see only one comparsion