[플러터 게임] 2D 게임 개발의 기초 / 플러터에서 그래픽 처리하기/ CustomPainter와 Canvas 사용법

 

Flutter는 모바일 앱 개발을 위한 강력한 프레임워크이지만, 많은 사람들이 Flutter로 게임을 만들 수 있다는 사실을 잘 모릅니다.

특히, 2D 게임 개발은 Flutter에서 CustomPainter와 Canvas를 사용하여 간단하게 구현할 수 있습니다.

이 블로그에서는 초보자도 쉽게 이해할 수 있도록 Flutter로 2D 게임을 개발하는 방법을 단계별로 설명하고, CustomPainter와 Canvas의 기능을 하나씩 알아보겠습니다.

1. Flutter로 2D 게임 개발의 기본 개념

Flutter는 UI를 그리는 데 매우 강력한 CustomPainter와 Canvas 클래스를 제공합니다.

CustomPainter는 말 그대로 "사용자 정의 화가"처럼, 여러분이 직접 화면에 원하는 그래픽을 그릴 수 있게 해줍니다.

Canvas는 그림을 그릴 수 있는 도화지 같은 역할을 합니다.

 

이제, Flutter에서 CustomPainter와 Canvas를 사용해 기본적인 2D 그래픽을 그리는 방법을 배워봅시다!

1. CustomPainter란 무엇인가?

CustomPainter는 Flutter에서 직접 화면에 그림을 그릴 수 있도록 도와주는 클래스입니다.

보통 앱에서 제공하는 기본 위젯들로 만들 수 없는 복잡한 UI를 그릴 때 사용합니다.

CustomPainter는 도화지 역할을 하는 Canvas에 그림을 그리고, 다양한 Paint 옵션을 이용해 그려지는 객체들의 스타일을 지정할 수 있습니다.

CustomPainter의 기본 구조

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 여기서 그림을 그립니다.
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;  // 필요에 따라 다시 그릴지 여부를 반환합니다.
  }
}

 

• paint(Canvas canvas, Size size): 여기서 Canvas 객체를 통해 원하는 그래픽을 그립니다.
• shouldRepaint(CustomPainter oldDelegate): 새로운 상태로 다시 그릴지 결정합니다. 보통 애니메이션이나 상태 변화가 있을 때 true로 설정합니다.

2. Canvas란?

Canvas는 그림을 그릴 수 있는 도화지 역할을 합니다. CustomPainter 안에서 Canvas 객체에 다양한 도형이나 이미지를 그리게 됩니다. Canvas는 다양한 메서드를 제공하여 그림 그리기를 쉽게 도와줍니다.

Canvas의 주요 메서드

1. drawLine: 선 그리기

canvas.drawLine(
  Offset(50, 50),  // 시작 좌표
  Offset(200, 200), // 끝 좌표
  paint,           // Paint 객체 (붓)
);

 

• Offset: 선의 시작과 끝 좌표를 지정합니다.
• paint: 선의 색상과 두께 등을 지정하는 객체입니다.

2. drawRect: 사각형 그리기

canvas.drawRect(
  Rect.fromLTWH(50, 50, 150, 100),  // x, y, 너비, 높이
  paint,                            // Paint 객체
);

• Rect.fromLTWH: 사각형의 위치와 크기를 정의합니다. L은 Left, T는 Top, W는 Width, H는 Height입니다.

3. drawCircle: 원 그리기

canvas.drawCircle(
  Offset(100, 100),  // 원의 중심 좌표
  50,                // 반지름
  paint,             // Paint 객체
);

4. drawOval: 타원 그리기

canvas.drawOval(
  Rect.fromLTWH(50, 50, 200, 100),  // 타원의 경계 사각형
  paint,                            // Paint 객체
);

5. drawPath: 경로 그리기

var path = Path();
path.moveTo(100, 100); // 경로의 시작점 설정
path.lineTo(200, 200); // 직선 경로 추가
path.quadraticBezierTo(150, 300, 50, 200); // 곡선 추가

canvas.drawPath(path, paint);

