flowww

Members
  • Content Count

    11
  • Joined

  • Last visited

About flowww

  • Rank
    Member

Recent Profile Visitors

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

  1. flowww

    Click event problem

    I have tried few things. Remove all animations, attach click event to stage and containers as well and the results are that when I click the image the stage event fires but not the container and sometimes image too. Then I made stage non interactive and container event still not fired. Sometimes I have to click 3 4 times on the image to get its click event fired. My hierarchy is Stage -> Containers -> Images New Findings: All three Stage, container and image events gets fired with stage click every time and container,image randomly.
  2. flowww

    Click event problem

    Im using this one https://github.com/pixijs/pixi.js/blob/dev/bin/pixi.js Ok I will share an example of my code.
  3. I'm developing a web interactive application. I have a stage in which I have arranged multiple containers. Containers are placed parallel to each other (not overlapping) and each container has multiple images placed vertically. Images are well inside the boundary of the containers so removing the chance of containers or images overlapping. The containers are also moving from left to right continuously by animating their x position. The problem is when I click on any of the images in the container, the click event fires randomly. Sometimes on the first click and sometimes on several clicks.
  4. I have found a solution for this by examining the gridify.js logic. Here is my code: var items = options.items; var width = options.containerWidth, item_margin = parseInt(options.margin || 0), item_width = parseInt(options.max_width || options.width || 220), column_count = Math.max(Math.floor(width / (item_width + item_margin)), 1), left = column_count == 1 ? item_margin / 2 : (width % (item_width + item_margin)) / 2, lastHeight = 0; if (options.max_width) { column_count = Math.ceil(width / (item_width + item_margin)); item_width = (width - column_count * item_margin - item_margin) / column_count; left = item_margin / 2; } for (var i = 0, length = items.length; i < length; i++) { var ratio = item_width / items[i].width; items[i].width = item_width; items[i].height = items[i].height * ratio; items[i].position.y = lastHeight + item_margin / 2; items[i].position.x = 0; lastHeight += items[i].height + (item_margin * 2); } Iterate all the containers and pass the parameters to above function. It will gridify the images/contents in a container. I have used single column per container but you can use multiple columns by using the original code from the gridify.js
  5. Can we apply any plugin to gridify the sprites in a container? I am trying to group the sprites in a container so that I can move the container instead of all images inside it but I want sprites not to be overlapped.
  6. May be but in my case it was disabled.
  7. Thanks @ivan.popelyshev for the responses. This is first time I'm working with Pixi and WebGl application, I didn't realize that GPU acceleration is not enabled in the chrome. That is why it was crashing.
  8. I have used Pixi 4 and seems to be reallocating memory consistently but when I click on the images randomly and swiftly to open the HTML popup, even at 500 MB the Chrome tab crashes. Can it be a WebGl memory issue? In normal situation if Im not interacting with the app, it works fine even at 1.3 GB. When I click on some image to open the HTML popup, the image is removed from the stage using removeChild method and on closing the popup it regenerates the Sprite like it did first time. Then sprite is added back to the stage. Im not using any kind of text. I have only videos and images.
  9. Thanks for the reply. I am destroying all the textures after adding sprites to the stage but they are not destroying cleanly. I have read a lot that textures should be removed after using but I think textures are linked to the sprites and sprites need to be removed first. right? if that's the case then I cant flush the texture cache if i need all those 300 images on the stage? I will not mind if it has to request for fresh image if it doesn't find the texture in the cache. Is Pixi 4 stable version is available now?
  10. Hello, Im developing a web interactive app using pixi v 3.0.10 . According to requirement of the application I have to render 300+ images and it can grow in future. Everything works fine with less images but with 300+ images memory grows very swiftly when the application start generating sprites. The memory goes to 800 - 900 MB . Im not using loader . Im using Texture.fromImage method like this: texture = PIXI.Texture.fromImage(imageUrl); I have tried to remove the texture cache after generating all sprites and adding them to stage : for (var textureUrl in PIXI.utils.BaseTextureCache) { PIXI.utils.BaseTextureCache[textureUrl].destroy(); } for (var textureUrl in PIXI.utils.TextureCache) { PIXI.utils.TextureCache[textureUrl].destroy(); } but it throws errors and images goes black: WebGL: INVALID_VALUE: texImage2D: no image data TypeError: Cannot read property 'naturalWidth' of nulli.update @ pixi.min.js:7i._onUpdate @ pixi.min.js:7 :1 [.CommandBufferContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering. 4pixi.min.js:7 Uncaught TypeError: Cannot read property 'naturalWidth' of nulli.update @ pixi.min.js:7i._onUpdate @ pixi.min.js:7 :1 [.CommandBufferContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering. Uncaught TypeError: Cannot read property 'naturalWidth' of nulli.update @ pixi.min.js:7i._onUpdate @ pixi.min.js:7 :1 [.CommandBufferContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering. 4pixi.min.js:7 Uncaught TypeError: Cannot read property 'naturalWidth' of nulli.update @ pixi.min.js:7i._onUpdate @ pixi.min.js:7 :1 [.CommandBufferContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering. 4pixi.min.js:7 Uncaught TypeError: Cannot read property 'naturalWidth' of nulli.update @ pixi.min.js:7i._onUpdate @ pixi.min.js:7 :1 [.CommandBufferContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering. 4pixi.min.js:7 Uncaught TypeError: Cannot read property 'naturalWidth' of nulli.update @ pixi.min.js:7i._onUpdate @ pixi.min.js:7 :1 [.CommandBufferContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering. :1 WebGL: too many errors, no more errors will be reported to the console for this context. Uncaught TypeError: Cannot read property 'naturalWidth' of null I have also tried the following which doesn't throw any error but doesn't seem to have any effect on the memory : for (var textureUrl in PIXI.utils.BaseTextureCache) { delete PIXI.utils.BaseTextureCache[textureUrl]; } for (var textureUrl in PIXI.utils.TextureCache) { delete PIXI.utils.TextureCache[textureUrl]; } with this memory the application doesn't work smoothly and while interacting with the application, memory grows further up to 1.2 - 1.6 GB and application crashes. I have checked and remove some memory leaks earlier which reduced some memory but its still very high. Can you guys suggest me that how can I optimize it ?