Actualmente estoy haciendo un juego 2D en Javascript, pero quiero que el juego tenga diferentes niveles de iluminación, por ejemplo, si tuviera que crear un ciclo de día y noche. Sin embargo, quiero poder cortar agujeros en la iluminación/primer plano, o hacer algo para poder iluminar ciertas partes de la pantalla, por ejemplo, como una linterna o una vela. Nota: también estoy usando la biblioteca P5.js.
La idea más obvia que me vino a la mente para crear un primer plano es simplemente crear un rectángulo con algo de opacidad que cubra toda la pantalla. Esto es bueno, pero ¿cómo se supone que voy a cortar esto? Obviamente, el código a continuación no funcionará porque solo estoy superponiendo otro elemento, y el rectángulo aún está obstruido y no está perfectamente claro.
function setup() { noStroke(); createCanvas(400, 400); } function draw() { background(255); //white fill(255, 0, 0); rect(200, 200, 25, 25); //Example object fill(150, 150, 150, 100); //Gray with opacity rect(0, 0, 400, 400); //Darkness covering entire screen, foreground fill(255, 255, 255, 100) ellipse(mouseX, mouseY, 50, 50); //object that is supposed to penetrate foreground. } <!DOCTYPE html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <script src="sketch.js"></script> </body> </html>¿Cómo haría para hacer esto? Quiero que esto funcione no solo con un fondo plano y formas simples, sino también con imágenes. ¿Hay alguna manera de cortar agujeros en las formas o necesito usar algo más, como un sombreador o una máscara?
Gracias.