Jump to content


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Exca

  1. Looking at the sources it looks like that affects how the viewport clamps & how it scales when screen is larger than world. Don't see any limitations on its size. Someone more familiar with pixi-viewport could give a more detailed explanation, havent used that plugin myself.
  2. Measure N samples, calculate the average from those and you get a much smoother result. So something like: const buffer = []; const sampleCount = 10; ... // Later somewhere in measuring function const sample = data from gyro buffer.push(sample); while(buffer.length > sampleCount) buffer.shift(); return { x: buffer.map( sample => sample.x).reduce( (a,b)=>a+b)/sampleCount, y: buffer.map( sample => sample.y).reduce( (a,b)=>a+b)/sampleCount, z: buffer.map( sample => sample.z).reduce( (a,b)=>a+b)/sampleCount }; I'm using just a simple map/reduce -combination
  3. What you mean by world? If you mean the maximum size the canvas can be, then those limits come from the hardware that is rendering. Usually I wouldnt go over 4k in that. If on the other hand you mean how large a single container can be (eg. how far away can a sprite be for example) then that would be the maximum floating point value that javascript can handle. So something like 1.7976931348623157e+308. Though at that point a lot of precision is lost. Or are you using some library on top of pixi that has some world defined? As there's no real world definition directly in pixi.
  4. Exca

    Motion detection?

    I've been using device motion and gyroscope both. Are you running under https when testing? The api works (in chrome at least) only when it is requested on a site that is hosted on https. Also making sure that the device has required sensors is something that should be done. Also on apple you need a separate permission to use gyroscope data.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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
  10. 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
  11. 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.
  12. 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
  13. 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.
  14. 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.
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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.
  20. Hi, I'm the one who made that example. The basic functionaly for each spinner is in their generation function and they return a function that updates that spinner. Here's a more detailed descriptin without any overhead related to other spinners. // Crete the app const app = new PIXI.Application({ backgroundColor: 0x1099bb }); document.body.appendChild(app.view); // Create a container for the stage. const container = new PIXI.Container(); app.stage.addChild(container); // Create the sprite that gets masked out. const base = PIXI.Sprite.from('examples/assets/bg_scene_rotate.jpg')
  21. Getting to know how shaders work would be a good first step. Sites like these help: https://thebookofshaders.com/ https://www.shadertoy.com/ https://webglfundamentals.org/ Then looking into some whitepapers about texture combinations or finding some example code how that is done in cpu/gpu would help in understanding how you would go on creating a webgl compatible version running on gpu. Overall the transition shown in the video is not the easiest thing to tackle. As I said above, the way you would do that in pixi is having a shader that has 2 texture inputs and then it mut
  22. You can check the network tab in browser debugger (f12) to see if the textures are visible there and with a result of 200 (http ok). Also using pixi loader is a good idea, as then the assets are already loaded when you are going to play the animation. Otherwise it might happen that images are still loading when the animation is about to play.
  23. Oops, just noticed that I forgot to write Math.max and Math.min. I edited the above response to correct. But basically this is how it works: Let's say you have a value of 10 and your allowed range is 2-5. First you take the maximum of range start (2) and your value (10). This returns 10 and if you had for example -1 as value then the value would be 2. So basically it sets the return value to range start or the value itself. Then do the same to end of range with minimum to get a value that's less than 5 and you end up with a value that's in wanted range. You could also imple
  24. In javascript the scope of the function depends on how it's executed. For example if you have a class and you call it by myClass.foobar() then that is executed in the scope of the class. But if would do something like var func = myClass.foobar; func(); it would execute outside of the classes scope. Basically same thing happens when the event handler is run as you pass the info about the function only and not the scope. Old way of doing this was that you would do something like this: var that = this; function handler( ){ that.foobar(); } window.addEventListener("something", hand
  25. If you can't edit the source material to be POT you could render the original texture into a rendertexture that is POT and then create a texture that uses that POT rendertexture as basetexture and you would have an image that is POT, even if the sprite isn't and mipmapping would be possible.
  • Create New...