เพิ่มเสียงและเพลงให้กับเกม Flutter

1. ก่อนเริ่มต้น

เกมเป็นประสบการณ์ภาพและเสียง Flutter เป็นเครื่องมือที่ยอดเยี่ยมในการสร้างภาพที่สวยงามและ UI ที่มีประสิทธิภาพ จึงช่วยให้คุณก้าวหน้าไปได้มากในด้านภาพ ส่วนผสมสุดท้ายที่ขาดหายไปคือเสียง ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีใช้ปลั๊กอิน flutter_soloud เพื่อเพิ่มเสียงและเพลงที่มีเวลาในการตอบสนองต่ำลงในโปรเจ็กต์ คุณเริ่มต้นด้วยสคาฟเฟิลด์พื้นฐานเพื่อให้ข้ามไปยังส่วนที่น่าสนใจได้โดยตรง

ภาพหูฟังที่วาดด้วยมือ

แน่นอนว่าคุณสามารถใช้สิ่งที่ได้เรียนรู้ที่นี่เพื่อเพิ่มเสียงลงในแอป ไม่ใช่แค่เกม แต่แม้ว่าเกมเกือบทั้งหมดต้องใช้เสียงและเพลง แต่แอปส่วนใหญ่ไม่ใช้ โค้ดแล็บนี้จึงมุ่งเน้นที่เกม

ข้อกำหนดเบื้องต้น

  • คุ้นเคยกับ Flutter ในระดับพื้นฐาน
  • ความรู้เกี่ยวกับวิธีเรียกใช้และแก้ไขข้อบกพร่องของแอป Flutter

สิ่งที่คุณเรียนรู้

  • วิธีเล่นเสียงแบบเล่นครั้งเดียว
  • วิธีเล่นและปรับแต่งการวนเพลงแบบไม่ขาดตอน
  • วิธีทำให้เสียงค่อยๆ ดังขึ้นหรือเบาลง
  • วิธีใช้เอฟเฟกต์เสียงสภาพแวดล้อม
  • วิธีจัดการกับข้อยกเว้น
  • วิธีรวมฟีเจอร์ทั้งหมดเหล่านี้ไว้ในตัวควบคุมเสียงตัวเดียว

สิ่งที่ต้องมี

  • Flutter SDK
  • ตัวแก้ไขโค้ดที่คุณเลือก

2. ตั้งค่า

  1. ดาวน์โหลดไฟล์ต่อไปนี้ ไม่ต้องกังวลหากการเชื่อมต่อช้า คุณต้องใช้ไฟล์จริงในภายหลัง ดังนั้นให้ดาวน์โหลดไฟล์ขณะที่คุณทำงาน
  1. สร้างโปรเจ็กต์ Flutter ด้วยชื่อที่ต้องการ
  1. สร้างไฟล์ lib/audio/audio_controller.dart ในโปรเจ็กต์
  2. ในไฟล์ ให้ป้อนรหัสต่อไปนี้

lib/audio/audio_controller.dart

import 'dart:async';

import 'package:logging/logging.dart';

class AudioController {
  static final Logger _log = Logger('AudioController');

  Future<void> initialize() async {
    // TODO
  }

  void dispose() {
    // TODO
  }

  Future<void> playSound(String assetKey) async {
    _log.warning('Not implemented yet.');
  }

  Future<void> startMusic() async {
    _log.warning('Not implemented yet.');
  }

  void fadeOutMusic() {
    _log.warning('Not implemented yet.');
  }

  void applyFilter() {
    // TODO
  }

  void removeFilter() {
    // TODO
  }
}

ดังที่คุณเห็น นี่เป็นแค่โครงร่างของฟังก์ชันการทำงานในอนาคต เราจะติดตั้งใช้งานทั้งหมดในระหว่างโค้ดแล็บนี้

  1. ถัดไป ให้เปิดไฟล์ lib/main.dart แล้วแทนที่เนื้อหาด้วยโค้ดต่อไปนี้

lib/main.dart

import 'dart:developer' as dev;

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:logging/logging.dart';

import 'audio/audio_controller.dart';

