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>
