Inspiration
We got lost in NUS when meeting up to discuss project ideas for the hackathon.
What it does
A fast-paced PvP maze game with a limited field of vision and shrinking against time.
How we built it
Frontend
- Flutter Web
- Flame Game Engine
(totally not inspired by Flutter's package of the week)- Provides reliable game loops
- "Canvas" with vectors for ease of drawing
- Hacky static globals to maintain state through application between Socket.io client, Flutter and Flame ¯\_(ツ)_/¯
Backend
- Socket.io websockets
- Built-in
roomAPI, packet loss management and acknowledgement handling - Because who wants to reinvent the wheel? - Implemented with some networked physics for player movement
- Built-in
- Maze Generation
- Recursive backtracking DFS algo for generation - Some complex thing apparently has a pretty good solution
- Expanding DFS from center to handle shrinking maze (Is this a novel idea? I don't even know...)
CI/CD
- Hosted using GitHub Actions
- Simple SSH into cloud machine
- NGINX to host web frontend (Did not host on Firebase so no CORSsssss issuesss)
- Node.js to host backend
Challenges we ran into
- Maze generation with shrinking
- shrinking splits up the maze, separating players/lives, had to break walls during gameplay
- by expanding from smallest to largest, everything handled during initial generation, no sudden changes
- Converting types between JS/Dart
- both have dynamic typing, so some types have no equivalent
- hacky workarounds like JSON encoding and decoding
- Keypress detection
- double movement, no movement, teleporting through walls...
- Server/Client desync
- tracking packets sent from client but not handled by server yet
- using simple deterministic lockstep over TCP
Accomplishments that we're proud of
- Finishing
What we learned
- Games are hard to make - especially multiplayer ones
What's next for Attention
- Other gamemodes such as maze escape or team games
- Support for more players
Log in or sign up for Devpost to join the conversation.