[플러터 게임] 2D 게임 개발의 기초 / 게임 루프 구현하기/ 프레임 관리와 업데이트 주기 설정

Flutter로 2D 게임 개발하기: 프레임 관리와 업데이트 주기 설정 쉽게 이해하기

플러터(Flutter)는 많은 개발자가 사랑하는 모바일 앱 개발 도구이지만, 2D 게임 개발에서도 매우 유용한 기능을 제공합니다.

오늘은 프레임 관리와 업데이트 주기 설정에 대해 알아보고, 초보자도 쉽게 이해할 수 있도록 설명해 드릴게요.

이 두 가지 개념은 게임 루프를 구현하는 데 매우 중요합니다!

1. 게임 루프란 무엇인가?

게임 루프는 게임이 계속 실행되는 동안 반복해서 작동하는 기본 구조입니다.

게임 루프는 게임의 모든 업데이트와 렌더링(그리기) 작업을 관리합니다.

이 루프는 게임이 멈추지 않고 계속해서 화면을 그리며, 캐릭터나 배경의 움직임을 실시간으로 보여주는 핵심 역할을 합니다.

 

게임 루프의 3가지 중요한 단계는 다음과 같습니다

• 입력 처리: 사용자의 입력(터치, 키보드, 마우스)을 처리
• 업데이트: 게임 오브젝트(캐릭터, 배경 등)의 상태(위치, 속도 등)를 업데이트
• 렌더링: 새로운 상태를 화면에 그려줌

2. 프레임(Frame)과 프레임 속도(FPS)란?

프레임(frame)은 게임 화면을 구성하는 하나의 이미지입니다.

그리고 프레임 속도(FPS)는 1초에 몇 개의 프레임이 화면에 그려지는지 나타내는 숫자입니다. 예를 들어, 60FPS는 1초에 60개의 프레임이 그려진다는 뜻입니다.

프레임 속도가 높을수록 게임이 부드럽게 실행됩니다. 반대로, 프레임 속도가 낮으면 게임이 끊기는 것처럼 보일 수 있죠.

3. 업데이트 주기(Update Cycle)란?

업데이트 주기는 게임에서 각 오브젝트(캐릭터, 아이템 등)의 상태가 얼마나 자주 업데이트되는지를 결정하는 주기입니다.

이 주기는 주로 프레임과 연동되어 있으며, 각 프레임마다 게임 상태를 한 번씩 업데이트할 수 있습니다.

하지만, 프레임 속도와 상관없이 일정한 주기로 상태를 업데이트하는 것도 가능합니다.

4. 플러터에서 프레임 관리하기

플러터에서는 Ticker를 이용해 프레임을 관리할 수 있습니다.

Ticker는 초당 몇 번의 프레임을 실행할지 설정하고, 그 주기마다 코드를 실행하는 역할을 합니다. 보통 60FPS로 게임을 설정하는데, 이는 1초에 60번 화면이 갱신된다는 뜻이죠.

플러터에서 프레임을 관리하기 위해서는 Ticker를 생성하고, 게임 루프를 구성해야 합니다.

5. 업데이트 주기 설정하기

업데이트 주기는 Ticker와 함께 사용되어 게임 오브젝트의 상태를 매 프레임마다 변경하거나, 특정 시간 간격으로 상태를 변경할 수 있습니다.

예를 들어, 60FPS에서는 매 프레임마다 오브젝트의 위치를 업데이트하면 자연스러운 애니메이션을 만들 수 있습니다.

플러터에서는 Duration을 설정해 업데이트 주기를 조절할 수 있습니다.

6. 코드 예제: 프레임 속도 조절과 업데이트 주기

이제, 간단한 코드 예제를 통해 프레임 관리와 업데이트 주기를 구현해보겠습니다.

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

void main() => runApp(MyGameApp());

class MyGameApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter 2D Game')),
        body: GameScreen(),
      ),
    );
  }
}

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

class _GameScreenState extends State<GameScreen> with SingleTickerProviderStateMixin {
  Ticker _ticker; // 프레임을 관리할 Ticker
  double _position = 0.0; // 오브젝트 위치
  final double _speed = 100.0; // 오브젝트 이동 속도 (1초당 100px 이동)

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

    // 1. Ticker 생성 (60fps로 설정)
    _ticker = this.createTicker((Duration elapsed) {
      // 2. 프레임 간 경과 시간을 계산해 오브젝트 위치 업데이트
      setState(() {
        // 경과 시간 (초 단위)
        double deltaTime = elapsed.inMilliseconds / 1000;

        // 오브젝트 이동: 속도 * 경과 시간
        _position = (_speed * deltaTime) % MediaQuery.of(context).size.width;
      });
    });

    // 3. Ticker 시작
    _ticker.start();
  }

  @override
  void dispose() {
    // 4. Ticker 해제
    _ticker.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 5. 오브젝트를 화면에 렌더링
        Positioned(
          left: _position, // 오브젝트의 위치를 _position으로 설정
          top: 100,
          child: Icon(Icons.star, size: 50),
        ),
      ],
    );
  }
}

코드 설명

1. Ticker 생성: 초당 60번 실행되는 Ticker를 생성하여 프레임 관리를 합니다.
2. 경과 시간 계산: elapsed.inMilliseconds를 통해 프레임 간의 경과 시간을 구하고, 이를 통해 오브젝트의 위치를 업데이트합니다.
3. 오브젝트 이동: 오브젝트는 속도와 경과 시간을 곱해 부드럽게 움직이도록 설정했습니다.
4. 업데이트 주기 설정: 60FPS에 맞춰 프레임 업데이트 주기를 설정하고, 화면에 오브젝트의 위치를 매번 갱신합니다.

프레임 관리와 업데이트 주기 설정은 게임 개발에서 중요한 부분입니다.

특히, 플러터에서 이를 쉽게 다룰 수 있는 도구들이 많아서 초보자도 쉽게 이해하고 적용할 수 있습니다.

이 글에서 배운 내용을 바탕으로 더 복잡한 2D 게임을 개발할 수 있는 기초를 쌓으셨길 바랍니다!

 

구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