[초보자 게임 만들기 기초] flutter flame 구조와 사각형 위에서 아래로 떨어뜨리기

flutter flame을 이용해서 2D 게임 제작을 해 보려고 합니다.

 

우선 flutter에서 flame을 사용하는 가장 간단한 기본 코드 구조를 보겠습니다.

 

import 'package:flutter/material.dart';
import 'package:flame/game.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GameWidget(game: MyGame()),
    );
  }
}

class MyGame extends FlameGame {
  @override
  void update(double t) {
  }

  @override
  void render(Canvas canvas) {
  }
}

 

 

dartpad.dev 에서 실행해 보면 검은 빈 화면이 실행되는 것을 확인할 수 있습니다.

 

update와 render에서 게임 구현이 주로 이루어집니다. 특징은 다음과 같습니다.

 

1. update 함수:

• 목적: 게임 상태를 업데이트하고, 게임 논리를 처리합니다.
• 호출 시점: 매 프레임마다 자동으로 호출됩니다. 프레임 속도는 Flame.targetFps 속성으로 설정할 수 있습니다.
• 사용 방법:
  • update 함수 내에서 게임 객체의 위치, 속도, 상태 등을 변경합니다.
  • 사용자 입력 (터치, 키보드 등)을 처리하고, 이에 따라 게임 상태를 업데이트합니다.
  • 게임 로직을 구현하고, 게임 플레이를 제어합니다.

2. render 함수:

• 목적: 게임 화면을 그립니다.
• 호출 시점: update 함수가 종료된 후 호출됩니다.
• 사용 방법:
  • render 함수 내에서 Canvas 객체를 사용하여 게임 화면을 그립니다.
  • 사용자 인터페이스 (UI) 요소, 게임 오브젝트, 배경 등을 그립니다.
  • Paint 객체를 사용하여 그리기 스타일을 설정합니다.

 

즉 update 함수에서 게임 상태를 변경하고, render 함수에서 그 상태를 반영하여 화면에 표시 합니다.

 

update와 render 함수에 사각형을 아래로 떨어 뜨리는 걸 구현해 보겠습니다.

 

import 'package:flutter/material.dart';
import 'package:flame/game.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GameWidget(game: MyGame()),
    );
  }
}

class MyGame extends FlameGame {
  late double _boxY = 0; // 사각형의 y 위치
  static const double _boxSpeed = 100; // 사각형의 속도 (픽셀/초)

  double get width => size.x;
  double get height => size.y;
  
  @override
  void update(double t) {
    _boxY += _boxSpeed * t; // 시간에 따라 y 위치 업데이트

    // 화면 아래로 사각형이 넘어가지 않도록 방지
    if (_boxY > width) {
      _boxY = 0;
    }
  }

  @override
  void render(Canvas canvas) {
    final paint = Paint()..color = Colors.red; // 빨간색 사각형
    canvas.drawRect(Rect.fromLTWH(width / 2 - 25, _boxY, 50, 50), paint);
  }
}

 

 

위 코드를 실행한 화면은 다음과 같습니다.