Search the Community

EDIT: I just realized, that importing the normal font as a .woff2, defining a `@font-face` within css and then use `fontFamily: fontName` kind of works as well. One more problem though, the font is not being used on initialization, but when I f.e. change its color on hover. How so? How can I make it use the font from the very beginning? OLD: I'm currently trying to load a custom font to use is in combination with `PIXI.text()`. I got everything set up, the text is being displayed etc. - the custom font is not working though. To use a font, I read online, that it's necessary to create an XML file. After converting my .ttf to XML .fnt using Littera I added it to my project and called the loader. I don't know why it's not working, but `console.log(resources.font)` returns, what looks to me, a font object. How is it still not working? constructor($el, app) { this.app = app; this.title = $el; const loader = new PIXI.Loader(); loader.add("font", "/assets/fonts/font.fnt").load((loader, resources) => { this.text = new PIXI.Text(this.title.innerHTML, { fontFamily: "font", fontSize: 120, fill: "transparent", stroke: "white", strokeThickness: 1 }); this.getPosition(); this.app.addChild(this.text); }); } Using `fontFamily: resources.font` instead returns the following error: FYI: I added the .fnt file to the appendix. font.fnt RL Unno.woff2

Hi, I'm new to PIXI and thus far really like working with it. I posted this issue in response to a previous, unrelated issue, so I thought making a new topic made more sense. To summarize my project, I'm I'm overlaying one sprite sheet animation with another, which works perfectly except for loading so many json and sprite files. I'm currently working on optimizing that, but I'm not completely comfortable with the loader class just yet. Maybe someone can make a suggestion as to more efficient coding. Currently the following code is called on click of a thumbnail of which there are three, each loading a pair of sprite sheets overlaying each other. It works, but I feel there must be a cleaner way of doing this without clearing the loader and reloading every time the user goes between the thumbnail options. Currently I'm making two arrays each containing multiple JSON files with sprite sheet data. This works, but I'm having to call two separate functions for each load event. I tried assigning an ID to each "add" method, but accessing it that way through an error, which I suspect is due to the URL's being in an array. My questions are: Is there a way to load all of the assets on page load, then access them via user click so as not to wait for the loader? I assumed once they were loaded I wouldn't need to worry about it again, but got an error about reloading existing assets, hence the inclusion of "loader.reset();". Finally, is there a method of taking care of all of the frames in one load event rather than calling two for each set of sprite sheets and JSON I'm loading? I'm guessing adding an ID to the "add" methods on the loader would be involved. The following code is working, but I feel I'm missing something and it could be far cleaner and more efficient. var loader = new PIXI.loaders.Loader(); // draw spritesheets to canvas var animate = function() { requestAnimationFrame(animate); renderer.render(stage); }; function loadModels(modelName, spriteNumber, frameNumber) { var faceAssetsToLoad = []; var lipsAssetsToLoad = []; for (var i = 0; i < spriteNumber; i++) { faceAssetsToLoad[i] = './img/spritesheets/' + modelName + '/face/' + modelName + '_' + i + '.json'; lipsAssetsToLoad[i] = './img/spritesheets/' + modelName + '/lips/' + modelName + '_' + i + '.json'; } loader.reset(); loader.add(faceAssetsToLoad).load(onFaceAssetsLoaded); loader.add(lipsAssetsToLoad).load(onLipsAssetsLoaded); function onFaceAssetsLoaded() { var faceFrames = []; for (var i = 0; i < frameNumber; i++) { var val = i < 10 ? '0' + i : i; if (val > 99) { faceFrames.push(PIXI.Texture.fromFrame('' + modelName + '_00' + val + '.jpg')); } else { faceFrames.push(PIXI.Texture.fromFrame('' + modelName + '_000' + val + '.jpg')); } } faceMovie = new PIXI.extras.MovieClip(faceFrames); faceMovie.position.x = 0; faceMovie.position.y = 0; faceMovie.anchor.set(0); faceMovie.animationSpeed = 0.417; stage.addChild(faceMovie); faceMovie.play(); animate(); } function onLipsAssetsLoaded() { var lipsFrames = []; for (var i = 0; i < frameNumber; i++) { var val = i < 10 ? '0' + i : i; if (val > 99) { lipsFrames.push(PIXI.Texture.fromFrame('' + modelName + '_00' + val + '.png')); } else { lipsFrames.push(PIXI.Texture.fromFrame('' + modelName + '_000' + val + '.png')); } } lipsMovie = new PIXI.extras.MovieClip(lipsFrames); lipsMovie.alpha = 0.6; lipsMovie.position.x = 0; lipsMovie.position.y = 0; lipsMovie.anchor.set(0); lipsMovie.animationSpeed = 0.417; lipsMovie.tint = currentShadeHex; stage.addChild(lipsMovie); lipsMovie.play(); animate(); } } // click event which starts the loader $('#modelThumbs li').on("click", function() { var ID = this.id; switch (ID) { case "1": loadModels("1", 58, 521); break; case "2": loadModels("2", 26, 233); break; case "3": loadModels("3", 34, 304); break; } }); I know there's a lot going on there, but any help would be great. This framework is awesome, btw. For the sake of dispelling any talk from my team about using createjs for this project, I built a createjs version for comparison. The Pixi version blew the doors off the createjs version. thanks, Rich