Jump to content


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Exca

  1. 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.
  2. 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.
  3. 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.
  4. 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
  5. 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
  6. 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.
  7. 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
  8. 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.
  9. 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.
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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.
  15. 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')
  16. 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
  17. 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.
  18. 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
  19. 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
  20. 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.
  21. Can you check from your browser debuggers network tab that the frames are loaded when the playback fails?
  22. The scope of the event handler function is incorrect. You can either bind the function to be in the scope of the class or use an arrow function to get the same effect. So doing the callback like: private onButtonClick = () :void => { console.log("clickt on button"); let btnTest = this.createMenuButton(); // <<-- Error: this.createMenuButton is not a function console.log(this.uiContainer); // <<-- Error: Undefined this.uiContainer //Launch a event to show a sprite... } Would fix it.
  23. When you handle the movement just add clamping to values that don't allow it to go any further. So in your case if I assume that at 0,0 the container is at topleft of canvas then you could do something like this: function clamp( min, max, value ) { return Math.min(max, Math.max(min, value)); } const maxBorder = 30 container.x = clamp( maxBorder, container.width - canvas.width - maxBorder ); container.y = clamp( maxBorder, container.height - canvas.height - maxBorder); Might be an error in the logic somewhere, dont have a proper testbed currently. In that code you would
  24. Calculate the angle between mouse and the object and then set that to your objects rotation.: const mouse = renderer.plugin.interaction.mouse; const dx = mouse.x - object.x; const dy = mouse.y - object.y; object.rotation = Math.atan2( dy, dx); Written from memory without testing so not 100% sure everything is correct. But that's the basic idea. Also depending on what your objects "forward" direction is, you might need to add an offset to atan2 result.
  25. Progressive web apps (PWA) are one way to create apps with web technologies without using wrapping. If on the other hand wrapping is needed, then cordova based ones are still the most common ones.
  • Create New...