Jump to content


  • Content Count

  • Joined

  • Last visited

  • Days Won


Reputation Activity

  1. Like
    ivan.popelyshev reacted to Jammy in Saving/loading sprite states? (positions/colours etc.)   
    I have one tip for this, toJSON. You might find something better but this is how I do it.
    Extend what you want like this for example.
    Now whenever you serialize these objects you will just get x,y back. Extend where you need and add to toJSON() where you need.
    StageThing extends PIXI.Sprite { toJSON() { return { x: this.x, y: this.y } } } It will mean you have to ensure when you reload the object, just re-assign the properties
    StageThing extends PIXI.Sprite { constructor(saveData) { this.x = saveData.x; this.y = saveData.y; } } onLoad(itemData){ new StageThing(itemData) } Jammy.
  2. Like
    ivan.popelyshev reacted to Jammy in My latest PixiJS game devlog   
    Helllloooooo gamers.
    I have another little write-up to share today about the different systems and libraries that I use.
    I hope if you follow my project you find this interesting to glance over and maybe take away some ideas!

  3. Like
    ivan.popelyshev reacted to GamerTS in Extending Objects [Typescript]   
    Outstanding! Thank you!
  4. Like
    ivan.popelyshev reacted to SilverKnightDragon in Render Texture mirrors Filters on Y axis   
    Thank you that did the trick! I was totally unaware of any internal Y flipping on textures withing the main frame buffer.
    It worked everywhere else so that got me. I even visited to that link several times and still didn't get it.

    I knew V5 was different when it came to filters, I think you can even use GL structs in in that version. which would definitely help when adding say 24 lights to a scene
    (v4 doesn't seem to support them, i had to use banks of arrays to make it work, the type parameter in the uniform data structures seems to pick them up but can't do anything with them.).

    For anyone else that has this issue or possibly something similar.
    Be sure to have this in the shader when using pixel (or frag) coordinates.
    uniform vec4 filterArea; PIXI JS v4 will pass the values automatically, adding uniforms isn't necessary.

    then using my shader code as example replace the gl_FragCoord code with the corresponding one that's used for PIXIJS v4 filters, in this case Line 6 (or 7 after adding the uniform):
    float distance=length(lposition-(vTextureCoord*filterArea.xy));
    hopefully that helps someone else too.

  5. Thanks
    ivan.popelyshev got a reaction from SilverKnightDragon in Render Texture mirrors Filters on Y axis   
    Hi! You use gl_FragCoord in shader, and its really not reliable in pixi, because pixi renderTextures have flipped Y compared to main framebuffer. This was done to avoid flipping Y of all texture on upload, which is usual way of opengl/webgl.
    To avoid that thing, you have to actually use vTextureCoord. According to https://github.com/pixijs/pixijs/wiki/v4-Creating-Filters   , you can get pixel coord from "vTextureCoord * filterArea.xy"  m you need "uniform vec4 filterArea" for that.
    Btw, for v5/v6 its different, in case you'll move to next version of rpgmaker
  6. Like
    ivan.popelyshev reacted to SilverKnightDragon in Render Texture mirrors Filters on Y axis   
    Hi, I am making a Lighting filter for PIXIJS 4 in RPGmaker MV but I've encountered some strange behavior regarding Render Textures. for some strange reason, rendering the scene to a render textures causes the position of the lights to mirror on the Y axis and I have no idea why.
    here are some photo's of what i mean.
    Below is a Screenshot of the scene in real time.

    and this is the resulting render Texture.

    As you can see, the blue light close to thew center barely moved, while the yellow one moved from the bottom of the screen to the top. neither lights changed in X-axis values.  the lights themselves do not move, this only appears in the render texture.

    the render texture is generated using this code on one of the RPGmaker Events script call, however the effect seems to be affecting all PIXI render textures, including those used by the default engine.
    here is the code the generate the render texture an make a sprite. the sprite is rendered to the scene.

    rt = PIXI.RenderTexture.create(1280,720); renderer = Graphics._renderer; renderer.render(SceneManager._scene, rt); sprt = new PIXI.Sprite(rt); SceneManager._scene.addChild(sprt);  
    At first  I thought it may have to do with Transformation Matricies within the shader. As far as i know I couln't find anything obvious. here's a test shader I prepared below below.
    varying vec2 vTextureCoord; uniform sampler2D uSampler; vec4 lightDiffuse(vec2 lposition,vec4 ldiffuse,float lquadratic,float llinear){ float distance=length(lposition-gl_FragCoord.xy); float attenuation=1./(1.+llinear* distance+ lquadratic*(distance*distance)); return ldiffuse*attenuation; } void main(){ vec4 result=vec4(0.,0.,0.,0.); vec4 ambience=vec4(.1,.1,.1,1.); //Hard coded light 2 vec2 lPositionA=vec2(720.,200.); vec4 lDiffuseA=vec4(0.,1.,1.,1.); //Hard coded light 1 vec2 lPositionB=vec2(100.,125.); vec4 lDiffuseB=vec4(1.,1.,0.,1.); result+=lightDiffuse(lPositionA,lDiffuseA,.07,.05); result+=lightDiffuse(lPositionB,lDiffuseB,.007,.005); gl_FragColor=vec4(ambience.rgb+result.rgb,1)*texture2D(uSampler,vTextureCoord); }  
    I've also prepared a test plugin for RPG maker that will load said shader and apply it as a filter the the Scenes Spriteset. (essentially Container containing sprites and tile maps but no UI or system sprites).
    Even with those hard coded values, the issue still arises, hence why I though it may a matrix issue.

    The plugin loads the loads the shader on start up and stores globally, then when you enter a Map scene, the map sprite will also create a filter for itself that contains the shader code. I can provide a build if its necessary. The code looks for the shader in "/js/Shaders/". the Shaders folter doesnt normally exist in RPGmaker projects.
    var DSE = DSE || {}; DSE.Lighting = function (_export) { _export.shader = null; function loadShader(name, type) { var xhr = new XMLHttpRequest(); xhr.open('GET', '/js/Shaders/' + name + type); xhr.onreadystatechange = _onShaderLoad.bind(this, xhr, type); xhr.send(); } function _onShaderLoad(xhr, type) { console.log("shader loaded?"); if (type == ".frag") { _export.shader = xhr.responseText; } } loadShader("LightTest", ".frag"); /** * @override */ Spriteset_Map.prototype.createLowerLayer = function () { Spriteset_Base.prototype.createLowerLayer.call(this); this.createParallax(); this.createTilemap(); this.createCharacters(); this.createShadow(); this.createDestination(); this.createLightLayers(); this.createWeather(); }; Spriteset_Map.prototype.createLightLayers = function () { console.log(_export.shader); this._filters = [new PIXI.Filter('', _export.shader)]; }; return _export; }({}); upon using both of those files and the script call in a new project the result is the same.

    I've yet to look in the PIXI JS file itself , but i figured I'd start either the PIXI.Filter or Render texture classes. I'm not sure exactly how they work, but I hope its simple enough. I couldn't find anything on google about this nor on this forums aside from this: https://github.com/pixijs/pixijs/issues/2074
    which upon reading seems to be an entirely different issue. Anyway , I'm posting this here, to make sure it isn't something silly I've done rather than a bug with PIXIJs.
    Any advice would be greatly appreciated.
  7. Like
    ivan.popelyshev reacted to Galious in Extending sprite reduces performance   
    Thank you!
    I am using PixiJS with NextJS, exporting the pixi code to a different module and compiling it to ES5 works fine now.
  8. Like
    ivan.popelyshev got a reaction from Galious in Extending sprite reduces performance   
    Sorry, was in train, couldnt answer due to bad internet
    Welcome to modern JS builders.
  9. Like
    ivan.popelyshev got a reaction from imbiss4 in Saving/loading sprite states? (positions/colours etc.)   
    Usually when persistance introduced, issues are getting x3 times harder to track. That's why PixiJS doesnt deal with persistence - custom plugins do. If you dont see those plugins at https://github.com/pixijs/pixijs/wiki/v5-Resources and https://github.com/pixijs/pixijs/wiki/v6-Resources - that means no one cared enough to actually maintain those plugins and track them.
    Here is the plugin that doesnt save stuff, but allows a component approach, post is still in the first page of this subforum: https://github.com/WLDragon/oixi2
  10. Like
    ivan.popelyshev got a reaction from freddyInKorea in Guide to pixi-V4 filters   
    V4 filters are differ from V3. You can't just put there shader and assume that texture coords are in [0,1] range.
    I am sorry that you have to learn all of that, and I will make sure that the process will be easier for pixi-v5.
    Filter Area
    Thanks to @bQvle and @radixzz
    First, lets work with the AREA. When you apply filter to container, PIXI calculates the bounding box for it. We are working with bounding box.
    Invariant: maximal vTextureCoord multiplied by "filterArea.xy" is the real size of bounding box.
    Don't try to think about it: its like that because of performance reasons, its not logical in user-experience sense. Neither vTextureCoord dimensions, neither filterArea.xy are predictable, but they multiplication is what we need. 
    Area can have padding, so please don't use it to get "displacement texture" coordinates or any second-hand textures you are adding to the shader, use "mappedMatrix" for it (see below)
    If you want to get the pixel coordinates, use "uniform filterArea", it will be passed to the filter automatically.
    uniform vec4 filterArea; ... vec2 pixelCoord = vTextureCoord * filterArea.xy; They are in pixels. That wont work if we want something like "fill the ellipse into a bounding box". So, lets pass dimensions too! PIXI doesnt do it automatically, we need manual fix:
    filter.apply = function(filterManager, input, output, clear) { this.uniforms.dimensions[0] = input.sourceFrame.width this.uniforms.dimensions[1] = input.sourceFrame.height // draw the filter... filterManager.applyFilter(this, input, output, clear); } Lets combine it in shader!
    uniform vec4 filterArea; uniform vec2 dimensions; ... vec2 pixelCoord = vTextureCoord * filterArea.xy; vec2 normalizedCoord = pixelCoord / dimensions; Here's the fiddle: https://jsfiddle.net/parsab1h/ . You can see that shader uses "map" and "unmap" to get to that pixel
    Now let's assume that you somehow need real coordinates on screen for that thing. You can use another component of filterArea, zw:
    uniform vec4 filterArea; ... vec2 screenCoord = (vTextureCoord * filterArea.xy + filterArea.zw); I dont have an example for that, but may be you need that value for something?
    Fitting problem
    Thanks to @adam13531 at github.
    One small problem: those values become wrong when PIXI tries to fit bounding box: here's the fiddle: http://jsfiddle.net/xbmhh207/1/
    Please use this line to fix it:
    filter.autoFit = false; Bleeding problem
    Thanks to @bQvle
    The temporary textures that are used by FilterManager can have some bad pixels. It can bleed. For example, displacementSprite can look through the edge, try to move mouse at the bottom edge of http://pixijs.github.io/examples/#/filters/displacement-map.js. You see that transparent (black) zone, but it could be ANYTHING if it wasnt clamped. To make sure it doesnt happen in your case, please use clamping after you map coordinates:
    uniform vec4 filterClamp; vec2 pixelCoord = WE_CALCULATED_IT_SOMEHOW vec2 unmappedCoord = pixelCoord / filterArea.xy; vec2 clampedCoord = clamp(unmappedCoord, filterClamp.xy, filterClamp.zw); vec4 rgba = texture2D(uSampler, clampedCoord); Both FilterClamp and FilterArea are provided by FilterManager, you dont have to calculate pass it in "filter.apply", here's pixi code that takes care of that: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/managers/FilterManager.js#L297
    OK, now we have "transparent" zone instead of random pixels. But what if we want it to be fit completely?
    displacementFilter.filterArea = app.screen; // not necessary, but I prefere to do it. displacementFilter.padding = 0; That'll do it. Why did I modify filterArea there, PIXI will "fit" it anyway, right? I dont want PIXI to have time calculating the bounds of container, because maggots are actually changing it, crawling in places that we dont see! 
    No extra transparent space, and if you put it into http://pixijs.github.io/examples/#/filters/displacement-map.js , and you move mouse to bottom edge, you'll see the grass.
    Mapped matrix
    When you want to use extra texture to put in the filter, you need to position it as a sprite somewhere. We are working with sprite that is not renderable but exists in the stage. Its transformation matrix will be used to position your texture in the filter. Please use https://github.com/pixijs/pixi.js/blob/dev/src/filters/displacement/DisplacementFilter.js and http://pixijs.github.io/examples/#/filters/displacement-map.js as an example.
    Look for a mapped matrix: 
    this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); maskMatrix is temporary transformation that you have to create for the filter, you dont need to fill it. Sprite has to be added into stage tree and positioned properly.
    You can use only texture that are not trimmed or cropped. If you want the texture to be repeated, like a fog, make sure it has pow2-dimensions, and specify it in baseTexture before its uploaded on GPU/rendered first time!
    texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; If you want to use an atlas texture as a secondary input for a filter, please wait for pixi-v5 or do it yourself. Add clamping uniforms, use them in shader and make better mapping in "filterMatrix"
  11. Thanks
    ivan.popelyshev got a reaction from CWLoog in Componentized development for PixiJs 6   
    To make it more pixi-v6-like, i recommend to add individual pixi modules as peer dependencies like here: https://github.com/pixijs/pixi-plugin-example
    you dont need "global.d.ts" hack and some other things, just peer deps & using them instead of main pixi.
    Added to https://github.com/pixijs/pixijs/wiki/v6-Resources#improvement-for-stage-tree anyway
  12. Like
    ivan.popelyshev reacted to Vizions in ImageResource.ts:182 Uncaught (in promise), with PIXI and Typescript no texture loads using pixi and texturepacker   
    Thank you @ivan.popelyshev your help is much appreciated. 
  13. Like
    ivan.popelyshev reacted to Clément Faure in Shaders vs Sprites performances   
    Thank you for your quick response. I went for mesh-shaders  (It was with multiple colors).
    Have a great day.
  14. Like
    ivan.popelyshev got a reaction from jasonsturges in Array of objects at xy position (hitTest, processInteractive)   
    processInteractive was moved to TreeSearch so you can make your own "renderer.interaction.search = myTreeSearch"
  15. Like
    ivan.popelyshev got a reaction from Vizions in ImageResource.ts:182 Uncaught (in promise), with PIXI and Typescript no texture loads using pixi and texturepacker   
    Post it on jsfiddle, codesandbox or something else please? That way people will spend less time setting up your code, and you'll have bigger probability that someone helps
  16. Like
    ivan.popelyshev got a reaction from jasonsturges in Patterns for loaders and texture cache   
    yeah, loader per one resource is usual thing after adding resources in runtime became restricted. You can add resource only if it has parentResource, I dont remember why this invariant was added.
    How to do for such projects with dynamic textures? I used my own loader for that, and even my own texture Resource's with placeholders when texture isnt ready yet
  17. Like
    ivan.popelyshev reacted to jasonsturges in Importing Rope, not exported from pixi.js   
    Bah, not sure how I missed that.  Thanks.
  18. Like
    ivan.popelyshev got a reaction from jasonsturges in Importing Rope, not exported from pixi.js   
  19. Like
    ivan.popelyshev reacted to Jammy in Lights / LUT's / Sprites   
    Looking great!
  20. Like
    ivan.popelyshev reacted to Torsin in Lights / LUT's / Sprites   
    Hello once again, I have another issue that I'm trying to resolve relating to lights. I'm using LUT's for the day and night cycle which work perfectly. I'm trying to add lights on a different layer/group and mix with a shader. This seems to work fine as well, when I cycle to the day time the light dims and disappears but the sprite light in the left window of the house that just doesn't seem to be bright enough at night. I suspect it's the way I mix the colors with the shader but I may be completely off. Ideas?
    I made a demo for your troubleshooting convenience.
  21. Like
    ivan.popelyshev got a reaction from SenPie in How to extend pixi.js types with Typescript?   
    As for original questions - its possible to modify certain pixi classes from outside through GlobalMixins mechanism.  Just add a "d.ts" in your project that adds interfaces to GlobalMixins: https://github.com/pixijs/pixi-plugin-example/blob/master/global.d.ts , you can reference it from one of your files, and TS will understand whats is going on: https://github.com/pixijs/pixi-plugin-example/blob/482e1f1fc399ae16065aea4fa124fd52d108f503/src/index.ts#L2
    Sadly, Spritesheet has no mixin interface
  22. Thanks
    ivan.popelyshev got a reaction from TobiasW in Get world coordinates in Filter?   
    yes, different Shader instances, but they have same program. Shader = link to program + uniforms
    Two ways to achieve that:
    1. vertexSrc fragmentSrc passed to Shader.from() are identical for both shaders
    2. look in Shader.from - it has Program.from call. Just do it yourself, and then create shaders with new Shader(program,..). 
    You can also extend MeshMaterial (which is a shader) and pass program in options.
    even more, you can use same uniforms in those shaders if you want - just create UniformGroup , and pass it to both as an object inside "uniforms", that way you can modify group and it'll affect both
  23. Thanks
    ivan.popelyshev got a reaction from TobiasW in Get world coordinates in Filter?   
    > The colorful background is repeating global-coordinate-based UV coordinate
    but for screen you need something else, you have to pass world container transform in a uniform and translate this thing.
    > Since I have no idea how I'd write my own AnimatedSprite shader I thought the easiest would be to write a Filter.
    no, the easiest is to write mesh-shader https://pixijs.io/examples/#/mesh-and-shaders/shadertoy-mesh.js . You can copy animated sprite code regarding textures and strip to your mesh, its just changing texture, its not difficult  
    The only problem is texture frame, and you can get it through texture matrix uniforms
    "texture.uvMatrix = new PIXI.TextureMatrix(texture)" , call update() sometimes, put it in uniforms like here: https://github.com/pixijs/pixi-heaven/blob/eb554499afe3fcbb42bb4d4f77edb2ee0c27b7fa/src/twotint/mesh/DoubleTintMeshMaterial.ts#L179
    in vertex shader: https://github.com/pixijs/pixi-heaven/blob/eb554499afe3fcbb42bb4d4f77edb2ee0c27b7fa/src/twotint/mesh/DoubleTintMeshMaterial.ts#L20
    clamp in fragment: clamp (i use discard, but better clamp it): https://github.com/pixijs/pixi-heaven/blob/eb554499afe3fcbb42bb4d4f77edb2ee0c27b7fa/src/twotint/mesh/DoubleTintMeshMaterial.ts#L46
    As for sprites, we dont have shortcuts for those kind of elements yet, there are batch renderers which a a bit different - its hard to supply uniforms to them. No docs, nothing, only pixi-batch-renderer plugin example and pixi-heaven two-tint batch renderer.
    Why there are no docs on it? Well, if only someone could do it... If, for example, I could just type a doc instead - it would be , but i have to commit stuff, push it, negotiate, someone has to proof-read it, and i already have 10 plugins on me.
    Please, if you make good solution there - share it with people.
    P.S. filters for tiles will be slow as heck because they use extra framebuffer operations.
  24. Like
    ivan.popelyshev got a reaction from SenPie in How to extend pixi.js types with Typescript?   
    SenPie, just make a pull request. You are already old user
  25. Like
    ivan.popelyshev reacted to celsowhite in How can I use Pixi.js as the renderer for Matter.js?   
    Hi @ivan.popelyshev I'm super late on this (didn't get a notification) but finally created the Github repo with an article. See here https://github.com/celsowhite/matter-pixi. Also enhanced the original codepen by adding some window resize logic.
    Thanks for including it as a reference!
  • Create New...