Popular Content

Showing content with the highest reputation since 07/08/20 in all areas

  1. 3 points

    Pixi.js Showcase

    I just finished my coloring app! Browser / iOS / Android It took a while with some years inbetween. Aaaalll the way back in 2017 I was trying to get some basic drawing going and got it working with the help of Ivan. Thanks @ivan.popelyshev ! Looking back at this example, it's pretty much the same as in the app. Thanks for the amazing library and all the support on these forums! it's been really helpful
  2. 2 points
    Turns out, they were It actually was deceivingly simple. The PIXI code from my previous message works, but the parameter fontFileXML, which represents the fnt descriptor, has to be created as an XMLDocument (document.implementation.createDocument (namespaceURI, qualifiedName, docTypeObj)) and for fontPNGBase64String, instead of encoded PNG, just extract the canvas drawing as PIXI.Texture. BitmapFont will know how to interpret that as your custom font.
  3. 1 point

    problems in mesh and shader

    i am creating a mesh using geometry and shader in vertex Shader,i transformed the point by multiply projectionMatrix * translationMatrix,which i suppose should be set by PIXI itself,but when i doing the same thing in fragement shader,problems occures, i cannot tranform the point to where i want. here is the code,thank you very much let width windowinnerWidth; let height windowinnerHeight; consolelogheight,width; let app new PIXIApplicationwidth, height; documentbodyappendChildappview; // shaders const PIXI_SVG_PROGRAM PIXIProgramfrom` precision mediump float; attribute vec2 aVertexPosition; uniform mat3 translationMatrix; uniform mat3 projectionMatrix; uniform vec2 pPoint; void main() { gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); }`, ` precision mediump float; uniform mat3 translationMatrix; uniform mat3 projectionMatrix; uniform vec2 a_point1; uniform vec2 a_point2; uniform vec2 center; const int pNum = 128; uniform float controlPointsArray[pNum]; uniform vec4 controlPointsColors[pNum]; void main() { vec2 tCenter = vec2((projectionMatrix * translationMatrix * vec3(center, 1.0)).xy); //distance to center float r = 0.0; //Long axis and short axis length ,they are relative now float l1 = distance(a_point1, vec2(0.0,0.0)); float l2 = distance(a_point2, vec2(0.0,0.0)); //long axis's angle float mainAngle = atan(a_point1.y, a_point1.x); //point's corresponding angle float currentAngle = atan(gl_FragCoord.y-tCenter.y, gl_FragCoord.x - tCenter.x); //standard angle(long axis is horizontal) float stdAngle = currentAngle - mainAngle; //the length between point on ellipse and center float dist = sqrt((1.0 + pow(tan(stdAngle),2.0)) * pow(l1,2.0) *pow(l2,2.0)/(pow(l2,2.0) + pow(l1,2.0) * pow(tan(stdAngle),2.0))); r = distance(gl_FragCoord.xy,tCenter) / dist; vec4 color = mix(controlPointsColors[pNum-2], controlPointsColors[pNum-1], smoothstep(controlPointsArray[pNum-2], controlPointsArray[pNum-1], r)); for(int i = pNum-2;i >= 0;i--){ color = mix(controlPointsColors[i],color,smoothstep(controlPointsArray[i], controlPointsArray[i+1], r)); } gl_FragColor = vec4(color); } ` const shader new PIXIShaderPIXI_SVG_PROGRAMlet v 300 let data 0,0, ,0, ,, 0,let result 0,1,2,0,2,3const geometry new PIXIGeometrygeometryaddAttribute'aVertexPosition', data , 2geometryaddIndexresultconsolelogshaderconsoleloggeometryconst combinedShapeMesh new PIXIMeshgeometry, shaderlet container new PIXIContainer; // combinedShapeMesh.setTransform(0,0,0,0,6.2); combinedShapeMeshsetTransform0,0,0,0,0; containeraddChildcombinedShapeMeshappstageaddChildcontainer; combinedShapeMeshshaderuniformscenter 100400,600300 400300; // combinedShapeMesh.shader.uniforms.center = [100,400]; combinedShapeMeshshaderuniformsa_point1 0, 50; combinedShapeMeshshaderuniformsa_point2 50, 0; combinedShapeMeshshaderuniformscontrolPointsArray 0.0,1.0; combinedShapeMeshshaderuniformscontrolPointsColors 0.9019607843137255, 0.13333333333333333, 0.13333333333333333, 1, 0.050980392156862744, 0.9411764705882353, 0.2784313725490196, 1 ; // Animate the filter apptickeraddfunction;
  4. 1 point

    problems in mesh and shader

    Oh , sorry, I gave wrong link playground doesnt like UTF characters https://www.pixiplayground.com/#/edit/Ql9uafhDGLiqT2lx7xvG0 Thats what was in my jsfiddle. Hope it helps. That's the code i made less than in hour after your first post. I'm sorry it took two days
  5. 1 point

    problems in mesh and shader

    Here you go: https://www.pixiplayground.com/#/edit
  6. 1 point

    Image data

    No. In fact it may be faster (depending on browser implementation) because drawImage() is more flexible, capable of rescaling the image.
  7. 1 point

    Image data

    Load the image When it has loaded create an off-screen canvas of the same width and height Get the context of the canvas Draw the image into it getImageData() and use the methods I showed before to access the pixels
  8. 1 point

    Cylinder effect on texture

    Yes, in reality I don't understand too much about filters, I saw the pixi filters examples but none seems to be what I need. Also, searched for cylinder effect here before posting but nothing showed up. Trying with filter this came up and I guess that this should be the way, right? Btw, this is not for a slot, I just download it from an example that I saw, I want to apply this to a text field.. thanks @ivan.popelyshev
  9. 1 point

    Displacement map on mask?

    Thanks for coming back to me. I might wait as it looks beyond my level of understanding! Or maybe after I finish other parts of the project I will re-examine it as it’s just for a nice effect, not critical.
  10. 1 point

    problems in mesh and shader

    I cant understand what did you want to do there. gl_Fragcolor is pixel coord of current pixel. The problem is that you cant use it in pixi shaders because projection might be reversed. Also, projection*translation * point gives you viewport coords (-1,-1) - (1,1) where point is LOCAL coords in mesh. yes , you dont have a transform on it. I changed approach - i calcaulte world position =translation * local , save it, calculate viewport pos and give it to webgl. Then in frag shader i operate that world position. "center" now is in global pixel coords https://jsfiddle.net/Hackerham/sc1kmqxt/6/
  11. 1 point
  12. 1 point

    problems in mesh and shader

    i find a weild way to partly solve this problem by [100*400,-(600*300 - 400*300)]; but i am very confuse why it will works beacause center and geometry points both multiply the same matrix, and in spacial scenario like rotate,it still will not work please help me,THX!
  13. 1 point
    > So the better approach is to make the UI using HTML/CSS outside Pixi, for example in a different DIV? For prototyping - definitely yes, use the power of html. For real app on mobile phones - need performance testing
  14. 1 point
    Also its good for tricks like "container.filterArea = renderer.screen" - and filterArea wont have to be changed after resize Screen is just a rectangle that is updated on resize
  15. 1 point
    they are same unless you start messing with pixel density. Retina, modern phones, all that stuff. YES, for UI and all stage objects you should depend on "screen". That's why I introduced it , people were relying on "view" and it depends on pixel density.
  16. 1 point
    view is canvas, so "width" and "height" are in real pixels. screen is a rectangle, and according to CSS. new Renderer({width: 800, height: 600, resolution:2 , autoDensity:true}) makes a renderer with view of 1600x1200, but screen is still 800x600, and those numbers will apppear in "view.style.width="800px"" All your stage has to be adjusted to 800x600 size in this case, not 1600x1200. - this helps for Retina displays or when tab is zoomed, or on modern phones. Its rare when someone makes it right from first try As for app in general, here's explanation: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop . Application on itself doesnt have any magic, it just creates a few components and consists of number of getters.
  17. 1 point
    @ivan.popelyshev Hi Ivan i just wanted to tell you that it is working, thank you for your help
  18. 1 point
    I see the confusion. Sound.from isn't exactly analogous to Texture.from. Sound.from API only handles remote URLs. If you want to play a sound that's already been loaded to this: pixiSound.default.play('explosionSound') Here's the documentation: https://pixijs.io/pixi-sound/docs/PIXI.sound.html Keep in mind that pixiSound.default is the same as PIXI.sound in the docs.
  19. 1 point

    Question on making UIs

    I have the same problem, First of all I don't know how to set the x y position of the sprites. Is it relative to canvas size (like x = width * 0.2) or absolute positioning. I think one can make an editor for positioning sprites. Or make helper functions to layout the sprites horizontally or vertically with some margin. Also you should use hot reloading, so you don't have to refresh everytime.
  20. 1 point

    bitwise operator not supported?

    @ivan.popelyshev, the solution provided does not work, also the link https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/shader/Program.js#L53 is broken (although not a big issue as the path stay correct). There is a warning in the browser that is -probably- showing the resulting shader: precision mediump float; #define SHADER_NAME pixi-shader-6 #version 200 es void main() { gl_FragColor = vec4(.0,.0,1.0,1.0); } As you can see, the version pre-processor is in third position.... Using pixi 5.2.4
  21. 1 point

    which game engine is best ??

    I thinks this Unreal Engine 4
  22. 1 point

    Top-Down Tank Game Showcase

    Hi everyone, I just create a simple show case for PIXI.JS. A top-down Tank game with: 1. Physic engine integration with matter-js. 2. ViewPort for 2D camara. 3. Custom Tile map and grid system. 4. Dynamic generate new area . 5. Keyboard Control. 6. GUI Interface. Example: https://kayacchang.github.io/Tank/dist/ Source Code: https://github.com/KayacChang/Tank
  23. 1 point
    One day I really ought to write an article about what's good for a web app is almost never good for a game loop.
  24. 1 point
    Hi, It sounds like you want to implement tile map editing inside melonJS. This would be an amazing contribution; it's something that hasn't been worked on yet. Hypothetically, it should just be a matter of maintaining a reference to the original JSON source, and updating that with the existing "setter" methods on the layer, tile, and map objects. For example, changing a tile on a layer is just a matter of calling the setTile method on the layer object. To update the JSON source as well, this method needs to be updated to poke the given tileId into the correct array location (based on provided coordinates) within the appropriate layer (defined by the layer object instance itself). The UI is totally up to you; whether it's a form (as you asked), or click-and-drag style drawing (as in Tiled). In the end, you're going to use API calls like the one I linked above. Best of luck!