Come costruire un gioco Endless Runner avanzato utilizzando Flutter, il Casual Games Toolkit e Back4app

50min
Introduzione
I giochi casual sono popolari per la loro semplicità e il gameplay coinvolgente, spesso catturando un vasto pubblico con meccaniche facili da apprendere. In questo tutorial avanzato, svilupperemo un gioco di corsa infinita completamente funzionale utilizzando il Casual Games Toolkit di Flutter. Integreremo Back4app per gestire il backend del gioco, memorizzando i dati degli utenti come punteggi elevati, profili dei giocatori e traguardi. Approfondiremo anche argomenti avanzati come la gestione dello stato, l'ottimizzazione delle prestazioni e le strategie di distribuzione. Alla fine di questo tutorial, avrai un gioco di corsa infinita rifinito pronto per la distribuzione su Android e iOS, completo di persistenza dei dati e funzionalità avanzate.
Requisiti
Prima di iniziare, assicurati di avere quanto segue:
Ambiente di Sviluppo Flutter: Installato e configurato. Segui la guida ufficiale all'installazione di Flutter se non l'hai già configurato.
Conoscenza Intermedia di Flutter: Familiarità con i widget di Flutter, la gestione dello stato e la programmazione asincrona.
Account Back4app: Registrati per un account gratuito su Back4app.
Comprensione di Back4app: Conoscenza di base nella creazione di progetti e gestione dei dati. Fai riferimento alla guida per iniziare di Back4app.
Account GitHub: Per clonare repository e gestire il controllo delle versioni.
Esperienza con Librerie di Gestione dello Stato: Come Provider o Bloc.
Familiarità con Test e Distribuzione: Comprensione di base della scrittura di test e della distribuzione delle app Flutter.
﻿
Passo 1 – Configurazione del Backend di Back4app
1.1 Crea un Nuovo Progetto su Back4app
Accedi al tuo account Back4app.
Clicca "Crea una nuova App" e chiamala "Gioco di Corsa Infinita Avanzato".
1.2 Configura le Classi per i Dati Utente
Creeremo classi per Utente, Punteggio, e Risultato.
Classe Utente
Campi:
nomeUtente (Stringa)
password (Stringa)
email (Stringa)
immagineProfilo (File)
Classe Punteggio
Campi:
utente (Puntatore a Utente)
punteggioAlto (Numero)
livello (Numero)
Classe Risultato
Campi:
utente (Puntatore all'Utente)
nomeRealizzazione (Stringa)
dataRealizzazione (Data)
1.3 Configurare Sicurezza e Permessi
Imposta permessi a livello di classe per proteggere i dati degli utenti.
Assicurati che solo gli utenti autenticati possano leggere e scrivere i propri dati.
1.4 Aggiungi Dati di Esempio
Popola le classi con dati di esempio per testare l'integrazione in seguito.
﻿
Passo 2 – Clonare e Configurare il Modello Endless Runner
2.1 Clona il Repository del Toolkit per Giochi Casual Flutter
Bash
git clone https://github.com/flutter/casual-games.git
git clone https://github.com/flutter/casual-games.git
﻿
2.2 Naviga nel Modello Endless Runner
Bash
cd casual-games/templates/endless_runner
cd casual-games/templates/endless_runner
﻿
2.3 Apri il Progetto nel Tuo IDE
Usa Visual Studio Code, Android Studio o qualsiasi IDE preferito.
Assicurati che i plugin Flutter e Dart siano installati.
2.4 Aggiorna le Dipendenze
Apri pubspec.yaml e aggiorna le dipendenze all'ultima versione.
Esegui:
Bash
flutter pub get
flutter pub get
﻿
﻿
Passo 3 – Migliorare il Gioco con Funzionalità Avanzate
3.1 Implementare l'Autenticazione Utente
Permetteremo ai giocatori di registrarsi, accedere e gestire i propri profili.
3.1.1 Aggiungere il SDK di Parse Server
In pubspec.yaml:
YAML
dependencies:
  parse_server_sdk_flutter: ^3.1.0
dependencies:
  parse_server_sdk_flutter: ^3.1.0
﻿
Esegui:
Bash
flutter pub get
flutter pub get
﻿
3.1.2 Configurare il Servizio di Autenticazione
Crea lib/services/auth_service.dart:
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();
  }
}
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 Creare Schermate di Autenticazione
Schermata di Registrazione: lib/screens/signup_screen.dart
Schermata di Accesso: lib/screens/login_screen.dart
Utilizza i widget di Flutter per creare moduli per l'input dell'utente.
3.2 Migliorare UI/UX
Implementa animazioni personalizzate utilizzando AnimationController.
Aggiungi un tema personalizzato in lib/theme.dart.
3.3 Aggiungi Traguardi e Classifiche
Crea componenti UI per visualizzare i traguardi.
Implementa una schermata di classifiche per visualizzare i punteggi più alti a livello globale.
﻿
Passo 4 – Integrazione di Back4app con il Gioco
4.1 Inizializza Parse in main.dart
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());
}
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 Memorizza in Sicurezza le Credenziali
Usa flutter_dotenv per gestire le variabili d'ambiente.
In pubspec.yaml:
YAML
dependencies:
  flutter_dotenv: ^5.0.2
dependencies:
  flutter_dotenv: ^5.0.2
