Jump to content

Minimog

Members
  • Content Count

    13
  • Joined

  • Last visited

About Minimog

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I see, can I ask how you skip recalculation / render on on your elements when you determine that they are not needed? I assume you mark each element as either dirty or not and based in that flag do something to either re-render them or skip?
  2. I am working on a game view that has overlay modal with scrollable container (Parent container with mask and content container with y transforms on scroll). In general everything works fine, but I notice my phone heating up sometimes when scrolling this view for a while. I am not using any expensive things like antialiasing, however my stage devicePixelRatio is set at 3 (for iphone xs display). I assume that with every scroll my whole view is being re-rendered, hence causing this heating up? I was wondering if pixi has a mechanism to separate this scroll container onto a separate layer of
  3. Yeh, essentially I have a container displayed in the scene that is scrollable i.e. achievement list in a game. It doesn't occupy full screen and mask is used to hide its overflowing content (invisible items are also culled). Children are in their own container and it is this one who's y transform is changing to replicate scroll. Overlaying div has same dimensions and position as that parent container. I guess what I'm asking is how to hitTest only in that parent container, or setTargetElement only for that container, rather than full scene.
  4. @ivan.popelyshev Neat! So after glancing at it I think one strategy is to run hitTest and emit appropriate events if there was a match? i.e. emit 'pointerdown'. However this looks like what I need to be using https://pixijs.download/dev/docs/PIXI.InteractionManager.html#setTargetElement but I think this will only work if my div is covering whole canvas and not just part of it that is scrollable right?
  5. Closet I got to is adding click listener on a div, storing x and y of that click event and then calling `canvas.click()` where I can access those stored x/y values, however I'm not sure how to trigger pixijs events with this data.
  6. I was working on a scrollview solution for pixi today and after trying few approaches like using `pointermove` event, `pixi-viewport` that yielded relatively poor performance I landed on a custom solution where I overlay scrollable div over pixi canvas and then on that divs `scroll` event I update my containers y and x values. This works insanely good in terms of performance and keeps some things like scroll bounce on ios, so I am happy with it. The issue as you might guess is that this div covers canvas and I can't disable it's pointer-events, otherwise I loose ability to scroll. It does h
  7. I tried to find answers to these questions online, but was only partially success-full and most of the info I found was for pixi v3 version. Given that we are now on v5 and few things changed, I decided to ask this here to better understand pixi and webgl in general for optimising big amounts of assets. A small intro to my project I am working on a mobile / web game that relies on images for it's ui / characters / items / backgrounds etc. In some places we are talking high detail, fullscreen graphics for characters, something similar to this: https://www.artstation.com/artwork/n616E that ha
  8. @ivan.popelyshev You are tight, I didn't even know renderTexture achieved what I wanted to do with prepare. I cleaned up the code and added appropriate destroy methods, could you please give this a final glance to confirm that I understood everything correctly. Only caveat here that I can't figure out when comparing this to prepare plugin, is how can I know when renderTexture is loaded to gpu? Prepare provided a callback for this. Or is renderTexture gpu upload synchronous? loader.load((_, resources) => { const sprites = {}; Object.keys(resources).forEach
  9. Just to add to the above, calling reset and destroy methods on loader seems to also work. I looked up sprites in chrome's memory profiler and ones stored there are correct renderTextures
  10. @ivan.popelyshev Alright, I tried to do that after it's been uploaded to GPU i.e following my example above renderer.plugins.prepare.upload(sprite, () => { resources[key]?.texture.destroy(true); }); But this throws various errors related to sprite scale / width etc being undefined. It feels like old texture is still being referenced somewhere. Can this be the case with my previous example above?
  11. @ivan.popelyshev Gotcha, so just to confirm that I am cleaning everything up correctly here is a snippet that works for me and resizes everything correctly, am I correct assuming that the only cleanup I need to do here is destroy a loader with original textures? loader.load((_, resources) => { const sprites = {}; Object.keys(resources).forEach(key => { const sprite = new Sprite(resources[key]?.texture); const { width, height } = sprite; // maxWidth is pre-determined beforehand if (width > maxWidth) {
  12. I am working on a game that has few background graphics, these are stored in app bundle at big resolutions like 2000x2000 pixels to support bigger devices like iPad pro. Obviously something this big is an overkill for mobile and I wanted to ask if following optimisation assumption is correct: 1. I preload these assets with pixi loader 2. I create sprite for each texture 3. I then resize this sprite to fit device dimensions better i.e. 1000x1000 px for iphone When I inspect my sprites textures I still see them at 2000x2000 pixels even though sprite itself is 1000x1000. I am concerne
  13. I made simple recreation available at Codesandbox In essence following code triggers alert function when I click on a text even though my interaction listener is set on the sprite. I was under impression that pixi handles this case (when element is covered by another), but I guess I was wrong. Is there a way to only fire interaction if I click on sprite explicitly and not on any element that is covering it? Code import * as PIXI from "pixi.js"; const application = new PIXI.Application({ resolution: window.devicePixelRatio, autoDensity: true, width: win
×
×
  • Create New...