ivan.popelyshev

Members
  • Content Count

    3819
  • Joined

  • Last visited

  • Days Won

    122

ivan.popelyshev last won the day on January 19

ivan.popelyshev had the most liked content!

About ivan.popelyshev

  • Rank
    Advanced Member

Contact Methods

  • Website URL
    https://gameofbombs.com/
  • Twitter
    ivanpopelyshev

Profile Information

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

Recent Profile Visitors

15731 profile views
  1. run a profiler , make memory dump - you should see nunmber of objects of every type - and when you click on any object , you can trace who exactly references it
  2. OK, i really should stop flooding here. contact me in t.me/hackerham , i remember we had a chat about your problems before.
  3. Hm, your masks for buttons at the bottom of screen - maybe removing them might help a bit. Can you "bake" it to one texture and use just one sprite instead of masking that stuff? bindTexture:106 - if we make better batching maybe we can remove that. How do you store textures? Oh, now I remember, its SVG stuff. Right, Vector resources, its difficult. Its possible to make them in runtime atlas but it needs a specialist. It might be that your only problem is apple computers. You can spend extra time with a specialist on optimizing that stuff but I dont know whether it really helps. Maybe resolution+powerPreference should help, just give those controls to users and they can set them depends on their hardware. The problem is - im not sure that its possible to fix without actually owning the device. Imagine we spend 20 or 40 hours on optimizing it, how exactly will we measure the result? User complaints about things that dont work on their computers with their internet provider ruined my nerve system and destroyed all my enthusiasm towards my game. Maybe my case is like yours - 5% of people are complaining about bad configurations and think that its very easy to fix because, well, they bought computer for more than 1.5k$ that was advertised everywhere as the best thing in the world and your free web-app should work on it of course, without draining battery.
  4. 45 drawElements, and 28 stencilFunc - that means 14 or 28 masks, i dont remember exactly. Where do you use masks? I looked in profile on my slow computer (GeForce GT 620) and its .. ideal. I dont see any slowdowns. If those macbook owners have problems - well, resolution and powerPerformance might help, but if they complain more - how many of them do you have? Are they 10% of userbase or how many? However, i still cant find where do you handle all the animations. Really, debugging hexs.io is trash - so many frames, loaded resources, i dont even know where is your code At least its very fast.
  5. Answer for https://colonist.featureupvote.com/suggestions/55589/cpugpu-usage-optimisation - macbooks videocards + retina are a big problem. Don't enable antialias and make sure "resolution:" param is configurable by player. If someone wants it to not eat battery - they have to reduce the resolution. If a system has two videoadapters it is even worse - you have to choose correct one with "powerPreference" setting. That has to be added to game settings too! I remember that you have all those cards and I dont remember how exactly they are animated - maybe there's a problem in your tweens, you cant just put 100 setInterval-s , its affecting event loop, need to handle them in the same RAF cycle. Its another problem that exists but it is not mentioned in forums and articles.
  6. Btw, i approved your post in hiring & freelance and posted a link in russian telegram html5 gamedev chats. I know that you're struggling with a problem for a long time, but come on - between your first post and this topic i helped so many people with performance problems I don't know how did you manage not to solve all those things long time ago. There are several people around who can help with fixing it. Also one of mistaeks you made - you didn't post exact specifications on which devices it is slow.
  7. If only there were something like Kris Kasperski book about low-level optimizations - but, unfortunately, there is no such book for WebGL and PixiJS. We need time to make it. And just imagine it - all other books on pixijs and phaser cost money! Its a community problem. The topic is very difficult , requires huge number of hours to learn, and even more to describe it to other people. I can only tell you where to start - find out what "batching" is: 0. Debug BatchRenderer, "Graphics.render()" and "Sprite.render()" 1. count the number of draw calls and number of texture binds of your application per frame. 2. learn why tools like https://www.codeandweb.com/texturepacker are needed and if there are open-source or just free tools Try profile your application. Find how many seconds it is idle per 10 seconds. Find whether its gpu-bound or cpu-bound. Find cpu js bottlenecks if you see it. Do not use minified version of pixijs. Yes, it costs less network capacity but it ruins your debug. === Even if you do those things there is no guarantee that you will be able to fix your app, because to remove the bottleneck you need to know the algorithm where it happens. It might be not related to batching, it can be vector-related. It cant be something GPU-bound like fillrate - number of pixels drawn on screen. For example, if you use `resolution=2` or `resolution=1.5` to make things look better - that might be a problem.
  8. 1. Why remove all cacheAsBitmap? Because I have no guarantee about cacheAsBitmap behaviour, its trash. You either know how exactly it works inside, either you dont complain about it I just dont accept any complaints about it without proper report, because that code is a mess and there were too many bugs in it. > Spector.js looks cool but I can't make sense of whats going on, my understanding of all those calls and stuff aren't enough. Any resource you can recommend that'll increase my understanding of how things work and how I can debug to find where to optimize? There's a reason that ultimate book about pixijs doesn't exist. We are swimming in a very big ocean where such book or serie of articles will take huge number of hours to make. I can't just say "lower the number of drawcalls", or "". Its all about balance, you need to feel it. For that, you need to know 1. how pure WebGL works https://webgl2fundamentals.org/webgl/lessons/webgl-fundamentals.html 2. pixijs architecture, why it makes things easier https://github.com/pixijs/pixi.js/tree/dev/packages It is not possible without learning the source code and debugging it. If you dont know how to place breakpoints, watch variables, use profiler, find bottlenecks - you wont be able to learn it. In your case there are many Vector objects and that makes everything VERY difficult because there's no html5 engine that deals with vector properly like Flash did. Flash cacheAsBitmap worked awesome, and our stuff has only two things in common : 1. it uses extra bitmap texture (RenderTexture) 2. it has a name `cacheAsBitmap`. The best way to optimize your app is to ask me or t.me/ex_gd to seat down together with you and look at it, which, i think, we already did. We have a methodology of how to optimize apps but we can't just give you a set of instructions.
  9. "this.texture.destroy(true)" should work. PixiJS removes lins from its cache, destroys WebGLTexture. If you see something lingering - please specify where exactly is that lingring, what is the path from root node. If you save a link to canvas somewhere - PixiJS wouldn't be able to "free" it. Its just not possible. Well, actually it is with "canvas.width=1; canvas.height=1;" but we dont have that code in our lib, we just nullify links to it and destroy webgl objects.
  10. Hello! There's one small isometry demo: https://pixijs.io/examples/#/plugin-projection/iso-basic.js However that's not how I usually do isometry. Usually I just use Y scaled by 0.5. You even don't need those "x+z" "x-z" coordinates, if you want to make tiles - take whole two-dimensional array and remove "odd" cells. Like, use only "black" cells of chess board. Then the only problem is to detect which tile is under mouse, but then it will be the only place where you have a isometry math. Everything else is just "x=x'; y = y' / 2" I have many things to tell about isometry: how to sort elements, how to make walls on tiles and intersect/sort them too, but I want to sleep. Try to do something, then I'll give you more info. and Welcome to the forums!
  11. add a container inside, add containsPoint() that checks if its in red area. It should be easy if you know equations for square and circle.
  12. Yep, its no automatic, but the code should be very simple and configurable. I prefer my users to handle their own FOR's, instead of relying on forEach, you know That way everyone can feel that they are making their own engine and not just using prepackaged bigmacs
  13. Yes, that's blending: That stuff you want - its not newbie material. Its a big problem that is not possible to solve without extra knowledge. Usually big frameworks have solutions for that, but they are not universal - you just choose one of types of tilemaps. Btw, the way you want it doesn't even exist in https://www.mapeditor.org/ , you are going for algorithmic way and you think pixi has that. Well, bad news - pixi is a rendering library that does not support gradients yet and it certainly has no tiles algorithm that will make that thing for you automagically. Here comes the necessary knowledge about tilemaps: Its always about high level vs low level: there's your cool high-level algo for your game, and the low-level algorithm based on pixijs. You need to balance both, because pure high-level or low-level solutions are titanic. High level: However usually its managed with autotiles: you have to separate it by cells and draw transparent edges only on the coast. There are many autotiles techniques, like here: https://github.com/ivanpopelyshev/bombermine-shuffle, or here: https://github.com/pixijs/pixi-tilemap/blob/master/demo/rpgmaker.js - that's from rpgmaker MV. Autotiles are not that difficult , you just need some time to code them or to search articles in internet about what people found. Low level: 1. pixi sprites - the slowest of them all. It can be fine if you choose good high-level algorithm and RenderTexture caching maybe 2. pixi graphics - beginTextureFill(). You can fill graphics with many tiles of textures. 3. pixi-tilemap - https://github.com/pixijs/pixi-tilemap/ originally made for RMMV its a low-level algo that does the same thing as Graphics but much faster. 4. pixi mesh shader - https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js , make your own "pixi-tilemap" RenderTexture caching - manipulation with layers, filters, and other things - it can suplement any of those low-level algos, but only if you understand how exactly does that work. Look at RenderTexture examples, look at pixi-layers examples, then look in source code of pixi rendertexture and filters. How can be transparency achieved: 1. Draw those gradient edges in photoshop/paintnet, now your problem is to use them where they are needed. 2. Make a shader for mesh. You need even better higher level algo to fill a Mesh with both texture params and gradient params. 3. Wait when we have more gradient texture support in pixi, including alpha gradients. Maybe in 6 months or so. The question difficulty: Maybe in future versions of pixi this question will have simple answer. Or there will be easy-configurable plugin that makes it. Currently - its not. Prepare for pain.
  14. It is v4 or v5? 1. Remove all cacheAsBitmap 2. look at one frame in https://spector.babylonjs.com/ Count DC's, framebuffer changes, other stuff.