[플러터 게임] 2D 게임 개발의 기초 / 스프라이트 애니메이션 구현/ 스프라이트 이미지로 애니메이션 만들기)

 

플러터로 2D 게임을 만들 때 스프라이트 애니메이션을 구현하는 방법에 대해 알아볼 거예요.

스프라이트 애니메이션은 캐릭터가 움직이거나 다양한 행동을 할 때 사용하는 방법이에요. 초보자도 쉽게 이해할 수 있도록 설명할게요.

1. 스프라이트 애니메이션이란 무엇인가요?

스프라이트 애니메이션은 여러 개의 이미지를 빠르게 보여주어 움직이는 효과를 만드는 방법이에요.

예를 들어, 캐릭터가 뛰거나 공격할 때 여러 장의 이미지를 연속적으로 보여주는 방식이에요.

2. 필요한 이미지 준비하기

애니메이션을 만들기 위해 여러 개의 스프라이트 이미지를 준비해야 해요.

예를 들어, 캐릭터가 달리는 동작을 나타내는 여러 이미지가 필요해요.

이미지 예시

• run1.png: 달리기 시작하는 이미지
• run2.png: 중간 이미지
• run3.png: 달리기 끝나는 이미지

이 이미지를 assets 폴더에 저장해보세요.

my_game/
│
├── assets/
│   ├── run1.png
│   ├── run2.png
│   ├── run3.png
│   └── background.png
│
└── lib/
    └── main.dart

3. pubspec.yaml 파일 수정

준비한 스프라이트 이미지를 사용할 수 있도록 pubspec.yaml 파일에 이미지를 추가해줘야 해요.

flutter:
  assets:
    - assets/run1.png
    - assets/run2.png
    - assets/run3.png
    - assets/background.png

4. 스프라이트 애니메이션 구현하기

이제 스프라이트 애니메이션을 구현해볼 거예요. 플러터에서는 Animation 클래스를 사용해 애니메이션을 쉽게 만들 수 있어요.

아래는 스프라이트 애니메이션을 구현한 코드 예시예요.

import 'package:flutter/material.dart';

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

class MyGameApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '나의 2D 게임',
      home: GameScreen(),
    );
  }
}

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

class _GameScreenState extends State<GameScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<int> _animation;

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

    // 애니메이션 컨트롤러 생성
    _controller = AnimationController(
      duration: const Duration(milliseconds: 1000), // 애니메이션 시간
      vsync: this,
    )..repeat(); // 애니메이션 반복

    // 애니메이션 인덱스 정의
    _animation = IntTween(begin: 1, end: 3).animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('게임 화면'),
      ),
      body: Stack(
        children: <Widget>[
          Image.asset('assets/background.png'), // 배경 이미지
          Center(
            child: AnimatedBuilder(
              animation: _animation,
              builder: (context, child) {
                return Image.asset('assets/run${_animation.value}.png'); // 스프라이트 애니메이션
              },
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose(); // 컨트롤러 해제
    super.dispose();
  }
}

• 코드 설명
  • AnimationController: 애니메이션을 제어하는 객체예요.
  • IntTween: 애니메이션의 시작과 끝 값을 설정해요. 여기서는 1에서 3까지 숫자가 변해요.
  • AnimatedBuilder: 애니메이션이 변경될 때마다 화면을 다시 그려주는 위젯이에요.
  • Image.asset('assets/run${_animation.value}.png'): 애니메이션 프레임을 변경하면서 이미지를 보여줘요.

5. 스프라이트 애니메이션 정리

이제 스프라이트 애니메이션을 준비하고 구현하는 방법을 배웠어요.

캐릭터가 달리는 애니메이션을 만들 수 있게 되었죠. 애니메이션을 사용하면 게임이 더 재미있고 생동감 있게 보여요.

 

오늘은 플러터로 2D 게임에서 스프라이트 애니메이션을 구현하는 방법에 대해 알아보았어요.

여러 개의 이미지를 사용해 캐릭터가 움직이는 효과를 만들 수 있었죠.

다음에는 스프라이트에 움직임을 추가하는 방법에 대해 배워볼 거예요.

 

 

구독!! 공감과 댓글,

광고 클릭은 저에게 큰 힘이 됩니다.

 

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

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