Jump to content


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Exca

  1. That looks like a CORS problem. Can you check what network headers the video (and possibly related preflight request) have in relation to access control?
  2. AnimatedSprite is basically an example on how you could do an animated sprite with very basic support that is meant to be extended with your own needs. Though I see now reason why it couldn't have emit("loop") whenever onloop is called.
  3. There is no eventData on interaction plugin. Use the interaction.mouse.global as suggested by Ivan.
  4. You are not using pixijs text element but a Text class from window (which basically creates a text node). Use new PIXI.Text("...",style).
  5. Ah, forgot to add PIXI in front. So they should be new PIXI.Rectangle.
  6. I have had no problems with interactionmanager not handling css-scaling. Very often you dont want to have automatic scaling. At least in my projects automatic scaling on resize would break a lot of stuff. You can do the scaling manually really easy by doing something like this: var newSize = new Rectangle(0,0, widthyouwant, heightyouwant); var originaSize = new Rectangle(0,0, something, something); //Calculate how much scaling should be done. Keep the aspect with if and make sure canvas always fits wanted size. var s = newSize.width/originalSize.width; if( s > newSize.height
  7. Resize function resizes the canvas to given resolution and starts rendering with that viewport size. If you want to scale the contents then you need to scale the container. Or you can scale the canvas with css.
  8. With toLocal you get the given coordinate in the objects local coordinates. So if you would change the toLocal into toLocal( entities.position, app.stage) then the rectangles would be drawn where the bunnies are. In order to make that work as minimap what you want is to calculate the relative coordinates and calculate that on minimap instead of calculating where the object is in the minimaps scope. So you could say somethign like: p.x = entities.x / screen.width * minimapWidth; p.y = entities.y / screen.height * minimapWidth; This assumes your map is the size of screen
  9. The tutorial on texturepacker page is also very good on how spritesheet animations work https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs?utm_source=forum&utm_medium=html5gamedevs&utm_campaign=pixijs-tutorial-2018-10-30 I use a setup myself where I analyze the json generated by texturepacker and create animations based on simple ruleset where directories tell the animation name / component name / object name in reverse order. So I could have a sheet where I have only one single animation and the detection determines t
  10. The client I work for has automatic feedback channel when problems occur and they add items to that list based on feedbacks and per project basis as the requirements vary a lot. The check is a combination of GPU string in gl context and additionally user agent. For example we have some old chrome/firefox versions blocked.
  11. I use autodetect with additional blacklisting on per device basis. If you have a modern computer/phone with modern browser then GPU is basically always faster. Latest devices I have checked that didnt apply to that rule are android 4.x and first gen ipads. If multiple GPU's exists on a device then that decision on which to use is done on os level (at least I havent heard of any other way). MajorPerformanceCaveat is used in my knowledge, last checked it in v3 though.
  12. Exca

    deep and child

    In this case you could also just say .visible = false / true to keep layering constant.
  13. You could still use the native scrolling. Just have some element that is on top of the canvas with the actual width that the canvas would have now, then just read it's position and offset the container in pixi that you are rendering by same amount. Other option is to track mouse/touch -movements on canvas and move the container that way. Could be many other ways also.
  14. Your total canvas size goes over what is maximum on the device -> it renders it on lower resolution and then upscales -> blurry image. You should implement it so that the canvas size is the maximum the viewport can show. That way rendering happens only to the actually visible region and memory requirements for the canvas dont go over device limits. Looks like you're not moving the canvas when scrolling so fix should be just not making your canvas so large.
  15. It depends a lot on what kind of project you have. There's no single easy method to swap to lower quality rendering. Rather you should find out what is the bottleneck in your project and then either optimize that or make it so that it's toggled off for faster rendering when needed. Some of the common bottlenecks include: - Texture swapping (having objects in the scenegraph that cannot be rendered with batches) - Too many graphics objects being rendered. - Too many text objects being updated. - Having too many filters. - Rendering the scene too many times.
  16. Exca

    Mobile Blur

    One thing I noticed with ios when using large textures (limit depends on ios) it will resize them to smaller size instead of just failing. Got this to appear on iphone 4 with sizes over 1024x2048 and with never devices those limits have gone up.
  17. You can also use a library like pngquant to optimize images into 8 bit while automatically preserving alpha channel (with some lossy compression of course). Makes it much more nicer to put the 8 bit conversion as a part of a workflow. The lib can be found here https://pngquant.org/
  18. It looks like your rendering is not the thing causing frames to go down. Profiling it shows that most of the time goes to javascript. ProcessSurvivor and findfood take most of the time. Optimizing those might help. Also if you have only 200 sprites you can use regular container without any problems. ParticleContainer starts to show benefits at thousands of objects. Here's a screenshot of the profile (chrome profiler)
  19. You could also solve this by having objects with renderable = false that have a hitarea with an approximation of the coordinates, then listen to those objects and keep track of what maps to where. That way you could have single line tracked with a simple rectangular polygon.
  20. Set the filterArea property of that sprite to apply filter only to given area. Though that makes it so that the only area visible is the area where filter is drawn. One option to prevent that would be to have 2 sprites, one with filter and another one without. Or render a separate texture of the sprite from the wanted region and then blur that and add that blurred part on top of sprite. Or you could adjust the way how pixi works with filterarea. To the latest part I dont know for sure how it would be done.
  21. I would suggest using some kind of tweening library. I myself use tweenJS but there's plenty of them available. In tweenjs you could say something like this: Tween.get( yourSprite).to({ x: targetposition.x, y: targetposition.y, width: target.width, height:target.height}, 500);
  22. What you could do is draw the triangles into a texture and then display that texture on the stage. That way you wouldn't have a very large graphics object redrawn every time. So something like this: //Pseudo code. Might have some syntax errors. var texture = PIXI.RenderTexture.create( app.screen.width, app.screen.height); var graphics = new PIXI.Graphics(); var sprite = new Sprite(texture); app.stage.addChild(sprite); //Draw other shapes you want here to graphics and then draw that to texture also. graphics.beginFill() ... graphics.endFIll(); app.renderer.render(graphics, tex
  23. When a touch/pointer begins, store the pointerId of the first touch and keep track of that and only react to events with that id. When event ends, make it null and allow storing of next touch/point.
  24. I have done similar solution with code like this: function beforeSheetLoad(r,next){ if(r.name.indexOf("json_image") >= 0 && r.url.indexOf("?") == -1) { r.url += "?" + something; } else if(r.name.indexOf(".json") >= 0 && r.url.indexOf("?") == -1) { r.url += "?" + something; } next(); } loader = new Loader(); loader.pre(beforeSheetLoad);
  25. You could also ignore the few first ticks to let the ticker settle down (gpu uploads etc. might be happening at that point which takes some time).
  • Create New...