Flutter/Flame 2D Game의 Background Image 등록하기

본 편은 하단 글을 기반으로 합니다. (사실상 후속 보너스편)

 

처음 보시는 분은 이해가 되지 않는다면 1편을 보고오십셔.

(기존 코드를 기반으로 합니다. 보고오시는걸 추천)

 

https://seokbong.tistory.com/186

Flutter/Flame 2D X, Y축 이동이 가능한 2D 게임 만들기 예시 (Example of creating a 2D game with movable X and Y axes

---

1. 시작

저번 시간에 조작 기능만 구현하고 끝내려고 했었다.

 

근데 역시 이러고 끝내기엔 너무 아쉬웠다.

 

그래서 하나 하나 부가 기능을 추가해보려고 한다.

(보통 이러다가 금방 때려침)

 

아무튼 오늘의 할 일은 다음과 같다.

 

• 백그라운드 이미지 등록
• 캐릭터 중앙 배치
• 캐릭터 이동을 따라가는 카메라(화면)

요 정도이며 금방 끝난다.

 

이 글을 읽고 난 다음에 볼 수 있는 결과물

 

2. 개발환경

(늘 언제나 똑같은 회사 랩탑....)

해당 글은 23년 3월 10일 기준으로 작성되었습니다.

Windows 10

Flutter (Android Studio)

Flame 1.6.0

 

3. 코드

(대충 최대한 서순에 맞게 어찌구 저찌구 내용)

 

3.1.) world.dart 생성

우선 lib > components > map > world.dart 를 생성해주었다.

 

그리고 Map Spritesheet 이미지를 assets > images > background.png 에 등록해주었다.

 

(대충 구조가 이렇다는 이미지)

world.dart는 다음과 같이 작성하자.

import 'package:flame/components.dart';

class World extends SpriteComponent with HasGameRef {
  @override
  Future<void> onLoad() async {
    super.onLoad();
    // 백그라운드 이미지 로드 및 사이즈 설정
    sprite = await gameRef.loadSprite('background.png');
    size = sprite!.originalSize;
  }
}

 

자 그럼 생성한 World 클래스를 쓰러 가보자.

 

3.2) main_game.dart

저번 시간에 _player를 생성하고 사용하듯 똑같이 사용하면 된다.

 

추가된 부분은 주석을 해놓았다.

import 'dart:ui';

import 'package:flame/game.dart';
import 'package:flame/events.dart';

import 'components/player/player.dart';
import 'components/map/world.dart';

class MainGame extends FlameGame with HasKeyboardHandlerComponents {
  final Player _player = Player();
  final World _world = World();		// World 생성

  @override
  Future<void> onLoad() async {
  
  	// World 추가, 순서에 주의하자. (케릭터를 덮어버리기 싫다면)
    add(_world);
    add(_player);

    // world 객체 생성 대기, 케릭터 맵 중앙에 세팅
    // 대기하지 않으면 size 정보를 불러올 수 없다.
    await _world.onLoad();

	// 케릭터를 중앙에 배치
    _player.position = Vector2(
      (_world.size.x / 2) - (_player.size.x / 2),
      (_world.size.y / 2) - (_player.size.y / 2),
    );

	// 카메라가 플레이어 중앙에 고정
    camera.followComponent(
      _player,
      worldBounds: Rect.fromLTWH(
        0,
        0,
        (_world.size.x),
        (_world.size.y),
      ),
    );
  }
}

 

3.3) Player.dart

anchor를 center로 설정하여 케릭터 중앙을 기준으로 하게 변경함.

 

역시나 추가된 부분은 주석으로 표시함.

import 'package:flame/components.dart';
import 'package:flame/sprite.dart';
import 'package:flame/game.dart';
import 'package:flutter/services.dart';

class Player extends SpriteAnimationComponent with KeyboardHandler, HasGameRef {
  Player() : super(size: Vector2.all(50), anchor: Anchor.center);	// anchor: Anchor.center를 추가하자.
  
  // ...(코드생략)
  }
}

 

끝!

 

Full code는 하단 링크를 참조하자.

https://github.com/Seokhyeon-Park/game_2d_sample

GitHub - Seokhyeon-Park/game_2d_sample