2021-10-12

需求: 宠物养成游戏

Eva.js是一款前端框架, 了解HTML/css/JavaScript就可以使用

基于Eva.js实现宠物养成游戏

具体使用参考官网教程

新建vue项目, 使用vue cli3创建

vue create evademo

 安装eva所需npm包(按需导入)

// 添加资源
npm install @eva/eva.js
// 创建游戏
npm i @eva/plugin-renderer
// 添加游戏对象
npm i @eva/plugin-renderer
// 添加image组件
npm i @eva/plugin-renderer-img
// 添加文本组件
npm i @eva/plugin-renderer-text
// 图形绘制组件
npm i @eva/plugin-renderer-graphics
// 精灵图组件
npm i @eva/plugin-renderer-sprite
// 龙骨动画(搭配dragonbones使用, 页面所需动画)
npm i @eva/plugin-renderer-dragonbone

页面引用(根据需要按需引用)

import { Game, GameObject, resource, RESOURCE_TYPE } from '@eva/eva.js' 
import { RendererSystem } from '@eva/plugin-renderer' 
import { Img, ImgSystem } from '@eva/plugin-renderer-img' 
import { DragonBone, DragonBoneSystem } from '@eva/plugin-renderer-dragonbone' 

js代码放在mounted中 

项目中遇到的问题

• 不支持canvas操作的无法正常使用Eva.js, 可以使用webview进行加载使用eva.js开发的页面
• 使用不支持canvas的环境引入Eva.js相关包, 导入会出现以下问题, 导致项目无法启动

      

• 出现以下问题, 保持package.json中Eva.js相关包版本一致, 重装node_modules

       

• 龙骨图引入资源报错(仅允许传入url地址)

      

• 如果需要引入其他类型的资源(修改type类型为data, 可以引入本地资源或者url资源)

      

• 引入资源链接报错(跨域引起的问题)