jonforum

Members
  • Content Count

    377
  • Joined

  • Last visited

  • Days Won

    11

Everything posted by jonforum

  1. 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 ? !
  2. 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.
  3. 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!
  4. 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 ?
  5. 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.
  6. hi, Forum is not a really good place to poke or report issue. You can poke on official Pixi-sound GitHub. https://github.com/pixijs/pixi-sound or you also have a Slack chat with pixi-sound chanel https://join.slack.com/t/pixijs/shared_invite/zt-dcem1map-uVuVGC7pZ0trF8SrcA2p9g and a Discord chat for general discutions. https://discord.gg/9ugwCED If you want a answers on a forum, you have to take the time to detail your issue , and code and ask concrete questions. Note for ads , in most browser, are controlled by browser policy itself, so medias videos and sounds can be disabled by default and need user autorisation or interaction!
  7. all work fine on my side https://www.pixiplayground.com/#/edit/2hKyMDQglqpFHp31cqoCL if you start in js, this site is good to learn . https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch
  8. The maximum texture size for mobile devices should not exceed 2048. Bigger textures might not be displayed on some devices or might cause jittering sprites. For pc, i never seen issue on my side, my most big texture is 3800*3000 ! and work fine. It should be same for mac ?! To answer your questions, thank you for taking the time to make it readable. 😁 dont exceed 2048*2048 for safe, it maybe related to minimal hardware support, or perform a splitting textures in multiple pack , see this soft https://www.codeandweb.com/texturepacker yes, load texture will not upload to gpu if i dont say shit. take a look on https://pixijs.download/dev/docs/PIXI.Prepare_.html The first rendering will load texture to webgl and gpu. look for uploadBaseTextures loader will add reference in cache, try look in console.log(PIXI.utils.TextureCache) and PIXI.utils.clearTextureCache(); This will just erase root reference of texture for GC, all texture used in sprite will also keep working, until you perform a destroy on sprite to remove all refs or remove sprite ref hitself. avoid use no rendered mask, and many strange childs hierarchy [sprite=>container=>grafic=>container=>text....] , ... other many tips provide here by @ivan.popelyshev, i dont know if is obsolete, but btw is good to know. example : https://github.com/pixijs/pixi.js/wiki/v4-Performance-Tips Also am not remember where, but i seen a wiki on what not to do to avoid broke batching... v5 yes ! you just need time.
  9. Filters are rendered on screen so you need use sprite.toGlobal() on your sprite and normalise values because filters use webgl values, and it normalized on screen coord and then add a tiker or listener to your filter to fellow your sprite coord. https://pixijs.io/pixi-filters/docs/PIXI.filters.BulgePinchFilter.html ex: bulgepinch.center = [1,1] mean the filter is at 100% right and 100% bottom of screen. so you will need to spritepos/screensize to get normalized position of your sprite from screen.
  10. node_id are not a valide attribute in html element. you will need use `.getAttribute('node_id`)` https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
  11. you have many reason from this kind of server error. You will need setting your server related to the error you get. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors These measures are there to prevent anyone from leeching your stuff site , server or bandwidth.
  12. I can help you. but you would need to restructure your code. formatting is unreadable. I know that the technology of this forum is outdated, but it is possible to present things well with tags tools. use script balise with js. if you don't take the time to present things well, it is likely that no one will take the time to help you.
  13. this question hang out, i think very few people have cameras on their pc, include me ! 😟 Will there be a way to simulate a fake image? to see what the issue and help?
  14. For animating stuff you need make your own engine , "pixi is a render library not animations libs", or use gsap or other tween library. Gsap have event to tell you when animation is end. https://pixijs.io/examples/#/gsap3-interaction/gsap3-tick.js But if you want a vanilla way to make your movement engine with pixi, you can take a look here, doing these things yourself is always better! https://github.com/rpgtkoolmv/corescript/blob/182e31449707ba7e406db0485c44c2a9d11e2dcd/js/rpg_objects/Game_Event.js#L84
  15. it should work here a demo for you. can you make small demo to reproduce the issue ? https://www.pixiplayground.com/#/edit/J7rBe3O4pe_pZfxqKRWU_
  16. sure , you can embed your loader with a promise and you can add a event to loader error event. Be sure is attach to your instance of loader if you use multiple loader. resolve or reject your promise with your specifications. app.loader.onError.add((e,ee)=>{ console.log('e,',e,'ee',ee); }) https://pixijs.download/dev/docs/PIXI.Loader.html From documentation, its should also possible to catch errors inside loader.load((loader, resources) => { event You should also allowed to use promise and await for PIXI.Texture.fromURL, because doc say it return promise. PIXI.Texture.fromURL('url').then( ()=>resolve() ).catch( ()=>reject() );
  17. jonforum

    shapes animation

    sure dynamic shape https://pixijs.io/examples/#/graphics/dynamic.js gsap integration https://pixijs.io/examples/#/gsap3-interaction/gsap3-tick.js Also look at blake profil, he have a lot of demo pixi gsap and SVG animations https://codepen.io/osublake/pens/tags/?selected_tag=pixijs
  18. am not sure understand, but if you mean this, is very basic. Here a demo for you. https://www.pixiplayground.com/#/edit/SWEUf-xJbquqr-AsCMCrj hope is help. Note: doc is cool, but you also have a lot of basics demo here. https://pixijs.io/examples/#/graphics/simple.js if you a noob, pixiplayground is also great and fast way to practice and learn some basic behaviors. (types is include) You can also pass the console context to Result frame and play with PIXIjs in console. you also have a nice devtool plugin inspector to help debug or understand what append when you start. it should help your a lot. https://chrome.google.com/webstore/detail/pixijs-devtools/aamddddknhcagpehecnhphigffljadon
  19. i think your code missing document.fonts.add(loadedFontFace); document.fonts.ready.then(()=>{ resolve() }); but am not pro on this subject, i remember nothing.
  20. during your loading phaze, you can do something like this, is how i load my fonts. is vanilla without libs, or you have some great libs on npm for less code. return new Promise((resolve, rej) => { const fontsList = [ new FontFace('ArchitectsDaughter', 'url(fonts/ArchitectsDaughter.ttf)', { style: 'normal', weight: 700 } ), new FontFace('zBirdyGame', 'url(fonts/zBirdyGame.ttf)',{ style: 'normal', weight: 700 }), new FontFace('Flux_Architect_Regular', 'url(fonts/Flux_Architect_Regular.ttf)',{ style: 'normal', weight: 700 }), new FontFace('ampersand', 'url(fonts/ampersand.ttf)',{ style: 'normal', weight: 700 }), new FontFace('ShadowsIntoLight', 'url(fonts/ShadowsIntoLight.ttf)',{ style: 'normal', weight: 700 }), ]; fontsList.forEach(fonts => { fonts.load().then(function(loadedFontFace) { document.fonts.add(loadedFontFace); //document.body.style.fontFamily = '"Junction Regular", Arial'; }); }); document.fonts.ready.then(()=>{ resolve() }); })
  21. map and sort your frame list by key name ! Animations finish with numbers _0001 ,_0002 ... https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
  22. Hi, sorry but PIXI cant load multiPack from tp , but i asked Andreas Loew to add some meta to make this easier. So now you have 2 new meta named related_multi_packs and normal_map inside json to manage easier in PIXI. Check your version of Texture Packer pro, I can't remember what update where this added. here for you a example from my game loader core, it show you one way to manage and process multi-pack , normals, and animations. https://github.com/djmisterjon/ANFT/blob/e4002fab0428331fa5c5e844f1e9426a2795c5ec/js/game/global/loaders.js#L398 Sorry my example is very customised for my game engine and maybe not a good approche for you, i dont think you will can found a better free public demo code. Note this example is old and maybe have some weird code but it work. tips:look also for loader.pre https://pixijs.download/dev/docs/PIXI.Loader.html otherwise you would have to see with @xerver, (Autor) or @AndreasLoew , if they intends to implement a native multipack support in the PixiLoader with new metas from tp, but multi-pack remains a paid premium feature from tp. Sure , create a simple node programme to leech all your ressources files from a directory and build a register! no need to handwrite all your game resources ! Your will just need to have a good structures folders hierarchy. or use npm recursive-readdir https://www.npmjs.com/package/recursive-readdir
  23. i use Array() for the example only, in your case this should work const array = Object.values(this.myNodes).map( (node, index) => { //stuff... // you should have acces to id like this const id = node.node_id; node will be the current obj inside the iteration, and index is the index (number) of the current node inside this.myNodes More info about map https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map
  24. Ok sorry for late, i took a few days off. This was not a pixijs issue but more a js issue. I think you should take a look on basic js before. Otherwise you will have difficulty progressing with pixi js. You have many way to perform this kind of stuff, here fixe version of your demo. https://www.pixiplayground.com/#/edit/a6ztud7gXnRoAnMU6kiUv You also have a plugin for devtool thats help you to debug pixijs (basic only) https://chrome.google.com/webstore/detail/pixijs-devtools/aamddddknhcagpehecnhphigffljadon This is maybe not the best way to learn js, but it should help you. https://developer.mozilla.org/en-US/docs/Learn/JavaScript hope this help PS: IF YOU NEED find a specific pixijs display.Object, yes use the .name=identity are a good way. I also use .name for connect some node ref with react app. Then you can performe somwhere in your app const found = container.children.find(el => el.name === name); pixijs have also it own search from display.Object https://pixijs.download/dev/docs/PIXI.Sprite.html#getChildAt container.getChildAt () container.getChildByName () container.getChildIndex ()
  25. make basic https://www.pixiplayground.com/ i can help