Eva.js初步使用遇到的问题

736 阅读1分钟

需求: 宠物养成游戏

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

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

具体使用参考官网教程

image.png

新建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相关包, 导入会出现以下问题, 导致项目无法启动

    374a08bd64f194e33b559d8f346e4cd.jpg

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

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

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