【Flutter&Flame Game - Escolha um】Explorar Componente | Detalhes de Uso do Componente

Continue a criar, acelere o crescimento! Este é o 12º dia da minha participação no "Nuggets Daily New Plan · June Update Challenge", clique para ver os detalhes do evento

prefácio

Esta é uma série de tutoriais produzidos por Zhang Fengjietlie e publicados na comunidade Nuggets. Flutter&FlameSe você vir este artigo em outras plataformas, poderá passar para o Nuggets para visualizá-lo de acordo com o link. Como o artigo pode ser atualizado e revisado, prevalecerá a versão do artigo do Nuggets. Lista de artigos desta série:

1. Sobre a árvore de componentes

Conforme mostrado na cena abaixo, cada objeto exibido é Component, eles formam uma estrutura em árvore. Veja [11/01] para o código

Vários papéis são adicionados à árvore por meio do addmétodo , e a estrutura da árvore neste momento é a seguinte:

Agora há um problema: como a barra de integridade e o volume são adicionados ao Adventurerwidget , Adventurero comportamento de transformação do também fará com que a barra de integridade seja alterada. Os caracteres a seguir são espelhados ao longo do eixo Y e você pode ver que a barra de integridade e o texto também são espelhados, o que não é o que esperávamos.

Como resolvê-lo? A ideia é muito simples, pois Adventurerhá a necessidade de um espelho separado, ele não pode ser o pai da barra de saúde. O relacionamento entre os dois pode ser alterado de um relacionamento pai-filho para um relacionamento de irmão. Aqui, a barra de sangue é encapsulada como LifeComponentbuild e Adventurerexiste junto com HeroComponentin :

2. Reversão do espelho no movimento do personagem

Agora quero obter o seguinte efeito: se o ponto de toque estiver no lado esquerdo do personagem, o personagem será espelhado para a esquerda, caso contrário, o espelho será invertido para a direita. O objetivo disso é que o personagem possa escolher a direção do ataque, como virar para a esquerda para atacar o monstro da esquerda: veja o código [11/02]

Como apenas a esquerda e a direita são invertidas aqui HeroComponent, defina um valor deisLeft in para registrar o estado. boolSe você precisar dar suporte a outras direções, como para cima, para baixo, superior esquerdo, inferior direito etc., poderá mantê-lo por meio de enumeração.

---->[HeroComponent]----
bool isLeft = true;
late Adventurer adventurer;
late LifeComponent lifeComponent;
复制代码

Ao clicar na tela, o toTargetmétodo . No início, _checkFlipa isLeftpropriedade Caso precise ser revertida, é através da flipfunção inversa:

---->[HeroComponent#toTarget]----
void toTarget(Vector2 target) {
  _checkFlip(target);
  // 略同...
}

void _checkFlip(Vector2 target){
  if (target.x < position.x) {
    if (isLeft) {
      flip();
      isLeft = false;
    }
  }
  if (target.x > position.x) {
    if (!isLeft) {
      flip();
      isLeft = true;
    }
  }
}
复制代码

Costumava querer apenas reverter o protagonista, então flipem , execute adventurer.flip. Isso não afetará a exibição da barra de sangue:

void flip({
  bool x = false,
  bool y = true,
}) {
  adventurer.flip(x: x, y: y);
}
复制代码

---->[HeroComponent#flip]----
void flip({
  bool x = false,
  bool y = true,
}) {
  adventurer.flip(x: x, y: y);
}
复制代码

Além disso, em relação à reversão, você também precisa prestar atenção na direção em que a bala é disparada. Como o projétil da frente é sempre disparado para a direita, se estiver voltado para a esquerda, deve se mover para a esquerda, assim:

Também é relativamente simples de lidar, dependendo se isLefté realmente esquerda ou direita para lançar, como seguetag1

---->[Bullet]----
@override
void update(double dt) {
  super.update(dt);
  Vector2 ds = Vector2(isLeft ? 1 : -1, 0) * speed * dt; // tag1
  _length += ds.length;
  position.add(ds);
  if (_length > maxRange) {
    _length = 0;
    removeFromParent();
  }
}
复制代码

3. Sobre a manutenção de propriedades

Para facilitar a demonstração, os atributos dos personagens são relativamente dispersos, como velocidade e poder de ataque. Já que pode ser encapsulado aqui HeroComponentpara manter a classe protagonista. Você pode definir uma HeroAttrclasse para manter as propriedades do personagem principal, como segue:

class HeroAttr {
  double life; // 生命值
  double speed; // 速度
  double attackSpeed; // 攻击速度
  double attackRange; // 射程
  double attack; // 攻击力
  double crit; // 暴击率
  double critDamage;  // 暴击伤害

  HeroAttr({
    required this.life,
    required this.speed,
    required this.attackSpeed,
    required this.attackRange,
    required this.attack,
    required this.crit,
    required this.critDamage,
  });
}
复制代码

Dessa forma, HeroComponentao , passe HeroAttro objeto para determinar as informações de atributo do objeto.

---->[TolyGame#onLoad]----
final HeroAttr heroAttr = HeroAttr(
  life: 3000,
  speed: 100,
  attackSpeed: 200,
  attackRange: 200,
  attack: 50,
  crit: 0.75,
  critDamage: 1.5,
);
player = HeroComponent(attr: heroAttr);
add(player);
复制代码

Desta forma, o valor de perda de vida no monstro pode ser calculado de acordo com HeroAttro atributo de:

---->[Liveable]----
void loss(HeroAttr attr) {
  double point = attr.attack;
  double crit = attr.crit;
  double critDamage = attr.critDamage;
  bool isCrit = _random.nextDouble() < crit;
  if (isCrit) {
    point = point * critDamage;
  }
  _damageText.addDamage(-point.toInt(), isCrit: isCrit);
}
复制代码

Ao adicionar balas, a velocidade de ataque e o alcance podem ser determinados de acordo com HeroAttras informações do atributo de:

Neste artigo, continuamos a expandir a função dos papéis, sabendo que a transformação dos componentes pai afetará os componentes filhos, portanto, você precisa prestar atenção ao relacionamento entre os componentes ao usar componentes. Além disso, as informações do personagem são HeroAttrencapsuladas de , de modo que, por meio HeroComponentde , você pode adicionar vários nós de protagonista e pode lutar contra monstros no modo duplo.

Neste ponto, você pode ver TolyGameque é muito caótico. No próximo capítulo, apresentarei como gerenciar vários personagens e monstros, incluindo a geração de monstros, disparar balas, acertar o protagonista, etc. É isso por este artigo, até amanhã~

@张风捷特烈 2022.06.05 未允禁转
我的公众号: 编程之王
我的掘金主页: Zhang Fengjieteli
我的 B站主页: Zhang Fengjieteli
我的 github 主页: toly1994328