jonforum

Members
  • Content Count

    223
  • Joined

  • Last visited

  • Days Won

    2

jonforum last won the day on June 12

jonforum had the most liked content!

About jonforum

  • Rank
    Advanced Member
  • Birthday 02/01/1987

Profile Information

  • Gender
    Male
  • Location
    canada/quebec

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  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