Oixi3 -- 让 PixiJs 8 可组件化编程的工具

安装

npm install oixi3

//Vanilla JS
<script src="oixi3.umd.min.js"></script>

使用

import { OText } from 'oixi3'

//Vanilla JS
const OText = oixi3.OText

案例

需要参考案例源码才能理解oixi3的意义 oixi3 Demo

代码风格

创建一个Container并addChild一个anchor.set(.5)和text='Hello oixi3!'的Text

OContainer([
  OText('anchor=0.5', 'Hello oixi3!')
])

OXS 函数

主要功能是初始化目标的属性和添加子显示对象

oxs<T>(target: T, attributes?: string, slots?: Container[], template?: () => Container[]): T

• target: 需要初始化的显示对象实例

• attributes: 初始化属性的字符串模板，使用空格分隔

#开头的属性表示设置name=*，并赋值给祖先容器的同名成员

@开头的属性表示监听事件，事件的处理函数已绑定了祖先容器作为this。 以下事件自动设置interactive=true：tap,touchstart,touchmove,touchend,click,mousedown,mousemove,mouseup,pointertap,pointerdown,pointermove,pointerup

其他属性表示设置目标对象的属性值（只能设置类型为number或ObservablePoint的成员）

oxs(new Sprite, '#foo @tap=onTap anchor=0.5 position.x=0 x=0')

解析如下，parent可能是任何祖先容器

target.name = 'foo'
target.on('tap', parent.onTap)
target.anchor.set(0.5)
target.position.x = 0
target.x = 0

//parent内需要定义
foo:Sprite
onTap() {}

• slots: 动态添加到target上的子显示对象列表。如果组件使用了template参数，则子显示对象会被addChild到模板中指定的插槽的对象上(#slot)

• template: 组件内预设的子显示对象列表

slots或template都支持以下形式，本质就是继承了Container的显示对象列表

[
  OText('#label', 'Hello!'), //内建组件
  CustomComponent(), //自定义组件
  new Sprite() //直接实例显示对象
]

推荐的自定义组件格式

//Component.ts
export function Component(attributes: string) {
  return ox(new XComponent, attributes, () => [
    OText('#title', 'Hello oixi3!'),
    OContainer([
      OSprite('#cats', 'cat.png'),
      OSprite('#cats', 'cat.png')
    ])
  ]).created()
}

class XComponent extends Container {
  title: Text

  //使用数组包含多个相同的#name
  cats: Sprite[] = []

  created() {
    //此时组件已经完成初始化。eg. this.title...
    return this
  }
}

在其他组件中引用

//OtherComponent.ts
import { Component } from './Component'

Component('x=0 y=0')