jonforum

Members
  • Content Count

    163
  • Joined

  • Last visited

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. sprite.filterArea = new PIXI.Rectangle(x,y,w,h);
  2. jonforum

    Visual Studio Code Intellisense code completion

    also install index.d.ts than add a tsConfig in your root directory It work for me
  3. jonforum

    How to update hitArea of a sprite

    also if this can help you ? debug this https://codepen.io/osublake/pen/eMvZmo
  4. jonforum

    pixi.loader: How to clear resources up?

    you have multiple way to debug memory consumption or you can also comput the process memory befor after with your frameWork or with stats or with the window task manage if you are on window
  5. jonforum

    setting up design resolution for mobile browsers

    set your app game resution and create a method for rescale class _app extends PIXI.Application { constructor() { super({ width: 1920, height: 1080, }); this.nwjs = this.isNwjs() && this.initNwjs(); document.body.onresize = () => { this.scaleToWindow() }; }; 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; };
  6. jonforum

    disable multitouch

    Am not sure but you can also try and experiment around preventDefault. document.addEventListener('eventType', e=> { ifConditions && e.preventDefault(); // prevent this eventType });
  7. jonforum

    Interaction Manager hitTest Example

    you can also take a look to emit example here from my scroll event. suppose here you already create your own event attache to a display objet. sprite.on('zoomTileLibs', wheelInLibs ); for this special context i use document.addEventListener('wheel', wheel_Editor); but is not necessary. const found = $mouse.interaction.hitTest(mousePosition); // Dispatch scroll event if (found) { return found.emit('zoomTileLibs', event); };
  8. and another ways https://github.com/djmisterjon/PIXI.ProStageEditor/blob/2e81ffc12c1ec7f2646fd581a021e6086fcf5b7a/js/core/loaders.js#L203
  9. jonforum

    BitmapText Pivot & Kerning

    easy solution , hum yes and no... ease by style ease by words Ease by letters You need use regex algo and .exec to split text in multi instance by word or letters and get for each letter custom transform? https://regexr.com/ I dont know if this will help you for bitmap text, and if is the same mechanique from pixi text. But here example look for this.computeText(txt); It compute and splitting string text by array, than build text from the plitted array. Hope this can give you inspiration if no body cant give you more nice solution? https://github.com/djmisterjon/PIXI.ProStageEditor/blob/master/js/core/texts.js and very old version prototype https://forums.rpgmakerweb.com/index.php?threads/pixi-text-multi-motions-styles-core-v1-0.86117/ @+
  10. jonforum

    Interaction Manager hitTest Example

    is this can help you ? https://codepen.io/osublake/pen/eMvZmo
  11. jonforum

    Purpose of custom Loader instances

    multi loader are userfull in multiples case. here a context example where i need manage multi loader for texturePacker,s normal,multiPack and animations. it's also much easier to manage and debug and this is impportant for big projet. https://github.com/djmisterjon/PIXI.ProStageEditor/blob/47f284b9419bba509acd0cbc0b3739091c3fc80d/js/core/loaders.js#L175
  12. jonforum

    Font is not Rendered on Safari

    how did you load your fonts ? are you able to share your code ? load_fonts(){ const fonts = [ {name:"ArchitectsDaughter", url:"fonts/ArchitectsDaughter.ttf"}, {name:"zBirdyGame", url:"fonts/zBirdyGame.ttf"}, ]; fonts.forEach(font => { const style = document.createElement('style'); style.appendChild(document.createTextNode(` @font-face { font-family: '${font.name}'; font-style: normal; font-weight: 700; src: url("${font.url}"); } `)); document.getElementsByTagName('head').item(0).appendChild(style); const div = document.createElement('div'); div.style.fontFamily = font.name; document.body.appendChild(div);/* Initiates download in Firefox, IE 9+ */ div.innerHTML = 'Content.';/* Initiates download in WebKit/Blink */ }); let checkFonts = setInterval(()=>{ if( fonts.every(e => document.fonts.check(`12px ${e.name}`) )){ this.fonts = fonts; clearInterval(checkFonts); this.load(); } },60); };
  13. jonforum

    text message dataBase and localisation manager

    thanks @ivan.popelyshev for tips, it solved now. so i will work in scv and with a regex parser. So for those who might be interested in the same subject. Since there is no subject related to that. here a nice ways.. make a sheets with tabs save in SCV and you will get this id;targetCode;frCA;enUS;ar;jp;ru;sp;;;;;; pancart_p1m1_01;0;Salut ceci est une exemple ${i.exp}. Voici l'astuce qui � ${test} Ce text est compatible es6. ;Hi This is an example ${i.exp}. Here's the trick that... ${test} this text is compatible es6.;????? ??? ?? ???? ???? ${i.exp}. ??? ?? ??????... ${??????} ??? ???? ?? es6 ???????.;??????????? ${i.exp} ????????????... ${test} ?????????????? es6?;?????? ??? ?????? ${i.exp}. ??? ????... ${?????????} ???? ????? ???????? ??????????? es6.;Hola este es un ejemplo, ${i.exp}. Aqu� est� el truco... ${prueba} este texto es compatible es6.;;;;;; ;1;ceci est un autre paragraphe, asigner a un personage suivant ! ;This is another paragraph, sign has a following character.;;;;;;;;;; ;;;;;;;;;;;;; ;;;;;;;;;;;;; ;;;;;;;;;;;;; ;;;;;;;;;;;;; demo_intro_b001;;;;;;;;;;;;; use or install a regex parser in your app ex: https://github.com/mholt/PapaParse and load CSV sheets ex: in pixiJS load_textsSCV(){ const loader = new PIXI.loaders.Loader(); loader.add('eventMessagesData', `data/eventMessage.csv`); loader.load(); loader.onProgress.add((loader, res) => { const dataParsed = Papa.parse(res.data); $texts.initializeFromData(dataParsed); }); loader.onComplete.add((loader, res) => { this._textsSCVLoaded = true; this.load() }); }; And here the final formated data parsed structure to use in your game. enjoys
  14. Hi, what king of tool can allow me to manage a text dataBase in Json or javascript ? What the good practice and best way to manage this easily. Example in javascript , it little hard to read and find a message text reference. ! I am open to any suggestion and different approach. I thought I might be looking at Excel and with a JSON converter written in VBA maybe ? class _texts{ constructor(localisation) { localisation = localisation || 'frCa'; this.Conv_Q0I5a_0000 = { frCa:[ ], enUS:[ ], frFR:[ ], ru:[ ], }; this.Conv_Q0I5a_0001 = { frCa:[ ], enUS:[ ], frFR:[ ], ru:[ ], }; }; };
  15. jonforum

    Pause interactions

    did you add the share tikers to app ? when your create your app, try sharedTicker:true class _app extends PIXI.Application { constructor() { super({ //width: 1920, //height: 1080, //antialias: true, // transparent: false, // resolution: 1, sharedTicker:true, //backgroundColor: 0x303030 // powerPreference: SLI&CrossFire GPU, TODO: study me }); //this.nwjs = this.isNwjs() && this.initNwjs(); //this.nwjs.win.showDevTools() //auto-start devTool chromium // document.body.onresize = () => { this.scaleToWindow() }; }; If it not work for any reason, look in ` $app.renderer.plugins.interaction `