Why we chose Flutter for the Rive GameKit
The Rive GameKit for Flutter is the first product to take advantage of the Rive Renderer. It's available now as a technical preview.
Thursday, April 20, 2023
At Rive, we are developing powerful animation tools that allow designers and developers to create rich, engaging animations.
We support a broad range of runtimes, including Flutter. We use existing rendering technologies for these various runtimes to enable Rive animations to run on multiple platforms. At the same time, we focus on keeping our animations fast, small in size, and consuming less memory than alternatives.
Making Rive visuals consistent and performant across all platforms requires effort. It also means we can’t quickly implement highly requested features (like blurs, drop shadows, and dashed strokes) since not all renderers support them.
Over the past year, we have been building our own custom renderer that will allow us to support new features across all platforms while maintaining visual fidelity with the Rive Editor. It’s also much faster at rendering Rive content than other platform renderers.
Our first release using the new renderer is the Rive GameKit. It offers the first opportunity to experience it yourself. This article explains why we chose Flutter and why we believe Rive and Flutter are both exciting options for game development.
The Rive Editor is built with Flutter. This enables us to release on the Web and desktop (macOS and Windows) from a single codebase while maintaining a great internal development experience and fast workflow.
Rive Editor macOS app - sample game elements
It is a priority for us to get the Rive Renderer working inside the editor, which requires the renderer running alongside Flutter.
The new renderer will power everything on the editor stage, while the UI, business logic, networking, peripherals, multi-platform support, and everything else is powered by Flutter. An internal name we use to describe this is: side-by-side.
Combining our renderer and Flutter is incredibly powerful for building our editor. We recognize that it can be just as powerful for you and what you are creating. This introduces the Rive GameKit, a technical preview of our renderer running alongside Flutter that you can start using today.
Rive for games
“A creative tool for the interactive era.”
Rive's familiar design and animation tools, coupled with our ground-breaking State Machine, enable game creators to build beautiful animations that are fully interactive at runtime.
Creators are already experimenting with Rive for game development. During the 2022 Flutter Puzzle hack, more than 10 of the winning games used Rive. Popular game development solutions have also implemented Rive within their engines, such as NoesisGUI and Defold.
Vector animations are excellent for GUIs, HUDs, and interfaces within games. Regardless of resolution or scale, the assets will always look fantastic. With NoesisGUI, you can add Rive to Unity, Unreal, and other popular game engines.
See the tutorials on how to add Rive to Unity and Unreal.
Rive Renderer & GameKit
The release of our new renderer and GameKit enables you, as a game creator, to take Rive beyond simple game elements, such as GUIs or HUDs. You can now create full experiences where every element on the screen is a Rive animation.
Rive GameKit demo game (Joel) - running on macOS
The Rive Renderer can draw an unprecedented amount of vectors on screen. Allowing gameplay at 120fps, while every single scene element can animate without losing quality. Gameplay will remain crisp and clear regardless of scale, resolution, or device.
You can download and play the Joel game here (macOS).
Flutter for games
Flutter is a popular framework for application development. It provides a rich set of widgets and tools for building custom UI elements and animations, allowing you to create rich interfaces and experiences.
These capabilities also make Flutter well-suited for games that rely heavily on user interface design and customization. As a result, Flutter for game development is gaining in popularity, specifically in the following ways:
Flutter launched a casual game toolkit with plenty of helpful documentation and resources for beginner game developers.
The Flame game engine is becoming a mature offering for 2D games, providing constructs like sprites and particle effects, sound, physics, and collision detection that build on the core Flutter framework. Flame already supports a bridge package for the current Rive Flutter runtime.
As of November 2022, over 15,000 games have been published to the Play Store using Flutter, a 59% increase over the previous twelve months.
Flutter also supports custom fragment shaders.
Additional information can be found in the Flutter 2023 Strategy document.
We love using Flutter for application development for many reasons, and these benefits extend to game development as well. Flutter provides a variety of important development features out of the box, including:
Comprehensive documentation and a great developer experience
An active developer community
Open source and free - no black boxes
Easy to learn
The popular mobile game, PUBG, has integrated Flutter for a community module to allow players worldwide to share gameplay clips.
Flutter also speeds up game development with pre-built integrations for services such as ads, in-app purchases, Firebase, Play Services, and Game Center. For more information on using Flutter for games, visit their official website at https://flutter.dev/games.
Flutter + Rive GameKit
Building pixel-perfect applications is easy with Flutter, and creating beautiful interactive animations is easy with Rive. Plenty of designers and developers already use Flutter and Rive to create unique experiences using the existing Rive Flutter package.
The Rive GameKit for Flutter enables you to take this creation a step further to help you build highly performant games and experiences. All the development benefits of Flutter bolted with a super fast vector renderer optimized for your Rive animations.
Flutter Hot Reload with Rive GameKit - setting the camera zoom at runtime
How is Rive GameKit different from Rive Flutter?
The current Rive Flutter package will remain the primary way to add Rive animations and interactions to your Flutter applications, providing an easy-to-use API that abstracts away the complexity.
While the GameKit is the first target to support the new renderer along with an advanced API that provides fine-grain control, allowing you to:
Create full experiences where every single element on screen can be a Rive animation - running at 120fps.
Efficiently control the animation loop of all Rive content in your scene.
Interact with the animations through state machine inputs.
Access and update individual components in the drawing hierarchy.
Precisely layout your game scene.
Tap into APIs that make game development easier (more to come on this!)
We believe this will enable you to create unique experiences that are impossible anywhere else.
The GameKit is currently in technical preview, and you can sign up for early access here. If you want to learn more, take a look at our documentation and samples, or talk to us on Discord.
We can’t wait to see what you create.
Dive deeper into the concepts we covered
Start building beautiful interactive graphics
Join our newsletter
Get all the latest Rive news delivered to your inbox.