![\"NPM](\"https://img.shields.io/npm/v/@amoy/scene.svg\")
\n \n \n ![\"NPM](\"https://img.shields.io/npm/dt/@amoy/scene.svg\")
\n \n \n ![\"size\"](\"https://img.shields.io/github/size/amoyjs/query/dist/query.min.js.svg\")
\n \n \nScene for pixi.js.
\n\n\n# Amoy Scene\n\n`@amoy/scene` 是一个基于 `pixi.js` 封装的一个包，主要包含了以下几个功能：\n\n- 场景管理\n- 资源加载\n- 属性方法等拓展\n\n## Installation\n\n```sh\n$ npm i @amoy/scene\n# or\n$ yarn add @amoy/scene\n```\n\n## Usage\n\n### Api List\n\n- `use`\n- `createGame`\n- `Resource.use`\n- `Resource.Load`\n- `Resource.onLoading`\n- `Route.to`\n- `Route.back`\n- `Route.getQuery`\n\n### Entry 入口\n\n```ts\n// app.ts\nimport { createGame, use } from '@amoy/scene'\n// scenes\nimport Home from '@scenes/home'\nimport Game from '@scenes/game'\n// extenstions\nimport fixWeGame from '@amoy/fix-wegame'\nimport constraint from '@amoy/constraint'\nimport draggify from '@amoy/draggify'\n\n// extenstions\nuse(fixWeGame) // 修复微信小游戏\nuse(constraint) // 拓展简单布局系统\nuse(draggify) // 元素拖拽功能\n\ncreateGame({\n UIWidth: 750, // UI 设计稿的宽度， 默认为屏幕宽度\n UIHeight: 1334, // UI 设计稿的高度， 默认为屏幕高度\n width: 750, // canvas 的宽度， 默认为屏幕宽度\n height: 1334, // canvas 的高度， 默认为屏幕高度\n scenes: { // key 值为场景路由的标识\n Home, // key 值为 'home'\n Game, // key 值为 'game'\n },\n})\n```\n\n### Scene 场景\n\n```ts\n// @scenes/home/index.ts\nimport { Sprite } from 'pixi.js'\nimport { Scene, Resource, Route } from '@amoy/scene'\n\n// Resource.use 接受一个对象为参数，对象的 key 值为资源的 key 值（该 key 值可直接用于 Sprite.from, Texture.from 等 api），value 值为资源的 path\n// eg: src/images/key.png\nResource.use({\n key: require('@src/images/key.png'),\n})\n\n// 利用工具函数简写资源配置(需要配合 webpack alias 功能)\nfunction generateImages(imageNames: string[], path: string = '') {\n path = path === '' ? '' : (path.endsWith('/') ? path : `${path}/`)\n return imageNames.filter((name) => name.trim() !== '').reduce((prev: any, current: any) => {\n const [imageName, extenstion] = current.split('.')\n // 此处需要配合 webpack alias\n prev[imageName] = require(`@images/${path}${imageName}.${extenstion || 'png'}`)\n return prev\n }, {})\n}\n// 使用 `generateImages` 后 png 只需填写文件名即可，其他格式比如 jpg 则填写文件名和拓展名\nResource.use(generateImages([\n 'key',\n 'bg.jpg',\n]))\n\nexport default class Home extends Scene {\n // create 函数会在 `Resource.use()` 的资源加载完毕后自动调用\n public create() {\n const bg = Sprite.from('bg')\n // 对于 UI 设计稿尺寸与屏幕尺寸不一致时，需要重新设置图片资源的大小以适应屏幕大小\n // 以背景图为例，有两种方式设置它的大小：\n //（不推荐）1. 计算背景图的长宽比\n const ratio = 1164 / 717\n bg.width = innerWidth // 以屏幕宽度为准\n bg.height = innerWidth * ratio // 按原比例计算高度\n //（推荐）2. 利用 createGame 通过计算传入的 `UIWidth` 和 `UIHeight` 计算出的 ratio 来 scale 图片资源\n bg.scale.set(this.ratio) // 可以在继承了 Scene 或者 Component 的类中通过 this.ratio 来获取 x 方向上的比例（this.ratios 可以获取 x 和 y 方向上的比例）\n // 以上两种方式完全等效，推荐提而终方式\n\n bg.interactive = true // 监听事件时，需要把该属性设置为 true\n bg.on('tap', () => {\n // 场景间的切换，可带参数\n Route.to('game', {\n from: 'home',\n })\n })\n this.stage.addChild(bg)\n }\n}\n\n// @scenes/game/index.ts\nimport { Sprite } from 'pixi.js'\nimport { Scene, Route } from '@amoy/scene'\n\nexport default class Game extends Scene {\n public create() {\n const query = Route.getQuery() // { from: 'home' }\n const from = Route.getQuery('from') // 'from'\n // Resource.use 中加载过的资源无需重复加载（key.png 在场景 Home 中加载过了）\n // 但是建议当前场景的 UI 资源仅在当前文件中加载，便于管理\n const key = Sprite.from('key')\n key.interactive = true\n key.on('tap', () => {\n Route.to('home', {\n from: 'game',\n })\n })\n this.stage.addChild(key)\n }\n}\n\n```\n\n### Component 组件\n\n`Component` 是继承自 `Container` 的类，上面挂载了一些可能会用到的额外信息：\n\n- this.ratio(s): UI 像素比\n- this.game: pixi application 实例\n- this.game.resources: 等同于 PIXI.Loader.shared.resources\n\n```ts\n// 组件\n// @components/Header.ts\nimport { Sprite } from 'pixi.js'\nimport { Component } from '@amoy/scene'\n// components\nimport Button from '@components/Button'\n\nexport default class Header extends Component {\n constructor() {\n super()\n }\n}\n```\n\n继承自 `Component` 的组件，在实例化时会自动添加到 `game.stage` 中，无需手动添加，例如：\n\n```ts\nclass Home extends Scene {\n create() {\n // 会被自动添加到 `this.stage`，如果无需自动添加，可在组件内部调用 `this.parent.removeChild(this)\n new Header()\n // 或添加到指定容器\n const header = new Header()\n this.someContainer.addChild(header)\n }\n}\n```\n\n## Extensions\n\n### constraint\n\n```js\nimport { Sprite } from 'pixi.js'\nimport { Scene } from '@amoy/scene'\n\nexport default class Game extends Scene {\n public create() {\n const key = Sprite.from('key')\n key.putCenter() // 基于父级居中\n // 在 app.ts 中 use(constraint) 后可以直接在继承了 `Container` 的类上，直接调用以下方法：\n // 注意：所有的布局方法默认都是基于父级的大小位置来定位的，具体用法看类型文件即可：\n\n // putCenter(offsetX?: number, offsetY?: number, global?: boolean): void\n // putCenterX(offsetX?: number, global?: boolean): void\n // putCenterY(offsetY?: number, global?: boolean): void\n // putLeft(offsetX?: number, global?: boolean): void\n // putTop(offsetY?: number, global?: boolean): void\n // putRight(offsetX?: number, global?: boolean): void\n // putBottom(offsetY?: number, global?: boolean): void\n\n // putCenter(global?: boolean): void\n // putCenterX(global?: boolean): void\n // putCenterY(global?: boolean): void\n // putLeft(global?: boolean): void\n // putTop(global?: boolean): void\n // putRight(global?: boolean): void\n // putBottom(global?: boolean): void\n }\n}\n```\n\n> 注意：所有布局方法最后一个参数接受一个布尔类型的值 `global`，表示该元素将基于屏幕（默认是父级）来绝对定位。\n\n### drag-drop\n\n```js\nconst A = new Container()\nA.addChild(Sprite.from('A'))\nA.draggify()\nconst B = Sprite.from('A')\nB.droppify()\nB.on('drop', ({ target, currentTarget }) => {\n // 当 A 被拖拽到 B 所在区域时，该事件会被触发\n // target 为绑定 .draggify() 方法的元素，此处为 Container\n // currentTarget 为鼠标实际操作的元素，此处为 Sprite\n})\n```\n\n## 其他\n\n### 精灵图使用\n\n使用在线 [texture packer](https://www.codeandweb.com/tp-online/index.html) 生成精灵图及 JSON，生成后在又上角下载 `spritesheet.json` 和 `spritesheet.png` 并重命名之：\n\n以 numbers 精灵图为例，把重命名的 `numbers.json` 和 `numbers.png` 保存在 `src/sprites/` 文件夹中，并通过 `copy-webpack-plugin` 插件拷贝到 `dist/sprites/` 目录中：\n\n```ts\n// webpack.config.js\nconst Copy = require('copy-webpack-plugin')\n\nmodule.exports = {\n // ...\n plugins: [\n new Copy([\n { from: 'src/sprites/**/*', to: 'sprites/[name].[ext]', }\n ]),\n ],\n}\n```\n\n然后通过 `Resource.use()` 方法来加载资源：\n\n```ts\nResource.use({\n numbers: 'sprites/numbers.json',\n})\n// JSON 格式大致如下\n{\n\t\"meta\": {\n \"image\": \"numbers.png\",\n },\n\t\"frames\": {\n\t\t\"0.png\": {},\n\t\t\"1.png\": {},\n //...\n\t\t\"9.png\": {}\n\t}\n}\n// 建议把 frames 中的 `.png` 去掉，因为 pixi 在解析带有拓展名的 key 值时，可能会出错，也就是改成这样：\n{\n\t\"meta\": {\n \"image\": \"numbers.png\",\n },\n\t\"frames\": {\n\t\t\"0\": {},\n\t\t\"1\": {},\n //...\n\t\t\"9\": {}\n\t}\n}\n```\n\n加载完后可以这么使用：\n\n```ts\nimport { Sprite, Loader } from 'pixi.js'\nconst textures = Loader.shared.resources['numbers'].textures\nconst numberOne = Sprite.from(textures['1'])\n```","readmeFilename":"README.md","homepage":"https://github.com/amoyjs/scene#readme","bugs":{"url":"https://github.com/amoyjs/scene/issues"}}