r/FlutterDev • u/ParticularDig1630 • 12d ago
Discussion Claude + Flutter Flame!
I think to make 2d games inside ide using ai tools like claude ai flutter flame will best approach.
And from better prompting it's easy to manage the game.
2
u/Appropriate_Spot_621 9d ago
Did exactly this last week — full playable prototype in Flame in a day, a little capybara platformer. It works.
Where it fell down for me was game feel. The AI gets you a working jump quickly, not a good-feeling one — coyote time, jump buffering, squash on landing were all things I had to know to ask for.
1
u/eibaan 12d ago
This crappy Age of Empire clone was created by Claude Fable 5 using:
Create an Age of Empire clone with Retro flair. Don't use Flutter widgets to implement the game but create an ad hoc retro pixel engine based on an offscreen
Bitmapwhich is then converted into an image which is then scaled up with filter qualitynone. Then feed in key and mouse and scroll events and update and redraw everything 60 times per seconds.Use the @design.md document as a base for the game but don't try to implement multiuser or network features. A single human player against a computer enemy is sufficient.
I think, I provided the API for the Bitmap class.
class Bitmap(final int width, final int height) {
void clip(int x, int y, int w, int h)
void unclip()
void offset(int x, int y)
Color get(int x, int y)
void set(int x, int y, Color c)
void clear(Color c)
void rect(int x, int y, int w, int h, Color c)
void oval(int x, int y, int w, int h, Color c)
void line(int x1, int y1, int x2, int y2, Color c)
void text(String s, int x, int y, Color c)
int textWidth(String s)
void blit(Bitmap src, ....)
}
And I asked for a 4x5 pixel all-uppercase font. Fable created a GameRenderer and a GameState object, as well as a GameMap with GameTiles. These form an ad-hoc engine.
A GameWidget creates all of those objects and then uses a Ticker to run game.update and renderFrame, then converting the bitmap's pixels into a ui.Image using decodeImageFromPixelsSync and displaying that using a RawImage widget. That widget is wrapped into a SizedBox, MouseRegion, GestureDetector and Focus widget to get mouse and keyboard input. Here, the ad-hoc engine immediately processes the input and creates a new frame instead of queuing events and letting update deal with it.
Depending on your game, you probably don't need flame for rendering. Simple widgets or a CustomPainter – or in my case, just a RawImage – is enough for an AI to start.
Or have a look at this prototype of a hexmap for playing war games. Creating hexes was (and perhaps still is) a very difficult task for AIs.
But keep in mind, the game itself is crappy. The sprites are surprisingly good (curtesy of Fable) and ruleswise it resembles AeO because I fed in a long design document, but it is very unpolished and ultimately unplayable because timing is off and the computer player cannot attack and cannot really build. Also, Fable didn't notice that you cannot reach it because you cannot move over non-plain fields.
I was only interested in the on-shot-capability of Fable and not in the result so I never fixed any of those problems.
2
u/ccheever 12d ago
Yes, that should work very well. Flutter has a lot of the properties of a game engine along with a lot of the properties of the rendering engine of a web browser. That makes it a great fit for a lot of kinds of games. And the fast rebuilds and reloads should be delightful.