Jump to content


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Exca

  1. 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(ch
  2. 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.
  3. 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.
  4. 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); });
  5. 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 yoursel
  6. 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 (man
  7. It depends a lot on what kind of rendering you have. Some cases ie 11 can handle better when doing software rendering.
  8. 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.
  9. Create a document listener outside of the interaction manager to handle the preventdefault. It doesn't need to be part of the interactionmanager.
  10. 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.
  11. 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.
  12. 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);
  13. 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.
  14. 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.
  15. 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 t
  16. 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
  17. Hi, I'm the one who made that example. Here's a short description on how it works. The text uses only one reel as an example as all the others function in the same way: Let's say we have a position where the reel is (reel.position). This position is increased on each frame. Then each sprite is positioned based on that position. When the symbol is detected to be back to start, a new symboltexture is randomized to it.
  18. You could also create a custom shader that takes a cubemap or equirectangular image and do the math required inside the shader and then render it as a custom mesh or as a filter depending on the use case.
  19. You would have to be able to render the web page into a canvas and then render that canvas to screen instead of the web page. That would block much of user interaction though and would be really hard to do in realtime if website has scrolling or user interaction. Also if there's stuff loaded from other domains / without permissions then you would run into crossdomain errors. You could maybe use svg filters to achieve the effect, dont know how though.
  20. I have been using font.js to handle font loading https://github.com/Pomax/Font.js?files=1 Though the loading method is not exactly perfect, it usually works in most cases.
  21. I'd assume it has something to do with the canvas being larger than what the drawing target is. When you start the texturefill it uses the 0,0 point of canvas as starting point and your graphic is starting only at 240,100. Draw the canvas with the size that you want to use the final graphics.
  22. You could maybe do something like this: let parser = function(res, next){ if(detect if it's a zipped asset) { deflat } next(); } loader.use(parser) Not 100% sure it will work as I havent encountered exactly like that scenario.
  23. Do you have mipmaps on? Changing that could have some affect. Also does your sprite align to subpixel coordinates? That can cause some blurrines. You could also try changing the minFilter of the gl texture, though I'm not sure if pixi overrides it with setting from scalemode. In webgl possible options are LINEAR, NEAREST, NEAREST_MIPMAP_NEAREST, LINEAR_MIPMAP_NEAREST, NEAREST_MIPMAP_LINEAR, LINEAR_MIPMAP_LINEAR. I'm not sure what minification algorithm browser uses with img tags, but I'm pretty sure it's something more expensive and with better quality than the ones used in realtime
  24. I made pr to examples on using shadertoy stuff with pixijs using the custom texture approach.
  25. If the heightmap is rendered completely in shader (with raymarching from the looks of example url) then it's doable in pixi without having 3d meshes. You can use one of the following methods at least (I have used these only in v4, but they should work in v5 as well): - Apply a custom filter to empty container and set its filterArea to match the wanted area (or have a blank sprite that's the correct size) and then just use a filter on it: minimap.filters = [raymarchingFilter] - Render the minimap separately onto a rendertexture with custom filter / custom shader. Then use that textu
  • Create New...