void main() async {
  // The `flutter_soloud` package logs everything
  // (from severe warnings to fine debug messages)
  // using the standard `package:logging`.
  // You can listen to the logs as shown below.
  Logger.root.level = kDebugMode ? Level.FINE : Level.INFO;
  Logger.root.onRecord.listen((record) {
    dev.log(
      record.message,
      time: record.time,
      level: record.level.value,
      name: record.loggerName,
      zone: record.zone,
      error: record.error,
      stackTrace: record.stackTrace,
    );
  });

  WidgetsFlutterBinding.ensureInitialized();

  final audioController = AudioController();
  await audioController.initialize();

  runApp(MyApp(audioController: audioController));
}

class MyApp extends StatelessWidget {
  const MyApp({required this.audioController, super.key});

  final AudioController audioController;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter SoLoud Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.brown),
      ),
      home: MyHomePage(audioController: audioController),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.audioController});

  final AudioController audioController;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const _gap = SizedBox(height: 16);

  bool filterApplied = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter SoLoud Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            OutlinedButton(
              onPressed: () {
                widget.audioController.playSound('assets/sounds/pew1.mp3');
              },
              child: const Text('Play Sound'),
            ),
            _gap,
            OutlinedButton(
              onPressed: () {
                widget.audioController.startMusic();
              },
              child: const Text('Start Music'),
            ),
            _gap,
            OutlinedButton(
              onPressed: () {
                widget.audioController.fadeOutMusic();
              },
              child: const Text('Fade Out Music'),
            ),
            _gap,
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                const Text('Apply Filter'),
                Checkbox(
                  value: filterApplied,
                  onChanged: (value) {
                    setState(() {
                      filterApplied = value!;
                    });
                    if (filterApplied) {
                      widget.audioController.applyFilter();
                    } else {
                      widget.audioController.removeFilter();
                    }
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
  1. หลังจากดาวน์โหลดไฟล์เสียงแล้ว ให้สร้างไดเรกทอรีที่รูทของโปรเจ็กต์ชื่อ assets
  2. ในไดเรกทอรี assets ให้สร้างไดเรกทอรีย่อย 2 รายการ โดยให้ชื่อไดเรกทอรีหนึ่งว่า music และอีกชื่อหนึ่งว่า sounds
  3. ย้ายไฟล์ที่ดาวน์โหลดไปยังโปรเจ็กต์เพื่อให้ไฟล์เพลงอยู่ในไฟล์ assets/music/looped-song.ogg และเสียงปืนอยู่ในไฟล์ต่อไปนี้
  • assets/sounds/pew1.mp3
  • assets/sounds/pew2.mp3
  • assets/sounds/pew3.mp3

ตอนนี้โครงสร้างโปรเจ็กต์ควรมีลักษณะดังนี้

มุมมองต้นไม้ของโปรเจ็กต์ที่มีโฟลเดอร์ เช่น &quot;android&quot;, &quot;ios&quot;, ไฟล์ เช่น &quot;README.md&quot; และ &quot;analysis_options.yaml&quot;  เราสามารถดูไดเรกทอรี &quot;assets&quot; ที่มีไดเรกทอรีย่อย &quot;music&quot; และ &quot;sounds&quot;, ไดเรกทอรี &quot;lib&quot; ที่มี &quot;main.dart&quot; และไดเรกทอรีย่อย &quot;audio&quot; ที่มี &quot;audio_controller.dart&quot; และไฟล์ &quot;pubspec.yaml&quot;  ลูกศรจะชี้ไปยังไดเรกทอรีใหม่และไฟล์ที่คุณแตะจนถึงตอนนี้

เมื่อสร้างไฟล์แล้ว คุณต้องแจ้งให้ Flutter ทราบ

  1. เปิดไฟล์ pubspec.yaml แล้วแทนที่ส่วน flutter: ที่ด้านล่างของไฟล์ด้วยข้อมูลต่อไปนี้

pubspec.yaml

...

flutter:
  uses-material-design: true

  assets:
    - assets/music/
    - assets/sounds/
  1. เพิ่มการพึ่งพาแพ็กเกจ flutter_soloud และแพ็กเกจ logging
flutter pub add flutter_soloud logging

ตอนนี้ไฟล์ pubspec.yaml ควรมี Dependency เพิ่มเติมในแพ็กเกจ flutter_soloud และ logging

pubspec.yaml

...

dependencies:
  flutter:
    sdk: flutter

  flutter_soloud: ^3.1.10
  logging: ^1.3.0

...
  1. เรียกใช้โปรเจ็กต์ ยังไม่มีฟังก์ชันการทำงานเนื่องจากคุณเพิ่มฟังก์ชันการทำงานในส่วนต่อไปนี้

10f0f751c9c47038.png