[감정저장소] Flutter-Flame으로 물리엔진 구현하기
감정저장소의 개발과 디자인을 둘 다 진행하면서 느꼈던 회고를 작성합니다.
#Flame이 뭐야?
Flutter가 3.10버젼을 릴리즈하면서 SKIA엔진을 Impeller엔진으로 대체했고, 덕분에 UI상의 버벅거리는 현상인 Jank가 많이 줄어들게 됐습니다. Flutter를 1.0 버젼에서부터 사용했던 사람으로서 체감을 많이 할 수 있었고 Flutter가 성능개선을 계속해서 지원해주는 것에 항상 감사를 느끼고 있습니다 😊
Flutter팀은 엔진교체를 예고함과 동시에 3.0 버젼을 릴리즈하면서 Flutter Casual Game ToolKit 을 소개했습니다. Flutter Casual Game ToolkKit은 규모가 작은 게임을 Flutter로도 개발할 수 있다는 것을 확인시켜줬습니다. 이 ToolKit에 사용된 핵심 라이브러리 바로 Flame 입니다! 😃
Flutter Casual Games Toolkit
#감정저장소에는 어떻게?
위 GIF를 보면 감정조약돌들이 위에서 아래로 떨어지고, 서로 부딪치는 것을 확인할 수 있습니다. 우리가 흔히 말하는 물리엔진이 오브젝트들에 적용되어 있기 때문이에요!
Flame 라이브러리에는 다양한 기능을 제공하는 서드파티 라이브러리들이 포함되어있는데, 그 중에서도 물리엔진 기능을 제공하는 Forge2DGame라이브러리가 사용되고 있습니다.
아래 코드를 보면서 자세히 설명해보겠습니다 🙂
final screenSize = Vector2(1500, 1700); // 해상도
class PhysicScreen extends Forge2DGame {
PhysicScreen()
: super(
zoom: 100,
gravity: Vector2(0, 30),
cameraComponent: CameraComponent.withFixedResolution(
width: screenSize.x,
height: screenSize.y,
),
);
...
Forge2DGame 인터페이스를 상속받아 중력값인 gavity를 Vector2() 값으로 넣어주고, Flame게임의 스크린 크기를 결정하기 위해 CameraComponent 오브젝트에 선언되어있는 withFixedResolution Constructor를 사용해 해상도 값을 넣어줍니다.
...
@override
Future<void> onLoad() async {
camera.backdrop.add(_Background(size: screenSize));
}
}|
class _Background extends PositionComponent {
_Background({super.size});
@override
void render(Canvas canvas) {
canvas.drawRect(Rect.fromLTWH(0, 0, size.x, size.y),
Paint()..color = Colors.transparent);
}
}
그리고 Forge2DGame 인터페이스는 onLoad, onAttach, onMount, onDispose 등의 기능을 제공해줍니다. 이 중에서 onLoad() 함수는 최초에 컴파일단계에서 게임속 세상의 오브젝트를 불러올 때, 실행되고 여기서 배경색상을 지정해줄 수 있습니다.
실제 떨어지는 공이 만들어지는 코드는 다음과 같아요.
class EmotionBall extends BodyComponent {
final String assetURL;
EmotionBall({required this.assetURL});
double size = 1.6.w;
@override
Future<void> onLoad() async {
await super.onLoad();
final sprite = Sprite(game.images.fromCache(assetURL));
add(
SpriteComponent(
sprite: sprite,
size: Vector2(3.2.w, 3.2.w),
anchor: Anchor.center,
),
);
}
...
오브젝트에 직접 색상을 입힐 수도 있고, 유니티를 사용해보신 분들이라면 잘 아실 Sprite를 오브젝트에 입혀줄 수 있습니다.
@override
Body createBody() {
final bodyDef = BodyDef(
position: Vector2(worldSize.x / 2, -1),
type: BodyType.dynamic,
);
final shape = CircleShape()..radius = size;
final fixtureDef = FixtureDef(shape)
..density = 3
..friction = 1
..restitution = 0.4;
return world.createBody(bodyDef)
..createFixture(fixtureDef)
..angularVelocity = radians(100);
}
}
가장 핵심적인 기능은 위의 코드라고 할 수 있는데요. Forge2D라이브러리의 BodyComponent클래스에서 지원하는 createBody() 함수를 통해 최초 생성되는 위치인 position, 그리고 BodyType을 결정해줄 수 있습니다.
BodyType은
고정되어서 말그대로 고정적인 위치값을 갖게되는 static
zero velocity, zero mass, manually moved
static과 동일하지만, 게임 로직을 통해 움직임을 줄 수 있는 kinetic
zero velocity, zero mass, moved by solver
그리고 자유로운 물리효과를 받는 dynamic
with positive mass, non-zero velocity, determined by forces, moved by solver
을 지원합니다.
BodyType을 결정해주는 코드 아래에서는 mass의 속성들을 결정해줄 수 있습니다. 🙂
가운데에 돌아가는 Box는 Kinetic 타입, 떨어지는 공들은 중력의 영향을 받는 Dynamic 타입의 오브젝트입니다
추가적으로 Forge2DGame 인터페이스는 microseconds 프레임을 지원하는 update 메소드를 제공하는데요.
기기사양에 따라서 지원되는 프레임수는 유동적이라고 하네요 😃
@override
void update(double dt) async {
...
}
#감정저장소의 다가오는 업데이트는?
[이미지]
감정저장소의 1.1 버젼에는 지금까지 내가 작성한 모먼트들을 기반으로 이 달의 데이터를 분석해주는 기능을 추가할 예정입니다 🙂 현재 열심히 개발중에 있구요, 혹시 오늘 메이커로그를 보고 관심이 생기신 분이 계시다면 감정저장소를 사용해주세요 :)
사용해보시고 피드백을 주시면 적극적으로 반영하고 싶습니다!
(다음에 이어서,...)
