ivan.popelyshev

Members
  • Content Count

    3651
  • Joined

  • Last visited

  • Days Won

    101

Everything posted by ivan.popelyshev

  1. make a container, use your sprite as a child, and set "interactiveChildren=false" for container. Set hitArea for container as a rectangle. Animate sprite scale ( or width/height, same thing).
  2. Yes, Rope = bad version of plane. I've made something like that in pixi-heaven plugin, but i didnt move Meshes from v4 yet Congratulations with first post and with success!
  3. Please do post updates on your game, and you can PM me if you have something to test
  4. > The game is networked (nengi.js) and sends chunks to the game client as the player nears them (like minecraft more or less, but just 2D). Hello, minecraft modder and creator of gameofbombs.com here canvas2d 1920x1080 @ 60 FPS 2013 year https://www.youtube.com/watch?v=az5S9oQKXIQ > Let's say that the chunks are 8x8 tiles, and each tile is 16x16 pixels (I tested many variants). i usually go for 256x256 per one rendertexture > The chromebook was eventually stable at 8x8 chunks with 3 layers of tiles but anything bigger than that was producing notable hitches while generating the chunk graphics. three layers? oh right, you want characters between them. I used 3 layers in first versions too, then switched to one. > The second experiment was to produce a single mesh per chunk with vertices and uvs for 64 tiles. Yep, pixi-tilemap is good for that. it doesnt have rotations yet but im about to add them this week. It also cares about edges, however that's 1.5x penalty for fragment shader - depended reads (modify uv's inside fragment). Yes, Math.floor can take care of that. > That's all I've tried so far, but I'm pretty satisfied with both the render texture technique and the webgl technique. I'll probably stick to the mesh+webgl version as I'm trying to use webgl more in general. Same conclusion as mine. Extra canvases worked even in canvas2d back then. When I implemented webgl meshes in 2013 they shown same , now I believe meshes are faster but I didnt try instanced attributes yet - that can lower attributes buffer significantly.
  5. You can make your own rope that is not affected by tangent shifts. Just take pixi rope, add "shift" param to each point, move vertices somehow. I bet I could do that but im too busy with people's requests already
  6. I remember back then i used box2d or box2d port with fluids, but of course now im doing it , but it was in 2014. I didnt even measure it back then, but yes, box2d was very performant
  7. i honestly didnt care about performance yet, im new to that physics stuff. I needed something, I made it Which box2d lib do you recommend?
  8. Its possible with new texture resource (demo: https://pixijs.io/examples/#/textures/gradient-resource.js) However i didnt make png+jpeg demo yet. If you are familiar with canvas2d/webgl API's you can just put some hard code there. Otherwise, put a request, you are the first one who needs it in last year or so. The only problem is that my queue is very long and im doing random things from it , not FIFO I think you can just take two ImageResources, and combine results of canvas2d getImageData's to array that you upload to webgl like BufferResource.
  9. In that case, write me as soon as you have something, i'd like to make an article based on that. "All the tilemap techniques!"
  10. Here's the demo for Pixi & P2 & PhysicsEditor: https://codesandbox.io/s/app-architecture-3-j0di5 Part of update determines whether we need to copy pixi filelds to physics or vice-versa. If pixi position was changed -> copy from pixi. if (this._memLocalId !== display.transform._localID) { this.previousPosition[0] = this.position[0] = -display.position.x * PIXEL_TO_METER; this.previousPosition[1] = this.position[1] = -display.position.y * PIXEL_TO_METER; this.previousAngle = this.angle = display.rotation; this.wakeUp(); } else { display.position.set( -this.interpolatedPosition[0] * METER_TO_PIXEL, -this.interpolatedPosition[1] * METER_TO_PIXEL ); display.rotation = this.interpolatedAngle; } this._memLocalId = display.transform._localID; I used p2 compiled from sources, its different from NPM Demo also has a Mesh&Shaders part. Its not batched i'll make batched version later. From now on i will recommend this as a demo with physics and architecture
  11. Btw, programs are cached so its fine to create same shader many times. > Now what I'm trying to do next is actually show different textures for each tile within each chunk, for which I'm using a collection of tileTypes which is either going to be an array or texture uniform with the data for the 256 tiles that comprise the 16x16 chunk. I hope that makes sense. OK, so, there are two ways: 1. multi-texturing shader, put textureId somewhere there. Its https://github.com/pixijs/pixi-tilemap approach 2. put types of tiles to uniforms, put tile instances in attribute. Maybe use instancing there - need to be done on vertex shader 3. draw big 256x256 quad and analyze current pixel in fragment shader - works good on modern devices, but speed is the same as for pixi-tilemap - you will have dependant texture reads. I just cant describe it all in a short post, and I'm very tired, so please make some kind of demo first that doesnt work, with minimum number of lines - and i'll try to fix it later.
  12. Yes we have it. Look inside Shader.from, it creates a Program. const prog = new PIXI.Program(vertex, fragment); const shader = new PIXI.Shader(prog, uniforms);
  13. Yes, we dont have good resource system, i'd like to make a pluign like that in future , but i know that EVERY team of 5 or more people writes their own, usually, so its not my priority.
  14. actually , destroy() on texture automaticlaly removes it from cache.. but you need to do it on all frames to free TextureCache too.. shit... but it doesnt matter, you will just have a number of invalid textures there with no memory backing it
  15. you have to remove image resource too becase we have a line: "if image resource exists, user has to create spritesheet on his own from json + image" https://github.com/pixijs/pixi.js/blob/dev/packages/spritesheet/src/SpritesheetLoader.js#L31 I would like to chnge that behaviour in future, need to be more clear about it. Two ways: 1. remove image too 2. add "_image" manually before json, then you can create & parse spritesheet object after loader deals with json and png separately.
  16. Yes, a bit later. I'm very busy this week
  17. OK, confirmation: 5.2.0 version is correct
  18. Here, have a bonus explanation about WebGL basics: https://twitter.com/ivanpopelyshev/status/1192916824301735937
  19. Its gone. But we have better things now! https://pixijs.io/examples/#/mesh-and-shaders/triangle-color.js Now you dont need actual WebGL context to create geometries, bufferes and shaders! Also, custom renderer is needed only for batching. Without batching, just single shader + custom render() method of Mesh or your class that extends mesh is fine! Extra material: custom batching renderer! https://www.pixiplayground.com/#/edit/~tlXTadqt1qCEvHf~cMQE Oh, i just noticed it doesnt draw red if we switch version to 5.2.0... It might be a bug, we are investigating it. Also, look through render() renderDefault() and that kind of methods of Graphics/Mesh/SimpleMesh. They show how can you actually use pixijs internals : texture binds, rendertexture binds, shader uniforms, in a new style. Basically, we have our own https://twgljs.org/ inside
  20. Example of what can go wrong with pixijs + webpack + plugins: https://github.com/pixijs/pixi.js/issues/6208
  21. Extending such way its supported with webpack is difficult. Most of my plugins work like that: import * as PIXI from "pixi.js"; global.PIXI = PIXI; require("pixi-spine"); then pixi-spine takes global PIXI and adds "PIXI.spine" inside, and also a few methods for existing classes in pixi. You can use the same approach - make a library that works with global pixi. In future we'll provide a way that is free of problems like "there are two versions of pixi in node_modules now", we have some problems with peer dependencies. Right now dont focus on webpack and just do this thing.
  22. Welcome to the forums! Congratulations with first thread.
  23. just dont forget to destroy old texture if you aren't gonna use it anymore, for video its important. "far.texture.destroy(true); far.texture = PIXI.Texture.fromVideo('img/sd9.mp4)"
  24. Its more 2d coding problem. Should I move that thread in https://www.html5gamedevs.com/forum/3-2d/ ? It doesnt matter if you do it in canvas2d drawImage / drawEllipse or pixijs sprite/grapics position move Also I see that you dont actually have explanations of how "vx" and "vy" are used. Programming is different than math a bit - you have a function FRAME() that is called every 1/60 second, with a "delta" that is 1 in good case and more in case of lags. Because of discrete model, some functions can become unstable and dont work the same way they do in math.
  25. https://github.com/pixijs/pixi.js/wiki/v5-Resources#debugging-and-editor-tools