• Content count

  • Joined

  • Last visited

  • Days Won


ivan.popelyshev last won the day on November 17

ivan.popelyshev had the most liked content!


About ivan.popelyshev

  • Rank
    Advanced Member

Contact Methods

  • Website URL
  • Twitter

Profile Information

  • Gender
  • Location
    Moscow, Russia
  • Interests
    Pixi.js, Topcoder, Codeforces, ninjas and bombers

Recent Profile Visitors

3,955 profile views
  1. Estimating duration of AnimatedSprite's single run

    Look up sources: https://github.com/pixijs/pixi.js/blob/dev/src/extras/AnimatedSprite.js Look up for problems of pixi vanilla AnimatedSprite: https://github.com/pixijs/pixi.js/issues/4270 Look up other people implementations : https://gitlab.com/griest/pixi-actor#README Also you have to know that "delta" value used in all pixi tickers is 1.0 for ideal frame of 60 FPS, that's why you can write things like "mySprite.x += 0.1 * delta". If you want fixed frames, either make sure delta passed to AnimatedSprite is always 1.0 by turning off autoUpdate and calling update(1.0) on your side. Or you can write your own AnimatedSprite.
  2. Use pixi.js to build a game like agar.io

    ITs simplest solution, not the best one, but its enough for most projects. There are different techniques like "Chunks" that are used in Minecraft, but that way you'll have much more problems in the code. Here the only serious work is to get a list of objects that appear in new "window", and compare which objects already exists, which has to be added, and which removed. Sometimes you just refill it completely, that is even easier. If that process takes less than 10 milliseconds, then game wont lag at all. Otherwise , you'll see small lag every time you scroll too far. As for coordinates, all objects have global map coords, just imagine that map is really big but only small part around the camera exists right now That way we cut all the far-away objects, and for near objects out of camera view WebGL doesnt run the most expensive thing - fragment shader.
  3. Use pixi.js to build a game like agar.io

    I feel like im explaining same things every week and every week it all over again. I think pixi really needs a tutorial about big maps and cameras, but I'm still not ready to write it.
  4. Use pixi.js to build a game like agar.io

    > how to do if I want to use app as a world map and only render camera. That's something you must nail in your brain: World map does not have size. Camera doesnt have size. Any pixi container does not have size. Size is second-class citizen, while position&scale&pivot are first. If something renders beyond the screen, its vertex shaders run but fragments aren't - that's how WebGL works. It does not calculate pixel colors outside the screen. Another thing that is very hard to understand if you dont clear your mind and forget about whatever way you wanted to implement it: Imagine that you have all data for big map, but not actual sprites/graphics/whatever. You maintain a "window" 2x or 3x size of camera, that is filled with your objects. Every time camera rectangle (that you calculate, pixi doesnt know about it) touches that "window" edge, you calculate new "window" centered at the camera and fill it with objects that has to be inside that area. You can re-use objects. You can also treat moving objects differently - dont apply that strategy for them, or check every time if they are in your culling "window". This strategy allows to optimize many objects with PIXI.Graphics or https://github.com/pixijs/pixi-tilemap or PIXI.mesh. There are no tutorials on that, its just common sense that you have to understand and at least try to implement. > window.outerWidth, window.outerHeight Use innerWidth.
  5. Perspective correct texture mapping

    Btw, there's a big project that waits for me to implement those features in projection. They used 4.0.0-fork before. Imagine that this thing will be in 2.5d:
  6. Use pixi.js to build a game like agar.io

    For camera&moving, in general, search for "camera" threads in this subforum, I posted "pivot & position" solution multiple times. Also, read all threads by @caymanbruce , he's making the same type of game. PIXI draws everything every frame and while on old computers it was good idea to draw only certain elements, now there's no big gap between that and "draw everything". However, code style and application architecture suffers significantly. Basic performance optimization is "tilemap" optimizations, I described it, please search this subforum. However if you are ready for what I think is premature optimizations - of course you can ask renderer to render only one container and dont clear the view, but dont complain when it turns out you spend time for nothing. But please remember that first you want to make a game and second is to optimize it for slow computers with old GPU's, because that'll take siginificant amount of hours and suck all of your motivation like a brain slug. Anyway, first thing that you need is to look into https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js , and make your own Application instead of that pixi mashup made for demos and hello-worlds. Create renderer, ticker, loader. Add whatever updates/animations/extra_renderer_calls in it.
  7. Perspective correct texture mapping

    No, there are no docs, I advice you just read the sources, its simple enough. There's better mesh in heaven (https://github.com/gameofbombs/pixi-heaven) no demos, but its basically this branch but in "PIXI.heaven.mesh" namespace: https://github.com/pixijs/pixi.js/pull/3902 But I dont believe you need that thing right now. Bilinear projection is not perspective, it has strange effects like you've shown in video. If you want to move forwards/backwards, you need perspective, but with Sprite2d and Mesh2d you wont be able to get up/down. That's the best you'll have: http://pixijs.io/examples/#/projection/plane.js . Left-right movement ok, up-down forward-backwards isn't. You can either wait for me to implement 3d for pixi-projection, either use old pixi-4.0.0 fork. If you are ready to do stuff with 4x4 matrices and not afraid of required math, you can try fork pixi-projection and implement 3d yourself. You wont get that "dont starve" effect with simple 2d. Such demo existed for pixi-v3 and previous version of 3d fork, even with performant GPU patch for spine, but I cant find the sources
  8. PIXI and globalCompositeOperation

    Blendmode works through globalCompositeOperation. You can add new blendmodes in CanvasRenderer. https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/canvas/CanvasRenderer.js#L103 https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js https://github.com/pixijs/pixi.js/blob/dev/src/core/const.js#L109 According to this, numbers from 20 are free, so you can do something like that renderer.blendModes[20] = 'destination-out'; sprite.blendMode = 20; There's also a way to use custom blendmodes in webgl:
  9. Perspective correct texture mapping

    If you want just to map a quad, https://github.com/pixijs/pixi-projection is enough. It emulates GL.QUAD which is absent in WebGL It also uses 3x3 matrices instead of 3x2. However your formulaes are for bilinear projection which is different, and I implemented that in same plugin too. Its not that easy, because its actually a surface of hyperboloid and requires extra pain in shader and on renderer-side. After I implemented it, I compared my formulas with others and found error in http://iquilezles.org/www/articles/ibilinear/ibilinear.htm As you see, there are many ways to map texture to quad. I have multiple formulas for different projections that I didnt implement yet. As for real 3d 4x4 matrices, I yet to implement that, I'll tale them from my old (two years!) pixi 4.0-0-alpha fork https://github.com/gameofbombs/pixi.js with cards example: https://gameofbombs.github.io/pixi-bin/index.html?s=flip&f=cards.js&title=Cards , there were 3 projects that used it, they are waiting for me to improve pixi-projection enough. In pixi-v5, GoodBoyDigital will add their own 3d plugin, that they use for games like https://www.bbc.co.uk/cbbc/games/the-worst-witch-magic-adventure-game (f u bbc for regional policies) One more related thread:
  10. Backdrop filter in Pixi?

    > it involves consideration of the texture data behind the actual object/node that has the filter. e.g. https://github.com/pixijs/pixi-picture can do that. The only problem is that it'll use readPixels which is EXTREMELY SLOW. You have to put all the stage into AlphaFilter (aka VoidFilter), that way those renderers will be able to take image behind filter with async operation copyTexImage2d or something like that. I implemented OVERLAY in that plugin, you can make backdrop with it if you adjust shader.
  11. AnimatedSprite single pass

    Sources: https://github.com/pixijs/pixi.js/blob/dev/src/extras/AnimatedSprite.js#L75 Here it is, compiled into docs: https://pixijs.download/v4.6.1/docs/PIXI.extras.AnimatedSprite.html#loop
  12. Need advice for some project

    > Deal! Actually I figure it out and my demo will be ready soon. I'm happy when people try simple solutions and math instead of using multiple libs they dont actually need > Tank you Sorry for chaning
  13. Need advice for some project

    I just told you to calculate scale and position based on something else that you store, 3d position. Please think some time on it before asking more questions, imagine that we have veeeeery slow internet. When you give me enough good questions, I'll reply with more answers. Lets batch our discussion like pixi does with sprites
  14. Need advice for some project

    1. code projections and modify ParticleContainer that it works with them 2. code something simple like you did, sometimes its enough 3. use threejs PointCloud. or you can wait when I code 3d projections for https://github.com/pixijs/pixi-projection and add support to ParticleContainer. Right now its only 2d projections stuff. Anyway, simple formulas for projeciton. Im taking it from the head now. Dont think that I'll post complete code with commentaries, I just dont have enough time for that. You have to adjust my solution for your case, dont mind variable names, you can change to what you like it. Assume that our center of screen is (0,0), focus distance is "d", and "z" is distance from object to focus plane (z=0 is default). projPosition.x = position.x * d / (z+d); projScale.x = scale.x * d / (z+d); Dont forget to cut stars that already behind us, and have z < -d + eps, or their X already is too high. Same applies to Y. If you want to change (0,0) just change top container coords, I assume that you know how pixi transformations work. Please dont use "scale.x+=" or something like that, store 3d position and 2d position in different variables. Also dont forget to sort points by Z. Sorry, I wont show you my paint mad skillz, just imagine that you have a screen on distance D from you, and point is somewhere at (z+D), and you want to project point on that screen.
  15. Need advice for some project

    Assuming that you cant just code critical webgl stuff for your demo, I suggest to stop looking for pure pixi solution and use combined pixi+threejs. No framebuffer: https://jsfiddle.net/xyL1sv02/2/ extra framebuffer: https://jsfiddle.net/c34p532r/24/