Jump to content


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by jonforum

  1. yes , it the good way "object.renderable = false." for every object not in the viewport (culling ). You can also look overthere for get more inspiration. https://davidfig.github.io/pixi-cull/
  2. just in case , if you using react , you have debugger tools thats help you to debugg your app. i hope you are not working without this !๐Ÿ˜‰ It should help a lot. Also for pixijs! Another debugg tools avaible. https://chrome.google.com/webstore/detail/pixijs-devtools/aamddddknhcagpehecnhphigffljadon And also the native memory tool in devtool allow you check and compare all textures between 2 states. This can help.
  3. hu, I think is because they forget add the types events. What you can do for temp fix , is just replace tempory : declare class EventEmitter<EventTypes extends string | symbol = string | symbol> { // by declare class EventEmitter<EventTypes extends string | symbol = keyof HTMLMediaElementEventMap | symbol> { or on(event: keyof HTMLMediaElementEventMap|{}&EventTypes, fn: EventEmitter.ListenerFn, context?: any): this; You shoudl find the type file in `node_modules\eventemitter3\index.d.ts` ----------------------------
  4. if is for desktop app, just use nodejs https://nodejs.org/api/fs.html You read folders and files, storing all metas somewhere (size,type,hash,path....), and you can make your loader with those meta and track smoothly the progress. For web (you dont have nodejs) so you will need manually add those meta informations. Maybe a task before publish, to get those metas.
  5. https://pixijs.io/examples/#/interaction/interactivity.js
  6. you can do this at the development level of your project, nodes scripts to rescale and repack your textures and convert your ressources And a script for specific build for android,ios,...,win,mac,linux..... There isn't really a quick or miraculous way other than developing your scripts that will do tasks to converts your ressources and make your mobiles build.
  7. if you have exhausted all your resources! you have a full list here for experiment purpose, they are userfull for Nwjs and Electron. https://www.chromium.org/developers/how-tos/run-chromium-with-flags it hide in your dev tool : customize=>more tools=> Rendering => Frame Rendering Stats or with args "chromium-args": "--show-fps-counter"
  8. i dont want say bullshit but you have nothing to lost by try adding some args to electron ! "chromium-args": "--gpu-no-context-lost --force-gpu-mem-available-mb=9999999 --max-active-webgl-contexts=32 --max-decoded-image-size-mb=1000 --enable-zero-copy" i also add zero copy just in case your costumer use integrate gpu, purely random suggest ! see `What are zero-copy texture uploads?` https://software.intel.com/content/www/us/en/develop/articles/native-one-copy-texture-uploads-for-chrome-os-on-intel-architecture-enabled-by-default.html it can lead you nowhere, on my side I a
  9. Are you mean something like this ? track plan 2d over 3d ? i have some demo like this one, but dont play with playground settings, they remove v4 setting, dont know why !? if this can help ? https://www.pixiplayground.com/#/edit/DCn0GFmVgb7yTIHm8HiYz
  10. all working on my side, there only demo with normals ,lights who are not ported to v5 yet.
  11. jonforum

    Star rain

    Pixijs have some demo , it also have similar stars space demo. https://pixijs.io/examples/#/demos-advanced/star-warp.js You can also make a little playground here with your code. https://www.pixiplayground.com Making a playground it more easy for help, If you stuck! ask again! Note: NaN it mean issue in your math , related to javascript base and not pixijs.
  12. i cant really help you, i never try this kind of feature with PIXI ,but i can just refer you to a list of demo codepen, jsfiddle ,Shadertoy is this can help to get some inspiration ! they have really good math logic to learn this. it's true that it would be great to have a demo on Pixi or a easy plugin for raycast. For now only demo with Canvas or pure webgl.
  13. you can use Observe https://www.npmjs.com/package/observe/v/1.2.0 or this one is better, i using it with React, because everything is immutable (@read-only). https://www.npmjs.com/package/@nx-js/observer-util Or in vanilla, but why reinvent the wheel? https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent Actualy PIXI natively give you event for listen child's change, but not for props, or is missing in the doc. ! A PIXI guys can maybe fix me if am wrong. Note: Do not confused with the obsolete native version in Js vanilla, it was
  14. !!FirstLine!!! PIXI.Sprite.from is a function Callback and not function constructor. You should get a lint error ! Remove .from here the way https://www.pixiplayground.com#/edit/FoChFu40Ql48ApAaf_BbG
  15. For me , what seem bad here, is you seem use React for your game and pixijs in same process! Try multi-tread your game, React is really heavy when update the Dom, is fine for app, but hell no for game engine!!! Maybe you block your principal tread. Node.js multithreading: What are Worker threads, and why do they matter? - LogRocket Blog look for worker_threads Worker threads | Node.js v15.3.0 Documentation this is old jsConf but also explain good js limitation callStack https://youtu.be/8aGhZQkoFbQ Also you can use the profiler to see why you get lag if React are iso
  16. may be a trail to try. stackgl/headless-gl: ๐ŸŽƒ Windowless WebGL for node.js (github.com)
  17. i remember make some test with jest , if am not wrong you will need create and bind your own Canvas forEach before or something like thats.... it was also hellish with React, need a lot of plugins dependency and strange patching ! beforeEach(() => { const createElement = document.createElement.bind(document); document.createElement = (tagName) => { if (tagName === 'canvas') { return { getContext: () => ({}), measureText: () => ({}) }; } return createElement(tagName); }; }); reactjs
  18. ha i see, you an also try Off-topic Forum (esotericsoftware.com) Community are passionate on spine and helpfull. Maybe more chance to get help for your case. If you need converting, i also made a app Spine Auto Batch convert 3.x to 3.8 breakChange [TUTO] ยท Issue #301 ยท pixijs/pixi-spine (github.com) but you need spine installed and nodejs in your env. try install the trial, it can maybe work.
  19. From what i remember, ShockwaveFilter is a pain to understand and calibrate. Coord are relative to screen coord if am not wrong, but am not remember. What i deed to fully debug and understand this filter is add a Gsap timeline controler, to play pause and slow the filter motion and play live with props and coord. This code should help you ? maybe gl note: look for the array center[], if am not wrong this can help to position. const doShockWave = ()=>{ const tl = gsap.timeline({id:'doShockWave'}) const ease = SlowMo.ease.config(0.1, 0.7, false);
  20. EUREKA !!! here solution if (D > 0) { // HERE THE HACK D /= Math.sqrt(matrix.b * matrix.b + matrix.d * matrix.d); } https://www.pixiplayground.com/#/edit/N6zctqo-SZzlTatUNz1b_ Try slide perspective, _angle and zoom, everything is correctly fixed to camera, no more scale. now we maybe need a kind of flag or add new AFFINE formula ? !
  21. or hey @ivan.popelyshev, is can be related to this ? i think if am not wrong, he talk about the scalling. https://github.com/pixijs/pixi-projection/pull/37#issuecomment-475968958 if i remember i added AXIS_XR = 5 , where is mixed 2 and 4 (AXIS_XR and point ) and result make will point behavior but with keep the scale of the camera. its can be a lead !? but not sure, i dont want say shit, is far in my head, i not remember. @DubMan try add this formula and show if is work.
  22. hum i dont know sorry, am not able to visualise your architecture in my head. What your can try is hack the affine Math to your case. https://github.com/pixijs/pixi-projection/blob/f1b7bc99942d16f5d20eb69ca082d1fdfa4f5731/src/proj3d/Matrix3d.ts#L424 try create a new affine conditions and make some random math test until you get the desired result!
  23. without code is hard to said ! i take a chance , try . circleContainer3d.proj.affine = 4; // or circleSprite.proj.affine = 4; Or test my demo, is work ! https://www.pixiplayground.com/#/edit/y8XL9gjdVS97_2qrEGlbg open the datGui CHARA panel, and play with the Affine slider. With 4, You should see live , the monster without perspective and not effected by camera projections. Is this help ?
  24. Am sure you will not keep your variable hard coded like this , but basic math operations from rotations should do the jobs ! childRect.rotation = -newRotation/newRotation-0.5; for this demo is work, in a complexe case you will need make more solide math algo.
  • Create New...