• Content Count

  • Joined

  • Last visited

About MrBill

  • Rank

Recent Profile Visitors

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

  1. I actually already have implemented fontfaceobserver after my previous thread a month earlier when I asked about custom fonts. To me, It wouldn't make sense for the Labels to work and the Buttons to not in the same session if they use the same font. I'll post my code for that too though just in case im wrong: Engine.prototype.loadAllFonts = function(callback){ allFonts = this.assets.get(this.fontsKey); allFonts = => new FontFaceObserver(font).load()); Promise.all(allFonts).then(callback); }; Where allFonts is an object based on this .json file: { "customFonts": [ "Bitmgothic" ] } When I have time I'll take a look at the code example jonforum posted to see if I can implement a fix.
  2. I've noticed a small visual bug with the menu I have. When I startup the game for the first time in the browser (in a private window with no cookies), the "label" objects have their fonts properly display but the "button" objects do not. The buttons appear to display the default font instead. However, once I have refreshed the page at least once, all fonts display properly for every subsequent refresh. So this has me thinking that the font is not loading into the button object fast enough before it's drawn the first time and I'm wondering how I can fix that. Here's some relevant code: This function is responsible for creating the PIXI.Text for my custom label class. Renderer.prototype.setLabelGraphic = function(label){ let message = label.text; let style = this.textStyles[label.textStyle]; let text = new PIXI.Text(message, style); label.graphic = text; }; This function is responsible for creating the PIXI.Text and Rectangle for my custom button class. Renderer.prototype.setButtonGraphic = function(button){ let minimumWidth = 150; let minimumHeight = 50; let container = new PIXI.Container(); // Create label component. let message = button.text; let textStyle = this.textStyles[button.textStyle]; let text = new PIXI.Text(message, textStyle); // Create button component. let rectangle = this.configureButtonRect(; let rectangleWidth = (text.width < minimumWidth) ? minimumWidth : text.width; let rectangleHeight = (text.height < minimumHeight) ? minimumHeight: text.height; rectangle.drawRect(0, 0, rectangleWidth, rectangleHeight); rectangle.endFill(); // Center text within containing rectangle. let center = [(rectangleWidth / 2) - (text.width / 2), (rectangleHeight / 2) - (text.height / 2)] text.position.set(center[0], center[1]); // Combine them into the container. container.addChild(rectangle); container.addChild(text); button.graphic = container; }; The configureButtonRect in the previous: Renderer.prototype.configureButtonRect = function(buttonStyle){ let rectangle = new PIXI.Graphics(); let colour; if(buttonStyle === "default"){ colour = 0xFFBF75; rectangle.lineStyle(2, 0xCA826C, 1); } else console.error(`Error configuring button rectangle: {buttonStyle} is not a valid button style.`); rectangle.beginFill(colour); return rectangle; }; Drawing of either object is simply add their respective graphic attribute to the stage. I feel that the solution is to simply just have the game wait for the fonts load before adding to the container via promises or callbacks, but I'm not exactly sure which part of the code would be responsible for the delay.
  3. Got fontfaceobserver to work pretty easily. Appreciate the help.
  4. Working on a minimal gui layer for my project. Text displays fine currently, but I was wondering how to load a custom font for PIXI.Text / PIXI.TextStyle? I looked around and saw webfont loader (link) being recommended for this problem. This looks fine, and I'm willing to use it if it's too inconvenient otherwise, but I was wondering if there was an alternative (more manual) way of doing this? I was thinking of having the fonts stored on the website locally, or retrieve them before the game starts using google fonts. The loader seems somewhat overkill for what I want and I've made it a minor challenge to use as much vanilla javaScript as possible for the project. Appreciate any input.
  5. Looks like I fixed it by doing .destroy(true) for PIXI.Text and PIXI.Graphics objects and clearing the Texture cache with PIXI.utils.clearTextureCache(). I really appreciate all the responses I got! Thank you! EDIT: Though I wonder if there's a good way to only remove certain textures. EDIT 2: I think I understand now. Here's what my code looks like. Currently I only remove the generic pixiid textures being cached that are leading to a memory leak. Good thing the API documentation has links to the source code! TextureManager.prototype.clearTextureCache = function(clearAll=false){ let generic = "pixiid"; if(clearAll === true){ PIXI.utils.clearTextureCache(); } else { let cache = PIXI.utils.TextureCache; Object.keys(cache).forEach(key => { if(key.startsWith(generic) === true){this.removeFromTextureCache(key)}; }); cache = PIXI.utils.BaseTextureCache; Object.keys(cache).forEach(key => { if(key.startsWith(generic) === true){this.removeFromTextureCache(key, cache)}; }); }; };
  6. Can't figure out how to deal with memory leaks for the (I believe, but not 100% certain) PIXI.Text and PIXI.Graphics objects. Currently I create and .destroy() these every frame but it's still being referenced somewhere and I don't know where. I think it's the PIXI.Text objects mainly because Firefox's memory snapshots in Tree Map show the Canvas continuously increasing in memory size. Do PIXI.Graphics also use the canvas? I created this function that will call whenever I want to remove a reference from the Cache. I only call this for objects with generic ids like "pixiid_7". I get the ids from the PIXI.Text.canvas._pixiid TextureManager.prototype.removeFromTextureCache = function(id){ let cache = PIXI.utils.TextureCache; if(cache[id]){ delete cache[id]; } else console.error(`Error while trying to delete from TextureCache: ${id} does not exist as a property.`); }; I'm not sure if this works at the moment because I still can't correctly pinpoint which objects are added to TextureCache and which are not (the error message fires off). Additionally, TextureCache doesn't have any documentation to work with. My destroy function currently looks like this: TextureManager.prototype.destroyObject = function(object){ switch(object.constructor){ case PIXI.Text: let cachedId = object.canvas._pixiId; object.destroy(); this.removeFromTextureCache(cachedId); break; default: object.destroy(); }; }; Basically I need help figuring out how to remove all traces of the different types of objects. I want to rework my game framework to reuse text like how I did for sprites. But without knowing how to properly delete them memory leaks are inevitable.
  7. To anyone having similar issues, I've cut down significantly on memory leaking by reusing sprites & textures for persistent entities like the player, and storing all disposable pixi graphics objects (like sprites for individual tiles to be drawn) in a pool (represented as a JavaScript Set object). Every frame the disposable objects are destroyed and the pool is cleared. I also implemented view culling for the tiles. I will probably look into combining all the tiles textures into a single texture next to keep the size of the pool low to lower the amount of iterations each frame.
  8. Could you elaborate on this? Not too well versed with the graphics back-end so I'm attempting my proposed solution first. I set it to call destroy() on every object that is drawn in a single frame. Renderer.prototype.addToGarbage = function(object){ this.garbage.push(object); }; Renderer.prototype.garbageCollect = function(){ this.garbage.forEach(e => e.destroy()); this.garbage = []; }; Renderer.prototype.draw = function(child){ this.addToGarbage(child);; }; Renderer.prototype.clear = function(){; this.garbageCollect(); }; Where this.garbage is an array that contains all the objects being drawn. It kinda works. There's some decrease in the amount of memory being leaked but it's still leaking. By snooping around the Firefox developer settings I was able to find that indeed the PIXI.Text constructor is partly responsible. You mentioned something about canvases? How can I account for those?
  9. I couldn't seem to find a clear solution online that would apply to me anywhere but if this has been discussed elsewhere feel free to link me there. My game's fps dips after running for only a few minutes. Shortly after my os slows down because my game uses up all the memory of the browser. I suspect the culprit is how I currently draw sprites because my "game" currently only involves placing a few sprites/text on the screen. I have my custom game framework setup to only really use Pixi.js primitives like PIXI.Texture, PIXI.Sprite, PIXI.Text, etc. My Spritesheet class currently contains a single texture attribute that refers to the texture of the entire spritesheet. When it's time to take a single sprite from the Spritesheet, the Spritesheet object creates a copy of its texture attribute and creates a new PIXI.Sprite object using that copy. I create a copy of the texture because changing rect of the Spritesheet's texture attribute would affect all sprites that use that Spritesheet. Drawing involves only adding the PIXI.Sprite object to the stage and clearing just removes all children from the app stage (I don't currently use containers). Here's the method that creates a sprite from the Spritesheet: SpriteSheet.prototype.getSprite = function(index_X, index_Y){ let rect = this._getRectFromIndex(index_X, index_Y); let texture = new PIXI.Texture(this.texture); texture.frame = rect; return new PIXI.Sprite(texture); }; this._getRectFromIndex is just an internal calculation that returns the PIXI.Rectangle object for the frame Here's the draw method: Renderer.prototype.draw = function(child){; }; And here's the clear method: Renderer.prototype.clear = function(){; }; I'm pretty sure creating new Textures/Sprites every frame and only clearing the stage is the cause so I'm wondering what's the best way to improve performance with what I've given. Would just iterating and destroying these textures in clear every frame suffice?