En el trabajo reciente de uso de CocosCreator (en adelante, CC) para desarrollar juegos HTML5, descubrí que muchos de los juegos de la compañía tienen los mismos elementos, como barras de cuenta regresiva, páginas de pago, etc. En el desarrollo inicial, no encontramos una manera de reutilizar, solo podemos escribir desde cero en diferentes proyectos de juegos. Con la creciente demanda, definitivamente no es una buena manera de reinventar la rueda, por lo que para los proyectos de CC, ¿se pueden extraer estos elementos de juego reutilizables como paquetes de componentes? Después de un poco de exploración, finalmente encontré una solución.
¿Qué es el componente CC?
Tome nuestro mini-juego "Taiko Daren" en el móvil Q como ejemplo, su barra de cuenta regresiva y la página de liquidación también existen en otros minijuegos, pero solo en apariencia, pero la lógica es la misma. De La barra de cuenta regresiva y la página de liquidación aquí se pueden entender como componentes.
La lógica de los dos componentes es la siguiente:
- La barra de cuenta regresiva puede establecer el tiempo del juego, y la duración del llenado se reduce continuamente durante el tiempo del juego; el tiempo restante se mostrará en el lado derecho de la barra de cuenta regresiva; se realizará una acción de devolución de llamada después de la cuenta regresiva.
- Puede establecer el puntaje de nivel en la página de liquidación, y puede obtener estrellas si alcanza o excede el puntaje de nivel específico; las estrellas se mostrarán de acuerdo con la lógica de animación; el puntaje se resolverá desde 0 a continuación; la acción de devolución de llamada se realizará después de que se complete el acuerdo.
A través de este ejemplo, no es difícil entender que un componente llamado CC es un nodo de juego que contiene diferentes recursos como lógica, imágenes, animaciones y audio . En CC, un nodo se ve así:
Como puede ver, el editor define su estructura a la izquierda, su manifestación concreta en el medio y sus atributos relacionados a la derecha.
¿Qué debo hacer si quiero reutilizar este nodo ya definido en otros proyectos?
Convertir en recursos prefabricados
En CC, los recursos prefabricados son una parte muy importante, que puede entenderse como una plantilla para los nodos. Si desea abstraer un nodo listo en componentes, convertirlo en un recurso prefabricado sería el método más apropiado.
Cuando definimos un editor bueno en nodo de CC a su guión lógica asociada, después de recursos estáticos, directamente desde el editor de 层级管理器arrastre 资源管理器puede ponerlo en recursos previos. Sin embargo, debido a que la asociación de recursos en el CC se basa en la ruta del recurso, antes de abstraer un componente CC, es necesario juntar todos los recursos utilizados por el componente para facilitar la reutilización futura. Cuando se reutiliza el proyecto, informará el error de que no se puede encontrar el recurso.
Cree un nuevo proyecto CC, borre el assets/directorio y luego cree un Components/directorio en él como nuestro directorio para almacenar componentes CC. Tome la página de resultados del juego Resultcomo ejemplo, inicialícela de acuerdo con la siguiente estructura de directorios y ponga los recursos necesarios:
.
├── Resources # 组件静态资源
│ ├── score.png
│ └── star.png
└── Result.ts # 组件脚本Luego, en el editor CC, agregue imágenes a los nodos secundarios arrastrando y soltando, y finalmente enlace el script lógico Result.ts:
Cuando termine, arrástrelo al assets/Components/Resultdirectorio del administrador de recursos para convertirse en un recurso prefabricado.
Para permitir que otros usuarios utilicen fácilmente este componente, se puede agregar una demostración, que contiene la escena y los scripts requeridos por la escena. Cuando los usuarios necesitan comprender este componente, solo necesitan obtener una vista previa de la escena de demostración, y algunos métodos del componente también se pueden ver en el script de demostración. La estructura final del directorio es la siguiente:
.
├── Demo # 组件使用Demo
│ ├── Result.fire
│ └── ResultDemo.ts
├── Resources # 组件静态资源
│ ├── score.png
│ └── star.png
├── Result.prefab # 组件节点
└── Result.ts # 组件脚本
Como usar
En pocas palabras, simplemente Components/copie todo el directorio del proyecto de la biblioteca de componentes en el directorio del proyecto de destino assets/y luego arrastre el nodo de recursos prefabricado al administrador de jerarquía. Por supuesto, tales operaciones manuales no son lo suficientemente elegantes, por lo que podemos usar scripts de shell para ayudarnos a simplificar este paso.
Cree un nuevo download.shscript en el directorio raíz del proyecto de destino y escriba lo siguiente:
#!/bin/bash
# 先清理一下
echo "Clearing workbench..."
rm -rf ./cocos-components
rm -rf ./assets/Components
# 直接clone组件库工程，取出Components目录，然后删掉组件库工程
echo "Cloning project..."
git clone http://git.xxx.com/cocos-components.git
cp -r ./cocos-components/assets/Components ./assets
rm -rf ./cocos-components
echo "Done!"En el futuro, solo necesita ejecutarlo ./download.shpara descargar la última biblioteca de componentes, lo cual es muy conveniente.
Especificaciones de diseño de componentes
El diseño de los componentes debe seguir el principio de la "caja negra", no depende de otros componentes ni afecta a otros componentes. El mismo componente guarda el estado del componente. Si necesita cambiar el estado o el comportamiento del componente, debe exponer elementos configurables o interfaces a través de él (modificado a través del inspector de propiedades de Cocos Creator o introducir una instancia de script del componente).
Tome los Progresscomponentes como ejemplo.
Proporciona gameDurationelementos de configuración al exterior y define la duración de la cuenta regresiva. Además, también proporciona un setTimeoutCallback()método para definir el comportamiento cuando finaliza la cuenta regresiva. El primero se puede modificar directamente en el inspector de propiedades de Cocos Creator, y el segundo debe ser utilizado por código en el script del juego:
import Progress from '../Components/Progress/Progress'
@ccclass
export default class Game extends cc.Component {
start () {
Progress.instance.setTimeoutCallback(() => {
console.log('Test progress timeout callback!')
})
}
}Al definir un script para un componente, preste atención a agregar una instancepropiedad estática nombrada para el script que se utilizará entre scripts:
export default class Progress extends cc.Component {
static instance = null
constructor () {
super()
Progress.instance = this
}
}Además, la creación de bibliotecas de componentes debe prestar atención a las convenciones de nomenclatura, de modo que tanto el desarrollador como la persona que llama puedan ahorrar muchos problemas.
Optimización posterior
El proyecto de biblioteca de componentes CC también es un juego CC completo. Podemos agregar un menú de componentes a este juego, hacer clic en el menú para cargar la escena del componente correspondiente y obtener una vista previa de los efectos del componente en tiempo real. Esta idea se pondrá en práctica más adelante y se esforzará por abrir el código lo antes posible.
Este artículo se reproduce en: Ape 2048➣ https://www.mk2048.com/blog/blog.php?id=h0ji011cbaa