jonforum

Members
  • Content Count

    223
  • Joined

  • Last visited

  • Days Won

    2

Everything posted by jonforum

  1. it maybe a engine issue. Firefox use mozilla right ? chrome,edge,vivaldi use chromium engine. maybe try search in the web with thoses keyword. `mozilla` `memoryleak` `canvas` `webgl` `refresh`
  2. left is global mem and right gpu mem from your navigator. do those value grow when you refresh your navigator and snapshot each time? it should not
  3. did you have the same thing if you do Ctrl + F5 orCtrl + Shift + R this shortcut refresh with empty cache.
  4. spine.state.addListener({ event: checkEvent, });
  5. look the video, it will inspire you to make you own importer. It optimised for spine2D , but the json have all information. You can also try make your own actionScript and copy some code from this script. Just read licence carefully, am not sure if is M.I.T and you allow to copy source.
  6. dont forget https://github.com/EsotericSoftware/spine-scripts/tree/master/photoshop it also create a json and template from photoshop projets
  7. hum, this can maybe give you some inspiration. When i boot my app.exe it load from node first. this is not finish yet but here how it can look. window.onload = function() { //#STEP1: CHARGER LES LIBS const jsLibs = [ //#PIXI "pixi", "pixi-filters", "pixi-layers", "pixi-lights", "pixi-spine", // "pixi-heaven", "pixi-projection-spine", "pixi-sound", "pixi-zero",//custom //#TWEEN "TweenMax", "TimelineLite", "EasePack", //#OTHER "papaparse", "polyfill",//custom ]; //#STEP2: CHARGER LE LOADER const jsLoader = [ 'engine/loaders', ]; //#STEP3: PRELOAD DATA //#STEP4: CHARGER LES CORE const jsCores = [//TODO: //#UTILITY "utility/ECC", //#ENGINE "engine/app", "engine/stage", "engine/displayGroups", "engine/camera", "engine/systems", "engine/battlers", "engine/players", //#GAME OBJETS "obj/objs", //#SCENE "scene/scene_base", "scene/scene_Loader", "scene/scene_Boot", "scene/scene_IntroVideo", "scene/scene_Title", "scene/scene_Map1", //#UTILITY "utility/pixiMapEditor", ]; //#STEP5:Trouver et scanner tous les DATA2, creer une list dans loader //#STEP6:$app.initialize() let step = 0; function nextStep() { switch (++step) { case 1: loadJs(jsLibs,'libs'); break; case 2: loadJs(jsLoader,'core'); break; case 3: $loader.mainLoad(nextStep); break; case 4: loadJs(jsCores,'core'); break; default:$app.initialize();break; } }; function loadJs(links,folder) { const head = document.getElementsByTagName('head')[0]; let length = links.length; links.forEach(name => { const script = document.createElement('script'); script.async = false; script.src = `js/${folder}/${name}.js`; head.appendChild(script); script.onload = function() { if(!--length){nextStep()}; }; }); }; nextStep(); i cool way to scan all folder from you projet and create link files for after use it in pixijs /** SCAN ALL RESSOURCE IN DATA2 and create link */ const scanDATA2 = () => { const recursive = require('recursive-readdir'); function ignoreFunc(file, stats) { const isDirectory = stats.isDirectory(); if(stats.isDirectory()){ return file.contains('SOURCE') || file.contains('source'); }else if(stats.isFile()){ return !file.contains('.json') && !file.contains('.webm'); }; }; recursive("data2", ["secure.dll", ignoreFunc], (err, files) => { files.forEach(PATH => { const split = PATH.replace('.','\\').split('\\'); const name = split[split.length-2]; if(name.contains('-')){ // isMultipack const _name = name.split('-')[0]; // nom sans -0 !this.LINKS[_name] && (this.LINKS[_name] = []); this.LINKS[_name].push( {name:name,path:PATH.replace(/\\/g,"/")} ); }else{ this.LINKS[name] = PATH.replace(/\\/g,"/"); }; }); return nextStep(); }); }; you will get all your project files links like that's for easily use pixiloader ! note : check for ` loader.onComplete.add((loader, res) => { callback() }); when loader finish you can call a callback and start a new loader with new stuff.
  8. i use this on my side But my app are intended to be played in full screen, frame and scale mode are luxe feature. requestFullScreen() { var element = document.body; if (element.requestFullScreen) { element.requestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } this._fullScreen = true; }; cancelFullScreen() { if (document.cancelFullScreen) { document.cancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } this._fullScreen = false; }; scaleToWindow() { const canvas = this.view; let scaleX, scaleY, scale, center; scaleX = window.innerWidth / canvas.offsetWidth; scaleY = window.innerHeight / canvas.offsetHeight; scale = Math.min(scaleX, scaleY); canvas.style.transformOrigin = "0 0"; canvas.style.transform = "scale(" + scale + ")"; if (canvas.offsetWidth > canvas.offsetHeight) { if (canvas.offsetWidth * scale < window.innerWidth) { center = "horizontally" } else { center = "vertically" }; } else { if (canvas.offsetHeight * scale < window.innerHeight) { center = "vertically" } else { center = "horizontally"; }; }; let margin; if (center === "horizontally") { margin = (window.innerWidth - canvas.offsetWidth * scale) / 2; canvas.style .marginTop = 0 + "px";canvas.style .marginBottom = 0 + "px"; canvas.style .marginLeft = margin + "px";canvas.style .marginRight = margin + "px"; }; if (center === "vertically") { margin = (window.innerHeight - canvas.offsetHeight * scale) / 2; canvas.style .marginTop = margin + "px";canvas.style .marginBottom = margin + "px"; canvas.style .marginLeft = 0 + "px";canvas.style .marginRight = 0 + "px"; }; canvas.style.paddingLeft = 0 + "px";canvas.style.paddingRight = 0 + "px"; canvas.style.paddingTop = 0 + "px";canvas.style.paddingBottom = 0 + "px"; canvas.style.display = "-webkit-inline-box"; return scale; };
  9. There is somes ways to implement a camera system. This will vary depending on your type of project and need. However I am not successful at understanding your codePen sorry, it look like a video player ?. On my side i use this ways. App=>stage=>camera=>scene=>sprites... The camera are controlled by .pivot and the scene position are fixed. Also camera are not the reel name in english, i think you look for the keyword `viewport` This is a good example of a camera view-port. https://github.com/davidfig/pixi-viewport Hope this can help you edit: App control listener, tikers and master app stage control container and loader and display stuff. camera control rendering. scene control sprite and stuff.
  10. did you clear before ? PIXI.utils.clearTextureCache();
  11. I suggest to add a temp method to debug and understand. function debug() { const d = new PIXI.Sprite(PIXI.Texture.WHITE); d.anchor.set(0.5); return d; }; than you can create your sprite and understand how pivot anchor rotation will work. const sprite = new PIXI.Sprite(texture); // setup anchor, pivot rotation .... sprite.addChild(debug());
  12. If you really want move sprites individually and not from container this is more optimised for (let i=0, l=spriteContainer.children.length; i<l; i++) { spriteContainer.children[i].x-=10; }; But move the container are the best practice. spriteContainer.x-=10;
  13. yeah this can be useful, i tried a ugly thing from long ago. It was look similar to this 🤮🤢 https://pixiplayground.com/#/edit/WIOs7TDWP_4ABV_2fiRnC The only solution i found for get good text quality on zoom inside a container, it multiply the font size and downscale the sprite, if i need zoom on text it will be fine but affect memory and performance.
  14. hum he maybe create the event like this. mask.interactive = true; mask.on('pointerdown' , this.pointerdown_mask , this); mask.on('pointerup' , this.pointerup_mask , this); mask.on('mouseupoutside' , this.mouseupoutside_mask , this); mask.on('mousewheel' , this.mousewheel_mask , this); than you can via listener make a hittest to emmit the scroll event. document.addEventListener('wheel',(e) => { // authorize zoom only when is inside canvas if (e.path.contains($app.renderer.view)) { const hitTest = $mouse.interaction.hitTest($mouse.position); // Dispatch scroll event if (hitTest) { hitTest._events.mousewheel && hitTest.emit('mousewheel',e,hitTest) || $camera.onMouseWheel.call($camera,e); }else{ $camera.onMouseWheel.call($camera,e); } }; }); But you should share code to understand what is your issue. [pixiplayground or codepen ] but from what am understand , no is not possible, because the events alway look for sprite order. So if you have a big sprite in your screen + interactive . All interactive sprite under will no emit. you can do a custom hittest maybe ?? Or think you will need a kind of z-index for the events.. maybe. On my side i alway setup my stuff to avoid this issue.
  15. hi, did you try filter with google video with pixijs ? I made you a link tag include video filters for french, english, russian ... i don't know your natal language ? You have a lot of video in those 3 language. Maybe also try add spanish , china and korean... it should work, here https://www.google.com/search?q=pixijs&lr=lang_en|lang_fr|lang_ru&newwindow=1&tbs=lr:lang_1en|lang_1fr|lang_1ru,srcf:H4sIAAAAAAAAACXIQQ6AIAwF0duwMWHngSr9QaKlSSk23t4Ed_1Nme3X6PJCLSvJo7rDVp8u9VxIwnrEORQQZ_16gG9KHlWirKEHRXy03TB2f94ZtUAAAA&tbm=vid&source=lnt&sa=X&ved=0ahUKEwiF4N2axZviAhXyV98KHVSGAskQpwUIIA&biw=1502&bih=750&dpr=1.25 you can affine filter with some tag like, `start`, `tuto`, `intro`, `node` ... book i know only french https://ecitydoc.com/download/prendre-en-main-pixijs-1-posons-les-bases_pdf english https://www.amazon.com/Learn-Pixi-js-Create-Interactive-Graphics/dp/1484210956 https://www.pixijs.com/tutorials
  16. ho ok sorry for the misunderstand. Well from my logic , a pool it good, because it avoid GC to remove and manage too many stuff in same frame. It allow you to decant the emptying of memory, so it will in some case avoid `spike lag` and than a little freeze. Yes i think pooling it a good idea to manage 10k... 20k points with GC. Release 20k objets to GC! you will probably have some spike lag at this frame. `(little freeze)` it's better to have a pool with ref id, and remove these references through a time range if you have a lot of stuff.
  17. hum well i think you need see with a pro of pixiloader, am not very know the api in deep. But on my side here how i proceed to load my sprite Sheets with texturePacker. Maybe you can found some answer here. https://github.com/djmisterjon/PIXI.ProStageEditor/blob/31ad00f173f4d2c5ce99fd19711f687d09d84b45/js/core/loaders.js#L266 Any reason why you don't want use the loader ? it can do a lot of complexe stuff !
  18. yes , if you don't want the pixi.loader , you will need create your textures manually Look para from PIXI.Texture new PIXI.Texture(baseTexture frame, orig, trim, rot, base.data.frames[key].anchor);
  19. where did you see this ? the GC correctly do job here and not create more point than necessary ? If you got 10 000 point in memory after 1 min, something wrong, the 9 point your can see here came from native element in pixijs. Pooling it better if you want keep ref and prevent GC, pixi-sound and greensock have good example of pool system, In greensock, it scan every ~2 sec the pool, and than release for GC. It good for managing no syncro stuff like tween.
  20. on my side am not understand what you asking can you elaborate, maybe i can help.
  21. It reminds me of what has been implanted in this game. https://ncase.me/sight-and-light/ I suppose that you have already got your hands on these articles, I share them in case. it in canvas no pixi but it will be cool to see this in pixidemo ! a codepen ** https://codepen.io/xno/pen/YOQZzw https://codepen.io/pandaec/pen/rzxYNB a jsfiddle ** http://jsfiddle.net/nLMTW/ http://jsfiddle.net/s2un50dp/ Shadertoy ** best performance i think https://www.shadertoy.com/view/4dfXDn Some code for do it in a shader GLSL https://stackoverflow.com/questions/34708021/how-to-implement-2d-raycasting-light-effect-in-glsl and a very good article https://www.redblobgames.com/articles/visibility/
  22. hum, if am not wrong, this kind of stuff should be done in a shader to get good performance. Di you check work of this guys. https://tarvk.github.io/pixi-shadows/build/demos/system/ https://github.com/TarVK/pixi-shadows i think it similar of what your target? a kind of Ray casting. Also @ivan.popelyshev show here how proceed with a kind of ray shadow from a source with shaders. Maybe play with can inspire you. https://www.pixiplayground.com/#/edit/5bqI8BM2qadFFt8eCWc7n ... this will mean, high cpu work instead of gpu ? hope those link can't help you. Also if you can share some code this will help to understand.
  23. you can have equivalence on hit check for pixi like this. hitCheck(a, b){ // colision var ab = a._boundsRect; var bb = b._boundsRect; return ab.x + ab.width > bb.x && ab.x < bb.x + bb.width && ab.y + ab.height > bb.y && ab.y < bb.y + bb.height; }; http://pixijs.download/dev/docs/PIXI.DisplayObject.html#getBounds 100% stable with all plugins it v4.8.6 v5 also but not all plugins are available for now, will need wait maybe ~1 or 2 week maybe for update.
  24. https://pixijs.io/examples/#/textures/gradient-resource.js
  25. i know nothing about apple, but true, it seem you need special hack like xcode? are you allow to do this ? https://developer.apple.com/xcode/ btw, on the video i show you upper, you are allow to connect a ios phone for debug and get log.