前言
我說Flutter的跨端一致性並非首創
但凡你用過Unity3D，Unreal等遊戲引擎，你就會發現 這些不都是跨端的嗎？不都是開局一塊畫布，剩下隨便整麼？
既然和遊戲引擎作對比
那麼我們真的拿Flutter來做個遊戲吧
FLAME引擎
這裡我用了一款基於的Flutter的遊戲引擎，名為FLAME。使用它開發遊戲，基本用不到Flutter裡的那些Widget，所以就有了標題裡的提問
一個Flutter應用不使用Flutter的Widget，那還叫Flutter嗎？
不管了，先把這篇文章寫完，抽空再用widget重做一次這個遊戲
遊戲引擎基礎
引入Flame庫
dependencies:
flame: ^1.0.0-rc5
複製程式碼開發遊戲，最基礎就是這三件事
- 重新整理機制（update）
- 渲染畫布（renderer）
- 輸入事件（events）
在Flame中，一個基礎的遊戲框架程式碼如下
class MyGameSubClass extends Game {
@override
void render(Canvas canvas) {
// TODO: implement render
}
@override
void update(double t) {
// TODO: implement update
}
}
main() {
runApp(
GameWidget(
game: MyGameSubClass(),
)
);
}
複製程式碼重新整理，渲染都有了，事件呢，在本遊戲中我們加入拖動事件
class MyGameSubClass extends BaseGame with PanDetector
複製程式碼渲染圖形元素
- 飛機
飛機的圖形素材是一個精靈圖，其中前面兩幀是飛行狀態，後面三幀是爆炸狀態
playerSpriteSheet = SpriteSheet(
image: await images.load('player.png'),
srcSize: playerSize,
);
//執行狀態下的精靈圖動畫
player = SpriteAnimationComponent(
size: playerSize,
animation: playerSpriteSheet.createAnimation(row: 0, stepTime: .1, to: 2),
);
複製程式碼然後我們通過add方法，將圖形元素展示到畫面中
add(player);
//放到x:100,y:100的座標，大家感受一下座標系
player.x=player.y=100;
複製程式碼
- 子彈
bulletImage = await images.load('bullet.png');
複製程式碼一顆子彈的出現邏輯以及生命週期是這樣的
- 從螢幕外生成
- 向著飛機當前座標的方向移動
- 移出螢幕即銷燬
//新增一顆子彈
void addBullet() {
final bullet = SpriteComponent.fromImage(bulletImage, size: bulletSize);
double bulletX;
double bulletY;
//隨機在顯示區四周的矩形邊上生成
if (Random().nextBool()) {
bulletX = Random().nextDouble() * (screenSize.width + bulletSize.x) -
bulletSize.x;
bulletY = Random().nextBool() ? -bulletSize.y : screenSize.height;
} else {
bulletX = Random().nextBool() ? -bulletSize.x : screenSize.width;
bulletY = Random().nextDouble() * (screenSize.height + bulletSize.y) -
bulletSize.y;
}
//給與子彈初始座標
bullet.x = bulletX;
bullet.y = bulletY;
//新增到場景中
add(bullet);
//加入bullet管理陣列，稍後用於更新子彈飛行座標以及碰撞檢測
bullets.add({
"component": bullet,//子彈控制元件例項
"speed": (1+gameTime/10) + Random().nextDouble()*3,//飛行速度
"angle": atan2(((bulletY + bulletSize.y/2) - (player.y + playerSize.y / 2)),
((bulletX + bulletSize.x) - (player.x + playerSize.x / 2)))
});//向量角度
}
複製程式碼通過呼叫這個addBullet的方法，我們就能在螢幕中朝著飛機所在位置發射一顆子彈了
為了發射多顆，我們再新建一個函式addGroupBullet
//新增一組子彈
void addGroupBullet() {
int groupCount = 10+Random().nextInt(gameTime+1);
for (int i = 0; i < groupCount; i++) {
addBullet();
}
}
複製程式碼重新整理機制
在Flame提供的update方法中我們需要更新所有子彈的位置，因為子彈不是靜止的，需要一直移動呀！
@override
void update(double dt) {
super.update(dt);
//遍歷子彈陣列，對所有子彈進行更新
for (int i = bullets.length - 1; i >= 0; i--) {
var bulletItem = bullets[i];
//獲得子彈例項
SpriteComponent bullet = bulletItem["component"] as SpriteComponent;
double angle = bulletItem["angle"];
double speed = bulletItem["speed"];
//讓子彈根據發射時的向量角度進行移動
bullet.x -= cos(angle) * speed;
bullet.y -= sin(angle) * speed;
//當子彈移動到螢幕外時銷燬它
if (isNotInScreen(bullet.x, bullet.y)) {
print("bullet removed");
remove(bullet);
bullets.removeAt(i);
continue;
}
}
}
複製程式碼開始有點帶感了吧？
飛機的移動
void onPanUpdate(DragUpdateDetails details) {
super.onPanUpdate(details);
if (!isGameStart) return;
//由於飛機物件的座標點在左上角，所以移動是要注意偏移一下
player.x = details.globalPosition.dx - playerSize.x / 2;
player.y = details.globalPosition.dy - playerSize.y / 2;
}
複製程式碼
碰撞檢測
在每次重新整理子彈座標的時候，去檢測一下是否和當前飛機的座標重合了，重合了遊戲就結束啦
if (isHitPlayer(bullet.x, bullet.y)) {
gameOver();
}
複製程式碼這裡用了一個簡單的判斷機制，並沒有精確到飛機的外輪廓。一是精確到外輪廓將帶來更大的運算量，也比較複雜。二是那樣的遊戲體驗不見得好，畢竟在手機玩的話，手指要擋住大部分飛機的圖形
//飛機和子彈碰撞判斷
bool isHitPlayer(double x, double y) {
double _x = (x + bulletSize.x / 2 - (player.x + playerSize.x / 2)).abs();
double _y = (y + bulletSize.y / 2 - (player.y + playerSize.y / 2)).abs();
//求出子彈和飛機座標的直線距離
double distance = sqrt(_x * _x + _y * _y);
//當直線距離小於判定為碰撞的距離時則返回true/false
if (distance <= hitDistance) return true;
return false;
}
複製程式碼遊戲結束
void gameOver() {
isGameStart = false;
//取消定時發射子彈的定時器
if(timer!=null)timer.cancel();
//播放飛機爆炸動畫
player.animation = playerSpriteSheet.createAnimation(
row: 0, stepTime: .1, loop: false, from: 2, to: 6);
print("game over");
}
複製程式碼程式碼倉庫
後話
這麼寫，從程式碼層面看，和Flutter關係不大，但利用Flutter的跨端能力，我們可以很容易的開發一個橫跨Mac,Linux,Windows,Web,iOS,Android端的小遊戲。如果你不會用那些開發遊戲的IDE，比如Unity3D等，那Flutter也是一個不錯的選擇。
關注大帥
一個設計師出身的老程式猿，希望寫程式碼到70歲
近期文章（感謝掘友的鼓勵與支援???）
- ?做了一夜動畫，就為讓大家更好的理解Vue3的Composition Api 940贊
- ?2020更新，Vue仿探探拖拽卡片的效果 1114贊
- ?超詳細，Flutter2.0構建Web應用的實際體驗｜技術點評 14贊
- ?Webview的使用 | VSCode外掛開發系列教程 19贊
- ?推出掘金統計dashboard功能【我愛掘金】0.0.15｜牛氣沖天新年徵文 7贊
本文正在參與「掘金 2021 春招闖關活動」, 點選檢視 活動詳情