﻿
Crea un .env file (aggiungilo a .gitignore):
Text
APP_ID=YOUR_APP_ID
CLIENT_KEY=YOUR_CLIENT_KEY
APP_ID=YOUR_APP_ID
CLIENT_KEY=YOUR_CLIENT_KEY
﻿
Aggiorna main.dart:
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());
}
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 – Implementazione della Gestione dello Stato
5.1 Scegli una soluzione di gestione dello stato
Utilizzeremo Provider per semplicità.
5.1.1 Aggiungi dipendenza Provider
In pubspec.yaml:
YAML
dependencies:
  provider: ^6.0.0
dependencies:
  provider: ^6.0.0
﻿
Esegui:
Bash
flutter pub get
flutter pub get
﻿
5.2 Crea gestione dello stato del gioco
5.2.1 Crea classe Game State
lib/models/game_state.dart:
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();
  }
}
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 Fornisci Game State
In main.dart:
Dart
import 'package:provider/provider.dart';
import 'models/game_state.dart';

void main() async {
  // ... Parse initialization

  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => GameState()),
      ],
      child: MyApp(),
    ),
  );
}
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
Consuma Game State nei Widget**
Nella schermata di gioco:
Dart
int score = context.watch<GameState>().score;
int score = context.watch<GameState>().score;
﻿
Passo 6 – Ottimizzazione delle Prestazioni
6.1 Prestazioni del Gioco
Gestione degli Sprite: Utilizza fogli di sprite per ridurre l'uso della memoria.
Ottimizzazione del Frame Rate: Limita il frame rate per bilanciare prestazioni e durata della batteria.
6.2 Ottimizzazione della Rete
Caching dei Dati: Implementa meccanismi di caching per ridurre le chiamate di rete.
Richieste in Batch: Utilizza operazioni in batch quando comunichi con il backend.
6.3 Profilazione del Codice
Utilizza DevTools di Flutter per profilare l'app.
Identifica e risolvi i colli di bottiglia delle prestazioni.
Passo 7 – Gestione degli Errori Robusta e Test
7.1 Gestione degli Errori
Blocchi Try-Catch: Avvolgi le chiamate asincrone per gestire le eccezioni.
Dart
try {
  var result = await someAsyncFunction();
} catch (e) {
  // Handle error
}
try {
  var result = await someAsyncFunction();
} catch (e) {
  // Handle error
}
﻿
Feedback degli Utenti: Mostra messaggi user-friendly quando si verificano errori.
7.2 Registrazione
Usa il logging pacchetto per registrare errori ed eventi importanti.
In pubspec.yaml:
YAML
dependencies:
  logging: ^1.0.2
dependencies:
  logging: ^1.0.2
﻿
7.3 Test
7.3.1 Test Unitari
Scrivi test per i tuoi modelli e servizi.
Esempio di test in test/game_state_test.dart:
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);
  });
}
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 Test di Integrazione
Testa l'interfaccia utente e le interazioni dell'app.
Usa il framework di test di integrazione di Flutter.
Passo 8 – Distribuzione del Gioco
8.1 Preparazione per la Distribuzione
Icone dell'App e Schermate di Avvio: Personalizza per il branding.
ID Pacchetto dell'App: Imposta identificatori unici per Android e iOS.
8.2 Costruire Versioni di Rilascio
Android
Aggiorna android/app/build.gradle con le tue configurazioni di firma.
Esegui:
Bash
flutter build apk --release
flutter build apk --release
﻿
iOS
Apri ios/Runner.xcworkspace in Xcode.
Configura la firma e le capacità.
Esegui:
Bash
flutter build ios --release
flutter build ios --release
﻿
8.3 Invio all'App Store
Google Play Store: Segui la guida ufficiale.
Apple App Store: Segui la guida ufficiale.
Conclusione
In questo tutorial avanzato, abbiamo costruito un gioco endless runner ricco di funzionalità utilizzando il Casual Games Toolkit di Flutter e integrato Back4app per i servizi backend. Abbiamo trattato:
Autenticazione Utente: Consentire ai giocatori di registrarsi, accedere e gestire i profili.
Gestione dello Stato: Utilizzare Provider per una gestione dello stato efficiente.
Ottimizzazione delle Prestazioni: Migliorare le prestazioni del gioco e della rete.
Gestione degli Errori e Test: Implementare una gestione degli errori robusta e scrivere test.
Distribuzione: Preparare e inviare l'app agli store.
Questo approccio completo ti fornisce le competenze per sviluppare applicazioni Flutter di livello professionale con integrazioni backend affidabili. Puoi ulteriormente espandere il gioco aggiungendo più funzionalità, come:
Condivisione Sociale: Consentire ai giocatori di condividere i risultati sui social media.
Acquisti In-App: Monetizzare il gioco con articoli o aggiornamenti acquistabili.
Supporto Multiplayer: Implementare funzionalità multiplayer in tempo reale o a turni.
Per ulteriori informazioni su Flutter e integrazione con Back4app, fare riferimento a:
﻿Documentazione Flutter﻿
﻿Guida Flutter di Back4app﻿
﻿Guide del Server Parse﻿
Buon coding e sviluppo di giochi!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Crea un'app Flutter con integrazione OverlayPortal e Back4app
AVANTI IL PROSSIMO
Come visualizzare i dati in Flutter con fl_chart e Back4App