Eva.js 游戏引擎安装与使用指南

2026-01-17 08:58:24作者：郁楠烈Hubert

目录结构及介绍

Eva.js 是一个专用于创建交互式游戏项目的前端游戏引擎. 下面是项目的基本目录结构:

.
├── assets                # 资源文件存放目录，如图像、音频等资源
├── scenes                # 场景脚本存放目录
├── components           # 游戏组件存放目录，通过 Entity-Component-System(ECS)体系结构进行扩展
├── scripts               # 额外的 JavaScript 文件
├── styles                # CSS 样式表
├── index.html            # 主HTML文件，用于加载并运行引擎
└── package.json         # npm包管理文件，记录依赖项和其他元数据
...

assets: 存放游戏中的所有资源文件。
scenes: 存放定义不同场景的脚本文件。
components: 实现了 ECS 架构的游戏组件存放在这个目录下。
scripts: 存储额外的JavaScript代码或自定义功能。
styles: 存放CSS样式表以美化UI界面。

启动文件介绍

index.html 是 Eva.js 引擎的主要入口点.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- meta标签和其他头部元素 -->
</head>
<body>
    <div id="game"></div>  <!-- 这个div将作为渲染目标 -->
    
    <!-- 引入外部库 -->
    <script src="/path/to/pixi.min.js"></script>

    <!-- 引入Eva.js核心文件 -->
    <script src="/path/to/eva.js"></script>
  
    <!-- 初始化Eva.js 并载入主场景 -->
    <script>
        let game = new Eva({
            container: document.getElementById('game'),
            width: window.innerWidth,
            height: window.innerHeight,
            resources: ['assetPath']
        });
        game.load();
        game.addScene(new MainScene());
        game.start();
    </script>
</body>
</html>

这里的 index.html 文件内嵌了一个 div 元素作为渲染区域，并在底部引入了 Pixi.js 库以及 Eva.js 的核心文件. 在最后一段<script>标签中初始化了Eva.js实例并且设置好宽度，高度等参数，接着加载所有资源然后添加主场景，最后调用了 start 方法开始游戏.

配置文件介绍

尽管Eva.js没有单独的配置文件，但可以在初始化Eva对象时指定选项：

let game = new Eva({
    container: document.getElementById('game'),
    width: window.innerWidth,
    height: window.innerHeight,
    resources: ['assetPath'],
});