product/Pandona-Engine

Fork 0

Files

袁涛 bdd67a65fa 初始化提交

2025-10-03 16:49:53 +08:00

3.7 KiB

Raw Blame History

快速上手

本指南将帮助你快速开始使用PE引擎创建你的第一个应用。

创建一个简单的PE应用

1. 安装

首先，创建一个新的项目目录并初始化npm：

mkdir my-pe-app
cd my-pe-app
npm init -y

然后安装PE引擎：

npm install pe-engine

2. 创建HTML文件

在项目根目录下创建index.html文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的PE应用</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/main.js"></script>
</body>
</html>

3. 创建主JavaScript文件

创建main.js文件：

import PE from 'pe-engine'

// 创建应用实例
const { game } = PE.create()

// 添加一个简单的精灵
const sprite = game.create('sprite')
sprite.setPosition(100, 100)
sprite.setSize(100, 100)

// 设置精灵样式
sprite.element.style.backgroundColor = '#3498db'
sprite.element.style.borderRadius = '50%'

4. 启动开发服务器

安装Vite作为开发服务器：

npm install -D vite

在package.json中添加脚本：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

启动开发服务器：

npm run dev

现在你应该能在浏览器中看到一个蓝色的圆形精灵了！

使用场景系统

PE引擎提供了强大的场景系统，让你可以轻松管理不同的应用状态。

1. 创建场景目录结构

project/
├── index.html
├── main.js
├── scenes/
│   ├── home/
│   │   ├── index.pe
│   │   └── index.less
│   └── about/
│       ├── index.pe
│       └── index.less
└── styles/
    └── base.less

2. 创建场景配置文件

创建scenes.json文件来定义路由：

{
  "scenes": [
    {
      "path": "/",
      "title": "主页"
    },
    {
      "path": "/about",
      "title": "关于"
    }
  ]
}

3. 创建场景文件

创建scenes/home/index.pe：

<sence>
  <box class="welcome-box">欢迎来到PE引擎!</box>
  <sprite class="logo"></sprite>
  <box class="nav-button" @click="PE.navigateTo('/about')">关于我们</box>
</sence>

<script>
onLoad(() => {
  console.log('主页加载完成')
})

onShow(() => {
  console.log('主页显示')
})
</script>

创建scenes/home/index.less：

.welcome-box {
  width: 300px;
  height: 100px;
  background-color: #2c3e50;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px;
}

.logo {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  border-radius: 50%;
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);
}

.nav-button {
  width: 200px;
  height: 50px;
  background-color: #e74c3c;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 4px;
  cursor: pointer;
}

4. 更新主文件

更新main.js以使用场景系统：

import './styles/base.less'
import PE from 'pe-engine'

// PE引擎会自动加载scenes.json中的路由配置
// 并根据路由显示相应的场景

现在你已经创建了一个基本的PE应用，它使用场景系统来管理不同的视图。

下一步

阅读基础教程了解PE引擎的核心概念
查看API参考了解所有可用的API
探索进阶主题学习更高级的功能

3.7 KiB Raw Blame History Unescape Escape