Construindo um Jogo Multiplataforma Usando Flutter e Back4app

introdução flutter é um framework versátil de código aberto do google que permite aos desenvolvedores criar aplicativos compilados nativamente para dispositivos móveis, web, desktop e embarcados a partir de uma única base de código embora o flutter seja conhecido principalmente pelo desenvolvimento de aplicativos tradicionais, ele está sendo cada vez mais utilizado para o desenvolvimento de jogos devido ao seu desempenho, amplo ecossistema de pacotes e funcionalidade de recarga instantânea neste guia, vamos percorrer como desenvolver um jogo estilo flappy bird multiplataforma usando flutter e flame, um motor de jogo projetado para jogos 2d no flutter além disso, conectaremos o jogo ao back4app, uma plataforma de backend como serviço (baas), para armazenar pontuações de usuários e exibir um ranking ao final deste guia, você terá uma versão funcional do jogo que roda em plataformas móveis e web, e que armazenará e recuperará as pontuações altas do back4app pré requisitos para completar este tutorial, você precisará uma conta no back4app inscreva se para uma conta gratuita em https //www back4app com um ambiente de desenvolvimento flutter configurado em sua máquina local siga o https //flutter dev/docs/get started/install se você ainda não o configurou conhecimento básico de dart, widgets do flutter e conceitos de desenvolvimento de jogos passo 1 – configurando seu backend no back4app criar um projeto back4app faça login na sua https //dashboard back4app com/ e crie um novo projeto criar classes parse para este tutorial, vamos configurar um backend simples para gerenciar dados relacionados a jogos no seu projeto back4app, crie duas classes parse chamadas player e gamescore player armazena informações do jogador, como nome de usuário, nível e conquistas gamescore armazena pontuações e classificações para o jogo obtenha suas credenciais back4app navegue até as configurações do seu projeto para recuperar seu id de aplicação e chave do cliente, que você precisará para conectar seu jogo flutter ao back4app passo 2 – configurando seu projeto flutter criar um novo projeto flutter abra seu terminal ou prompt de comando e execute adicionar dependências abra pubspec yaml e adicione as seguintes dependências inicializar parse em seu app em lib/main dart , importe o sdk do parse e inicialize o na função main import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ flame/flame dart'; import 'package\ flame/game dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(mygameapp()); } class mygameapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home gamescreen(), ); } } substitua 'your back4app app id' e 'your back4app client key' pelas suas credenciais reais do back4app passo 3 – configurando o jogo usando flame crie a classe do jogo flame é um motor de jogo de código aberto construído sobre o flutter ele fornece ferramentas e apis para construir jogos 2d crie uma classe de jogo simples usando flame import 'package\ flame/game dart'; import 'package\ flame/components dart'; class mysimplegame extends flamegame { @override future\<void> onload() async { super onload(); add(playercomponent()); } } class playercomponent extends positioncomponent { @override future\<void> onload() async { // load player sprite or set up player visuals here size = vector2(50, 50); // set size of the player position = vector2(100, 100); // set initial position // optionally, add sprite or animations } @override void update(double dt) { // update player state here } @override void render(canvas canvas) { super render(canvas); // draw player visuals final paint = paint() color = colors blue; canvas drawrect(size torect(), paint); } } 2\ criar a tela do jogo atualize o gamescreen widget para exibir o jogo class gamescreen extends statelesswidget { @override widget build(buildcontext context) { return scaffold( body mysimplegame() widget, ); } } 3\ executar o jogo agora você pode executar seu aplicativo usando flutter run para ver seu jogo simples em ação você deve ver um quadrado azul representando o jogador passo 4 – gerenciando dados do jogo com back4app salvando dados do jogador em seguida, vamos criar uma função para salvar os dados do jogador no back4app quando o jogador subir de nível ou alcançar algo future\<void> saveplayerdata(string username, int level, list\<string> achievements) async { final player = parseobject('player') set('username', username) set('level', level) set('achievements', achievements); final response = await player save(); if (response success) { print('player data saved successfully'); } else { print('failed to save player data'); } } 2\ recuperando pontuações altas você também pode buscar as pontuações altas do seu jogo no back4app para exibir em um placar future\<list\<parseobject>> fetchhighscores() async { final query = querybuilder\<parseobject>(parseobject('gamescore')) orderbydescending('score') setlimit(10); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { print('failed to fetch high scores'); return \[]; } } future\<list\<parseobject>> fetchhighscores() async { final query = querybuilder\<parseobject>(parseobject('gamescore')) orderbydescending('score') setlimit(10); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { print('failed to fetch high scores'); return \[]; } } future\<list\<parseobject>> fetchhighscores() async { final query = querybuilder\<parseobject>(parseobject('gamescore')) orderbydescending('score') setlimit(10); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { print('failed to fetch high scores'); return \[]; } } 3\ exibir a classificação use listview\ builder em um widget flutter para exibir as 10 melhores pontuações class leaderboardscreen extends statefulwidget { @override leaderboardscreenstate createstate() => leaderboardscreenstate(); } class leaderboardscreenstate extends state\<leaderboardscreen> { list\<parseobject> highscores = \[]; @override void initstate() { super initstate(); fetchhighscores() then((scores) { setstate(() { highscores = scores; }); }); } @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('leaderboard')), body listview\ builder( itemcount highscores length, itembuilder (context, index) { final score = highscores\[index]; return listtile( title text(score get\<string>('playerid') ?? 'unknown player'), subtitle text('score ${score get\<int>('score')}'), ); }, ), ); } } passo 5 – adicionando recursos avançados com flame se você quiser adicionar mecânicas de jogo mais complexas, animações ou interações, pode expandir seu uso do flame introduzindo componentes adicionais, como sprites, física e detecção de colisão o flame também suporta a integração com o firebase, permitindo recursos multiplayer, compras dentro do aplicativo e mais conclusão neste tutorial, você aprendeu como usar flutter e flame para construir um jogo multiplataforma simples e como integrar o back4app para gerenciar dados do jogo, como perfis de jogadores e pontuações altas a capacidade do flutter de implantar em várias plataformas a partir de uma única base de código, combinada com os robustos serviços de backend do back4app, torna este um stack poderoso para desenvolver e escalar jogos seja criando um jogo casual simples ou uma experiência interativa mais complexa, flutter e back4app fornecem as ferramentas para construir, implantar e gerenciar seu jogo de forma eficiente para mais informações, confira a https //flutter dev/docs e a https //www back4app com/docs feliz codificação!