pixikits v2.0.0

开发环境

pixijs 6.1.3

@pixi/events 6.1.3

rollup 打包，使用es6模式开发

注意！

* 特别注意！ V2.0和V1.0版本不兼容

* 事件系统选择使用6.1.*新增的 Federated Events (@pixi/events)

官方是针对pixijs6+实现的Federated Events，该插件没有正式集成到pixi6，官方声明pixi7才会正式集成。貌似pixi的next分支集成了该插件，未测试。所以在集成前需要在页面上显示的引入。关于该事件体系的具体说明看这里. 本库经过测试前端使用5.2.5+都可正常运行，但不保证

Changed v2.0

本版本与1.0.x版本不兼容，重构了太多的API。

####fixed

1. dragable对本对象其他事件的影响

####reBuild

1. Slider
2. Scroller

####new

1. add ProgressBar class
2. add some common function

开始

node ES6

在node下开发的话需要先安装，因为是es6的库，所以请使用es6模式开发

1. 安装

   npm install pixikits

2. 使用

   import * as PIXI  from "pixi.js";
   import * as PixiKits  from "pixikits";
   
   const app = new PIXI.Application();
   document.body.appendChild(app.view);
   ...
   <!--先初始化-->
   PixiKits.init(app);
   <!--开始使用-->
   const slider = new PixiKits.Slider({...});

3. rollup

   如果项目使用rollup打包，那么需要在rollup中增加一下代码：

   ...
   external:["pixi.js","@pixi/events","@pixi/core"],      // 告诉rollup，不打包的库，将其视为外部依赖
   ...
   globals: { 
   	"pixi.js": 'PIXI',      // 指明pixi.js库即是外部依赖PIXI
   	"@pixi/events":"PIXI",   //浏览器引入events.js文件后，会将EventSystem对象集成到PIXI
   	"@pixi/core":"PIXI", 	//同样不用打包
   }
   ...

   前端只需要引入pixi.js和events.js就可正常运行，不需要加载前端的pixikits.js文件。如果想在前端自己加载pixikits.js文件(有时rollup打包关联的库文件时会出现各种问题)，在上面的配置中增加配置项不打包即可 。

browser

1. 页面上显示引入@pixi/events插件的browser文件和pixikits的brower文件

   <script src=".../pixi.js"></script>
   
   <script src=".../events.js"></script> //here(./assets/events.js)
   <script src=".../pixikits.js"></script>

2. 初始化后，通过 PixiKits 对象调用

   const app = new PIXI.Application();
   document.body.appendChild(app.view);
   <!--先初始化-->
   PixiKits.init(app);
   <!--开始使用-->
   PixiKits.keepScreen("h");
   ...

3. Demo

Document

Members

Methods

PixiKits.init(app)

初始化，必须首先调用该方法初始化，初始化之后将使用新的事件系统EventSystem(@pixi/events)，可能会影响已有的使用老的事件系统的代码

PixiKits.keepScreen(direction)

保持stage的逻辑绘制方向为横屏或者纵屏

PixiKits.dragable(object,params={})

使对象可拖拽

PixiKits.tap(object,cb)

使对象可点击，主要针对新事件体系click做了移动端兼容（当前阶段事件体系的tap移动端不是很好用）

UI

基本都是继承Sprite或者Container对象，下面的属性和方法只介绍新增或者变更的部分

PixiKits.Slider

基于dragable实现的滚动条类，继承PIXI.Container

const params = {
				background:{
					texture:0xeeeeee,
					width:20,
					height:200
				},
				bar:{
					texture:0xeeeeee,
					width:16,
					height:50
				},
				alpha:0.6,
				dir:Slider.V,
				cb:(percent)=>{
                	console.log(percent);
                }
			};
const slider = new PixiKits.Slider(params);
app.stage.addChild(slider);

Constructor

Members

Methods

Slider.refresh(params)

刷新slider参数设置

Slider.setPercent(percent,movebar)

刷新slider参数设置

Slider.setActive(active)

刷新slider参数设置

PixiKits.Scroller

基于dragable和Slider实现的滚动条类，继承PIXI.Container

const params = {
	width:350,
	height:200,
	background:Texture.WHITE,
	x:{
		background:{
			texture:Texture.WHITE,
			height:10,
		},
		bar:{
      		texture:0xff3366,
			height:10
		}
	},
	y:false
};
const scroller = new PixiKits.Scroller(params);
app.stage.addChild(scroller);
scroller.addChild(...);

Constructor

Members

Methods

Scroller.refresh(params={})

刷新Scroller，该方法会重新计算内容尺寸和滚动条。 适用于增加非直接子对象时，比如内部的对象自己新增子对象或者自己变换尺寸时，这时Scroller是无感的，需要手动调用本方法重新计算 刷新UI。当然也可传入参数局部刷新设定参数。

Slider. addChild(...) overrides

重写了Container.addChild方法,该方法会自动调用refresh方法刷新滚动条

PixiKits.ProgressBar

继承PIXI.Container实现的进度条类

const processBar = new PixiKits.ProgressBar({
  width:200,
  height:20,
  percent:0.5,
  background:PIXI.utils.TextureCache.input,
  progress:PIXI.utils.TextureCache.progress,
  icon:resources.spritesheet.spritesheet.animations.iconfly
});
processBar.icon.animationSpeed =0.2;
//processBar.setPercent(0.5);
app.stage.addChild(processBar);

Constructor

Members

Methods

Scroller.setPercent(percent)

设定当前滚动条的进度

Scroller.setBackground(background)

重新设置背景对象

Scroller.setProgress(progress)

重新设置滚动条对象

PixiKits.SpliceSprite

继承PIXI.Container拼接图片精灵，用于多个的图片素材再拼接组成一个精灵. (比如超长的一镜到底复杂背景图，切片加载在拼装)

const bg = new PixiKits.SpliceSprite(
  resources,
	//{loader.Resources}
  //{a:t1,b:t2...}
  //[t1,t2,t3,...]
  PixiKits.SpliceSprite.V
);
//bg.position.set(0,0);
app.stage.addChild(bg);

Constructor