feat: Add glossary and first cube slides

packages/slides/lib/main.dart

@@ -45,6 +45,9 @@ class FlutterDeckExample extends StatelessWidget {
         Slide06ThreeDimensionalAxes(),
         Slide07ThreeDimensionalProjections(),
         Slide08Matrices(),
+        Slide09Glossary(),
+        Slide10FirstCube(),
+        Slides.title('Sample Slides'),
         SlideSampleImage(),
         SlideSampleCode(),
         SlideSampleGame(),

packages/slides/lib/slides/components/slide_game.dart

@@ -0,0 +1,23 @@
+import 'package:flame/game.dart';
+import 'package:flutter/material.dart';
+
+class SlideGame extends StatelessWidget {
+  final GameFactory game;
+
+  const SlideGame({
+    required this.game,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 800,
+      height: 600,
+      child: GameWidget.controlled(
+        gameFactory: game,
+        autofocus: false,
+      ),
+    );
+  }
+}

packages/slides/lib/slides/slide_04_flame_game_loop.dart

@@ -1,6 +1,6 @@
-import 'package:flame/game.dart';
 import 'package:flame_3d_workshop_slides/games/game_loop/game_loop.dart';
 import 'package:flame_3d_workshop_slides/slides/components/slide.dart';
+import 'package:flame_3d_workshop_slides/slides/components/slide_game.dart';
 import 'package:flame_3d_workshop_slides/slides/components/slide_text.dart';
 import 'package:flutter/material.dart';
 
@@ -11,14 +11,7 @@ class Slide04FlameGameLoop extends Slide {
   List<Widget> children(BuildContext context) {
     return [
       SlideText.title('Game Loop'),
-      Container(
-        width: 800,
-        height: 600,
-        child: const GameWidget.controlled(
-          gameFactory: GameLoop.new,
-          autofocus: false,
-        ),
-      ),
+      const SlideGame(game: GameLoop.new),
     ];
   }
 }

packages/slides/lib/slides/slide_06_3d_axes.dart

@@ -2,13 +2,13 @@ import 'dart:async';
 import 'dart:math';
 
 import 'package:flame/components.dart' hide Matrix4;
-import 'package:flame/game.dart' hide Matrix4;
 import 'package:flame/palette.dart';
 import 'package:flame_3d/camera.dart';
 import 'package:flame_3d/components.dart';
 import 'package:flame_3d/game.dart';
 import 'package:flame_3d/resources.dart';
 import 'package:flame_3d_workshop_slides/slides/components/slide.dart';
+import 'package:flame_3d_workshop_slides/slides/components/slide_game.dart';
 import 'package:flame_3d_workshop_slides/slides/components/slide_text.dart';
 import 'package:flutter/material.dart' hide Matrix4, Material;
 
@@ -19,14 +19,7 @@ class Slide06ThreeDimensionalAxes extends Slide {
   List<Widget> children(BuildContext context) {
     return [
       SlideText.title('3D Axes'),
-      Container(
-        width: 800,
-        height: 600,
-        child: const GameWidget.controlled(
-          gameFactory: _ThreeDimensionalAxesGame.new,
-          autofocus: false,
-        ),
-      ),
+      const SlideGame(game: _ThreeDimensionalAxesGame.new),
     ];
   }
 }

packages/slides/lib/slides/slide_09_glossary.dart

@@ -0,0 +1,28 @@
+import 'package:flame_3d_workshop_slides/slides/components/slide.dart';
+import 'package:flame_3d_workshop_slides/slides/components/slide_text.dart';
+import 'package:flutter/material.dart' hide Matrix4, Material;
+
+class Slide09Glossary extends Slide {
+  Slide09Glossary({super.key}) : super(route: '/slide_09_glossary');
+
+  @override
+  List<Widget> children(BuildContext context) {
+    return [
+      SlideText.title('Glossary'),
+      SlideText.p('Some useful terms that we are going to be using a lot.'),
+      SlideText.bullet('Vertex'),
+      SlideText.bullet('Surface'),
+      SlideText.bullet('Mesh'),
+      SlideText.bullet('Model'),
+      const SizedBox(height: 16),
+      Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: [
+          Image.asset('assets/images/diagrams/vertex.png'),
+          Image.asset('assets/images/diagrams/surface.png'),
+          Image.asset('assets/images/diagrams/mesh.png'),
+        ],
+      ),
+    ];
+  }
+}

packages/slides/lib/slides/slide_10_first_cube.dart

@@ -0,0 +1,74 @@
+import 'package:flame/palette.dart';
+import 'package:flame_3d/camera.dart';
+import 'package:flame_3d/components.dart';
+import 'package:flame_3d/game.dart';
+import 'package:flame_3d/resources.dart';
+import 'package:flame_3d_workshop_slides/slides/components/slide.dart';
+import 'package:flame_3d_workshop_slides/slides/components/slide_game.dart';
+import 'package:flame_3d_workshop_slides/slides/components/slide_text.dart';
+import 'package:flutter/material.dart' hide Matrix4, Material;
+
+class Slide10FirstCube extends Slide {
+  Slide10FirstCube({super.key}) : super(route: '/slide_10_first_cube');
+
+  @override
+  List<Widget> children(BuildContext context) {
+    return [
+      SlideText.title('Our First Cube!'),
+      Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        spacing: 8.0,
+        children: [
+          SlideText.code('''
+class _FirstCubeGame extends FlameGame3D {
+  _FirstCubeGame()
+    : super(
+        world: World3D(clearColor: ...),
+        camera: CameraComponent3D(
+          position: Vector3.all(8),
+        ),
+      );
+
+  @override
+  Future<void> onLoad() async {
+    world.addAll([
+      MeshComponent(
+        mesh: CuboidMesh(
+          size: Vector3.all(2.0),
+          material: SpatialMaterial(albedoColor: ...),
+        ),
+      ),
+    ]);
+    return super.onLoad();
+  }
+}
+          '''),
+          const SlideGame(game: _FirstCubeGame.new),
+        ],
+      ),
+    ];
+  }
+}
+
+class _FirstCubeGame extends FlameGame3D {
+  _FirstCubeGame()
+    : super(
+        world: World3D(clearColor: const Color(0xFF000000)),
+        camera: CameraComponent3D(
+          position: Vector3.all(8),
+        ),
+      );
+
+  @override
+  Future<void> onLoad() async {
+    world.addAll([
+      MeshComponent(
+        mesh: CuboidMesh(
+          size: Vector3.all(2.0),
+          material: SpatialMaterial(albedoColor: BasicPalette.white.color),
+        ),
+      ),
+    ]);
+    return super.onLoad();
+  }
+}

packages/slides/lib/slides/slides.dart

@@ -7,6 +7,8 @@ export 'slide_05_flame_components.dart';
 export 'slide_06_3d_axes.dart';
 export 'slide_07_3d_projections.dart';
 export 'slide_08_matrices.dart';
+export 'slide_09_glossary.dart';
+export 'slide_10_first_cube.dart';
 export 'slide_sample_code.dart';
 export 'slide_sample_game.dart';
 export 'slide_sample_image.dart';

packages/template/README.md

@@ -1,3 +1,3 @@
 # template
 
-Use this template to start working on your game using `flame_3d`.
+Use this template to start working on your game using `flame_3d`.