【Flutter&Flame Game - Elige uno】Explorar componente | Detalles de uso del componente

¡Continúe creando, acelere el crecimiento! Este es el día 12 de mi participación en el "Nuevo plan diario de Nuggets · Desafío de actualización de junio", haga clic para ver los detalles del evento

prefacio

Esta es una serie de tutoriales producidos por Zhang Fengjietlie y publicados en la comunidad de Nuggets. Flutter&FlameSi ve este artículo en otras plataformas, puede pasar a los Nuggets para verlo según el enlace. Debido a que el artículo puede actualizarse y revisarse, prevalecerá la versión del artículo de los Nuggets. Lista de artículos de esta serie:

1. Sobre el árbol de componentes

Como se muestra en la siguiente escena, cada objeto mostrado es Component, forman una estructura de árbol. Ver [11/01] para el código

Se agregan varios roles al árbol a través del addmétodo y la estructura del árbol en este momento es la siguiente:

Ahora hay un problema: debido a que la barra de salud y el volumen se agregan al Adventurerwidget , Adventurerel comportamiento de transformación del también hará que la barra de salud cambie. Los siguientes caracteres se reflejan a lo largo del eje Y, y puede ver que la barra de salud y el texto también se reflejan, lo cual no es lo que esperábamos.

¿Cómo resolverlo? La idea es muy simple, ya Adventurerque se necesita un espejo separado, no puede ser el padre de la barra de salud. La relación entre los dos se puede cambiar de una relación padre-hijo a una relación hermano. Aquí, la barra de sangre se encapsula como LifeComponentbuild y Adventurerexiste junto con HeroComponentin :

2. Inversión del espejo en el movimiento del personaje.

Ahora quiero lograr el siguiente efecto: si el punto de contacto está en el lado izquierdo del personaje, el personaje se reflejará a la izquierda; de lo contrario, el espejo se invertirá a la derecha. El propósito de esto es que el personaje pueda elegir la dirección del ataque, como mirar hacia la izquierda para atacar al monstruo de la izquierda: ver el código [11/02]

Dado que aquí solo se invierten la izquierda y la derecha HeroComponent, defina un valor deisLeft in para registrar el estado. boolSi necesita admitir otras direcciones, como arriba, abajo, arriba a la izquierda, abajo a la derecha, etc., puede mantenerlas a través de la enumeración.

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

Al hacer clic en la pantalla se dispara el toTargetmétodo , al principio _checkFlipse puede mantener la isLeftpropiedad si se necesita revertir es a través del fliprol inverso:

---->[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;
    }
  }
}
复制代码

Solía solo querer darle la vuelta al protagonista, así que flipen él ejecuta adventurer.flip. Esto no afectará la visualización de la barra de sangre:

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);
}
复制代码

Además, con respecto a la inversión, también debe prestar atención a la dirección en la que se dispara la bala. Debido a que la bala frontal siempre se dispara hacia la derecha, si mira hacia la izquierda, debe moverse hacia la izquierda, así:

También es relativamente simple de manejar, según si isLeftrealmente se lanza hacia la izquierda o hacia la derecha, de la siguiente maneratag1

---->[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 el mantenimiento de las propiedades

Para facilitar la demostración, los atributos de los personajes están relativamente dispersos, como la velocidad y el poder de ataque. Ya que se puede encapsular aquí HeroComponentpara mantener la clase protagonista. Puede definir una HeroAttrclase para mantener las propiedades del personaje principal, de la siguiente manera:

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,
  });
}
复制代码

De esta forma, HeroComponental , pase HeroAttrel objeto para determinar la información de atributo del 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);
复制代码

De esta manera, el valor de pérdida de vida en el monstruo se puede calcular de acuerdo con HeroAttrel 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);
}
复制代码

Al agregar balas, la velocidad de ataque y el alcance se pueden determinar de acuerdo con HeroAttrla información de atributos de:

En este artículo, continuamos ampliando la función de los roles, sabiendo que la transformación de los componentes principales afectará a los componentes secundarios, por lo que debe prestar atención a la relación entre los componentes al usar componentes. Además, la información del personaje se HeroAttrencapsula de , de modo que a través HeroComponentde , puede agregar múltiples nodos de protagonista y puede luchar contra monstruos en modo doble.

En este punto, puedes ver TolyGameque es muy caótico. En el próximo capítulo, presentaré cómo manejar múltiples personajes y monstruos, incluida la generación de monstruos, disparar balas, golpear al protagonista, etc. Eso es todo por este artículo, nos vemos mañana~

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