• Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Exca

  1. I have been using font.js to handle font loading https://github.com/Pomax/Font.js?files=1 Though the loading method is not exactly perfect, it usually works in most cases.
  2. I'd assume it has something to do with the canvas being larger than what the drawing target is. When you start the texturefill it uses the 0,0 point of canvas as starting point and your graphic is starting only at 240,100. Draw the canvas with the size that you want to use the final graphics.
  3. You could maybe do something like this: let parser = function(res, next){ if(detect if it's a zipped asset) { deflat } next(); } loader.use(parser) Not 100% sure it will work as I havent encountered exactly like that scenario.
  4. Do you have mipmaps on? Changing that could have some affect. Also does your sprite align to subpixel coordinates? That can cause some blurrines. You could also try changing the minFilter of the gl texture, though I'm not sure if pixi overrides it with setting from scalemode. In webgl possible options are LINEAR, NEAREST, NEAREST_MIPMAP_NEAREST, LINEAR_MIPMAP_NEAREST, NEAREST_MIPMAP_LINEAR, LINEAR_MIPMAP_LINEAR. I'm not sure what minification algorithm browser uses with img tags, but I'm pretty sure it's something more expensive and with better quality than the ones used in realtime rendering.
  5. I made pr to examples on using shadertoy stuff with pixijs using the custom texture approach.
  6. If the heightmap is rendered completely in shader (with raymarching from the looks of example url) then it's doable in pixi without having 3d meshes. You can use one of the following methods at least (I have used these only in v4, but they should work in v5 as well): - Apply a custom filter to empty container and set its filterArea to match the wanted area (or have a blank sprite that's the correct size) and then just use a filter on it: minimap.filters = [raymarchingFilter] - Render the minimap separately onto a rendertexture with custom filter / custom shader. Then use that texture as the minimap. This way you could only render it when something updates and it acts as a regular sprite. - Use a custom shader. In v4 this requires building a plugin for renderer, in v5 I'm not 100% sure how things go as I havent had time to actually use it in any projects yet. And if you really need actual 3d-rendering (instead of doing all of it in shader) then going for threejs/babylonjs/other 3d engine in combination with pixi would be easier.
  7. I'd say that is a perfect use case for 2d canvas as with that you can scroll the whole content and draw only one line. Would make the thing pretty efficient. Something like this: //Code might contain errors. Writing without checking. //Setup ctx.imageSmoothingEnable=false; //Dont use image smoothing to allow copy to go pixel perfect. //Draw function drawPoints( lineImageData ) { //Copy old canvas with offset. ctx.globalCompositeOperation = "copy"; ctx.drawImage( ctx.canvas, -1, 0); //Reset composite ctx.globalCompositeOperation = "source-over"; ctx.putImageData(lineImageData, ctx.canvas.width-1, 0); } As you dont have need for continous animation I'd say use 2d canvas for creating the audio waterfall image and if you need something more dynamic around the image or you need to move that, then you can wrap everything around pixi and use the waterfall as just a texture.
  8. Will the dots be moving or is it just static? If it's static content then you could do that really easily with a 2d canvas using putImageData and use that canvas as a texture. Or if those need to be moving then you could do them each be a 1x1 pixel sprite. 30k sprites should be ok. Or you could render them as dots with a custom shader which would allow you to have millions of them.
  9. Yes it is possible. You can do a custom plugin for the renderer. There's one example for V4 here https://github.com/pixijs/pixi-plugin-example For V5 I'm not sure if there's examples done for that yet.
  10. Check out the displacement map example: https://pixijs.io/examples/?v=v5.0.3#/filters-basic/displacement-map-flag.js
  11. How large is the texture? If the width is large enough then some devices might have problems with shader precision. You can test if this is the case by changing from webgl rendering to canvas rendering temporarily. If it works properly on canvas then having a smaller texture or splitting the current one into smalle chunks might help.
  12. Exca

    physics library

    Using physics libraries is ok in my opinion. People just need to know that there's no pre-existing integration, so you have to basically do one of these: - Integrate physics library to pixi directly (I wouldn't recommend, that would break updates etc.) - Run the physics and rendering separately and have some kind of synchronization between the two. This is the method I have used succesfully with matterjs. - Build a plugin for physics syncing to pixi. The second method I basically had all physically interacting game objects paired with a physics body and on each renderloop the transforms for those objects would be synced with physics bodies.
  13. To clarify, you want the texture inside tiling sprite to be full height of windows? If so you can use tileScale. For example: var s = window.innerHeight / farTexture.height; far.tileScale.set(s,s); Remember to do that after the image has loaded so the texture dimensions are correct.
  14. Anchor & pivot both affect how rotation happens. You could overcome this by having container and apply pivot point to it and then put the sprite with custom anchor inside it. There might also be some way how to handle that with matrixes or without second container but my knowledge in pixi inner workings is not good enough to suggest anything.
  15. You could always have 2 containers and add them to your maincontainer. Container1 would have your containers children and then the second content array would be in container2. And then you maincontainer would consist of container1 & 2. Or if you want to render the list of children instead of containers children, then you can just swap the children-list into new one.
  16. There's also plenty solutions that build on top of cordova and make the build pipeline easier / enable use of native ui components / add more features. For example phonegap: https://phonegap.com/ Ionic: https://ionicframework.com/ Appgyver steroids: https://www.appgyver.io/steroids Framework7 https://framework7.io/ Then there's also more native solutions like react-native, flutter and nativescript. With these though using pixi is much harder as they run as native apps. You could also use a pwa builder https://github.com/pwa-builder/PWABuilder-CLI to package existing web app into a PWA (progressive web app), though with that accessing any native components is much harder. I have done one project with pure canvas 2d 4 years ago with appgyver steroids (decided to go with that mainly because it had a build pipeline) and in app purchases were pretty easy to do. I'd assume same from all cordova based stuff.
  17. I've used matter.js with pixi once. Haven't got any public source codes for that (client work, source code rights went to them), but basically what we made was a solution where each of the objects we had on screen could have body determined. If it had one, then the body was added to matter world and on every render tick the Engine was updated and before rendering the maincontainer each of the objects with body were synced so that their graphical representation was set to values of the body.
  18. I think the first few GC's are something related to loading of the pixi playground as those I can get too. After the GCs though the rendering continues without a problem. For some reason I cant upload a screenshot of the profiler. But here's a link to my profiling: https://imgur.com/wtTMvqX Do you have some plugins installed?
  19. Very mysterious indeed. Especially the second animation frame delay. Do you have lots of console.logs? Though if that was the case, then the problem would disappear when dev tools is closed (at least on windows).
  20. Yeah, but heap size looks like it changes in that frame on the memory graph. So something happens with memory. Though it should have a node with carbage collection if actual gc happens. @ZYandu Can you take a profile of the posted example when stutter occurs?
  21. Oops, should have checked links also That looks like garbage collection is ran during that frame.
  22. Can you take a profiler dump/screenshot of profiler page of the page running? That could show what is happening. Example runs without problems on win10/chrome with nvidia 1060.
  23. Browsers have limits on webgl context amounts (the actual amount depends on many factors). You can use 2d canvas if rendering deosnt require webgl. Single context can be used only in a single canvas.
  24. You could adjust the pivot or anchor points to change how object aligns. For example to align a sprite to the middle & bottom of the screen you could say: sprite.anchor.set(0.5, 1); sprite.x = renderer.screen.width/2; sprite.y = renderer.screen.height; Without seeing the exact problem it's hard to say what is the correct way to fix it.
  25. Exca

    Flip card

    The code you pasted (both what you are currently using & the example at the bottom) use css transformations. You cant use those when operating within canvas. Without knowing how tweenmax works I'd assume those values would need to be numbers, not strings. In addition pixi has no z-coordinate nor you can say preserve-3d as that's a css definition. The example has 3d perspective, this is also something that's not enabled on pixi without plugins. You could do a fake rotation with scale like this (I dont know tweenmax much so this is pretty pseudocode): Tweenmax.to(this.card2.scale, {x:0}).call( function(){ //Swap textures on the card when it's completely scaled }).to({x:1})