introducción
Implementación simple del efecto de flecha de selección de objetivos de Hearthstone en Cocos
A las 0:00 del 24 de enero de 2023 , la serie de juegos Blizzard representada por NetEase finalizó oficialmente sus operaciones en China .
Hearthstone es un juego que ha acompañado al autor durante 4 años . La leyenda y las 12 victorias en la arena están vivas en mi mente.
En un abrir y cerrar de ojos, ha pasado casi un año desde que se suspendió el servidor . Hay rumores de que Hearthstone volverá pronto al servidor nacional , lo que me trae muchos recuerdos.
Somos técnicos y no sabemos cómo expresarnos. ¡Hagamos una selección de objetivos simple similar para ver el efecto!
Este artículo presentará la implementación simple del efecto de flecha de selección de objetivos de Hearthstone en Cocos .
El proyecto fuente de este artículo se puede obtener leyendo el texto original al final del artículo. Los amigos pueden ir allí solos.
1. Efecto de selección de objetivos
Generalmente en el desarrollo de juegos , el combate u otras escenas requieren que los jugadores operen y seleccionen el objetivo a atacar y el punto al que moverse .
Para mostrar un efecto más obvio , se utilizará la forma de indicación de flecha .
La flecha generalmente comienza desde el punto inicial y apunta al punto final , y se puede realizar alguna animación durante este período para que el efecto sea más vívido .
¿Qué puntos de conocimiento hay?
2. Análisis de requisitos
La versión original viene con la deformación de la flecha , que se realiza a través del modelo. Haremos una versión simple por ahora , y implementaremos una versión 3D más adelante cuando tengamos tiempo.
Para implementar fácilmente el efecto de flecha de selección de objetivos de Hearthstone en Cocos, es posible que necesites los siguientes puntos de conocimiento :
- Obtenga la posición del clic del mouse y obtenga la posición del mouse en tiempo real.
- Flecha siguiendo y apuntando.
- Control de longitud de flecha.
- Haz algunas animaciones simples en las partes del cuerpo de las flechas.
Simplemente implementemos el efecto de flecha de selección de objetivos de Hearthstone.
3. Implemente fácilmente el efecto de flecha de selección de objetivos de Hearthstone
1. Medio ambiente
Versión del motor : Cocos Creator 3.8.1
Lenguaje de programación : mecanografiado
2. Preparación de recursos
Encuentre recursos familiares en Internet . Simplemente empalme y como se puede controlar la longitud de la flecha , la dividimos en 2 partes .
- parte de la flecha
- parte del cuerpo
Para alinear cada cuadro del cuerpo, agregamos un diseño vertical .
En cuanto al control de la longitud de la flecha , utilizamos Maskcomponentes y UITransformcomponentes para implementarlo.
Escribamos el código juntos.
3. Escribir código
Primero creamos un HeartStoneArrowcomponente y lo agregamos al nodo.
import {
_decorator, Component, EventMouse, find, misc, Node, NodeEventType, UI, UITransform, v2, v3, Vec2, Vec3 } from 'cc';
const {
ccclass, property } = _decorator;
@ccclass('HeartStoneArrow')
export class HeartStoneArrow extends Component {
arrow: Node;
body: Node;
bodyTrans: UITransform;
criticalValue: number;
}
Luegostart() inicialízalo en el método .
start() {
const canvas = find("Canvas");
this.arrow = canvas.getChildByPath("HeartStoneArrow/arrow");
this.arrow.active = false;
this.body = canvas.getChildByPath("HeartStoneArrow/body");
this.bodyTrans = this.body.getComponent(UITransform);
const len = this.body.children[0].children.length;
const lastChildren = this.body.children[0].children[len - 1];
this.criticalValue = lastChildren.position.y + lastChildren.getComponent(UITransform).height;
let startPos = null;
}
La posición del clic del mouse se obtiene a través NodeEventType.MOUSE_DOWNdel evento getUILocation().
canvas.on(NodeEventType.MOUSE_DOWN, (event: EventMouse) => {
const pos = event.getUILocation();
startPos = v3(pos.x, pos.y, 0);
this.body.worldPosition = startPos;
this.arrow.worldPosition = startPos;
}, this);
El efecto es el siguiente:
Luego NodeEventType.MOUSE_DOWNactualice la posición y orientación de la flecha , y actualice la longitud y orientación del cuerpo en el evento .
canvas.on(NodeEventType.MOUSE_MOVE, (event: EventMouse) => {
if (startPos != null) {
if (!this.arrow.active) {
this.arrow.active = true;
}
const pos = event.getUILocation();
this.arrow.worldPosition = v3(pos.x, pos.y, 0);
this.body.angle = this.calculateAngle(v2(0, 1), v2(pos.x - startPos.x, pos.y - startPos.y))
this.arrow.angle = this.body.angle;
this.bodyTrans.height = (Vec3.distance(this.arrow.worldPosition, startPos) - 50) / this.node.scale.y;
}
}, this);
El cálculo de la orientación implica encontrar el ángulo entre dos vectores .
calculateAngle(vectorA: Vec2, vectorB: Vec2) {
// 使用 Math.atan2 获取带方向的角度（弧度）
const angleRad = Math.atan2(vectorB.y, vectorB.x) - Math.atan2(vectorA.y, vectorA.x);
// 将弧度转换为角度
const degrees = misc.radiansToDegrees(angleRad);
// 确保角度在 [0, 360) 范围内
return (degrees + 360) % 360;
}
La longitud de la flecha se modifica modificando la altura del componente Maskdel nodo donde se encuentra el componente UITransform, y la longitud se calcula usando Vec3.distanceCalcular.
this.bodyTrans.height = (Vec3.distance(this.arrow.worldPosition, startPos) - 50) / this.node.scale.y;
El efecto es el siguiente:
Finalmente,update implementamos el efecto de animación simple de la flecha en , actualizando constantemente la coordenada y y haciendo un bucle .
protected update(dt: number): void {
for (let i = 0; i < this.body.children[0].children.length; i++) {
this.body.children[0].children[i].position = this.body.children[0].children[i].position.add3f(0, 10, 0);
if (this.body.children[0].children[i].position.y >= this.criticalValue) {
this.body.children[0].children[i].position = v3();
}
}
}
El efecto es el siguiente:
De esta manera nuestro código está terminado, echemos un vistazo al efecto.
5. Demostración de efectos
Conclusión
¡Saludos a los buenos juegos y a la juventud!
El proyecto fuente de este artículo se puede obtener a través del mensaje privado HeartStoneArrow .
¿Dónde puedo ver ideas tan claras?¡Ven y sígueme! Sígueme y aprende sobre los últimos avances en la industria de los juegos y aprende habilidades de desarrollo de juegos conmigo.
Soy un "Programador Billion Dollar", un programador con 8 años de experiencia en la industria de los juegos. En el desarrollo de juegos, espero poder ayudarte y espero que a través de ti pueda ayudar a todos.
ANUNCIO: Puede hacer clic y buscar los minijuegos en línea del autor "Snake Handheld Classic", "Gravity Maze Ball" y "Coloring Journey" usted mismo.
Para ser honesto, ¡quiero que me guste y mire ! Comparte este artículo con otros amigos que creas que lo necesitan . ¡Gracias!
Columnas recomendadas:
Aprenda patrones de diseño con un programador maestro de juegos de 8 años
Desarrolla el minijuego Snake desde cero hasta una serie en línea