Pandona-Engine/guide/essentials/application.md

创建应用实例

在PE引擎中，所有应用都从创建一个应用实例开始。这个实例是整个应用的核心，包含了引擎的所有功能。

创建应用实例

要创建一个PE应用实例，你需要从pe-engine包中导入PE对象，然后调用PE.create()方法：

import PE from 'pe-engine'

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

PE.create()方法会返回一个引擎实例，该实例包含了所有PE引擎的功能，包括元素创建、场景管理、动画系统等。

应用配置

在创建应用实例时，你可以传入配置选项来自定义应用的行为：

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方法可以创建各种元素：

// 创建精灵
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 
})

场景管理

应用实例提供了场景管理功能：

// 切换到指定路径的场景
PE.navigateTo('/about')

// 预加载场景
game.preloadScenes(['/home', '/about', '/contact'])

动画系统

应用实例集成了动画系统：

// 创建补间动画
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)

资源管理

应用实例提供了资源加载和管理功能：

// 加载图像资源
const image = await game.load('path/to/image.png')

// 加载音频资源
game.loadSound('jump', 'path/to/jump.mp3')
game.loadMusic('bgm', 'path/to/background.mp3')

摄像机控制

应用实例支持摄像机系统：

// 设置摄像机位置
game.setCameraPosition(100, 100)

// 跟随目标
game.follow(playerSprite)

// 摄像机震动效果
game.shakeCamera(10, 500)

完整示例

以下是一个完整的应用实例创建和使用示例：

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的元素系统。