examples: add subtle light and shadow effects to the breakout game, to give it a little depth (#23885)

larpon · web-flow · commit 0210567af2d0 · 2025-03-09T00:44:33.000+02:00
diff --git a/examples/breakout/breakout.v b/examples/breakout/breakout.v
@@ -10,6 +10,9 @@ const designed_width = 600
 const designed_height = 800
 const brick_width = 53
 const brick_height = 20
+const bevel_size = int(brick_height * 0.18)
+const highlight_color = gx.rgba(255, 255, 255, 65)
+const shade_color = gx.rgba(0, 0, 0, 65)
 
 struct Brick {
 mut:
@@ -127,15 +130,11 @@ fn (mut g Game) draw() {
 	sgl.scale(f32(ws.width) / f32(designed_width), f32(ws.height) / f32(designed_height),
 		0)
 
-	roffset, rradius := -5, 18
-	g.ctx.draw_circle_filled(g.paddle_x - roffset, g.height, rradius, gx.blue)
-	g.ctx.draw_circle_filled(g.paddle_x + g.paddle_w + roffset, g.height, rradius, gx.blue)
-	g.ctx.draw_rect_filled(g.paddle_x, g.height - g.paddle_h + 2, g.paddle_w, g.paddle_h,
-		gx.blue)
-	g.ctx.draw_circle_filled(g.ball_x, g.ball_y, g.ball_r, gx.red)
+	g.draw_paddle()
+	g.draw_ball()
 	for brick in g.bricks {
 		if brick.alive {
-			g.ctx.draw_rect_filled(brick.x, brick.y, brick.w, brick.h, brick.c)
+			g.draw_brick(brick)
 		}
 	}
 	label1 := 'Level: ${g.nlevels:02}  Points: ${g.npoints:06}'
@@ -147,6 +146,36 @@ fn (mut g Game) draw() {
 	g.ctx.end()
 }
 
+fn (g &Game) draw_ball() {
+	g.ctx.draw_circle_filled(g.ball_x, g.ball_y, g.ball_r, gx.red)
+	mut ball_r_less := g.ball_r
+	for _ in 0 .. 3 {
+		ball_r_less *= 0.8
+		g.ctx.draw_circle_filled(g.ball_x - g.ball_r + ball_r_less, g.ball_y - g.ball_r +
+			ball_r_less, ball_r_less, highlight_color)
+	}
+}
+
+fn (g &Game) draw_paddle() {
+	roffset, rradius := -5, 18
+	g.ctx.draw_circle_filled(g.paddle_x - roffset, g.height, rradius, gx.blue)
+	g.ctx.draw_circle_filled(g.paddle_x + g.paddle_w + roffset, g.height, rradius, gx.blue)
+	g.ctx.draw_rect_filled(g.paddle_x, g.height - g.paddle_h + 2, g.paddle_w, g.paddle_h,
+		gx.blue)
+	g.ctx.draw_rect_filled(g.paddle_x, g.height - g.paddle_h + 2, g.paddle_w, bevel_size,
+		highlight_color)
+}
+
+fn (g &Game) draw_brick(brick Brick) {
+	g.ctx.draw_rect_filled(brick.x, brick.y, brick.w, brick.h, brick.c)
+	g.ctx.draw_rect_filled(brick.x, brick.y, brick.w, bevel_size, highlight_color)
+	g.ctx.draw_rect_filled(brick.x, brick.y, bevel_size, brick.h - bevel_size, highlight_color)
+	g.ctx.draw_rect_filled(brick.x + brick.w - bevel_size, brick.y, bevel_size, brick.h - bevel_size,
+		shade_color)
+	g.ctx.draw_rect_filled(brick.x, brick.y + brick.h - bevel_size, brick.w, bevel_size,
+		shade_color)
+}
+
 fn (mut g Game) game_over() {
 	g.init_bricks()
 	g.npoints, g.nlevels, g.npaddles = 0, 1, 5
