feat: Add crt shader

lib/main.dart

@@ -1,22 +1,29 @@
 import 'package:flame/flame.dart';
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:lightrunners/shaders/shaders.dart';
 import 'package:lightrunners/title/title.dart';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
   await Flame.device.fullScreen();
   runApp(
-    MaterialApp(
-      debugShowCheckedModeBanner: false,
-      home: const TitlePage(),
-      themeMode: ThemeMode.dark,
-      theme: ThemeData(
-        colorScheme: const ColorScheme.dark(
-          primary: Color(0xFFE0D932),
-          secondary: Color(0xFFE032CF),
+    BloomShader(
+      enabled: true,
+      child: CRTShader(
+        enabled: true,
+        child: MaterialApp(
+          debugShowCheckedModeBanner: false,
+          home: const TitlePage(),
+          themeMode: ThemeMode.dark,
+          theme: ThemeData(
+            colorScheme: const ColorScheme.dark(
+              primary: Color(0xFFE0D932),
+              secondary: Color(0xFFE032CF),
+            ),
+            textTheme: GoogleFonts.bungeeShadeTextTheme(),
+          ),
         ),
-        textTheme: GoogleFonts.bungeeShadeTextTheme(),
       ),
     ),
   );

lib/shaders/bloom.dart

@@ -0,0 +1,46 @@
+import 'dart:ui' as ui;
+
+import 'package:vector_math/vector_math.dart' hide Colors;
+
+import 'package:flutter/material.dart';
+import 'package:flutter_shaders/flutter_shaders.dart';
+
+class BloomShader extends StatelessWidget {
+  const BloomShader({
+    super.key,
+    required this.enabled,
+    required this.child,
+  });
+
+  final bool enabled;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+
+    if(!enabled) return child;
+
+    return ColoredBox(
+      color: Colors.black,
+      child: ShaderBuilder(
+        assetKey: 'shaders/bloom.glsl',
+        child: child,
+        (context, shader, child) {
+          return AnimatedSampler(
+            (image, size, canvas) {
+              shader
+                ..setFloatUniforms((value) {
+                  value.setSize(size);
+                })
+                ..setImageSampler(0, image);
+
+              canvas.drawRect(Offset.zero & size, Paint()..shader = shader);
+            },
+            child: child!,
+          );
+        },
+      ),
+    );
+  }
+}
+

lib/shaders/crt.dart

@@ -0,0 +1,104 @@
+import 'dart:ui' as ui;
+
+import 'package:vector_math/vector_math.dart' hide Colors;
+
+import 'package:flutter/material.dart';
+import 'package:flutter_shaders/flutter_shaders.dart';
+
+class CRTShader extends StatelessWidget {
+  const CRTShader({
+    super.key,
+    required this.enabled,
+    required this.child,
+  });
+
+  final bool enabled;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+
+
+    if(!enabled) return child;
+
+    return ColoredBox(
+      color: Colors.black,
+      child: ImageBuilder(
+        assetImageProvider: const AssetImage('assets/images/liltex_3.jpg'),
+        (context, pixelTexture) {
+          return ShaderBuilder(
+            assetKey: 'shaders/super_crt.glsl',
+            child: child,
+            (context, shader, child) {
+              return AnimatedSampler(
+                (image, size, canvas) {
+                  shader
+                    ..setFloatUniforms((value) {
+                      value
+                        ..setSize(size)
+                        ..setFloat(1)
+                        ..setVector(Vector2(2, 5));
+                    })
+                    ..setImageSampler(0, pixelTexture)
+                    ..setImageSampler(1, image);
+
+                  canvas.drawRect(
+                    Offset.zero & size,
+                    Paint()..shader = shader,
+                  );
+                },
+                child: child!,
+              );
+            },
+          );
+        },
+      ),
+    );
+  }
+}
+
+class ImageBuilder extends StatefulWidget {
+  const ImageBuilder(
+    this.builder, {
+    super.key,
+    required this.assetImageProvider,
+  });
+
+  final Widget Function(BuildContext context, ui.Image image) builder;
+  final ImageProvider assetImageProvider;
+
+  @override
+  State<ImageBuilder> createState() => _ImageBuilderState();
+}
+
+class _ImageBuilderState extends State<ImageBuilder> {
+  ui.Image? image;
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+
+    getImage();
+  }
+
+  Future<void> getImage() async {
+    widget.assetImageProvider.resolve(ImageConfiguration.empty).addListener(
+      ImageStreamListener((info, synchronousCall) {
+        setState(() {
+          image = info.image;
+        });
+      }),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final image = this.image;
+
+    if (image == null) {
+      return const SizedBox.shrink();
+    }
+
+    return widget.builder(context, image);
+  }
+}

lib/shaders/shaders.dart

@@ -0,0 +1,2 @@
+export 'bloom.dart';
+export 'crt.dart';

lib/widgets/controller_menu.dart

@@ -55,7 +55,7 @@ class _ControllerMenuState extends State<ControllerMenu> {
   @override
   Widget build(BuildContext context) {
     return SizedBox(
-      width: 250,
+      width: 260,
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -76,7 +76,7 @@ class _ControllerMenuState extends State<ControllerMenu> {
                       option.name,
                       style: TextStyle(
                         fontFamily: GoogleFonts.bungee().fontFamily,
-                        fontSize: 22,
+                        fontSize: 26,
                         color: Colors.white,
                       ),
                     ),

pubspec.lock

@@ -211,6 +211,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_shaders:
+    dependency: "direct main"
+    description:
+      name: flutter_shaders
+      sha256: "02750b545c01ff4d8e9bbe8f27a7731aa3778402506c67daa1de7f5fc3f4befe"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.2"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -726,4 +734,4 @@ packages:
     version: "3.1.1"
 sdks:
   dart: ">=3.0.0 <4.0.0"
-  flutter: ">=3.3.7"
+  flutter: ">=3.7.0-0.0"

pubspec.yaml

@@ -13,6 +13,7 @@ dependencies:
   flame_audio: ^2.0.3
   flutter:
     sdk: flutter
+  flutter_shaders: ^0.1.2
   gamepads: ^0.1.1
   google_fonts: ^4.0.4
   phased: ^0.0.3
@@ -27,6 +28,9 @@ dev_dependencies:
 
 flutter:
   uses-material-design: false
+  shaders:
+    - shaders/super_crt.glsl
+    - shaders/bloom.glsl
   assets:
     - google_fonts/
     - assets/images/

shaders/bloom.glsl

@@ -0,0 +1,61 @@
+// specify the version of GLSL to use.
+#version 460 core
+
+// specify the name of the fragment shader.
+precision mediump float;
+
+// include the Flutter-provided "FlutterFragCoord" function.
+// this function returns the fragment's position in logical pixels in both in skia and impeller
+#include <flutter/runtime_effect.glsl>
+
+// declare the uniform inputs.
+uniform vec2 uSize;
+uniform sampler2D tTexture;
+
+
+out vec4 fragColor;
+
+const float blurSize = 1.0/3500.0;
+const float intensity = 0.35;
+
+
+vec4 fragment(vec2 uv, vec2 pos, inout vec4 color) {
+
+    vec4 sum = vec4(0);
+    vec2 texcoord = uv;
+    int j;
+    int i;
+
+    for (i = -18; i < 18; i++){
+        float factor = (mod(i, 18) / 10.0 ) * 0.008;
+        sum += texture(tTexture, vec2(texcoord.x + i * blurSize, texcoord.y * 40)) * factor ;
+        sum += texture(tTexture, vec2(texcoord.x, texcoord.y + i * blurSize * 40)) * factor ;
+    }
+
+    color = sum+ texture(tTexture, texcoord);
+
+    return color;
+}
+
+float getLuma(vec3 color) {
+    vec3 weights = vec3(0.299, 0.587, 0.114);
+    return dot(color, weights);
+}
+
+
+// the main function
+void main() {
+    vec2 pos = FlutterFragCoord().xy;
+    vec2 uv = pos / uSize;
+    vec4 color;
+
+//    fragColor = texture(tTexture, uv);
+//    return;
+//
+
+
+    fragment(uv, pos, color);
+
+
+    fragColor = color;
+}