아토믹데브_10_취업 준비생을 위한 모바일 게임 개발 여정

제10강: 데이터 저장 및 로드 - 플레이어 진행 관리

---

학습 목표:

이번 강의에서는 "BrainBox Delivery" 게임에서 플레이어의 진행 상황을 저장하고, 게임 시작 시 저장된 데이터를 불러와 이전 상태를 복원하는 기능을 구현하는 방법을 학습합니다. 로컬 저장소(Local Storage) 또는 SQLite를 사용하여 데이터를 저장하고, 이를 바탕으로 게임의 진행 상황을 관리하는 방법을 익히게 됩니다.

---

1. 로컬 저장소(Local Storage) 또는 SQLite 사용하여 데이터 저장

게임의 진행 상황을 저장하기 위해서는 로컬 저장소를 사용하거나, 더 복잡한 데이터 구조를 다루기 위해 SQLite를 활용할 수 있습니다. 이 단계에서는 두 가지 방법을 통해 데이터를 저장하는 방법을 살펴보겠습니다.

1.1 React Native - AsyncStorage를 사용한 데이터 저장

React Native에서는 AsyncStorage를 사용하여 간단한 키-값 쌍의 데이터를 로컬에 저장할 수 있습니다. 다음은 플레이어의 게임 진행 상황을 저장하는 예제입니다.

import AsyncStorage from '@react-native-async-storage/async-storage';

const saveGameProgress = async (progress) => {
  try {
    await AsyncStorage.setItem('@game_progress', JSON.stringify(progress));
    console.log('Game progress saved');
  } catch (error) {
    console.log('Failed to save game progress', error);
  }
};

const loadGameProgress = async () => {
  try {
    const progress = await AsyncStorage.getItem('@game_progress');
    return progress != null ? JSON.parse(progress) : null;
  } catch (error) {
    console.log('Failed to load game progress', error);
  }
};

이 코드에서는 AsyncStorage를 사용해 게임 진행 상황을 저장하고, 불러오는 기능을 구현했습니다. 데이터를 JSON 형식으로 저장하여 복잡한 구조도 처리할 수 있습니다.

1.2 Flutter - SharedPreferences 또는 SQLite를 사용한 데이터 저장

Flutter에서는 SharedPreferences를 사용해 간단한 데이터를 저장할 수 있으며, sqflite 패키지를 통해 SQLite를 사용할 수 있습니다. 다음은 SharedPreferences를 사용한 예제입니다.

import 'package:shared_preferences/shared_preferences.dart';

Future<void> saveGameProgress(Map<String, dynamic> progress) async {
  final prefs = await SharedPreferences.getInstance();
  prefs.setString('game_progress', progress.toString());
  print('Game progress saved');
}

Future<Map<String, dynamic>?> loadGameProgress() async {
  final prefs = await SharedPreferences.getInstance();
  final progressString = prefs.getString('game_progress');
  if (progressString != null) {
    // Parsing string to map logic needed here
    print('Game progress loaded');
    return {}; // Replace with parsed data
  }
  return null;
}

 

이 Flutter 코드는 SharedPreferences를 사용해 게임 진행 상황을 저장하고 불러오는 기능을 구현합니다. 복잡한 데이터는 SQLite를 사용해 관리할 수 있습니다.

---

2. 게임 진행 상황 저장 및 불러오기 기능 구현

이제 플레이어의 게임 진행 상황을 저장하고, 게임을 시작할 때 이를 불러와 이어서 플레이할 수 있도록 하는 기능을 구현합니다.

2.1 React Native - 진행 상황 저장 및 불러오기

React Native에서 이전에 구현한 AsyncStorage 기반의 함수들을 활용해 게임 시작 시 진행 상황을 불러오고, 새로운 진행 상황을 저장하는 기능을 추가합니다.

import React, { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import { saveGameProgress, loadGameProgress } from './storage';

const GameScreen = () => {
  const [progress, setProgress] = useState(null);

  useEffect(() => {
    const fetchProgress = async () => {
      const loadedProgress = await loadGameProgress();
      if (loadedProgress) {
        setProgress(loadedProgress);
      }
    };
    fetchProgress();
  }, []);

  const handleSave = () => {
    const currentProgress = { level: 2, score: 1500 }; // 예시 데이터
    saveGameProgress(currentProgress);
  };

  return (
    <View>
      <Text>Current Progress: {progress ? JSON.stringify(progress) : 'No data'}</Text>
      <Button title="Save Progress" onPress={handleSave} />
    </View>
  );
};

export default GameScreen;

 

이 코드는 게임이 시작될 때 저장된 진행 상황을 불러오고, 새로운 진행 상황을 저장하는 버튼을 제공합니다.

2.2 Flutter - 진행 상황 저장 및 불러오기

Flutter에서도 마찬가지로 저장된 데이터를 불러오고 저장하는 로직을 추가합니다.

import 'package:flutter/material.dart';
import 'storage.dart';

class GameScreen extends StatefulWidget {
  @override
  _GameScreenState createState() => _GameScreenState();
}

class _GameScreenState extends State<GameScreen> {
  Map<String, dynamic>? progress;

  @override
  void initState() {
    super.initState();
    loadProgress();
  }

  void loadProgress() async {
    final loadedProgress = await loadGameProgress();
    setState(() {
      progress = loadedProgress;
    });
  }

  void saveProgress() {
    final currentProgress = {'level': 2, 'score': 1500}; // 예시 데이터
    saveGameProgress(currentProgress);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BrainBox Delivery'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Current Progress: ${progress != null ? progress.toString() : 'No data'}'),
            ElevatedButton(
              onPressed: saveProgress,
              child: Text('Save Progress'),
            ),
          ],
        ),
      ),
    );
  }
}

 

이 Flutter 코드는 게임 시작 시 저장된 데이터를 불러오고, 새로운 진행 상황을 저장할 수 있도록 합니다.

---

3. 저장된 데이터를 활용한 게임 상태 복원

게임의 진행 상황이 저장되고 불러와졌을 때, 이 데이터를 기반으로 게임의 상태를 복원하여 플레이어가 중단된 지점에서 다시 시작할 수 있도록 합니다.

3.1 React Native - 게임 상태 복원

저장된 데이터를 불러온 후, 해당 데이터를 바탕으로 게임의 상태를 복원합니다.

const restoreGameState = (progress) => {
  gameManager.currentLevel = progress.level;
  gameManager.currentRound = progress.round;
  gameManager.score = progress.score;
  console.log('Game state restored');
};

 

불러온 데이터를 게임 매니저에 반영하여 게임 상태를 복원할 수 있습니다.

3.2 Flutter - 게임 상태 복원

Flutter에서도 불러온 데이터를 바탕으로 게임의 상태를 복원합니다.

void restoreGameState(Map<String, dynamic> progress) {
  gameManager.currentLevel = progress['level'];
  gameManager.currentRound = progress['round'];
  gameManager.score = progress['score'];
  print('Game state restored');
}

 

이 코드를 통해 불러온 데이터를 게임 매니저에 적용하여 게임 상태를 복원할 수 있습니다.

 

---

이 강의를 통해 여러분은 "BrainBox Delivery" 게임에서 플레이어의 진행 상황을 관리하는 기능을 구현하고, 이를 통해 게임을 더욱 완성도 있게 만드는 기술을 습득하게 되었습니다. 앞으로의 강의에서는 이러한 기초를 바탕으로 게임을 더욱 발전시켜 나갈 것입니다.