• Content Count

  • Joined

  • Last visited

  • Days Won


ivan.popelyshev last won the day on September 13

ivan.popelyshev had the most liked content!

About ivan.popelyshev

  • Rank
    Advanced Member

Contact Methods

  • Website URL
  • Twitter

Profile Information

  • Gender
  • Location
    Moscow, Russia
  • Interests
    Pixi.js, Topcoder, Codeforces, ninjas and bombers

Recent Profile Visitors

13994 profile views
  1. you can create a container for those sprites and then you'll need only one "render" operation I dont know what do you mean by efficient here. Its one-time operation. Do you have like 1000 of them? Then "optimization" i suggested can help a bit. Btw, if you are using that for tilemaps - i strongly suggest not to do it. Tilemap discussions are big and you can search them through this subforum, there are better techniques.
  2. use sprite width RenderTexture or a multiple sprites in a container,
  3. still "new PIXI.Texture(baseTexture, frame, trim, orig, rotate)". Frame is obvious, but sometimes you need extra stuff, and i cant explain other params in this thread, look in the docs. After 2-3 fails you'll get it I dont know how to make it easier. If you want to make it even easier - propose an API for it. Yes, sometimes in private code I use methods that actually cut texture region to more texture regions, for example for NineSlice or to sort objects in isometry and cut sprites with multiple vertical lines. This is one of such attempts for pixi-v4: https://github.com/gameofbombs/pixi-heaven/tree/master/srcOld/base/atlas but it doesnt have nor good API's nor docs.
  4. Thanks for trying to making my job easier. The more stuff we make, the easier it will be to answer all the newbie questions. I'm also looking for the moment when i'll be able to integrate everything together - docs, wiki, hacks, examples, tutorials.
  5. ivan.popelyshev


    AnimatedSprite and videos aren't compatible. One is a sequence of textures, maybe packed with texturePacker. Another is an html <video> streaming to texture, and it gives you much less control and more problems. As for chrome v76, we made a fix for that: https://github.com/pixijs/pixi.js/pull/6088 , here's the build: pixijs.download/fix-video-performance/pixi.js
  6. calculateSpriteMatrix takes anchor into account: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/filters/FilterSystem.js#L395 It should work. You've made a mistake in a place that is hidden from my telepathy, please provide a demo on codepen/jsfiddle/pixi-playground.
  7. I think I remember their code, but I dont remember if it was pixi-related or something else. yeah, you need a way to map their transforms to pixi transforms. Pixi has "position,scale,rotation,-pivot" order, its not difficult to make a pair of containers to emulate other behaviours. Its more about integrating math, and not webgl operations.
  8. There a three ways to work with pure webgl in pixi. 1. Use pixi webgl abstractions: Geometry, Buffers, Shaders, e.t.c Also, you can use texImage2D-related things in TextureResource, https://pixijs.io/examples/#/textures/gradient-resource.js 2. Render part of tree, call "renderer.reset();" , do whatever you want, call "renderer.reset();" again. Suited for integrations with other renderers like threejs and babylonjs 3. create separate canvas, do all your rendering there, and even if its webgl, "PIXI.Texture.from(myCanvas)" will make it into a texture. simple "texture.update()" will update that. Its undocumented feature of browsers, suited for integration with not-so-good documented renderers like Skia. Its basically copyTexSubImage2D , I traced how chromium does it. If its your own custom webgl code, and not some strange external thing, I recommend to use pixijs webgl abstractions. All VAO's , buffers, almost everything is mapped to it, your code will look much better. Yes, you can also use it and pure webgl operations at the same time if you make renderer plugin like @Exca said. Code is basically the same, I'm gonna update that thing in a few days.
  9. I've modified demo a bit to make bounds visible. Your problem with demo is that bunny dont have width/height , they are not loaded yet fromImage('some.png') cant get information about image right now the same way <img src=...> doesnt show you image the same , unless that image is pre-loaded. If you consolelog bunny's dimensions - you'll see zeros. You have to use loader for that demo. Also, I cant guarantee anything about previous versions, we've fixed so many bugs..
  10. Oh, right, you need to patch pixi that way it doesnt reference "window". Yes, there are projects that use pixi as worker, I guess they manually pathched all occurences of "window". I can just tell you its all possible and I used OffscreenCanvas for certain things too, it has 2d context in chromium, always accelerated: for simple canvas its 50/50, depends on your getImageData usage. As for why isn't pixi support it from the start, well, even basic usage for textmetrics made a problem for us => that feature can't be put in vanilla before someone spends a lot of time on it and covers all the possible problems.
  11. If you know how to work with OffscreenCanvas, you can use it with pixi. I know that people used pixi in webworker to render something on main screen even without it As for code in pixi that is related to OffscreenCanvas, its only for TextMetrics and for creating texture out of it : https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/CanvasResource.js . You can call "Texture.from(myCanvas)" and then "update()" it when you made changes to canvas, that's all. Is there anything else you need ? I just want to point that we are not the framework that covers everything and forbids users to hack its components and use html5 api's directly. PixiJS is a library that is supposed to be used with WebGL and canvas2d API's in heavy cases. You can manually call texImage2D when its needed, you can even use another renderer (skia, threejs, anything) with it, in same or in another context.
  12. generateTexture takes extra pixel in texture => texture size is a bit different, anchor shows that. You didnt close the polygon => stroke has only three lines in it, look here: https://www.pixiplayground.com/#/edit/F3vnJZu6LODdtH~VvmrFV However, in next version of pixi bounds wont be affected by line caps, i've specified pixijs.download/dev/pixi.js in your demo and it works: https://www.pixiplayground.com/#/edit/xoyXR_GDYnyjZer0fPEO5 That's where it was fixed: https://github.com/pixijs/pixi.js/pull/5991
  13. Interesting. It should work. Please post a demo on codepen, jsfiddle or pixi-playground. we are currently fixing bounds, so maybe dev build can help you: pixijs.download/dev/pixi.js Welcome to the forums!