• Path 객체를 사용하면 복잡한 곡선이나 모양을 그릴 수 있습니다. moveTo로 시작점을 설정하고, lineTo, quadraticBezierTo 등으로 경로를 만듭니다.

3. Paint 객체의 사용법과 주요 옵션

Paint는 도형이나 경로를 그릴 때 사용하는 "붓" 같은 역할을 합니다. 이 객체를 통해 색상, 두께, 스타일 등을 설정할 수 있습니다.

Paint 기본 사용법

var paint = Paint()
  ..color = Colors.blue     // 색상
  ..strokeWidth = 5.0       // 선의 두께
  ..style = PaintingStyle.stroke; // 스타일: 선(stroke) 또는 채우기(fill)

Paint의 주요 속성

1. color: 도형이나 선의 색상 설정

paint.color = Colors.red;

2. trokeWidth: 선의 두께를 설정

paint.strokeWidth = 3.0;

3. style: 선(Stroke) 또는 채우기(Fill) 스타일 설정

paint.style = PaintingStyle.stroke; // 선 그리기
paint.style = PaintingStyle.fill;   // 도형 내부 채우기

4. shader: 그라데이션이나 패턴을 그릴 때 사용

paint.shader = LinearGradient(
  colors: [Colors.red, Colors.blue]
).createShader(Rect.fromLTWH(0, 0, 100, 100));

5. blendMode: 색상 혼합 모드 설정

paint.blendMode = BlendMode.multiply;

6. strokeCap: 선 끝의 모양 설정

paint.strokeCap = StrokeCap.round; // 끝이 둥근 선

4. CustomPainter와 Canvas로 다양한 도형 그리기

예제 1: 직사각형과 원 그리기

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.green
      ..style = PaintingStyle.fill;

    // 1. 사각형 그리기
    canvas.drawRect(Rect.fromLTWH(50, 50, 200, 100), paint);

    // 2. 원 그리기
    paint.color = Colors.blue;
    canvas.drawCircle(Offset(200, 300), 50, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;  // 상태 변화 없으므로 다시 그리지 않음
  }
}

예제 2: 곡선 경로와 텍스트 그리기

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.red
      ..strokeWidth = 4.0
      ..style = PaintingStyle.stroke;

    // 1. 경로 그리기 (곡선 포함)
    var path = Path();
    path.moveTo(50, 50);
    path.lineTo(150, 150);
    path.quadraticBezierTo(200, 100, 250, 200);
    canvas.drawPath(path, paint);

    // 2. 텍스트 그리기
    var textPainter = TextPainter(
      text: TextSpan(
        text: 'Flutter',
        style: TextStyle(color: Colors.black, fontSize: 40),
      ),
      textDirection: TextDirection.ltr,
    );
    textPainter.layout(minWidth = 0, maxWidth = size.width);
    textPainter.paint(canvas, Offset(50, 250));
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

코드 설명

1. drawPath: Path 객체를 사용해 곡선과 직선을 그립니다.
2. TextPainter: 텍스트를 그릴 때 사용하며, TextSpan을 통해 텍스트 스타일을 설정할 수 있습니다.

5. CustomPainter의 효율적인 사용법

1. shouldRepaint 메서드를 사용해 불필요한 다시 그리기를 피하세요. 상태 변화가 없으면 false를 반환해 성능을 최적화할 수 있습니다.
2. CustomPaint 위젯은 size 속성을 사용해 그림의 크기를 고정할 수 있습니다.
3. 애니메이션이 필요한 경우 AnimationController를 사용해 CustomPainter와 결합할 수 있습니다.

Flutter의 CustomPainter와 Canvas를 사용하면 복잡한 2D 그래픽과 도형을 자유롭게 그릴 수 있습니다.

Canvas의 다양한 메서드를 활용해 선, 사각형, 원, 곡선 등을 그릴 수 있으며, Paint 객체를 사용해 색상, 스타일 등을 손쉽게 설정할 수 있습니다.

이 도구들을 활용해 앱의 UI를 더욱 독창적이고 다채롭게 만들어 보세요!

 

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

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

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