You've already forked Pandona-Engine
194 lines
4.2 KiB
Markdown
194 lines
4.2 KiB
Markdown
# 创建应用实例
|
||
|
||
在PE引擎中，所有应用都从创建一个应用实例开始。这个实例是整个应用的核心，包含了引擎的所有功能。
|
||
|
||
## 创建应用实例
|
||
|
||
要创建一个PE应用实例，你需要从`pe-engine`包中导入PE对象，然后调用`PE.create()`方法：
|
||
|
||
```javascript
|
||
import PE from 'pe-engine'
|
||
|
||
// 创建应用实例
|
||
const game = PE.create()
|
||
```
|
||
|
||
`PE.create()`方法会返回一个引擎实例，该实例包含了所有PE引擎的功能，包括元素创建、场景管理、动画系统等。
|
||
|
||
## 应用配置
|
||
|
||
在创建应用实例时，你可以传入配置选项来自定义应用的行为：
|
||
|
||
```javascript
|
||
import PE from 'pe-engine'
|
||
|
||
// 带配置的应用实例
|
||
const game = PE.create({
|
||
width: 1024, // 舞台宽度，默认800
|
||
height: 768, // 舞台高度，默认600
|
||
background: '#ffffff', // 舞台背景色，默认'#f0f0f0'
|
||
fps: 60 // 帧率，默认60
|
||
})
|
||
```
|
||
|
||
### 配置选项说明
|
||
|
||
| 选项 | 类型 | 默认值 | 描述 |
|
||
|------|------|--------|------|
|
||
| width | number | 800 | 应用舞台的宽度（像素） |
|
||
| height | number | 600 | 应用舞台的高度（像素） |
|
||
| background | string | '#f0f0f0' | 舞台背景色 |
|
||
| fps | number | 60 | 应用的帧率 |
|
||
|
||
## 应用实例的核心功能
|
||
|
||
创建的应用实例提供了丰富的API来管理你的应用：
|
||
|
||
### 元素创建
|
||
|
||
使用`create`方法可以创建各种元素：
|
||
|
||
```javascript
|
||
// 创建精灵
|
||
const sprite = game.create('sprite')
|
||
sprite.setPosition(100, 100)
|
||
sprite.setSize(100, 100)
|
||
|
||
// 创建盒子
|
||
const box = game.create('box', {
|
||
x: 200,
|
||
y: 200,
|
||
width: 150,
|
||
height: 100
|
||
})
|
||
|
||
// 创建文本
|
||
const text = game.create('text', {
|
||
text: 'Hello PE!',
|
||
x: 300,
|
||
y: 300
|
||
})
|
||
```
|
||
|
||
### 场景管理
|
||
|
||
应用实例提供了场景管理功能：
|
||
|
||
```javascript
|
||
// 切换到指定路径的场景
|
||
PE.navigateTo('/about')
|
||
|
||
// 预加载场景
|
||
game.preloadScenes(['/home', '/about', '/contact'])
|
||
```
|
||
|
||
### 动画系统
|
||
|
||
应用实例集成了动画系统：
|
||
|
||
```javascript
|
||
// 创建补间动画
|
||
game.tween(sprite.element)
|
||
.to({ left: '500px', top: '500px' }, 1000)
|
||
.easing('easeInOutQuad')
|
||
.start()
|
||
|
||
// 创建帧动画
|
||
game.createFrameAnimation('walk', [
|
||
'img/walk1.png',
|
||
'img/walk2.png',
|
||
'img/walk3.png'
|
||
], 10)
|
||
|
||
game.playFrameAnimation(sprite, 'walk', true)
|
||
```
|
||
|
||
### 资源管理
|
||
|
||
应用实例提供了资源加载和管理功能：
|
||
|
||
```javascript
|
||
// 加载图像资源
|
||
const image = await game.load('path/to/image.png')
|
||
|
||
// 加载音频资源
|
||
game.loadSound('jump', 'path/to/jump.mp3')
|
||
game.loadMusic('bgm', 'path/to/background.mp3')
|
||
```
|
||
|
||
### 摄像机控制
|
||
|
||
应用实例支持摄像机系统：
|
||
|
||
```javascript
|
||
// 设置摄像机位置
|
||
game.setCameraPosition(100, 100)
|
||
|
||
// 跟随目标
|
||
game.follow(playerSprite)
|
||
|
||
// 摄像机震动效果
|
||
game.shakeCamera(10, 500)
|
||
```
|
||
|
||
## 完整示例
|
||
|
||
以下是一个完整的应用实例创建和使用示例：
|
||
|
||
```javascript
|
||
import PE from 'pe-engine'
|
||
|
||
// 创建应用实例
|
||
const game = PE.create({
|
||
width: 800,
|
||
height: 600,
|
||
background: '#2c3e50'
|
||
})
|
||
|
||
// 创建一个精灵
|
||
const player = game.create('sprite')
|
||
player.setPosition(100, 100)
|
||
player.setSize(50, 50)
|
||
|
||
// 为精灵添加样式
|
||
player.element.style.backgroundColor = '#3498db'
|
||
player.element.style.borderRadius = '50%'
|
||
|
||
// 添加点击事件
|
||
player.element.addEventListener('click', () => {
|
||
// 播放动画
|
||
game.tween(player.element)
|
||
.to({
|
||
left: Math.random() * 700 + 'px',
|
||
top: Math.random() * 500 + 'px'
|
||
}, 500)
|
||
.easing('easeOutQuad')
|
||
.start()
|
||
})
|
||
|
||
// 添加键盘控制
|
||
document.addEventListener('keydown', (e) => {
|
||
const speed = 10
|
||
const pos = {
|
||
left: parseInt(player.element.style.left) || 0,
|
||
top: parseInt(player.element.style.top) || 0
|
||
}
|
||
|
||
switch(e.key) {
|
||
case 'ArrowUp':
|
||
player.setPosition(pos.left, pos.top - speed)
|
||
break
|
||
case 'ArrowDown':
|
||
player.setPosition(pos.left, pos.top + speed)
|
||
break
|
||
case 'ArrowLeft':
|
||
player.setPosition(pos.left - speed, pos.top)
|
||
break
|
||
case 'ArrowRight':
|
||
player.setPosition(pos.left + speed, pos.top)
|
||
break
|
||
}
|
||
})
|
||
```
|
||
|
||
通过以上内容，你已经了解了如何创建和配置PE应用实例，以及如何使用其核心功能。在下一章节中，我们将深入探讨PE的元素系统。 |