Building Real-time Multiplayer Games with Flutter & Firebase (By: Sakina Abbas) - DevFest Lahore 2023

Talk by Sakina Abbas (https://www.linkedin.com/in/sakina-abbas/) at DevFest Lahore 2023 by GDG Lahore.

Transcript

1. Building Real-time Multiplayer Games with Flutter & Firebase Game Development made easy with Flutter
3. Hi, I’m Sakina Abbas! Co-Founder & CEO, Reactree GDE Flutter, Dart 7+ years in Mobile Application Development Core Member of Flutter Karachi Pakistan Women in Tech Speaker for Google Developers Space, Singapore Mentor in various Google programs
5. 1. Games: Building blocks 2. Intro to Bonfire 3. Add Multiplayers with Firebase 4. Combine Firebase with Bonfire 5. Why Flutter & Firebase for games? 6. Create your own game! What will you learn today?
6. Games: Building Blocks
7. Games: Building Blocks - Map
8. Games: Building Blocks - Map - Player
9. Games: Building Blocks - Map - Player - NPC
10. Games: Building Blocks - Map - Player - NPC - Enemy
11. Games: Building Blocks - Map - Player - NPC - Enemy - Objects
12. What is Bonfire? - Library/Framework to build RPGs - Built on top of Flame - Simple and easy to understand - Rapid development
13. Add Multiplayers with Firebase 1. Authentication for session management
14. Add Multiplayers with Firebase 1. Authentication for session management 2. Collection for all users (players) class User { final String uid; final String userName; final double? positionX; final double? positionY; }
15. Add Multiplayers with Firebase 1. Authentication for session management 2. Collection for all users (players) 3. Periodically update position of the player @override void update(double dt) { if (checkInterval( 'updatePlayerPosition' , 1000, dt)) { print('updatePlayerPosition triggered'); if (gameRef.player != null) { _dbService.updatePlayerPosition( gameRef.player!.position.x, gameRef.player!.position.y); } } }
16. Add Multiplayers with Firebase 1. Authentication for session management 2. Collection for all users (players) 3. Periodically update position of the player 4. Get players’ live locations via StreamSubscription BonfireWidget( joystick: joystick, player: Dash( Vector2(2 * tileSize, 3 * tileSize), uid: widget.uid, ), components: [gameController], interface: DashInterface(), onReady: (interface) { _subscribeToPlayersStream(); }, … }
17. Putting it together 1. Stream triggered 2. For every player, check if the component exists in the game 3. If it doesn’t exist, add the component to the game 4. If it already exists, update this component’s position if (user.uid != widget.uid) { // Find the opponent component with the corresponding playerId try { var opponentDash = gameController .opponents.firstWhere( (opponent) => opponent. uid == user.uid, ); gameController .updatePlayerPosition( opponentDash , Vector2(user.positionX!,user.positionY)) ; } catch (e) { gameController .addPlayer( Dash( Vector2(user.positionX!, user.positionY!),uid: user.uid, ), ); }
18. Why Flutter & Firebase for Games? ✅ Simple & Fast state management ✅ Blank canvas -> high customisation ✅ Lightweight game ✅ Performant ✅ Quick to create ✅ Developer Friendly!! ❌ No need to learn complex engines like Unity to build a simple game
19. Alternatives to Firebase for Realtime Games 1. Supabase 2. Web Sockets
20. Contact Sakina Abbas sakina@reactree.com https://pk.linkedin.com/in/sa kina-abbas www.reactree.com Questions?