Fliggledip Posted April 6, 2022 Share Posted April 6, 2022 (edited) Hi, I'm new to the world of game dev but what I am trying to accomplish seems simple enough I just don't know how to go about it. I want to create a canvas area for now of 1,000 pixels by 1,000 pixels. A total of 1,000,000 pixels. I need each of these objects to be clickable, able to change their color and able to assign their coordinates on the canvas. How can I do this? I'm having a hard time figuring it all out. I've taken the maggot example and I've made it draw 1,000,000 sprites, but they don't fill the 1,000 x 1,000 canvas all the way. Below is the example square.png is a 1x1 png that is white. attached is an image of what it creates. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Pixel Wars</title> </head> <body> <!--<img src="img/square2.png" />--> <script src="https://pixijs.download/release/pixi.js"></script> <script> const app = new PIXI.Application({ width: 1000, height: 1000 }); document.body.appendChild(app.view); const sprites = new PIXI.ParticleContainer(1000000, { scale: true, position: true, rotation: true, uvs: true, alpha: true, }); app.stage.addChild(sprites); // create an array to store all the sprites const maggots = []; const totalSprites = app.renderer instanceof PIXI.Renderer ? 1000000 : 100; let i = 0; let x = 0; let y = 0; for (i = 0; i < totalSprites; i++) { // create a new Sprite if (x === 1000) { x = 0; y++; } const dude = PIXI.Sprite.from('img/square.png'); // set the anchor point so the texture is centerd on the sprite //dude.anchor.set(0.5); // different maggots, different sizes //dude.scale.set(0.8 + Math.random() * 0.3); // scatter them all dude.x = x; dude.y = y; dude.tint = Math.random() * 0x808080; // create a random direction in radians //dude.direction = Math.random() * Math.PI * 2; // this number will be used to modify the direction of the sprite over time //dude.turningSpeed = Math.random() - 0.8; // create a random speed between 0 - 2, and these maggots are slooww //dude.speed = (2 + Math.random() * 2) * 0.2; //dude.offset = Math.random() * 100; // finally we push the dude into the maggots array so it it can be easily accessed later maggots.push(dude); sprites.addChild(dude); x++; i++; } // create a bounding box box for the little maggots // const dudeBoundsPadding = 100; // const dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding, -dudeBoundsPadding, app.screen.width + dudeBoundsPadding * 2, app.screen.height + dudeBoundsPadding * 2); let tick = 0; app.ticker.add(() => { // iterate through the sprites and update their position // for (let i = 0; i < maggots.length; i++) { // const dude = maggots[i]; // dude.scale.y = 0.95 + Math.sin(tick + dude.offset) * 0.05; // dude.direction += dude.turningSpeed * 0.01; // dude.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y); // dude.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y); // dude.rotation = -dude.direction + Math.PI; // // wrap the maggots // if (dude.x < dudeBounds.x) { // dude.x += dudeBounds.width; // } else if (dude.x > dudeBounds.x + dudeBounds.width) { // dude.x -= dudeBounds.width; // } // if (dude.y < dudeBounds.y) { // dude.y += dudeBounds.height; // } else if (dude.y > dudeBounds.y + dudeBounds.height) { // dude.y -= dudeBounds.height; // } // } // increment the ticker tick += 0.1; }); </script> </body> </html> Edited April 6, 2022 by Fliggledip forgot to add some details Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.