• Content Count

  • Joined

  • Last visited

About grosjardin

  • Rank

Recent Profile Visitors

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

  1. Well I guess I'm a step closer after trying a new webpack config. I am using the style.font property as shown in the doc but I get a message saying the property is deprecated. So maybe that's why it's struggling to find the font afterwards..?
  2. Trying my best to debug this step by step here. It's tough to get where it breaks. PIXI does not let me know if what being passed to the loader is not recognized. I'll dig into webpack loader doc
  3. What is passed in loader.add() ? I found this post Unfortunately it didnt solve my case
  4. Yes this is probably a webpack config issue...
  5. I know there's a few topics on the subject already, but I have been banging my head on the wall for some hours now. I am having a hard time loading a .fnt file into pixijs. Here's the process I have been through. 1) Using bitmap Font generator for windows I've exported a .fnt file in XML format. 2) Adding the .fnt to the loader const loader = new PIXI.Loader() loader.add("fnt", require('../../assets/sprites/arial.fnt')); loader.load(function() { const bitmapFontText = new PIXI.BitmapText('BITMAP FONTS', { font: '24px Arial' }); bitmapFontText.anchor.set(0.5) bitmapFontText.position.x = 50 bitmapFontText.position.y = 50 this.viewport.addChild(bitmapFontText); }); Then I had the error : Module parse failed: You may need an appropriate loader to handle this file type Which I think I solved this way inside my webpack.config using File-Loader : module: { rules: [ { test: /\.fnt$/, use: [ { loader: 'file-loader', options: { name: '[./src/assets/sprites][name].[ext]', }, }, ], }, ], } 3) Creating PIXI.BitmapText : It seems my font is still not fully loaded because I get this error : TypeError: Cannot read property 'size' of undefined What am I missing? PS: I made sure I was using the Face attribute from the arial.fnt file in { font: '24px Arial' }
  6. I have an issue adding Sprites inside my Pixi app when the amount becomes to big. It works well with couple hundreds, but when it is 4000+, only a portion of the Sprite Textures will be drawn on the app. Is looping through an array of objects to create Sprites and add them one by one a bad idea? Should I try to create all of them in firsthand and then add them to my container all at once by passing them as a an array of argument to addChild() ? What would be the best practice. Here is the code I am using. Array of 4000+ objects would be elements. this.container = new PIXI.ParticleContainer(); this.viewport.addChild(this.container); this.elements.forEach((f) => { const sprite = new PIXI.Sprite(PIXI.Texture.WHITE); tile.x = f.position.x; tile.y = f.position.y; tile.width = tile.height = this.tileSize; tile.tint = 0xC1DBE3; this.container.addChild(sprite); });
  7. I'm not sure I understand how PIXI Point can help me. I still need a click event no? What do I pass to toWorld() ? EDIT: Thanks, this works'pointerdown', (e) => { this.rectangleStart = this.viewport.toWorld(, })
  8. Hi, I am trying to achieve the same results with Pixi-viewport's world coordinates. I didnt find any event in the pixi-viewport API that would give me the mouse-down / mouse-up coordinates, except drag-start and drag-end, but using those without actually dragging doesnt seem possible. Any idea how to get the world coordinates mouse points ? Thanks
  9. I need to find a way to make the viewport big enough. The image is just a 744KB PNG background. There are certainly games with that big of a viewport. Probably tiling the same texture would make my life easier. So if I understand correctly. This isnt about the size of the viewport itself? EDIT: There was indeed no reason for my img to be that big. I tiled a 3000px x 3000px Sprite instead. Probably will learn how to implement culling() to optimize this.
  10. I am trying to set a Sprite as a background in my viewport. The grid.png is 23040 x 9984 pixels. .add("grid", require("./assets/grid.png")) .load((loader, resources) => { const grid = new PIXI.Sprite(resources.grid.texture); grid.anchor.set(0, 0); grid.scale.set(1); this.container.addChild(grid); }); The Sprite shows in my Container but only in black. If I try with a smaller png (25 x 25 pixels) it works. I also made sure my viewport world width and height were big enough : this.viewport = new Viewport({ screenWidth: 953, screenHeight: 409, worldWidth: 25000, worldHeight: 10000, interaction: }); Here is the sandbox code
  11. About that, do you know if its possible to add a Container inside a Particle Container ? To make the grid, looping over 250k + Sprites and adding them in on Particle Container is way too heavy. I'm trying to find a way to pack multiples 10x10 sprites in a container and then loop over that container so I can reduce the iterations. Having that 10x10 shape drawn to a PIXI.Graphics is tough to manage, or impossible.
  12. Yes, well I'm learning about it over time while trying things 😀 Since I only need interaction on what is being drawn I implemented this : this.viewport.on("clicked", (e) => { if ( > 0 && > 0) { const x = Math.floor( / 32) * 32 const y = Math.floor( / 32) * 32 this.drawNewTile(x,y) } }) methods: { drawNewTile(x,y) { let square = new PIXI.Graphics(); square.beginFill(0xC1DBE3); square.drawRect(x, y, 25, 25); square.endFill(); // Opt-in to interactivity square.interactive = true; square.buttonMode = true; this.viewport.addChild(square); }}
  13. Taking a step back, having event listener on 250 000 tiles dosent look feasible. Maybe the best strategy would be to get the world x,y coordinates after mouse click and draw any shape on the canvas according to those.
  14. Well the only interaction I need is being able to get the target x, y and save those positions into an array, and draw new Sprites on them. It looks possible if I am not mistaken Although I am still trying to debug this.
  15. I am trying with the Particles Container. Any idea why I get : Some PIXI event get a null error but I dont know where its coming from.