สร้างเกมหลายแพลตฟอร์มด้วย Flutter และ Back4app

บทนำ flutter เป็นเฟรมเวิร์กโอเพนซอร์สที่หลากหลายโดย google ที่ช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชันที่คอมไพล์แบบเนทีฟสำหรับมือถือ เว็บ เดสก์ท็อป และอุปกรณ์ฝังตัวจากโค้ดเบสเดียว แม้ว่า flutter จะเป็นที่รู้จักกันเป็นหลักสำหรับการพัฒนาแอปแบบดั้งเดิม แต่ก็ถูกนำมาใช้ในการพัฒนาเกมมากขึ้นเรื่อยๆ เนื่องจากประสิทธิภาพ ระบบแพ็กเกจที่กว้างขวาง และฟังก์ชันการโหลดร้อน ในคู่มือนี้ เราจะพาไปดูวิธีการพัฒนาเกมสไตล์ flappy bird แบบหลายแพลตฟอร์มโดยใช้ flutter และ flame ซึ่งเป็นเอนจินเกมที่ออกแบบมาสำหรับเกม 2d ใน flutter นอกจากนี้เราจะเชื่อมต่อเกมกับ back4app ซึ่งเป็นแพลตฟอร์มแบ็กเอนด์เป็นบริการ (baas) เพื่อเก็บคะแนนผู้ใช้และแสดงกระดานคะแนน เมื่อสิ้นสุดคู่มือนี้ คุณจะมีเวอร์ชันที่ใช้งานได้ของเกมที่ทำงานบนแพลตฟอร์มมือถือและเว็บ และจะเก็บและเรียกคะแนนสูงจาก back4app ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี บัญชี back4app ลงทะเบียนสำหรับบัญชีฟรีที่ back4app com https //www back4app com ตั้งค่าสภาพแวดล้อมการพัฒนา flutter บนเครื่องของคุณ หากคุณยังไม่ได้ตั้งค่า ให้ทำตาม คู่มือการติดตั้ง flutter https //flutter dev/docs/get started/install ความรู้พื้นฐานเกี่ยวกับ dart, วิดเจ็ต flutter และแนวคิดการพัฒนาเกม ขั้นตอนที่ 1 – การตั้งค่าแบ็กเอนด์ back4app ของคุณ สร้างโปรเจกต์ back4app เข้าสู่ระบบบัญชี back4app account https //dashboard back4app com/ และสร้างโปรเจกต์ใหม่ สร้างคลาส parse สำหรับบทเรียนนี้ เราจะตั้งค่าพื้นหลังที่ง่ายสำหรับการจัดการข้อมูลที่เกี่ยวข้องกับเกม ในโปรเจกต์ back4app ของคุณ ให้สร้างคลาส parse สองคลาสชื่อ player และ gamescore player เก็บข้อมูลผู้เล่น เช่น ชื่อผู้ใช้ ระดับ และความสำเร็จ gamescore เก็บคะแนนและอันดับสำหรับเกม รับข้อมูลประจำตัว back4app ของคุณ ไปที่การตั้งค่าโปรเจกต์ของคุณเพื่อดึงหมายเลขประจำตัวแอปพลิเคชันและคีย์ลูกค้า ซึ่งคุณจะต้องใช้ในการเชื่อมต่อเกม flutter ของคุณกับ back4app ขั้นตอนที่ 2 – การตั้งค่าโปรเจกต์ flutter ของคุณ สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลหรือพรอมต์คำสั่งของคุณและรัน เพิ่มการพึ่งพา เปิด pubspec yaml และเพิ่มการพึ่งพาต่อไปนี้ เริ่มต้น parse ในแอปของคุณ ใน lib/main dart , นำเข้า sdk ของ parse และเริ่มต้นในฟังก์ชัน main import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ flame/flame dart'; import 'package\ flame/game dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(mygameapp()); } class mygameapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home gamescreen(), ); } } แทนที่ 'your back4app app id' และ 'your back4app client key' ด้วยข้อมูลรับรอง back4app ที่แท้จริงของคุณ ขั้นตอนที่ 3 – การตั้งค่าเกมโดยใช้ flame สร้างคลาสเกม flame เป็นเอนจินเกมโอเพนซอร์สที่สร้างขึ้นบน flutter มันให้เครื่องมือและ api สำหรับการสร้างเกม 2d สร้างคลาสเกมง่ายๆ โดยใช้ flame import 'package\ flame/game dart'; import 'package\ flame/components dart'; class mysimplegame extends flamegame { @override future\<void> onload() async { super onload(); add(playercomponent()); } } class playercomponent extends positioncomponent { @override future\<void> onload() async { // load player sprite or set up player visuals here size = vector2(50, 50); // set size of the player position = vector2(100, 100); // set initial position // optionally, add sprite or animations } @override void update(double dt) { // update player state here } @override void render(canvas canvas) { super render(canvas); // draw player visuals final paint = paint() color = colors blue; canvas drawrect(size torect(), paint); } } 2\ สร้างหน้าจอเกม อัปเดต gamescreen วิดเจ็ตเพื่อแสดงเกม class gamescreen extends statelesswidget { @override widget build(buildcontext context) { return scaffold( body mysimplegame() widget, ); } } 3\ รันเกม ตอนนี้คุณสามารถรันแอปของคุณโดยใช้ flutter run เพื่อดูเกมง่ายๆ ของคุณในขณะทำงาน คุณควรเห็นสี่เหลี่ยมสีน้ำเงินที่แทนผู้เล่น ขั้นตอนที่ 4 – การจัดการข้อมูลเกมด้วย back4app การบันทึกข้อมูลผู้เล่น ต่อไปเราจะสร้างฟังก์ชันเพื่อบันทึกข้อมูลผู้เล่นไปยัง back4app เมื่อผู้เล่นเลเวลอัพหรือทำบางอย่างสำเร็จ future\<void> saveplayerdata(string username, int level, list\<string> achievements) async { final player = parseobject('player') set('username', username) set('level', level) set('achievements', achievements); final response = await player save(); if (response success) { print('player data saved successfully'); } else { print('failed to save player data'); } } 2\ การดึงคะแนนสูงสุด คุณยังสามารถดึงคะแนนสูงสุดสำหรับเกมของคุณจาก back4app เพื่อนำเสนอในกระดานคะแนน future\<list\<parseobject>> fetchhighscores() async { final query = querybuilder\<parseobject>(parseobject('gamescore')) orderbydescending('score') setlimit(10); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { print('failed to fetch high scores'); return \[]; } } future\<list\<parseobject>> fetchhighscores() async { final query = querybuilder\<parseobject>(parseobject('gamescore')) orderbydescending('score') setlimit(10); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { print('failed to fetch high scores'); return \[]; } } future\<list\<parseobject>> fetchhighscores() async { final query = querybuilder\<parseobject>(parseobject('gamescore')) orderbydescending('score') setlimit(10); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { print('failed to fetch high scores'); return \[]; } } 3\ แสดงกระดานคะแนน ใช้ listview\ builder ในวิดเจ็ต flutter เพื่อแสดงคะแนน 10 อันดับแรก class leaderboardscreen extends statefulwidget { @override leaderboardscreenstate createstate() => leaderboardscreenstate(); } class leaderboardscreenstate extends state\<leaderboardscreen> { list\<parseobject> highscores = \[]; @override void initstate() { super initstate(); fetchhighscores() then((scores) { setstate(() { highscores = scores; }); }); } @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('leaderboard')), body listview\ builder( itemcount highscores length, itembuilder (context, index) { final score = highscores\[index]; return listtile( title text(score get\<string>('playerid') ?? 'unknown player'), subtitle text('score ${score get\<int>('score')}'), ); }, ), ); } } ขั้นตอนที่ 5 – การเพิ่มฟีเจอร์ขั้นสูงด้วย flame หากคุณต้องการเพิ่มกลไกเกมที่ซับซ้อนมากขึ้น การเคลื่อนไหว หรือการโต้ตอบ คุณสามารถขยายการใช้ flame โดยการแนะนำส่วนประกอบเพิ่มเติม เช่น สไปรท์ ฟิสิกส์ และการตรวจจับการชน flame ยังรองรับการรวมกับ firebase ซึ่งช่วยให้สามารถใช้ฟีเจอร์ผู้เล่นหลายคน การซื้อในแอป และอื่นๆ ได้อีกด้วย บทสรุป ในบทแนะนำนี้ คุณได้เรียนรู้วิธีการใช้ flutter และ flame เพื่อสร้างเกมข้ามแพลตฟอร์มที่เรียบง่าย และวิธีการรวม back4app สำหรับการจัดการข้อมูลเกม เช่น โปรไฟล์ผู้เล่นและคะแนนสูง flutter มีความสามารถในการปรับใช้ไปยังหลายแพลตฟอร์มจากฐานรหัสเดียว ร่วมกับบริการแบ็กเอนด์ที่แข็งแกร่งของ back4app ทำให้เป็นสแต็กที่ทรงพลังสำหรับการพัฒนาและขยายเกม ไม่ว่าคุณจะสร้างเกมที่เรียบง่ายหรือประสบการณ์ที่โต้ตอบได้ที่ซับซ้อนมากขึ้น flutter และ back4app มอบเครื่องมือในการสร้าง ปรับใช้ และจัดการเกมของคุณอย่างมีประสิทธิภาพ สำหรับข้อมูลเพิ่มเติม โปรดตรวจสอบ เอกสาร flutter https //flutter dev/docs และ เอกสาร back4app https //www back4app com/docs ขอให้สนุกกับการเขียนโค้ด!