Jump to content

Exca

Members
  • Content Count

    388
  • Joined

  • Last visited

  • Days Won

    13

Exca last won the day on May 26

Exca had the most liked content!

2 Followers

About Exca

  • Rank
    Advanced Member

Recent Profile Visitors

6193 profile views
  1. Partial support exists nowadays according to this https://caniuse.com/?search=fullscreen Currently we are using a soft fullscreen by faking a scrollable document as themoonrat described. Basically end result is similar to real fullscreen, with the exception that it's really easy to accidentally break out from fs.
  2. Does the micro freezing happen if you close your debugger? I have a similar issue with my computer currently where if I have chrome debugger on, then there's some stuttering but if I close it then everything runs really smoothly.
  3. The pixi devtools is a plugin for chrome devtools. All of it runs outside of your code base. If I remember right the inspector just tries to find the PIXI global object and injects itself to that. So one solution would be to hide that. I have one project with ts/webpack using imports to include pixi stuff and in that the inspector doesn't come up unless it's specifically set up to do so.
  4. Are you sure they go to 0,0 and not NaN,NaN? That sounds like they might end up as not a number due to the path being of a zerolength one. You could either see if they are same or just add some really really tiny value to numbers so that no NaN happens. Though first you should make sure that NaN is the issue. Looks like the MotionPathPlugin has a getPositionOnPath -function, or then you could just log the objects value you are updating when it goes to wrong position.
  5. What I usually do in cases like this is to animate a custom property from 0...1. Lets call that property "progress". And then on each update I would calculate the path from that value: // SplineCurve in this is just a placeholder class that would calculate the curve. const spline = new SplineCurve(points); const progress = {value:0}; createjs.Tween.get(progress, {onChange:()=>{ mySprite.position.set( spline.evaluate(progress.value )); // Maybe the progress has some other stuff also like opacity changes & scaling, easy to add others here as well: mySprite.scale.set( progress.va
  6. Hi and welcome to the forums! You have multiple options on how you could do animations: - Use a tweening library (for example tweenjs, pixi-tween, tweenmax etc). - Update the positions manually with every render tick. Using a tweening library would be the easiest. This is an example how you could use one with createjs's Tweenjs library to move sprite from it's current position to 100,50 in 500 milliseconds with quadratic easing in&out: createjs.Tween.get(sprite).to({x:100, y:50}, 500, createjs.Ease.quadInOut ); For the custom timing function you would then tell the tw
  7. It looks correct. Doesn't the delta get passed or what is the issue? You are adding a function that has delta parameter to ticker with the context of the sprite so it should work.
  8. My current resize solution is to have canvas resize to certain size (determined so that no asset gets upscaled, downscaling is ok) and if the screen is larger than that size, then render at the aspect ratio of the screen with the maximum supported size and upscale the canvas with css to fill rest of the screen. Also swapping out the method how css upscale happens based on game content. For example if it's pixel art then image-rendering:crisp-edges will mitigate some of the css scaling issues. And for how the objects are positioned & scaled inside pixi stage, that is a long problem wit
  9. You could use a container inside a container? Or then a sprite with empty texture? Or any displayobject with renderable as false. Or extend the DisplayObject and create your own displayobject.
  10. Safari doesn't offer complete support to webgl2 . At least looks like that function is missing: https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/getInternalformatParameter You could try forcing webgl1 into use when on Safari (settings.PREFER_ENV). Do you have webgl2 enabled on experimental features? Or could it be that Safari finally has added support for webgl2.
  11. The delta part there tells how much your rendering differs from the target. I don't currently remember how the default pixi ticker works in relation to that (I use a custom ticker). When your computer has enough processing power to handle solid 60 fps (default target in pixi and also the time browser does requestAnimationFrame on a 60 hz monitor) then having delta or just skipping it makes no difference. But if you were running the program on a very slow computer that could render only at 30 fps then the renderloop would be called only 30 times in second compared to previous 60 times. So
  12. That row uses arrow-syntax to declare a function. You could also write: app.ticker.add( function(delta){ update(delta); }); So the delta is a variable that has been declared in the functions parameter listing. And the parameter that apps ticker passes to the given function is a number. You could also do something like this which might make it clearer: function renderLoop( delta ){ update(delta); // Do something else you want to do per frame. } app.ticker.add( renderLoop ); You just need to be a bit carefull when doing class/object based programming with the funct
  13. Delta is the numeric normalized value on how much time has passed since the last frame. Let's say your target FPS is 60 and rendering a frame takes 50ms then your delta would be 50/16.66 = 3.001. To keep everything going as fast as the intended timing then that value is used in calculations and everything updates at the same speed even if frames rendered is 3 times less. You could also just ignore delta and update with a fixed amount, then on slow computer then the animations etc. would just take longer if no delta calculations was done. There's a lot of solutions on how to handle t
  14. You could use spector js to see what is the data type that reserves the memory. https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk?hl=en
  15. You could also do it by creating a rendertexture that is 2 pixels larger (2 is considered safe in pretty much all cases with webgl). on all sides. Render the sprite to that with 2px offset. Create a new texture from that basetexture with 2px padding on sides. Use that texture as the sprites texture. Destroy the data that is no longer needed.
×
×
  • Create New...