All Activity

This stream auto-updates     

  1. Past hour
  2. Today
  3. still no fix found 😢 ill switch to 2D
  4. Thanks! Yes, that's a good start. I recommend to go through webglfundamentals or webgl2fundamentals anyway. We want to make pixi-version of those tutorials, because pixi has all that low-level and its easier to use than plain webgl but we dont have enough demos Regarding filters - they are mostly for processing rectangles, and the real usage usually works with multiple steps. Usually its blur-based: Glow, Bevel, DropShadow. PixiJS so far is the best thing for it and two projects use them for fullest: https://beatflyer.com/ and phase.com Unfortunately I dont have available demos for multi-pass filters, usually people try to make their versions of blur/glow after looking through pixi-filters repo. Look in Dropshadow for that.
  5. Matty77

    Zapper.io

    It looks pretty. I found the turning circle a bit wide for my liking but I've not played others in the genre so I don't know if that is normal. Pretty colours though.
  6. Thanks @Alexeyy, 🙂 Not sure about an infinite minesweeper: If was designed the same as the one shown then you could do it the same way as is programmed in this tutorial: Just keep the active pieces as a linked-list. All 'inactive/dead' pieces would be disabled and never polled/used. You honestly wouldn't even need to use a canvas if the game is so static.. but you could use a huge canvas, but you'd have to be careful with your drawing: There aren't animations,(typically) so again, for inactive/dead pieces just draw it to the canvas once, and don't re-draw it. E.g. most game engines typically have the canvas refreshing every 30-60 fps.. but for a turn-based non-animation game like Minesweeper, doesn't need it. Let me know how that goes!
  7. 🤪 That was fun.
  8. var platformCollider = this.physics.add.collider(object,object); this.physics.world.removeCollider(platformCollider);
  9. Does Panda2 engine support VR game development?
  10. Yesterday
  11. Bouh

    Compute right uvs ?

    Thank you so much, you know i've spend 5 days on this uvs problem. Now i will spend some hours to understand your fix and comments I've started with displacement filter, start read tutorials about shaders and glsl, spend 4 hours in the chrome debugger for try to understand how works uniforms and how are compute these damn uvs. And i've open all filters for found another one working with a external file, and yes i've found SpriteMaskFilter and read into it. And today i've dig in PIXI.Texture. But Matrix are still blurry for me. It's was a good reason for me to learn a bit shaders, this is a wonderful world. Finally all filters use webgl, no ? I prefer start at the root. i love see how thing works in the deep. Thank you for your kindness, i'll read all your stuff !
  12. You can post non-working demo here if you make one, I'll help
  13. Btw, Pixi-picture is used in RPGMaker-MV to emulate Overlay blendmode. Its a good example of shader that converts pixels to non-premultipleid-alpha , computes and converts back: https://github.com/pixijs/pixi-picture/blob/master/src/OverlayShader.ts Yes, most of blendModes are actually NPM, only simple ones are PM-friendly. Webapps work with PM mostly, because 2d images have to be blended good
  14. HI! You are lucky, usually people wait for week or two before such case is resolved. Thank my good mood. Usuaally when people post abstract filter cases, I ask them if they actually need filters and not some other things In your case, for pixi-v4 there's special plugin : https://github.com/pixijs/pixi-picture Basically it copies part of current framebuffer and gives it as a second input for a filter. Its better if that "blendMode" is inside another filter, otherwise it will use readPixels and be very slow CTRL+C its code to your project or just connect it and make new blendmode that you want. What can I say about your try: I see you tried many things You almost did it: you actually made desync in clipping and texture. 1. vec2 cTexture_scCoord = vTexture_scCoord + vec2(-0.1); < -- here, fixed version is just fine 2. pixi uses premultiplied alpha. All channels are premultiplied, color should be complete 0.0 if its transparent. in all channels. 3. blendMode was normal for non-premultiplied alpha, i fixed it for premultiplied. 4. mapCoord is fine, its used only for TEXTURE REIGONS, in case you place texture from an atlas. See SpriteMaskFilter sources to understand it. In fact, all your example should be based on SpriteMaskFilter Here, I removed unnecessary things and added a few comments: https://codepen.io/ivanpopelyshev/pen/RwPzaMM?editors=0010 Also, remove that "uv-0.1" part , you should do it with sprite translation. All rotations/ translation and stuff should be done with sprite! The whole idea is that you manipulate object in stage tree, and then filter calculates its relative matrix, so you dont have to do it in shader. Updating uniforms based on transforms is cheap. In case you move it to v5 ( I see you tried to use outputFrame, well, its v5 uniform ) 1. all uniforms should be specified in constructor or before filter is uesd, not in "apply". 2. "texture.transform" has to be swapped to "texture.uvMatrix" In case you actually use texture from atlas: 1. Adjust clipping, it should use "clamp(texCoord, uClampMargin.xy, uClampMargin.zw)" , where uClampMargin taken from texture matrix. SpriteMaskFilter also does that.
  15. Some more changes: Added locomotive and carriage graphics and some graphic effects (explosions + steam) Also added some sound effects.
  16. Oh...an interface point: When I first was on the character select screen I tapped the characters faces and nothing happened, I had to touch the button underneath. Perhaps detecting mouse input on the face is also important, it wasnt clear to me that the buttons were the only clickable part. Also repeating the word 'select' across the display, once per character, probably could be made to be more visually appealing. Perhaps no word at all?
  17. Bouh

    Compute right uvs ?

    Hi ! I try to create a new shader, for merge two textures in one. For this i use a main texture used as sprite, my filter is on this sprite. And the second texture is pass by uniforms. This works, i can see the second texture in my shader, but the ratio of this second texture is wrong. I guess it's related to UVs, so i've compute UVs with a matrix, but this matrix (otherMatrix in my pixi playground ) is set with default values. I guess the matrix should be related to my second texture but i can't find how do this. I don't know how compute correct uvs. You can try the shader here in my pixi playground. Maybe i've said dumbs things, let me know ^^
  18. I believe "antialias:true" in app options will hit you hard on retina screens Maybe canvas2d will be best option, however if you make it with PIxiJS you will be able to switch between canvas and webgl if something goes wrong. OK then, number of drawcalls should be small, you should look at it when the whole scene is done. It probably will be below 50. good for mobiles - so you wont have to bake different graphices together.
  19. Ok thank you for the response. So I have a general question about performance and practicality -> I want to create geometric motion graphics similar to (see embedded video). I could do this with svg and gsap alone - but I thought I would get a performance boost for rendering the scene in PixiJS. I thought specifically that transitioning background color would be 'expensive' if done in the DOM directly instead of a canvas with webGL2. I do not plan to have 100 000s of elements. Would this type of animation be best done in with PixiJS + tweening or just svg + tweening.
  20. thank you Ivan, i'll try to understand and research the process you describe. If i make it work i'll be glad to submit it as an example if you think it's something useful for others.
  21. When stage scale is > 2 i want nearest. scale>2 as in enlarge? That's MAGFILTER right? If you know exact webgl constants you want to use , you can make your own texture resource and override "style" method in it, it'll be called instead of TextureSystem one. Here's basic custom texture resource: https://pixijs.io/examples/#/textures/gradient-resource.js . You should base your resource on ImageResource, i guess, and pass there image from original texture (texture.baseTexture.resource.source) . Or you can override "style" ,method in particular resource. Unfortunately I dont ghave time to explain that but I see that you already have enough knowledge and can do that if you only read TextureSystem + resources code. https://github.com/pixijs/pixi.js/tree/dev/packages/core/src/textures The idea is that we allow people to override texture management because PixiJS team is small and no way we can predict all stuff you guys want. But we do not have enough examples for it yet, and hope that community makes them.
  22. end3r

    Gamedev.js Jam 2020

    There are now prizes to win: 5 PlayCanvas accounts and 3 Making Money with HTML5 ebooks, and more stuff is going to be added soon.
  23. 1. I guess pivotX is shortcut for gsap 2. probably because rectangle is rendered with batch renderer and circle is not, because number of vertices too high. Modifying shape props is tricky. try "graphics.geometry.invalidate()" every frame for circle animation 3. Unfortunately, the question cannot be answered because "performance" cannot be defined there. Its about balancing different types of webgl calls, in different cases. We can talk about performance if you learn the webglfundamentals first. My advice: do not do premature optimizations. Yes, if shapes move the same way, you can put them in same Graphics to avoid extra uploading of buffers and extra drawcalls e.t.c. but i cannot really fit everything in this answer. Again, it also depends if shapes are batchable or not. Batches affect GPU performance in a good way, CPU in bad, I cannot just express it easily. Have you ever looked at webgl apps through SpectorJS extension?
  24. Hello, I have this code pen here. Just testing some functionality with GSAP, PixiJS, and PixiPlugin. I have three questions. 1. What is the difference between pivot.x, and pivotX here? I have found that I must use pivot.x with the rectangle and pivotX with the circle to center these graphics. 2. Why does the circle not change color like the rectangle? Is this a bug? 3. Is it more performant to create one PIXI.Graphics() object? I am hoping to create a series of geometric motiongraphic animations with shapes moving independently. What is the best approach here? https://codepen.io/jswtch/pen/LYVoaxJ
  25. > So instead of using PIXI.settings.SCALE_MODE, which doesn't support bi-cubic > what do you mean? I see it only supports LINEAR and NEAREST, not bi-cubic (at least without mipmaps). As for pow2, yes the textures and sprites i use can be any image, so that's not an option, but i think i'll always have webGL2, as i'm building for electron. I tried MIPMAP_MODES.ON and when scaling down the result is indeed like a bi-cubic interpolation! smoooth! But still the main issue is that i need to switch between interpolations! When stage scale is > 2 i want nearest. I'll read the other post, and i hope i'll understand it thanks for your help and the fast response!
  26. This is good feedback actually. WIll invert colors in the hero selection interface. Thanks
  27. I pressed the only green thing. Buy, I guess. That gave me a login. Didn't understand the other ones would be free...
  1. Load more activity