Plantillas de Flutter
Construyendo un juego multiplataforma usando Flutter y Back4app

11min
Introducción
Flutter es un marco de trabajo versátil de código abierto de Google que permite a los desarrolladores crear aplicaciones compiladas nativamente para dispositivos móviles, web, de escritorio y embebidos a partir de una única base de código. Aunque Flutter es conocido principalmente por el desarrollo de aplicaciones tradicionales, se está utilizando cada vez más para el desarrollo de juegos debido a su rendimiento, su extenso ecosistema de paquetes y su funcionalidad de recarga en caliente.

En esta guía, recorreremos cómo desarrollar un juego multiplataforma estilo Flappy Bird utilizando Flutter y Flame, un motor de juegos diseñado para juegos en 2D en Flutter. Además, conectaremos el juego a Back4App, una plataforma de backend como servicio (BaaS), para almacenar las puntuaciones de los usuarios y mostrar una tabla de clasificación.

Al final de esta guía, tendrás una versión funcional del juego que se ejecuta en plataformas móviles y web, y almacenará y recuperará las puntuaciones más altas de Back4App.
Requisitos previos
Para completar este tutorial, necesitarás:
Una cuenta de Back4app. Regístrate para obtener una cuenta gratuita en Back4app.com.
Un entorno de desarrollo de Flutter configurado en tu máquina local. Sigue la guía de instalación de Flutter si aún no lo has configurado.
Conocimientos básicos de Dart, widgets de Flutter y conceptos de desarrollo de juegos.
Paso 1 – Configurando tu backend de Back4app
Crear un proyecto de Back4app: Inicia sesión en tu cuenta de Back4app y crea un nuevo proyecto.
Crear clases de Parse: Para este tutorial, configuraremos un backend simple para gestionar datos relacionados con el juego. En tu proyecto de Back4app, crea dos clases de Parse llamadas Jugador y PuntuaciónDelJuego:
Jugador: Almacena información del jugador como nombre de usuario, nivel y logros.
PuntuaciónDelJuego: Almacena puntuaciones y clasificaciones para el juego.
Obtén tus credenciales de Back4app: Navega a la configuración de tu proyecto para recuperar tu ID de aplicación y clave de cliente, que necesitarás para conectar tu juego de Flutter a Back4app.
Paso 2 – Configurando tu proyecto de Flutter
Crear un nuevo proyecto de Flutter: Abre tu terminal o símbolo del sistema y ejecuta:
Agregar dependencias: Abre pubspec.yaml y agrega las siguientes dependencias:
Inicializar Parse en tu aplicación: En lib/main.dart, importa el SDK de Parse e inicialízalo en la función principal:
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(),
    );
  }
}
﻿
Reemplace 'YOUR_BACK4APP_APP_ID' y 'YOUR_BACK4APP_CLIENT_KEY' con sus credenciales reales de Back4app.
Paso 3 – Configurando el Juego Usando Flame
Cree la Clase del Juego: Flame es un motor de juego de código abierto construido sobre Flutter. Proporciona herramientas y API para construir juegos en 2D. Cree una clase de juego simple usando 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. Crear la Pantalla del Juego: Actualiza el GameScreen widget para mostrar el juego:
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. Ejecutar el Juego: Ahora puedes ejecutar tu aplicación usando flutter run para ver tu juego simple en acción. Deberías ver un cuadrado azul que representa al jugador.
Paso 4 – Gestionando Datos del Juego con Back4app
Guardar Datos del Jugador: A continuación, vamos a crear una función para guardar los datos del jugador en Back4app cuando el jugador suba de nivel o logre algo:
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. Recuperar Puntuaciones Altas: También puedes obtener las puntuaciones altas de tu juego desde Back4app para mostrarlas en una tabla de clasificación:
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. Mostrar la tabla de clasificación: Usa ListView.builder en un widget de Flutter para mostrar los 10 mejores puntajes:
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')}'),
          );
        },
      ),
    );
  }
}
﻿
Paso 5 – Agregando Características Avanzadas con Flame
Si deseas agregar mecánicas de juego más complejas, animaciones o interacciones, puedes expandir tu uso de Flame introduciendo componentes adicionales como sprites, física y detección de colisiones. Flame también admite la integración con Firebase, lo que permite características multijugador, compras dentro de la aplicación y más.
Conclusión
En este tutorial, aprendiste cómo usar Flutter y Flame para construir un juego multiplataforma simple y cómo integrar Back4app para gestionar datos del juego como perfiles de jugadores y puntajes altos. La capacidad de Flutter para desplegar en múltiples plataformas desde una única base de código, combinada con los robustos servicios backend de Back4app, hace de este un stack poderoso para desarrollar y escalar juegos.
Ya sea creando un juego casual simple o una experiencia interactiva más compleja, Flutter y Back4app proporcionan las herramientas para construir, desplegar y gestionar tu juego de manera eficiente.
Para más información, consulta la documentación de Flutter y la documentación de Back4app. ¡Feliz codificación!
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Tutorial de aplicación de reserva de salas de reuniones con Back4App, Next.js y Vercel
Cómo construir una aplicación de respuesta automática de correos electrónicos con Flutter y Back4App