Building a 2d-top down RPG with Flutter and Flame
This series of articles were inspired by this article from Very Good Ventures: “How we built the Super Dash demo in Flutter and Flame in just six weeks!”. Super Dash demo is a 2d platformer where players control a character to pick up items, avoid enemies and get a score. In contrast, Gomiland is a 2d-top down RPG where players move about the town of Gomiland and pick up rubbish to be sorted at home. They can also talk to characters to get quests and rewards and use coins to buy things.
While plenty of games have been built with Flame and Flutter, RPGs are not common. This leaves some features unique to RPGs that lack examples and tutorials. Use Gomiland’s code, I will show examples of how to create the systems for an RPG. This series is broken up into 6 parts, each detailing some of the core components that power the Gomiland game. The links to each part is as follows: Raycasting, Dialogue (simple), Dialogue (advanced), Tilemaps (static & animated) and 2D top down rendering.
The image below shows a high level of the different systems and how they relate to the game. You would notice that there are potions which were not covered by this series. Plenty of great articles are already available on these topics like Authentication and saving documents with Firebase and state management with Bloc.
Creating an RPG like Gomiland was a challenge. I needed to setup, integrate and test all the above systems. The good news is that is is doable in 7 weeks by a single programmer (yes that programmer was me). The art, design, dialogues and sound were also done by a very small team. So if you are planning to create your own adventure, or just test out a game idea, I would definitely recommend using Flutter and Flame.
The advantages go beyond the speed and simplicity of using this stack. Flutter compiles your code into Android, iOS, web, MacOS, Windows and Linux without maintaining separate codebases. If you are planning to release on consoles like PS4 and Switch, maybe Unity or Unreal engine would be a better choice. However there is a second advantage to creating with Flutter — hot reload. You can instantly see changes to code, making small UI changes easy to visualise. A bonus is that built-in tools allow you to view the UI changes on different screen sizes without extra setup. Lastly, it is open source so it is free forever and ever. I created Gomiland at a total cost of $0. I did voluntarily pay to GIMP and Tiled , but these are also free to use.
As a final note, I recognise that there are features common to RPGs that Gomiland does not have. These include an inventory system, crafting system, battling (health/stamina, enemies, damage, etc) and skill trees. These are out of scope for our game, but they could definity be implemented with Flame. There is also a nice package for creating rouge-like RPGs called Bonfire which is built on top of the Flame engine. It has built in functions and functions that make building your RPG easier.
Hope this series has helped you the aspiring game creator!
