More
Como Construir um Jogo Avançado de Corrida Infinita Usando Flutter, o Conjunto de Ferramentas para Jogos Casuais e Back4app
50 min
introdução os jogos casuais são populares por sua simplicidade e jogabilidade envolvente, frequentemente cativando um amplo público com mecânicas fáceis de aprender neste tutorial avançado, vamos desenvolver um jogo de corrida infinita totalmente funcional usando o toolkit de jogos casuais do flutter vamos integrar back4app para gerenciar o backend do jogo, armazenando dados do usuário, como pontuações altas, perfis de jogadores e conquistas também vamos explorar tópicos avançados como gerenciamento de estado, otimização de desempenho e estratégias de implantação ao final deste tutorial, você terá um jogo de corrida infinita polido pronto para implantação tanto no android quanto no ios, completo com persistência de dados e recursos aprimorados pré requisitos antes de começar, certifique se de ter o seguinte ambiente de desenvolvimento flutter instalado e configurado siga o guia de instalação oficial do flutter https //flutter dev/docs/get started/install se você ainda não o configurou conhecimento intermediário em flutter familiaridade com widgets do flutter, gerenciamento de estado e programação assíncrona conta back4app inscreva se para uma conta gratuita em back4app https //www back4app com compreensão do back4app conhecimento básico sobre como criar projetos e gerenciar dados consulte o guia de introdução do back4app https //www back4app com/docs/get started/welcome conta github para clonar repositórios e gerenciar controle de versão experiência com bibliotecas de gerenciamento de estado como provider ou bloc familiaridade com testes e implantação compreensão básica sobre como escrever testes e implantar aplicativos flutter passo 1 – configurando o backend do back4app 1 1 criar um novo projeto no back4app faça login na sua conta back4app clique "criar um novo app" e nomeie o como "jogo de corrida infinita avançado" 1 2 configurar classes para dados do usuário vamos criar classes para usuário , pontuação , e conquista classe usuário campos nomedeusuário (string) senha (string) email (string) fotodeperfil (arquivo) classe pontuação campos usuário (ponteiro para usuário) pontuaçãoalta (número) nível (número) classe conquista campos usuário (ponteiro para usuário) nomerealizado (string) datarealizada (data) 1 3 configurar segurança e permissões defina permissões em nível de classe para proteger os dados do usuário garanta que apenas usuários autenticados possam ler e escrever seus próprios dados 1 4 adicionar dados de exemplo preencha as classes com dados de exemplo para testar a integração mais tarde passo 2 – clonando e configurando o template de endless runner 2 1 clone o repositório do flutter casual games toolkit git clone https //github com/flutter/casual games git 2 2 navegue até o template de endless runner cd casual games/templates/endless runner 2 3 abra o projeto em seu ide use o visual studio code, android studio ou qualquer ide preferida certifique se de que os plugins flutter e dart estão instalados 2 4 atualizar dependências abra pubspec yaml e atualize as dependências para as versões mais recentes execute flutter pub get passo 3 – melhorando o jogo com recursos avançados 3 1 implementar autenticação de usuário permitiremos que os jogadores se inscrevam, façam login e gerenciem seus perfis 3 1 1 adicionar sdk do parse server em pubspec yaml dependencies parse server sdk flutter ^3 1 0 executar flutter pub get 3 1 2 configurar serviço de autenticação criar lib/services/auth service dart import 'package\ parse server sdk flutter/parse server sdk flutter dart'; class authservice { future\<parseuser> signup(string username, string password, string email) async { var user = parseuser(username, password, email); var response = await user signup(); if (response success) { return response result; } else { throw exception(response error! message); } } future\<parseuser> login(string username, string password) async { var user = parseuser(username, password, null); var response = await user login(); if (response success) { return response result; } else { throw exception(response error! message); } } future\<void> logout() async { var user = await parseuser currentuser() as parseuser; await user logout(); } } 3 1 3 criar telas de autenticação tela de inscrição lib/screens/signup screen dart tela de login lib/screens/login screen dart use widgets do flutter para criar formulários para entrada de usuário 3 2 melhorar ui/ux implemente animações personalizadas usando animationcontroller adicione um tema personalizado em lib/theme dart 3 3 adicionar conquistas e classificações crie componentes de ui para exibir conquistas implemente uma tela de classificação para exibir as melhores pontuações globalmente passo 4 – integrando back4app com o jogo 4 1 inicializar parse em main dart void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your app id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, ); runapp(myapp()); } 4 2 armazenar credenciais de forma segura use flutter dotenv para gerenciar variáveis de ambiente em pubspec yaml dependencies flutter dotenv ^5 0 2 crie um env arquivo (adicione o ao gitignore ) app id=your app id client key=your client key atualize main dart import 'package\ flutter dotenv/flutter dotenv dart'; void main() async { widgetsflutterbinding ensureinitialized(); await dotenv load(filename " env"); final keyapplicationid = dotenv env\['app id']!; final keyclientkey = dotenv env\['client key']!; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, ); runapp(myapp()); } passo 5 – implementando gerenciamento de estado 5 1 escolha uma solução de gerenciamento de estado usaremos provider para simplicidade 5 1 1 adicionar dependência do provider em pubspec yaml dependencies provider ^6 0 0 executar flutter pub get 5 2 criar gerenciamento de estado do jogo 5 2 1 criar classe de estado do jogo lib/models/game state dart import 'package\ flutter/foundation dart'; class gamestate extends changenotifier { int score = 0; int get score => score; void incrementscore() { score++; notifylisteners(); } void resetscore() { score = 0; notifylisteners(); } } 5 2 2 fornecer estado do jogo em main dart import 'package\ provider/provider dart'; import 'models/game state dart'; void main() async { // parse initialization runapp( multiprovider( providers \[ changenotifierprovider(create ( ) => gamestate()), ], child myapp(), ), ); } 5 2 3 consumir estado do jogo em widgets na tela do seu jogo int score = context watch\<gamestate>() score; passo 6 – otimizando o desempenho 6 1 desempenho do jogo gerenciamento de sprites use folhas de sprites para reduzir o uso de memória otimização da taxa de quadros limite a taxa de quadros para equilibrar desempenho e duração da bateria 6 2 otimização de rede cache de dados implemente mecanismos de cache para reduzir chamadas de rede requisições em lote use operações em lote ao se comunicar com o backend 6 3 profiling de código use o devtools do flutter para fazer o profiling do aplicativo identifique e corrija gargalos de desempenho passo 7 – tratamento de erros robusto e testes 7 1 tratamento de erros blocos try catch envolva chamadas assíncronas para tratar exceções try { var result = await someasyncfunction(); } catch (e) { // handle error } feedback do usuário exiba mensagens amigáveis ao usuário quando erros ocorrerem 7 2 registro de logs use o logging pacote para registrar erros e eventos importantes no pubspec yaml dependencies logging ^1 0 2 7 3 testando 7 3 1 testes unitários escreva testes para seus modelos e serviços teste de exemplo em test/game state test dart import 'package\ flutter test/flutter test dart'; import 'package\ your app/models/game state dart'; void main() { test('score increments correctly', () { final gamestate = gamestate(); gamestate incrementscore(); expect(gamestate score, 1); }); } 7 3 2 testes de integração teste a interface e as interações do aplicativo use o framework de testes de integração do flutter passo 8 – implantando o jogo 8 1 preparando para implantação ícones do aplicativo e telas de inicialização personalize para branding ids de pacote do aplicativo defina identificadores exclusivos para android e ios 8 2 criar versões de lançamento android atualize android/app/build gradle com suas configurações de assinatura execute flutter build apk release ios abra ios/runner xcworkspace no xcode configure a assinatura e as capacidades execute flutter build ios release 8 3 submissão na app store google play store siga o guia oficial https //developer android com/distribute/console apple app store siga o guia oficial https //developer apple com/app store/submit/ conclusão neste tutorial avançado, construímos um jogo de corrida infinita rico em recursos usando o casual games toolkit do flutter e integramos o back4app para serviços de backend abordamos autenticação de usuário permitir que os jogadores se inscrevam, façam login e gerenciem perfis gerenciamento de estado usando provider para gerenciamento de estado eficiente otimização de desempenho melhorando o desempenho do jogo e da rede tratamento de erros e testes implementando um tratamento de erros robusto e escrevendo testes implantação preparando e enviando o aplicativo para as lojas de aplicativos essa abordagem abrangente fornece as habilidades necessárias para desenvolver aplicativos flutter de nível profissional com integrações de backend confiáveis você pode expandir ainda mais o jogo adicionando mais recursos, como compartilhamento social permitir que os jogadores compartilhem conquistas nas redes sociais compras dentro do aplicativo monetizar o jogo com itens ou upgrades compráveis suporte a múltiplos jogadores implementar funcionalidade multiplayer em tempo real ou por turnos para mais informações sobre flutter e integração com back4app, consulte documentação do flutter https //flutter dev/docs guia do back4app para flutter https //www back4app com/docs/flutter/overview guias do parse server https //docs parseplatform org feliz codificação e desenvolvimento de jogos!