• Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Exca

  1. 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.
  2. 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.
  3. 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.
  4. Check out the displacement map example: https://pixijs.io/examples/?v=v5.0.3#/filters-basic/displacement-map-flag.js
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. You should apply somekind of force in the button down handler and then update the character position in your ticker. The vy & vx are look like they would be your forces? Then the loop could be something like: character.y += character.vy; character.vy += gravity; if( character hits ground ) { character.y = groundy; character.vy = 0; } Or if you have something that has no gravity and you only wish to move the character from a to b on button press then I would suggest using somekind of tweening library. I use TweenJS myself. With that you could do something like this: up.press = function(){ Tween.get(character).to({y:0}, 1000); } up.release = function(){ Tween.get(character).to({y:255}, 1000); }
  12. 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.
  13. 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?
  14. 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).
  15. 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?
  16. Oops, should have checked links also That looks like garbage collection is ran during that frame.
  17. 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.
  18. 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.
  19. 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.
  20. 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})
  21. What version of pixi are you using and do you require webgl1 support? Webg2l has support for much larger texture formats. RGBA32UI or RGBA32F would be much more precise. Webgl1 only supports RGB, RGBA and RGBA4, might have others but those I found out with a fast check. You could also do your own shader that uses 3 images (or 4 if alpha is needed also) and combines the RGBA -values from those to get 4 times more precision.
  22. Save the images in a spritesheet and use that, that way they can be drawn in a batch. Using a tool like texturepacker or spritesheet.js makes creating sheets easy. Building the view itself can be done either with somekind of tool (I'm not familiar with any, so cant recommend one) or you could just code the views needed. Full explanation on how to do that would take pretty long time and I'd suggest starting with the examples / tutorials. Easiest way to make vertical scrolling numbers is to have N text elements and then put them inside a container and apply a mask to that. Good example of this method is the slots example in pixi examples. It has images instead of text and 3 visible icons instead of one, but the way it works is identical to this situation.
  23. Spector.js ( https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk ) shows very much info about rendering. Also webgl inspector works pretty good, even though it hasn''t been updated in a long while: http://benvanik.github.io/WebGL-Inspector/
  24. You could use a rendertexture as a displacement map and render whatever you want to that. Might make things a bit slower though.
  25. Exca

    Creating Input element

    You can't add dom elements to pixi stage. You could add it on top of the canvas and use it as a regular input. Do you have a link for the example that has dom mixed with pixi stage? It could be that there's some library that allows thatkind of methods.