Jinz

Members
  • Content count

    120
  • Joined

  • Last visited

  1. 1. The docs say to pass canvas element not div element. If you want to do it the second way I think you need to create the canvas element yourself and pass that as the view parameter. 2. Are you calling g_Pixi.renderer.resize(width, height) when the window resizes? http://pixijs.download/release/docs/PIXI.WebGLRenderer.html#resize
  2. That's interesting. Well there are some colors where everything seems to stay the same but I was hoping that the small dark blue lines on black could work with different coding somehow.. But I guess I'll try out more background and line colors and line thicknesses to try to find another combination I like, but one that looks the same color even when the movement changes directions. Thanks for checking it out, if there's prob no way to fix it I can move on to other backgrounds
  3. So I upgraded to the new Pixi version 4.5.3, but no luck. It's been a few weeks now and still no closer to making and moving a simple grid background. The whole demo is only 27 lines of code, mostly boilerplate, so there's not a lot of hiding places for issues. Can anyone please help with this? Note: If I increase the line thickness from 4 to 10 then the issue goes away and all the lines are the same shape and color like they should be. Code Pen: https://codepen.io/Tazy/full/rwexzN/
  4. 1. The flow is more like this chart, with a time gap between when the client and server calculate the new position. To make it like your flow chart you would need to make the client wait 25 ms to apply the input if it takes 25 ms for the server to receive and apply it. If you want to keep the client-side predicting accurate then you need to predict and account for this delay. 2. Sometimes you can make it feel more responsive by triggering non-movement animation(s) right away, like rotating the avatar or part of it (head or eyes for instance) to face the new direction. Another thing you can try is to have the client change velocity more slowly - that way you can respond right away but the position won't get as out of sync.. 3. Are you maybe doing this sequence client-side: set to new position right away, LERP back towards the old position for awhile, LERP to new position?
  5. I think like this: resources[key].texture.baseTexture.key = key; resources[key].texture.baseTexture.update = function() { console.log(this.key + " uploaded to GPU"); } EDIT: Actually I think it's the update event that you want, I think the loaded event is for when a source image finishes downloading for instance, and the update event I think is for when the base texture is uploaded to the GPU. I changed the above code from loaded to update. I'm not sure, but there's only 4 events for the base texture, so prob one of those two: http://pixijs.download/release/docs/PIXI.BaseTexture.html#event:update
  6. I've always called it without the location param. That's how it was shown to me. It uploads the base texture to the GPU. For my use case, and others that I've seen here on forum, it doesn't work to pass the texture, only works when pass the base texture. But maybe there are use cases for passing the texture, IDK.
  7. Here's a couple more things to try: 1. Try passing the base texture instead of the texture: this.app.renderer.plugins.prepare.add(resources[key].texture.baseTexture); 2. Try using texture manager instead of prepare: app.renderer.textureManager.updateTexture(resources[key].texture.baseTexture);
  8. You could for example make a Container for each scene and add all the scene's sprites to its container, then to change scenes add the new scene's container to stage and remove the old scene's from stage. Then for scene transitions you could animate the containers' alpha or position or something before you remove the old scene's container, for example.
  9. Neat I didn't know you could do that. I spotted a problem in your code. You're using Pixi's loader to load a file named 'shader.frag', but your shader code isn't in a separate file named 'shader.frag', it's in your HTML file. I think you need to either 1) make the file 'shader.frag' and put your shader code there or 2) leave the shader code where it is, but get the script element and pass it's innerHtml as the shader source parameter.
  10. I don't think you can apply a Pixi filter to an HTML element like that. Is there an example/tutorial that does that? You could also use PIXI.Text and respond to its mouse events to manually create the behavior of anchor button. And apply/remove filter to the text on mouse over/out.
  11. I tried making a square with graphics (and generateCanvasTexture) and used it for tiling sprite background, but the distortion is the same. I made a new CodePen here. It moves the tiling sprite right at 3 pixels per frame. I used a different color for the lines (0x000080). It's moving horizontaly, so the vertical lines are distorted. They're darker and have more of a pipe-like rounded shape, while the horizontal lines are lighter and more rectangular / straight-edged. Are there any other ideas on how to fix the distortion or is it a bug maybe?
  12. If the problem is cumulative scaling, what about storing scale factor and scaling by the reciprocal of the old scale factor before you scale by the new factor? That's the only thing I can think of but maybe the way they scale is too different
  13. Have you tried using "Body.scale(body, scaleFactorX, scaleFactorY)" to scale the Matter.js bodies by same factor?
  14. I'm just passing window.innerWidth and window.innerHeight to app.renderer.resize I also tried using Math.ceil on them and w/out doing that, but the distortion's the same. And I tried "roundPixels: true" but that didn't help either.. Here's the CSS that I'm using for the game I'm working on (with "autoResize: true" and "resolution: window.devicePixelRatio" passed to PIXI.Application), but for the CodePen demo I didn't setup any CSS. Maybe there's something here I'm missing? body { padding: 0; margin: 0; overflow: hidden; background-color: #000000; } canvas { padding: 0; margin: 0; position: fixed; display: block; touch-action: none; }
  15. Thanks for suggestion - I added autoResize option for the demo but the vertical lines are still darker/bluer than the horizontal ones. Anything else to try? EDIT: I also just tried commenting out the line that sets the resolution but that didn't help either. The problem happens on my iPhone with 2X retina display and on my MacBook with 1X display (and 1X zoom). So I guess it's something else besides resolution issues, but IDK what it could be...