Flutter&Flame——TankCombat游戏开发（三）
TankCombat系列文章
如果你还不了解Flame可以看这里：
Flutter&Flame——TankCombat游戏开发（一）
Flutter&Flame——TankCombat游戏开发（二）
Flutter&Flame——TankCombat游戏开发（三）
Flutter&Flame——TankCombat游戏开发（四）
效果图
蛮好看的，我再加一下，让大家整体有个印象自己在做什么 ：)
image
开工
本章节，我们开始制作发射炮弹和敌方坦克的设计
开火
还记得这段代码吗？
//发射按钮
Row(
children: [
SizedBox(width: 48),
FireButton(
onTap: tankGame.onFireButtonTap,
),
Spacer(),
FireButton(
onTap: tankGame.onFireButtonTap,
),
SizedBox(width: 48),
],
),
在main函数中的runApp方法中，这两个是我们的开火按钮，可以看到，点击事件触发了game中的onFireButtonTap方法，我们来看看具体实现：
void onFireButtonTap(){
if(blueBulletNum < 20){
bullets.add(Bullet(this,BulletColor.BLUE,tank.tankId
,position: tank.getBulletOffset(),angle: tank.getBulletAngle()));
}
}
为了避免子弹过多，导致的卡顿，这里加了个玩家子弹上限，下面就是往bullets(list)加了一颗子弹，同时传给了这颗子弹坦克的位置和game对象，另外两个参数先不用管。我们先看看bullet这个类
Bullet
首先我们还是让bullet集成baseComponent，并创建一些变量,你可以将子弹抽象成坦克，这样看他们本质就没啥区别了，甚至更简单一些
如下：
class Bullet extends BaseComponent{
final TankGame game;
final double speed;//子弹速度
Offset position;//子弹位置
double angle = 0;//子弹角度
bool isOffScreen = false;//是否飞出屏幕
//玩家坦克的子弹图片
final Sprite blueSprite = Sprite('tank/bullet_blue.webp'),
//是否击中
bool isHit = false;
}
这样一些子弹的基础属性就声明完成了，接下来我们在render方法和update方法中操纵子弹即可。
先看update：
@override
void update(double t) {
//我们首先判断是否已经飞出屏幕/击中敌人，这样我们就没必要操作它了，
if(isHit) return;
if(isOffScreen)return;
//之后我们按照既定角度和速度来更新子单位置以达到飞行的效果
//子弹角度是由坦克炮塔角度决定的
position = position + Offset.fromDirection(angle,speed * t);
//下面的方法就比较容易理解了，判断是不是飞出了屏幕，并更新isOffScreen
if (position.dx < -50) {
isOffScreen = true;
}
if (position.dx > game.screenSize.width + 50) {
isOffScreen = true;
}
if (position.dy < -50) {
isOffScreen = true;
}
if (position.dy > game.screenSize.height + 50) {
isOffScreen = true;
}
}
再看render:
@override
void render(Canvas canvas) {
//理论上讲这里不写也没事，我个人倾向不写的，大家可以看一下flame的流程图就明白了
if(isHit) return;
if(isOffScreen)return;
canvas.save();
//方法很简单，将画布移动到子单位制和旋转对应角度
canvas.translate(position.dx, position.dy);
canvas.rotate(angle);
//然后绘制子弹即可
blueSprite.renderRect(canvas, Rect.fromLTWH(-4, -2, 8, 4));
canvas.restore();
}
ok，这样子弹就处理完了，现在我们回到game中
TankGame
所有的component都需要与game联系起来，不然是没法进行更新和渲染上屏的（仅指游戏）。
因为我们肯定不止一发子弹，所以我们创建一个list
List<Bullet> bullets; //炮弹
接着在resize中实例化它
@override
void resize(Size size) {
screenSize = size;
//initEnemyTank();
if(bg == null){
bg = BattleBackground(this);
}
if(tank == null){
tank = Tank(
this,position: Offset(screenSize.width/2,screenSize.height/2),
);
}
if(bullets == null){
bullets = List();
}
}
然后在update中我们将关键参数 t 传给它,并调用子弹的update方法
@override
void update(double t) {
bullets.forEach((element) {
//子弹
element.update(t);
}
//移除飞出屏幕的
bullets.removeWhere((element) => element.isHit || element.isOffScreen);
}
我们在render方法中调用子弹的render方法，并将canvas传给它
@override
void render(Canvas canvas) {
bg.render(canvas);
//tank
tank.render(canvas);
//bullet
bullets.forEach((element) {
element.render(canvas);
});
}
这样我们就完成了坦克发射炮弹的功能，我们来梳理一下大致流程：
image
以上图片也可以帮助你理解component/sprite 在game中的工作流程。
现在我们虽然可以发射炮弹，但是没法打到人，换言之，我们需要先添加一些敌人。
敌军坦克TankModel
敌军坦克和玩家坦克有很多功能可以共用，我们先给敌军坦克抽象出来一个模型 TankModel :
abstract class TankModel{
final int id;
final TankGame game;
Sprite bodySprite,turretSprite;
//出生位置
Offset position;
TankModel(this.game,this.bodySprite,this.turretSprite,this.position):
id = DateTime.now().millisecondsSinceEpoch+Random().nextInt(100);
///随机生成路线用到
final int seedNum = 50;
final int seedRatio = 2;
//移动的路线
double movedDis = 0;
//直线速度
final double speed = 80;
//转弯速度
final double turnSpeed = 40;
//车体角度
double bodyAngle = 0;
//炮塔角度
double turretAngle = 0;
//车体目标角度
double targetBodyAngle;
//炮塔目标角度
double targetTurretAngle;
//tank是否存活
bool isDead = false;
//移动到目标位置
Offset targetOffset;
final double ration = 0.7;
///获取炮弹发射位置
Offset getBulletOffset() ;
///炮弹角度
double getBulletAngle();
}
都是一堆属性，没啥好说的。现在我们根据模型开始造坦克了，这里我们就造一个绿色的敌方坦克吧
GreenTank
首先我们继承tankModel，然后混入baseComponent，如下：
class GreenTank extends TankModel with BaseComponent{
//坦克身体
Rect bodyRect ;
//坦克炮管
Rect turretRect;
GreenTank(TankGame game, Sprite bodySprite, Sprite turretSprite,Offset position)
: super(game, bodySprite, turretSprite,position){
bodyRect = Rect.fromLTWH(-20*ration, -15*ration, 38*ration, 32*ration);
turretRect = Rect.fromLTWH(-1, -2*ration, 22*ration, 6*ration);
generateTargetOffset();
}
void generateTargetOffset(){
double x = Random().nextDouble() * (game.screenSize.width - (seedNum * seedRatio));
double y = Random().nextDouble() * (game.screenSize.height - (seedNum * seedRatio));
targetOffset = Offset(x,y);
Offset temp = targetOffset - position;
targetBodyAngle = temp.direction;
targetTurretAngle = temp.direction;
}
@override
void render(Canvas canvas) {
if(isDead) return;
drawBody(canvas);
}
@override
void update(double t) {
rotateBody(t);
rotateTurret(t);
moveTank(t);
}
}
构造函数我们初始化了一些基本属性，这个在上文已经介绍过，不再赘述。我们看多出的这个方法
void generateTargetOffset(){
double x = Random().nextDouble() * (game.screenSize.width - (seedNum * seedRatio));
double y = Random().nextDouble() * (game.screenSize.height - (seedNum * seedRatio));
targetOffset = Offset(x,y);
Offset temp = targetOffset - position;
targetBodyAngle = temp.direction;
targetTurretAngle = temp.direction;
}
这个方法用于生成一个随机的目标点，然后让坦克开过去,根据目标点，我们把目标角度（炮塔和车身）保存下来。
render和update方法中的函数跟之前基本一样，唯一区别在moveTank（t）这个方法，代码如下：
void moveTank(double t) {
if(targetBodyAngle != null){
if(targetOffset != null){
//可以看到这里多了一个 movedDis， 用来存储走了多少距离
movedDis += speed * t;
if(movedDis < 100){
if(bodyAngle == targetBodyAngle){
//tank 直线时 移动速度快
position = position + Offset.fromDirection(bodyAngle,speed*t);//100 是像素
}else{
//tank旋转时 移动速度要慢
position = position + Offset.fromDirection(bodyAngle,turnSpeed*t);
}
}else{
//当行驶距离超出100时我们重新计算新的目标点
movedDis = 0;
generateTargetOffset();
}
}
}
}
经过了上面的开动，我们的敌军坦克就不再是‘头铁直奔南墙’了，而是走一段距离就会自己转弯，更为灵活生动了。
ok，敌军坦克完成了，我们开始将他们和game组合
组合启动
TankGame
我们在game中增加两个list分别管理两种颜色的敌军坦克
List<GreenTank> gTanks = [];
List<SandTank> sTanks = [];
之后我们在tankGame构造函数初始化中初始化4个敌军坦克
TankGame(){
observer = GameObserver(this);
initEnemyTank();
}
///初始化敌军
void initEnemyTank() {
var turretSprite = Sprite('tank/t_turret_green.webp');
var bodySprite= Sprite('tank/t_body_green.webp');
gTanks.add(GreenTank(this,bodySprite,turretSprite, Offset(100,100)));
gTanks.add(GreenTank(this,bodySprite,turretSprite, Offset(100,screenSize.height*0.8)));
///sand
var turretSpriteS = Sprite('tank/t_turret_sand.webp');
var bodySpriteS = Sprite('tank/t_body_sand.webp');
sTanks.add( SandTank(this,bodySpriteS,turretSpriteS,
Offset(screenSize.width-100,100)));
sTanks.add( SandTank(this,bodySpriteS,turretSpriteS,
Offset(screenSize.width-100,screenSize.height*0.8)));
}
经过上面的操作我们的仓库gTanks和sTanks里面就各有两台整装待发的坦克了，现在开动它们！
在update和render方法中我们增加下面的代码：
update
gTanks.forEach((element) {
element.update(t);
});
sTanks.forEach((element) {
element.update(t);
});
//移除死亡tank
gTanks.removeWhere((element) => element.isDead);
sTanks.removeWhere((element) => element.isDead);
render
gTanks.forEach((element) {
element.render(canvas);
});
sTanks.forEach((element) {
element.render(canvas);
});
功能上文已经说过了。
现在运行一下就可以看到4个敌军小坦克满地图跑了，不过还不会开炮，我们来增加一下这个功能。
电脑开炮功能
首先我们考虑蓝、绿、黄三个坦克炮弹不同，且后期可能加别的功能，我们为了区分，先给bullet类文件增加一个枚举：
enum BulletColor{
BLUE,GREEN,SAND
}
之后我们在game中增加一个敌军坦克开火的方法:
void enemyTankFire<T extends TankModel>(BulletColor color,T tankModel){
bullets.add(Bullet(this,color,tankModel.id
,position: tankModel.getBulletOffset(),angle: tankModel.getBulletAngle()));
}
原理和玩家坦克开火一样，为了避免炮弹过多造成卡顿（打不过电脑），我们给敌军增加一下子弹上限
game中增加两个变量
//黄色炮弹数量
int sandBulletNum = 0;
//蓝色炮弹数量
int blueBulletNum = 0;
game的update方法中统计一下在屏的炮弹数量
blueBulletNum = 0;
greenBulletNum = 0;
sandBulletNum = 0;
bullets.forEach((element) {
switch(element.bulletColor){
case BulletColor.BLUE:
blueBulletNum ++;
break;
case BulletColor.GREEN:
greenBulletNum ++;
break;
case BulletColor.SAND:
sandBulletNum ++;
break;
}
element.update(t);
});
之后我们在敌军坦克 greenTank的update方法中增加两行代码：
@override
void update(double t) {
rotateBody(t);
rotateTurret(t);
moveTank(t);
//当没达到上限时，我们就发射一枚炮弹
if(game.greenBulletNum < 10){
game.enemyTankFire(BulletColor.GREEN, this);
}
}
现在我们运行一下，就会看到满地飞奔，四处转动炮塔开火的敌军小坦克了！
ok，大功过半，马上告成，在下一章我们将增加炮弹击毁坦克的功能和爆炸效果以及GameObserver的设计。
多谢阅读，喜欢的点个赞吧 ：）
