Modelli Flutter
Crea un gioco multipiattaforma con Flutter e Back4app

12min
Introduzione
Flutter è un framework open-source versatile di Google che consente agli sviluppatori di creare applicazioni compilate nativamente per dispositivi mobili, web, desktop e embedded da un'unica base di codice. Sebbene Flutter sia principalmente conosciuto per lo sviluppo di app tradizionali, viene sempre più utilizzato per lo sviluppo di giochi grazie alle sue prestazioni, all'ampio ecosistema di pacchetti e alla funzionalità di hot reload.

In questa guida, passeremo in rassegna come sviluppare un gioco in stile Flappy Bird multipiattaforma utilizzando Flutter e Flame, un motore di gioco progettato per giochi 2D in Flutter. Inoltre, collegheremo il gioco a Back4App, una piattaforma di backend-as-a-service (BaaS), per memorizzare i punteggi degli utenti e visualizzare una classifica.

Entro la fine di questa guida, avrai una versione funzionante del gioco che gira su piattaforme mobili e web, e memorizzerà e recupererà i punteggi più alti da Back4App.
Requisiti
Per completare questo tutorial, avrai bisogno di:
Un account Back4app. Registrati per un account gratuito su Back4app.com.
Un ambiente di sviluppo Flutter è configurato sul tuo computer locale. Segui la guida all'installazione di Flutter se non l'hai ancora configurato.
Conoscenze di base di Dart, widget Flutter e concetti di sviluppo di giochi.
Passo 1 – Configurare il tuo backend Back4app
Crea un progetto Back4app: Accedi al tuo account Back4app e crea un nuovo progetto.
Crea classi Parse: Per questo tutorial, configureremo un backend semplice per gestire i dati relativi ai giochi. Nel tuo progetto Back4app, crea due classi Parse chiamate Player e GameScore:
Player: Memorizza le informazioni del giocatore come nome utente, livello e traguardi.
GameScore: Memorizza punteggi e classifiche per il gioco.
Ottieni le tue credenziali Back4app: Naviga nelle impostazioni del tuo progetto per recuperare il tuo ID applicazione e la chiave client, che ti serviranno per connettere il tuo gioco Flutter a Back4app.
Passo 2 – Configurare il tuo progetto Flutter
Crea un nuovo progetto Flutter: Apri il tuo terminale o prompt dei comandi e esegui:
Aggiungi dipendenze: Apri pubspec.yaml e aggiungi le seguenti dipendenze:
Inizializza Parse nella tua app: In lib/main.dart, importa il SDK di Parse e inizializzalo nella funzione main:
Dart
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(),
    );
  }
}
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(),
    );
  }
}
﻿
Sostituisci 'YOUR_BACK4APP_APP_ID' e 'YOUR_BACK4APP_CLIENT_KEY' con le tue credenziali effettive di Back4app.
Passo 3 – Configurare il Gioco Utilizzando Flame
Crea la Classe Gioco: Flame è un motore di gioco open-source costruito su Flutter. Fornisce strumenti e API per costruire giochi 2D. Crea una semplice classe di gioco utilizzando Flame:
Dart
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);
  }
}
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. Crea la schermata di gioco: Aggiorna il GameScreen widget per visualizzare il gioco:
Dart
class GameScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MySimpleGame().widget,
    );
  }
}
class GameScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MySimpleGame().widget,
    );
  }
}
﻿
  3. Esegui il gioco: Ora puoi eseguire la tua app utilizzando flutter run per vedere il tuo semplice gioco in azione. Dovresti vedere un quadrato blu che rappresenta il giocatore.
Passo 4 – Gestire i dati di gioco con Back4app
Salvataggio dei dati del giocatore: Successivamente, creiamo una funzione per salvare i dati del giocatore su Back4app quando il giocatore sale di livello o raggiunge qualcosa:
Dart
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');
  }
}
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. Recupero dei punteggi più alti: Puoi anche recuperare i punteggi più alti per il tuo gioco da Back4app da visualizzare su una classifica:
Dart
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 [];
  }
}
﻿
Dart
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 [];
  }
}
﻿
Dart
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. Visualizza la Classifica: Usa ListView.builder in un widget Flutter per visualizzare i primi 10 punteggi:
Dart
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')}'),
          );
        },
      ),
    );
  }
}
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 – Aggiunta di Funzioni Avanzate con Flame
Se desideri aggiungere meccaniche di gioco più complesse, animazioni o interazioni, puoi espandere l'uso di Flame introducendo componenti aggiuntivi come sprite, fisica e rilevamento delle collisioni. Flame supporta anche l'integrazione con Firebase, abilitando funzionalità multiplayer, acquisti in-app e altro.
Conclusione
In questo tutorial, hai imparato come utilizzare Flutter e Flame per costruire un semplice gioco multiplatform e come integrare Back4app per gestire i dati di gioco come profili giocatore e punteggi elevati. La capacità di Flutter di distribuire su più piattaforme da un'unica base di codice, combinata con i robusti servizi backend di Back4app, rende questo un potente stack per sviluppare e scalare giochi.
Che tu stia creando un semplice gioco casual o un'esperienza interattiva più complessa, Flutter e Back4app forniscono gli strumenti per costruire, distribuire e gestire il tuo gioco in modo efficiente.
Per ulteriori informazioni, dai un'occhiata alla documentazione di Flutter e alla documentazione di Back4app. Buon coding!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Tutorial sull'app di prenotazione delle sale riunioni con Back4App, Next.js e Vercel
AVANTI IL PROSSIMO
Come creare un'app per rispondere alle email con intelligenza artificiale utilizzando Flutter e Back4App?