• Content Count

  • Joined

  • Last visited

  • Days Won


Exca last won the day on August 13

Exca had the most liked content!

About Exca

  • Rank
    Advanced Member

Recent Profile Visitors

2778 profile views
  1. 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); }
  2. 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.
  3. 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?
  4. 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).
  5. 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?
  6. Oops, should have checked links also That looks like garbage collection is ran during that frame.
  7. 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.
  8. 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.
  9. 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.
  10. 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})
  11. 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.
  12. 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.
  13. 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/
  14. You could use a rendertexture as a displacement map and render whatever you want to that. Might make things a bit slower though.
  15. 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.