grosjardin

Members
  • Content Count

    12
  • Joined

  • Last visited

About grosjardin

  • Rank
    Member

Recent Profile Visitors

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

  1. 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 this.app.renderer.plugins.interaction.on('pointerdown', (e) => { this.rectangleStart = this.viewport.toWorld(e.data.global.x, e.data.global.y) })
  2. 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
  3. 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.
  4. I am trying to set a Sprite as a background in my viewport. The grid.png is 23040 x 9984 pixels. this.app.loader .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: this.app.renderer.plugins.interaction }); Here is the sandbox code https://codesandbox.io/s/pixi-sprite-loading-cn7re?file=/src/App.vue:572-875
  5. 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.
  6. 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 (e.world.x > 0 && e.world.y > 0) { const x = Math.floor(e.world.x / 32) * 32 const y = Math.floor(e.world.y / 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); }}
  7. 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.
  8. 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 https://pixijs.download/dev/docs/PIXI.ParticleContainer.html Although I am still trying to debug this.
  9. 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. https://codesandbox.io/s/zen-flower-5q09u?file=/src/App.vue
  10. Thank you I will see if Particle Container does the trick even if it lacks the most advanced functionalities. I'm not sure I undertand your second sentence. What do you mean by statics and having several graphics? Isn't it already what I am using? Thanks again.
  11. I am using pixi.js to create an interactive grid. This grid is composed of PIXI Graphics rectangles. I am now creating a layout of 25000 rectangles and the browser is having a hard time to process it (code sandbox below) This is my setup : setup() { // making a 30 x 13 grid of tiles for (let i = 0; i < 25000; i++) { let square = new PIXI.Graphics(); square.beginFill(0xF2F2F2); square.drawRect(0, 0, 25, 25); square.endFill(); // Opt-in to interactivity square.interactive = true; square.buttonMode = true; square.on('pointerdown', this.onButtonDown); // square.on('pointerover', this.onButtonOver); // square.on('mouseout', this.onButtonOut); square.x = (i % 30) * 32; square.y = Math.floor(i / 30) * 32; // add squares to stage this.viewport.addChild(square); } } Is there a way to optimize this or have I maxed out Canvas capacities ? https://codesandbox.io/s/zen-flower-5q09u?file=/src/App.vue
  12. I am learning PixiJS inside a VueJS component following the Pixi tutorial and I the console shows this error : <template> <div> {{ displayPixi() }} </div> </template> <script> import * as PIXI from 'pixi.js' export default { name: 'HelloWorld', methods: { displayPixi() { return new PIXI.Application({width: 256, height: 256}) } } } </script> How do you load Pixi instances in VueJS ? Thanks for the help.