初始化提交

guide/essentials/application.md

@@ -0,0 +1,194 @@
+# 创建应用实例
+
+在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的元素系统。