• Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Exca

  1. The mp3 looping problem is caused by the format. It can be mitigated by fiddling around the original sound source and compression: https://www.compuphase.com/mp3/mp3loops.htm I'd suggest using multiple formats and drop them based on browser support. Most of the audio libraries have alternateExtension -configuration (or something similar) to handle this. I usually go with ogg as first choice and then mp3 for those that dont support ogg.
  2. I still have cases where the max is 2048x2048. Though we support very old hardware and even ie11.
  3. Anything below or equal to MAX * MAX is quaranteed to work (almost always, unless something is wrong with the gpu/driver). Going over either of those (even if decreasing another) might work or might not work. From the khronos specifciation: "The value gives a rough estimate of the largest texture that the GL can handle. The value must be at least 64. "
  4. For the MAX_TEXTURE_SIZE it's how many pixels the image can be in width/height.
  5. I'm sorry but I dont know what you mean with gpu & pixijs calculations? There shouldnt be any other than loading the assets. Or do you mean there happens some texture upload which causes a lag spike? You could avoid that by having the textures uploaded before rendering or waiting for one frame to be rendered and on the next frame swap the spinner with scene. Though in that case you couldnt use pixi spinner as the upload would halt it's rendering also.
  6. 1. In html: <div id="spinner">...spinner stuff here or in css...</div> <canvas id="canvas" style="visibility:hidden"></canvas> In code: preloadComplete = () => { document.getElementById("spinner").remove(); document.getElementById("canvas").style.visibility = "visible"; } 2. var spinner = new Spinner(); //Spinner being your spinner class extending container or something else that can be added to maincontainer app.stage.addChild(spinner); //Animate update app.ticker.add((delta)=>{ if(spinner.visible) spinner.update(delta); if(mainGame !=null) mainGame.renderLoop(); }); //This is your main game placeholder, set value to it whenever it's built after load. let mainGame = null; //Do your loading logic, build your game and call onLoadComplete onLoadComplete = () => { spinner.visible = false; app.stage.removeChild(spinner); app.stage.addChild(mainGame); } Those would work. Written thom without checking any typos or compilation, so there might be errors.
  7. const canvas = document.createElement("canvas"); //draw what you want to canvas.. //Build the basetexture, texture and sprite using the canvas const canvasTexture = new PIXI.Texture( new PIXI.BaseTexture(canvas)); const sprite = new PIXI.Sprite(canvasTexture); //Add the sprite where you want. If the canvas changes, you need to call update to basetexture. (Or it might detect it automatically, cant remember right now). And if you want to make it a bit faster you could use offScreenCanvas -element instead of canvas. Though that is not yet widely supported. https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
  8. You can also use an external 2d canvas for a bit more of drawing api. You could even use p5js to draw that, then use that canvas as a source for basetexture.
  9. You could do that atleast in two different common ways: 1. Use good old classic css spinner and keep your game canvas hidden and set it visible & start rendering after load is done. 2. Have two containers, one containing a spinner and a second containing your gamescene. Render the spinner container when loading and after load is complete start rendering you scene container. If on the other hand question is about how to do a spinner animation with pixi, then let me know and I'll help with that.
  10. If I understood correctly you want to animate habbo to coord1 in a loop and then continue the loop after animation is done? That is not possible with await as tween does not return a promise. You would have to have your tween in a separate function and have it return a promise and then have it resolve the promise in completion. That would make your code pretty complex for no good reason. I assume that you want to animate the habbo-character from coord1 to coordN right? You could do that with tweenjs chaining: const moveChar = (char,points) =>{ const tween = Tween.get(char); let coord = null; for( let i = 0; i < points.length; i++) { coord = points[i]; tween.to( {x:coord.x, y: coord.y}, 500) tween.wait( 50 ); //Wait 50 milliseconds before moving to next to make the movement nicer? } //Add callback to chain ending. tween.call( () => { console.log("FINISH: " + coord); }); } moveChar( this.habbo, [ {x:0, y:0}, {x:100, y:0}, {x:100, y:100}, {x:200, y:100} ]); If I misunderstood the problem please describe it a bit more. As usually having synchronous code requirement inside a for loop is an issue that should not happen when doing rendering related stuff.
  11. There was a similar topic few years ago, the example I made in that should work with current pixi. Might make an example of this next week. In the example below a mask was used due to animation behind the radial, but same could be applied to just using graphics and drawing two lines + arc.
  12. While waiting for solution you could skip the warning by casting the resources to dynamic type (loader.resources[mykey] as any).onStart.add. You would lose autocompletion and other type security in that case though for those lines.
  13. Exca

    Adjusting Filters

    In the example you are removing and adding filters on each frame. You should first setup the filters: mySprite.filters = [baseFilter, colorMatrix]; and then update their uniforms when you want to update how they react. I also dont know what is baseFilter? This example should work: var colorMatrix =new PIXI.filters.ColorMatrixFilter(); mySprite.filters = [ colorMatrix]; app.ticker.add( delta => { colorMatrix.contrast(1+0.1*delta); });
  14. Easiest way for this would be to use some tweening library. For example tween.js (https://createjs.com/tweenjs), gsap (https://greensock.com/3) or some other from multiple possibilites. The examples below are done with tween.js. You could have in your click-handler code like: function moveTo(character, newX,newY) { var time = 500; createjs.Tween.get(character.position).to({x:newX, y:newY}, time); } and it would move the character with given amount of time to given position. If you do not wish to use tweening libraries, then you can also calculate the animation yourself and update the position in the mainloop. Below is one way how to do that (pseudocode, might have errors) const app = new PIXI.Application(...); const container = new PIXI.Container(); const characterSprite = PIXI.Sprite.from(...); const bg = PIXI.Sprite.from(...); container.addChild(bg); container.addChild(characterSprite); let targetPoint = characterSprite.position; let moveStart = characterSprite.position; let moveTime = 0; let timeCount = 0; bg.interactive = true; bg.addListener("click", function(e){ var to = /*Determine the coordinates where to move*/ targetPoint = to; moveStart = characterSprite.position; //Calculate the distance between points to determine how long should move last const dx = to.x - moveStart.x; const dy = to.y - moveStart.y; moveTime = Math.sqrt(dx*dx + dy*dy); }); app.ticker.add( function(delta){ if(moveTime > 0) { timeCount+=delta; if(timeCount >= moveTime) { //End has been reached. moveTime = 0; characterSprite.position = targetPoint; } else { const dx = targetPoint.x - moveStart.x; const dy = targetPoint.y - moveStart.y; characterSprite.x = moveStart.x + dx * timeCount/moveTime; characterSprite.y = moveStart.y + dy * timeCount/moveTime; } } }); Basically what happens there is you move the character between it's current point and target point by linearly interpolating the position based on time.
  15. There's a few things that could help: - Changing the scaling mode to nearest from linear (good for pixel styled games). In this method you should scale in multipliers of 2 to keep pixels aligned. Looks really bad in nonpixel graphics style. - Using mipmap. Texture needs to be power of two and baseTexture.mipmap set to true. This might look better or worse. - Make sure sprite is on exact pixel coordinates. - Render the game in 1:1 pixel ratio and scale the canvas down instead of objects in renderer. - Create multiple sets of assets and select the one closest to wanted resolution (many spritesheet tools have automation for this). Propably some other things that could help that I cant remember just now.
  16. It depends a lot on what kind of rendering you have. Some cases ie 11 can handle better when doing software rendering.
  17. Masks use a stencil to mask things out, so basic mask wont work with that solution as the whole shader area is a single texture. You could do the masking in the shader itself by rendering the area below to a rendertexture and passing it to shader as uniform and then using the color from that texture when masking is ok. Or you could create a filter for that (or one might exist already?) that takes bitmap as input and then calculates what areas should show from default sampler.
  18. Create a document listener outside of the interaction manager to handle the preventdefault. It doesn't need to be part of the interactionmanager.
  19. You can get the touchmove from document and call preventdefault on that to block most of ios problems. Only thing I havent found a cure for is the swipe from left side of the screen to go to previous page. Other than overriding history with current page. Remember to set your touchlistener with passive:false, like this: document.addEventListener("touchmove", {passive:false}). As apple changed their devices to use passive true as a default option for smoother scrolling.
  20. That is possible also. Basically just have something in renderloop like this: sprite.alpha += some small number; if(sprite.alpha > 1) sprite.alpha = 1; You could also take the start time and calculate end time from that. Then just calculate how much time has passed and calculate: var timepassed = currentTime-startTime; sprite.alpha = startAlpha + (endAlpha-startAlpha)* Math.min(1,timepassed/totalTime); Which is basically what tweens do, they just give a much nicer api for handling that.
  21. You could use a tweening library like tweenJs or tweenlite. Then you could say something like this (example with TweenJS): Tween.get(sprite).to({alpha:0}, 500, Ease.QuadInOut).to({alpha:1}, 500, Ease.QuadOut);
  22. Ah, it was just a version using filter of the same thingie. Basically for situations where you would want to do stuff to your scene instead of a custom shader. Should maybe change the shader to reflect that more. I'll check it tomorrow.
  23. Made a pr of an example that uses multiple shaders and combines output from all of those into one. Kept it really simple, for production use you would most likely want to use a texturepool with just enough of textures to keep everything memory efficient.
  24. You can either do multiple rendertextures or you can create two and recycle them. (or 3 if you need 2 input + 1 output) Also creating new uniforms is just as simple as writing them. The iChannel0-n is just how shadertoy gives access to them. So writing something like `uniforma sampler2D noise;` for example would be perfectly ok and then you could just pass an texture to that uniform on js side. I had two examples made about shadertoy & pixi (one with mesh and other with filter). Looks like that's still in pr. Might update it to include multiple buffering during this week if I manage to find extra time.
  25. Splitting the image into smaller textures and displaying those side by side would be one option. The problem you are experiencing is that the maximum dimension a gpu can address is reached. For modern pc gpus this is something in the range of 16kx16k, but many mobiles still have 4k and when going to older devices even 2k is a possible limit. With splitting you have basically these methods (at least in my knowledge): - Add client side logic that splits the image on cpu to smaller chunks. - Store the images in split versions. - Create a serverside solution that splits an image into pieces and load whatever resolution matches the gl.MAX_TEXTURE_SIZE. You could also maybe try canvas rendering, but I'm not sure how that works with very large textures and it would be slower than webgl.