วิธีสร้างเกม Endless Runner ขั้นสูงโดยใช้ Flutter, Casual Games Toolkit และ Back4app

บทนำ เกมแนวสบายเป็นที่นิยมเนื่องจากความเรียบง่ายและการเล่นที่น่าสนใจ มักดึงดูดผู้ชมจำนวนมากด้วยกลไกที่เรียนรู้ได้ง่าย ในบทเรียนขั้นสูงนี้ เราจะพัฒนาเกมวิ่งไม่สิ้นสุดที่ใช้งานได้จริงโดยใช้เครื่องมือเกมแนวสบายของ flutter เราจะรวม back4app เพื่อจัดการกับแบ็คเอนด์ของเกม โดยเก็บข้อมูลผู้ใช้ เช่น คะแนนสูงสุด โปรไฟล์ผู้เล่น และความสำเร็จ เราจะเจาะลึกไปยังหัวข้อขั้นสูง เช่น การจัดการสถานะ การเพิ่มประสิทธิภาพ และกลยุทธ์การปรับใช้ เมื่อสิ้นสุดบทเรียนนี้ คุณจะมีเกมวิ่งไม่สิ้นสุดที่พร้อมสำหรับการปรับใช้ทั้งบน android และ ios พร้อมด้วยการเก็บข้อมูลและฟีเจอร์ที่เพิ่มขึ้น ข้อกำหนดเบื้องต้น ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมีสิ่งต่อไปนี้ สภาพแวดล้อมการพัฒนา flutter ติดตั้งและกำหนดค่าแล้ว โปรดทำตาม คู่มือการติดตั้ง flutter อย่างเป็นทางการ https //flutter dev/docs/get started/install หากคุณยังไม่ได้ตั้งค่า ความรู้ flutter ระดับกลาง ความคุ้นเคยกับวิดเจ็ตของ flutter การจัดการสถานะ และการเขียนโปรแกรมแบบอะซิงโครนัส บัญชี back4app ลงทะเบียนสำหรับบัญชีฟรีที่ back4app https //www back4app com ความเข้าใจเกี่ยวกับ back4app ความรู้พื้นฐานเกี่ยวกับการสร้างโปรเจ็กต์และการจัดการข้อมูล โปรดดูที่ คู่มือเริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/welcome บัญชี github เพื่อโคลนที่เก็บและจัดการการควบคุมเวอร์ชัน ประสบการณ์กับไลบรารีการจัดการสถานะ เช่น provider หรือ bloc ความคุ้นเคยกับการทดสอบและการปรับใช้ ความเข้าใจพื้นฐานเกี่ยวกับการเขียนการทดสอบและการปรับใช้แอป flutter ขั้นตอนที่ 1 – การตั้งค่าแบ็คเอนด์ back4app 1 1 สร้างโปรเจ็กต์ใหม่บน back4app เข้าสู่ระบบบัญชี back4app ของคุณ คลิก "สร้างแอปใหม่" และตั้งชื่อว่า "เกมวิ่งไม่สิ้นสุดขั้นสูง" 1 2 ตั้งค่าชั้นเรียนสำหรับข้อมูลผู้ใช้ เราจะสร้างชั้นเรียนสำหรับ ผู้ใช้ , คะแนน , และ ความสำเร็จ ชั้นเรียนผู้ใช้ ฟิลด์ ชื่อผู้ใช้ (string) รหัสผ่าน (string) อีเมล (string) รูปโปรไฟล์ (ไฟล์) ชั้นเรียนคะแนน ฟิลด์ ผู้ใช้ (ชี้ไปที่ผู้ใช้) คะแนนสูงสุด (หมายเลข) ระดับ (หมายเลข) ชั้นเรียนความสำเร็จ ฟิลด์ ผู้ใช้ (pointer to user) ชื่อความสำเร็จ (string) วันที่ได้รับความสำเร็จ (date) 1 3 กำหนดค่าความปลอดภัยและสิทธิ์ ตั้งค่าสิทธิ์ระดับคลาสเพื่อปกป้องข้อมูลผู้ใช้ ตรวจสอบให้แน่ใจว่าผู้ใช้ที่ผ่านการตรวจสอบแล้วเท่านั้นที่สามารถอ่านและเขียนข้อมูลของตนเองได้ 1 4 เพิ่มข้อมูลตัวอย่าง กรอกข้อมูลในคลาสด้วยข้อมูลตัวอย่างเพื่อตรวจสอบการรวมระบบในภายหลัง ขั้นตอนที่ 2 – การโคลนและตั้งค่าเทมเพลต endless runner 2 1 โคลนที่เก็บข้อมูล flutter casual games toolkit git clone https //github com/flutter/casual games git 2 2 นำทางไปยังเทมเพลต endless runner cd casual games/templates/endless runner 2 3 เปิดโปรเจกต์ใน ide ของคุณ ใช้ visual studio code, android studio หรือ ide ที่คุณชื่นชอบ ตรวจสอบให้แน่ใจว่ามีการติดตั้งปลั๊กอิน flutter และ dart 2 4 อัปเดตการพึ่งพา เปิด pubspec yaml และอัปเดตการพึ่งพาเป็นเวอร์ชันล่าสุด รัน flutter pub get ขั้นตอนที่ 3 – การปรับปรุงเกมด้วยฟีเจอร์ขั้นสูง 3 1 การนำการตรวจสอบสิทธิ์ผู้ใช้มาใช้ เราจะอนุญาตให้ผู้เล่นลงทะเบียน เข้าสู่ระบบ และจัดการโปรไฟล์ของพวกเขา 3 1 1 เพิ่ม parse server sdk ใน pubspec yaml dependencies parse server sdk flutter ^3 1 0 รัน flutter pub get 3 1 2 ตั้งค่าบริการการตรวจสอบสิทธิ์ สร้าง lib/services/auth service dart import 'package\ parse server sdk flutter/parse server sdk flutter dart'; class authservice { future\<parseuser> signup(string username, string password, string email) async { var user = parseuser(username, password, email); var response = await user signup(); if (response success) { return response result; } else { throw exception(response error! message); } } future\<parseuser> login(string username, string password) async { var user = parseuser(username, password, null); var response = await user login(); if (response success) { return response result; } else { throw exception(response error! message); } } future\<void> logout() async { var user = await parseuser currentuser() as parseuser; await user logout(); } } 3 1 3 สร้างหน้าจอการตรวจสอบสิทธิ์ หน้าจอลงทะเบียน lib/screens/signup screen dart หน้าจอเข้าสู่ระบบ lib/screens/login screen dart ใช้วิดเจ็ตของ flutter เพื่อสร้างฟอร์มสำหรับการป้อนข้อมูลของผู้ใช้ 3 2 ปรับปรุง ui/ux ใช้การสร้างอนิเมชันที่กำหนดเองโดยใช้ animationcontroller เพิ่มธีมที่กำหนดเองใน lib/theme dart 3 3 เพิ่มความสำเร็จและกระดานผู้นำ สร้างส่วนประกอบ ui เพื่อแสดงความสำเร็จ สร้างหน้ากระดานผู้นำเพื่อแสดงคะแนนสูงสุดทั่วโลก ขั้นตอนที่ 4 – การรวม back4app กับเกม 4 1 เริ่มต้น parse ใน main dart void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your app id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, ); runapp(myapp()); } 4 2 เก็บข้อมูลรับรองอย่างปลอดภัย ใช้ flutter dotenv เพื่อจัดการตัวแปรสภาพแวดล้อม ใน pubspec yaml dependencies flutter dotenv ^5 0 2 สร้าง env ไฟล์ (เพิ่มลงใน gitignore ) app id=your app id client key=your client key อัปเดต main dart import 'package\ flutter dotenv/flutter dotenv dart'; void main() async { widgetsflutterbinding ensureinitialized(); await dotenv load(filename " env"); final keyapplicationid = dotenv env\['app id']!; final keyclientkey = dotenv env\['client key']!; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, ); runapp(myapp()); } ขั้นตอนที่ 5 – การนำการจัดการสถานะไปใช้ 5 1 เลือกโซลูชันการจัดการสถานะ เราจะใช้ provider เพื่อความเรียบง่าย 5 1 1 เพิ่มการพึ่งพา provider ใน pubspec yaml dependencies provider ^6 0 0 รัน flutter pub get 5 2 สร้างการจัดการสถานะเกม 5 2 1 สร้างคลาสสถานะเกม lib/models/game state dart import 'package\ flutter/foundation dart'; class gamestate extends changenotifier { int score = 0; int get score => score; void incrementscore() { score++; notifylisteners(); } void resetscore() { score = 0; notifylisteners(); } } 5 2 2 ให้บริการสถานะเกม ใน main dart import 'package\ provider/provider dart'; import 'models/game state dart'; void main() async { // parse initialization runapp( multiprovider( providers \[ changenotifierprovider(create ( ) => gamestate()), ], child myapp(), ), ); } 5 2 3 ใช้สถานะเกมในวิดเจ็ต ในหน้าจอเกมของคุณ int score = context watch\<gamestate>() score; ขั้นตอนที่ 6 – การเพิ่มประสิทธิภาพ 6 1 ประสิทธิภาพของเกม การจัดการสปริงต์ ใช้สปริงต์ชีตเพื่อลดการใช้หน่วยความจำ การเพิ่มประสิทธิภาพอัตราเฟรม จำกัดอัตราเฟรมเพื่อปรับสมดุลระหว่างประสิทธิภาพและอายุการใช้งานแบตเตอรี่ 6 2 การเพิ่มประสิทธิภาพเครือข่าย การแคชข้อมูล ใช้กลไกการแคชเพื่อลดการเรียกเครือข่าย การร้องขอแบบกลุ่ม ใช้การดำเนินการแบบกลุ่มเมื่อสื่อสารกับแบ็กเอนด์ 6 3 การวิเคราะห์โค้ด ใช้ devtools ของ flutter เพื่อวิเคราะห์แอป ระบุและแก้ไขจุดคอขวดด้านประสิทธิภาพ ขั้นตอนที่ 7 – การจัดการข้อผิดพลาดและการทดสอบที่แข็งแกร่ง 7 1 การจัดการข้อผิดพลาด บล็อก try catch ห่อหุ้มการเรียกแบบอะซิงโครนัสเพื่อจัดการข้อยกเว้น try { var result = await someasyncfunction(); } catch (e) { // handle error } ข้อเสนอแนะแบบผู้ใช้ แสดงข้อความที่เป็นมิตรกับผู้ใช้เมื่อเกิดข้อผิดพลาด 7 2 การบันทึก ใช้ logging แพ็คเกจเพื่อบันทึกข้อผิดพลาดและเหตุการณ์สำคัญ ใน pubspec yaml dependencies logging ^1 0 2 7 3 การทดสอบ 7 3 1 การทดสอบหน่วย เขียนการทดสอบสำหรับโมเดลและบริการของคุณ ตัวอย่างการทดสอบใน test/game state test dart import 'package\ flutter test/flutter test dart'; import 'package\ your app/models/game state dart'; void main() { test('score increments correctly', () { final gamestate = gamestate(); gamestate incrementscore(); expect(gamestate score, 1); }); } 7 3 2 การทดสอบการรวม ทดสอบ ui และการโต้ตอบของแอป ใช้กรอบการทดสอบการรวมของ flutter ขั้นตอนที่ 8 – การปรับใช้เกม 8 1 การเตรียมการสำหรับการปรับใช้ ไอคอนแอปและหน้าจอเริ่มต้น ปรับแต่งเพื่อการสร้างแบรนด์ รหัสแพ็คเกจแอป ตั้งค่ารหัสเฉพาะสำหรับ android และ ios 8 2 สร้างเวอร์ชันการปล่อย android อัปเดต android/app/build gradle ด้วยการเซ็นชื่อของคุณ รัน flutter build apk release ios เปิด ios/runner xcworkspace ใน xcode ตั้งค่าการลงนามและความสามารถ รัน flutter build ios release 8 3 การส่งแอปไปยัง app store google play store ทำตาม คู่มืออย่างเป็นทางการ https //developer android com/distribute/console apple app store ทำตาม คู่มืออย่างเป็นทางการ https //developer apple com/app store/submit/ บทสรุป ในบทเรียนขั้นสูงนี้ เราได้สร้างเกมวิ่งไม่มีที่สิ้นสุดที่มีฟีเจอร์ครบถ้วนโดยใช้เครื่องมือเกมทั่วไปของ flutter และรวม back4app สำหรับบริการด้านหลัง เราได้ครอบคลุม การตรวจสอบผู้ใช้ อนุญาตให้ผู้เล่นลงทะเบียน เข้าสู่ระบบ และจัดการโปรไฟล์ การจัดการสถานะ ใช้ provider สำหรับการจัดการสถานะอย่างมีประสิทธิภาพ การเพิ่มประสิทธิภาพ ปรับปรุงประสิทธิภาพของเกมและเครือข่าย การจัดการข้อผิดพลาดและการทดสอบ นำเสนอการจัดการข้อผิดพลาดที่แข็งแกร่งและเขียนการทดสอบ การปรับใช้ เตรียมและส่งแอปไปยังร้านแอป แนวทางที่ครอบคลุมนี้ช่วยให้คุณมีทักษะในการพัฒนาแอปพลิเคชัน flutter ระดับมืออาชีพที่มีการรวมระบบ backend ที่เชื่อถือได้ คุณสามารถขยายเกมต่อไปโดยการเพิ่มฟีเจอร์เพิ่มเติม เช่น การแชร์ทางสังคม อนุญาตให้ผู้เล่นแชร์ความสำเร็จในโซเชียลมีเดีย การซื้อในแอป สร้างรายได้จากเกมด้วยรายการหรือการอัปเกรดที่สามารถซื้อได้ การสนับสนุนผู้เล่นหลายคน นำฟังก์ชันการเล่นหลายคนแบบเรียลไทม์หรือแบบผลัดกันมาใช้ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ flutter และการรวม back4app โปรดดูที่ เอกสาร flutter https //flutter dev/docs คู่มือ back4app flutter https //www back4app com/docs/flutter/overview คู่มือ parse server https //docs parseplatform org ขอให้สนุกกับการเขียนโค้ดและการพัฒนาเกม!