pubtool4pixi
Version:
Usefultool for PIXI xes project
1,489 lines (1,458 loc) • 83.3 kB
JavaScript
'use strict';
import { setTimeout, setInterval, clearInterval } from './Timmer'
import bindPolarProperty from './polar'
// import { Container, Sprite, Text } from 'pixi.js';
import $ from 'jquery';
import Observable from './Observable';
import zorderAbility from "./zorderAbility"
const Container = PIXI.Container;
const Sprite = PIXI.Sprite;
const Text = PIXI.Text;
function moveInterface(obj) {
let fn = obj.scale.set;
obj.scale.set = function (x, y) {
fn.call(obj, x, y);
graphics1.clear();
graphics1.drawRect(-0.5 * obj.width || -100, -0.5 * obj.height || -100, obj.width || 200, obj.height || 200);
};
let graphics1 = new PIXI.Graphics();
graphics1.beginFill(0x000000, 0.2);
graphics1.drawRect(-0.5 * obj.width || -100, -0.5 * obj.height || -100, obj.width || 200, obj.height || 200);
graphics1.interactive = true;
let graphics2 = new PIXI.Graphics();
graphics2.beginFill(0xff0000, 0.2);
graphics2.drawRect(-10, -10, 20, 20);
graphics2.position.set(0.5 * obj.width || -100, -0.5 * obj.height || -100);
graphics2.interactive = true;
graphics2.on("pointerdown", function (e) {
this.basePosition = {};
this.basePosition.x = e.data.global.x;
this.basePosition.y = e.data.global.y;
});
graphics2.on("pointermove", function (e) {
if (this.basePosition) {
let dx = e.data.global.x - this.basePosition.x;
let dy = e.data.global.y - this.basePosition.y;
let p = obj.toLocal(e.data.global, stage);
graphics2.position.set(p.x, p.y);
this.parent.scale.set(this.parent.scale.x + dx * 0.001, this.parent.scale.y - dy * 0.001);
}
});
graphics2.on("pointerup", function (e) {
console.log("scale:", this.parent.scale.x, ",", this.parent.scale.y);
delete this.basePosition;
});
graphics2.on("pointerout", function (e) {
console.log("scale:", this.parent.scale.x, ",", this.parent.scale.y);
delete this.basePosition;
});
graphics1.on("pointerup", function () {
this.allowMove = false;
console.log("Position:", this.parent.x, ",", this.parent.y);
});
obj.addChild(graphics1, graphics2);
let startPoint;
graphics1.on("pointerdown", function (e) {
this.allowMove = true;
startPoint = obj.toLocal(e.data.global, stage);
});
graphics1.on("pointermove", function (e) {
if (this.allowMove) {
let p = obj.parent.toLocal(e.data.global, stage);
this.parent.position.set(p.x - startPoint.x, p.y - startPoint.y);
}
});
graphics1.on("pointerup", function () {
this.allowMove = false;
console.log("Position:", this.parent.x, ",", this.parent.y);
});
}
function getPoint(p1, p2, a) {
return {
x: p1.x + a * (p2.x - p1.x),
y: p1.y + a * (p2.y - p1.y)
};
}
function FN(aPoint, a) {
let arrLine = [];
for (let i = 1; i < aPoint.length; i++) {
let p1 = aPoint[i - 1];
let p2 = aPoint[i]
arrLine.push([p1, p2]);
}
let Point = [];
for (let i = 0; i < arrLine.length; i++) {
let p1 = arrLine[i][0];
let p2 = arrLine[i][1];
Point.push(getPoint(p1, p2, a));
}
if (Point.length > 1) {
return FN(Point, a);
}
return Point[0];
}
function Fn1(star, end, aBezierPoint, TotalTime) {
let arr = [{ x: 0, y: star }];
arr.push.apply(arr, aBezierPoint);
arr.push({ x: TotalTime, y: end });
return function (time) {
return FN(arr, time / TotalTime);
};
}
let AniFun = {
linear: function (t, b, c, d) {
return (c - b) / d * t + b;
},
easeInQuad: function (t, b, c, d) {
return c * (t /= d) * t + b;
},
easeOutQuad: function (t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
},
easeInOutQuad: function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t - 2) - 1) + b;
},
easeInCubic: function (t, b, c, d) {
return c * (t /= d) * t * t + b;
},
easeOutCubic: function (t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
},
easeInOutCubic: function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
},
easeInQuart: function (t, b, c, d) {
return c * (t /= d) * t * t * t + b;
},
easeOutQuart: function (t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeInOutQuart: function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
},
easeInQuint: function (t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
},
easeOutQuint: function (t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
},
easeInOutQuint: function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
},
easeInSine: function (t, b, c, d) {
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
},
easeOutSine: function (t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
},
easeInOutSine: function (t, b, c, d) {
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
},
easeInExpo: function (t, b, c, d) {
return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
},
easeOutExpo: function (t, b, c, d) {
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
},
easeInOutExpo: function (t, b, c, d) {
if (t == 0) return b;
if (t == d) return b + c;
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
easeOutCirc: function (t, b, c, d) {
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
},
easeInOutCirc: function (t, b, c, d) {
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
},
easeInElastic: function (t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (a < Math.abs(c)) {
a = c;
var s = p / 4;
}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
easeOutElastic: function (t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (a < Math.abs(c)) {
a = c;
var s = p / 4;
}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
},
easeInOutElastic: function (t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) return b;
if ((t /= d / 2) == 2) return b + c;
if (!p) p = d * (.3 * 1.5);
if (a < Math.abs(c)) {
a = c;
var s = p / 4;
}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
},
easeInBack: function (t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
easeOutBack: function (t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
easeInOutBack: function (t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
},
easeInBounce: function (t, b, c, d) {
return c - AniFun.easeOutBounce(d - t, 0, c, d) + b;
},
easeOutBounce: function (t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
},
easeInOutBounce: function (t, b, c, d) {
if (t < d / 2) return AniFun.easeInBounce(t * 2, 0, c, d) * .5 + b;
return AniFun.easeOutBounce(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
}
};
//t:时间、b:起始位置、c:结束位置、d:总时长
function getAniFun(name, b, c, d) {
let dist = c - b;
return function (t) {
return b + AniFun[name](t, 0, dist, d);
};
}
function playSound(type, isLoop, opt) {
try {
if (type == "bg" || isLoop) {
return PIXI.sound.play("audio_" + type, { loop: true });
} else {
return PIXI.sound.play("audio_" + type, opt);
}
} catch (e) {
try {
return PIXI.sound.play("pub_" + type, opt);
} catch (e) {
}
}
}
function stopPlay(type) {
try {
if (type == "bg") {
PIXI.sound.stop("audio_" + type);
} else {
PIXI.sound.stop("audio_" + type);
}
} catch (e) {
try {
PIXI.sound.stop("pub_" + type);
} catch (e) {
}
}
}
function getAni(name) {
return new PIXI.spine.Spine(this.res["animation_" + name].spineData);
}
let AniObj = {
getAni: getAni,
getAniFun: getAniFun,
playSound: playSound,
stopPlay: stopPlay,
getBezier: Fn1
};
function clickInterface() {
let x = 0;
let y = 0;
let name = this.ClickSprite.name;
let isPlaySound = !(this.ClickSprite.isPlaySound === false);
let container = this;
let sprite = new PIXI.Sprite(this.res[name].texture);
let graphics1 = new PIXI.Graphics();
container.allowClick = () => {
return true;
};
graphics1.Sprite = sprite;
graphics1.textureUnClick = this.res[name].texture;
graphics1.textureClick = this.res[name + 'click'] && this.res[name + 'click'].texture || graphics1.textureUnClick;
graphics1.textureOver = this.res[name + 'over'] && this.res[name + 'over'].texture || graphics1.textureUnClick;
sprite.buttonMode = true;
sprite.interactive = true;
graphics1.on("pointerdown", function () {
if (container.allowClick()) {
this.Sprite.texture = this.textureClick;
this._isClick = true;
}
});
graphics1.on("touchend", function () {
this.Sprite.texture = this.textureUnClick;
this._isClick = false;
});
graphics1.on("mouseup", function () {
this.Sprite.texture = this.textureUnClick;
this._isClick = false;
});
graphics1.on("pointermove", function (e) {
if (!container.allowClick()) {
return;
}
if (this._isClick && !graphics1.containsPoint(e.data.global)) {
this.Sprite.texture = this.textureUnClick;
this._isClick = false;
} else if (this._isClick) {
this.Sprite.texture = this.textureClick;
} else if (!this._isClick && graphics1.containsPoint(e.data.global)) {
this.Sprite.texture = this.textureOver
} else {
this.Sprite.texture = this.textureUnClick;
}
});
if (isPlaySound === true) {
graphics1.on("pointertap", () => {
this.playSound("click");
});
}
sprite.anchor.set(0, 1);
sprite.x = x;
sprite.y = y + sprite.height;
graphics1.beginFill(0x000000, 0);
graphics1.drawRect(sprite.x, sprite.y - sprite.height, sprite.width, sprite.height);
graphics1.alpha = 1;
graphics1.interactive = true;
graphics1.buttonMode = true;
graphics1.on("pointertap", () => {
this.fireEvent("onClick");
});
container.on = (event, fn, context) => {
graphics1.on(event, fn, context);
};
container.once = (event, fn, context) => {
graphics1.once(event, fn, context);
};
container.removeListener = (event, fn, context, once) => {
graphics1.removeListener(event, fn, context, once);
};
container._events = graphics1._events;
container.range = graphics1;
container.addChild(sprite, graphics1);
container.Width = sprite.width;
container.Height = sprite.height;
container.resetTexture = function () {
sprite.texture = graphics1.textureUnClick;
graphics1._isClick = false;
}
return container;
}
/**
* @class BaseContainer
* @classdesc 组件基类.
* @param {object} res 资源对象.
* @param {boolean} isPolar 是否采用极坐标定位.
*
* @property {object} parentContainer 组件父容器
*/
class BaseContainer extends Container {
constructor(res, isPolar = false) {
super();
Observable(this);
zorderAbility(this);
$.extend(true, this, AniObj);
this.res = res;
Object.defineProperty(this, "parentContainer", {
get: () => {
return this["_parentContainer"];
},
set: (para) => {
this["_parentContainer"] = para;
/**
* Parent Change Event.
* @memberOf BaseContainer
* @event ParentChange
*/
this.fireEvent("ParentChange");
}
});
this.addEvent("parentChange", () => {
this.isAdd2Parent = false;
});
if (isPolar) {
bindPolarProperty(this, this);
}
this.addEvent("created", this.BindTool);
}
BindTool() {
if (this.ClickSprite) {
clickInterface.call(this);
}
if (this.TrackMode) {
this.addEventOnce("onShow", () => {
moveInterface(this);
});
}
}
setParent(parent) {
this.parentContainer = parent;
}
getSprite() {
return this;
}
getParentContainer() {
return this.parentContainer;
}
add2Parent(hasMask) {
if (this.isAdd2Parent) {
return;
}
this.isAdd2Parent = true;
if (hasMask) {
if (!this.mask) {
this.mask = new PIXI.Sprite(this.res['mask'].texture);
this.mask.interactive = true;
}
this.parentContainer && this.parentContainer.addChild(this.mask);
}
this.parentContainer && this.parentContainer.addChild(this.getSprite());
}
remove2Parent() {
if (!this.isAdd2Parent) {
return;
}
this.isAdd2Parent = false;
if (this.mask) {
this.parentContainer && this.parentContainer.removeChild(this.mask);
}
this.parentContainer && this.parentContainer.removeChild(this.getSprite());
}
/**
* show function.
* @function show
* @memberOf BaseContainer
* @param {boolean} Is the container displayed immediately
*/
show(isNow) {
if (this.isSlow && !isNow) {
/**
* beforeShow Event.
* @memberOf BaseContainer
* @event beforeShow
* @description Fired before the instance show
*/
this.fireEvent("beforeShow");
this.add2Parent();
this.alpha = 0;
this.showItem(this.getSprite(), () => {
/**
* onShow Event.
* @memberOf BaseContainer
* @event onShow
* @description Fired after the instance show
*/
this.fireEvent("onShow");
});
} else {
this.fireEvent("beforeShow");
this.add2Parent();
this.alpha = 1;
this.fireEvent("onShow");
}
this._isShow = true;
return this;
}
/**
* hide function.
* @function hide
* @memberOf BaseContainer
* @param {boolean} Is the container hided immediately
*/
hide(isNow) {
if (this.isSlow && !isNow) {
/**
* beforeHide Event.
* @memberOf BaseContainer
* @event beforeHide
* @description Fired before the instance hide
*/
this.fireEvent("beforeHide");
this.hideItem(this.getSprite(), () => {
this.remove2Parent();
/**
* onHide Event.
* @memberOf BaseContainer
* @event onHide
* @description Fired after the instance hide
*/
this.fireEvent("onHide");
});
} else {
this.fireEvent("beforeHide");
this.remove2Parent();
this.fireEvent("onHide");
}
this._isShow = false;
return this;
}
hideItem(item, cb) {
let TotalTime = this.AniTime || 800;
let fn = getAniFun("linear", item.alpha, 0, TotalTime);
let time = new Date().getTime();
if (item.Iteminterval) {
clearInterval(item.Iteminterval);
}
let interval = setInterval(() => {
let dt = new Date().getTime() - time;
item.alpha = fn(dt);
if (dt >= TotalTime) {
clearInterval(interval);
item.alpha = 0;
item.Iteminterval = null;
cb && cb();
}
});
item.Iteminterval = interval;
}
showItem(item, cb) {
let TotalTime = this.AniTime || 800;
let fn = getAniFun("linear", item.alpha, 1, TotalTime);
let time = new Date().getTime();
if (item.Iteminterval) {
clearInterval(item.Iteminterval);
}
let interval = setInterval(() => {
let dt = new Date().getTime() - time;
item.alpha = fn(dt);
if (dt >= TotalTime) {
item.alpha = 1;
clearInterval(interval);
item.Iteminterval = null;
cb && cb();
}
});
item.Iteminterval = interval;
}
/**
* @function reset
* @memberOf BaseContainer
* @description remove all event and redo init function
*/
reset() {
this.removeChildren();
this.removeAllListeners();
this.removeAllEvent();
this.init();
}
/**
* @function Destroy
* @memberOf BaseContainer
* @description Destroy the instance
*/
Destroy() {
this.parent && this.parent.removeChild(this);
this.destroy && this.destroy();
delete this._Easy.InstanceMap[this.id];
/**
* Destroyed Event.
* @memberOf BaseContainer
* @event Destroyed
* @description Fired when the instance destroyed
*/
this.fireEvent("Destroyed");
}
}
let oldSpine = PIXI.spine.Spine;
let stateUpdate = function (delta) {
delta *= this.timeScale;
var tracks = this.tracks;
for (var i = 0, n = tracks.length; i < n; i++) {
var current = tracks[i];
if (current == null)
continue;
current.animationLast = current.nextAnimationLast;
current.trackLast = current.nextTrackLast;
var currentDelta = delta * current.timeScale;
if (current.delay > 0) {
current.delay -= currentDelta;
if (current.delay > 0)
continue;
currentDelta = -current.delay;
current.delay = 0;
}
var next = current.next;
if (next != null) {
var nextTime = current.trackLast - next.delay;
if (nextTime >= 0) {
next.delay = 0;
next.trackTime = nextTime + delta * next.timeScale;
current.trackTime += currentDelta;
this.setCurrent(i, next, true);
while (next.mixingFrom != null) {
next.mixTime += currentDelta;
next = next.mixingFrom;
}
continue;
}
} else if (current.trackLast >= current.trackEnd && current.mixingFrom == null) {
tracks[i] = null;
this.queue.end(current);
this.disposeNext(current);
continue;
}
if (current.mixingFrom != null && this.updateMixingFrom(current, delta)) {
var from = current.mixingFrom;
current.mixingFrom = null;
while (from != null) {
this.queue.end(from);
from = from.mixingFrom;
}
}
if (this.isStop) {
if (this.stopTime !== undefined) {
current.trackTime = this.stopTime;
}
continue;
}
current.trackTime += currentDelta;
}
this.queue.drain();
};
let stateReverseUpdate = function (delta) {
if (this.isStop) {
return;
}
delta *= this.timeScale;
var tracks = this.tracks;
for (var i = 0, n = tracks.length; i < n; i++) {
var current = tracks[i];
if (current == null)
continue;
current.animationLast = current.nextAnimationLast;
current.trackLast = current.nextTrackLast;
var currentDelta = delta * current.timeScale;
if (current.delay > 0) {
current.delay -= currentDelta;
if (current.delay > 0)
continue;
currentDelta = -current.delay;
current.delay = 0;
}
var next = current.next;
if (next != null) {
var nextTime = current.trackLast - next.delay;
if (nextTime >= 0) {
next.delay = 0;
next.trackTime = nextTime + delta * next.timeScale;
current.trackTime += currentDelta;
this.setCurrent(i, next, true);
while (next.mixingFrom != null) {
next.mixTime += currentDelta;
next = next.mixingFrom;
}
continue;
}
} else if (current.trackLast >= current.trackEnd && current.mixingFrom == null) {
tracks[i] = null;
this.queue.end(current);
this.disposeNext(current);
continue;
}
if (current.mixingFrom != null && this.updateMixingFrom(current, delta)) {
var from = current.mixingFrom;
current.mixingFrom = null;
while (from != null) {
this.queue.end(from);
from = from.mixingFrom;
}
}
if (this.isStop) {
if (this.stopTime) {
current.trackTime = this.stopTime;
}
continue;
}
current.trackTime -= currentDelta;
if (current.trackTime <= 0) {
current.trackTime = 0;
}
}
this.queue.drain();
};
function animation(item, bool, x, y, B, s) {
this.state.setAnimation(0, item, bool);
this.x = x;
this.y = y;
this.interactive = B;
this.buttonMode = B;
this.state.timeScale = Math.random() * 0.3 + 1.0;
if (s) {
this.width = this.width / s;
this.height = this.height / s
}
return this
}
function addSpine(itemFS1, itemFS2, x, y, t, s, cb) {
this.state.setAnimation(0, itemFS1, false);
this.x = x;
this.y = y;
if (s) {
this.width = this.width / s;
this.height = this.height / s
}
setTimeout(() => {
if (this.state) {
this.state.setAnimation(0, itemFS2, true);
cb && cb();
}
}, this.skeleton.data.animations[t].duration * 1000);
return this
}
let spineFn = {
setAni: function (name) {
this.continueAni();
this.state.update = stateUpdate;
this.fireEvent("beforeAni");
let track = this.state.setAnimation(0, name, false);
let interval = setInterval(() => {
me.fireEvent("onAni", [track]);
});
let me = this;
let listeners = {
complete: function (track, event) {
clearInterval(interval);
me.state.removeListener(listeners);
setTimeout(()=>{
me.fireEvent("onAniEnd", [track]);
});
}
};
this.state.addListener(listeners);
return track;
},
setAniLoop: function (name) {
this.continueAni();
this.state.update = stateUpdate;
return this.state.setAnimation(0, name, true);
},
setAniReverse: function (name) {
this.continueAni();
this.state.update = stateReverseUpdate;
this.fireEvent("beforeAni");
let track = this.state.setAnimation(0, name, false);
let interval = setInterval(() => {
me.fireEvent("onAni");
});
let me = this;
let listeners = {
complete: function (track, event) {
clearInterval(interval);
me.state.removeListener(listeners);
me.fireEvent("onAniEnd", [track]);
}
};
this.state.addListener(listeners);
return track;
},
stopAt: function (time) {
this.state.isStop = true;
this.state.stopTime = time;
this.state.update = stateUpdate;
},
continueAni: function () {
this.state.isStop = false;
this.state.stopTime = 0;
}
};
PIXI.spine.Spine = function (SpineData) {
let obj = new oldSpine(SpineData);
Observable(obj);
// for(let i in spineFn){
// obj[i] = spineFn[i];
// }
obj.setAni = function (name) {
this.state.continueAni();
this.state.update = stateUpdate;
this.fireEvent("beforeAni");
let track = this.state.setAnimation(0, name, false);
track.trackTime = 0;
let duration = track.animation.duration;
let interval = setInterval(() => {
obj.fireEvent("onAni", [track]);
if (!track.animation) {
clearInterval(interval);
track.animation = { duration: 9999 };
obj.fireEvent("onAniEnd", [track]);
}
if (duration - track.trackTime <= 0.01 || !obj.parent) {
clearInterval(interval);
obj.fireEvent("onAniEnd", [track]);
}
});
return track;
};
obj.setAniLoop = (name) => {
obj.state.continueAni();
obj.state.update = stateUpdate;
return obj.state.setAnimation(0, name, true);
};
obj.setAniReverse = (name) => {
obj.state.continueAni();
obj.state.update = stateReverseUpdate;
let track = obj.state.setAnimation(0, name, false);
track.trackTime = track.animation.duration;
let interval = setInterval(() => {
obj.fireEvent("onAni", track);
if (track.trackTime === 0) {
clearInterval(interval);
obj.fireEvent("onAniEnd", track);
}
});
};
obj.state.stopAt = (time) => {
obj.state.isStop = true;
obj.state.stopTime = time;
obj.state.update = stateUpdate;
};
obj.state.continueAni = () => {
obj.state.isStop = false;
obj.state.stopTime = 0;
};
obj.animation = animation;
obj.addspine = addSpine;
$.extend(obj, spineFn);
return obj;
};
/**
* @class Base
* @classdesc Easy基础类.
* @property {object} Map 组件模板映射表
* @property {object} InstanceMap 实例映射表
* @property {object} randomId 随机ID记录器
*/
class Base {
constructor() {
this.Map = {};
this.InstanceMap = {};
this.randomId = 0;
}
/**
* @function define
* @memberOf Base
* @description Define a model
* @param {string} className model's name
* @param {object} prop model's prop
*/
define(className, prop = {}) {
if (this.Map[className]) {
throw new TypeError("This class has been defined");
}
this.Map[className] = prop;
}
/**
* @function create
* @memberOf Base
* @description Create a instance from model
* @param {string} className model's name
* @param {object} extraProp instance's prop
* @return {BaseContainer} Return a instance which designed by model
*/
create(className, extraProp = {}, isBase) {
let prop = $.extend(true, {}, this.Map[className], extraProp);
let instance;
if (prop.extend && (prop.extend !== className)) {
let extendClassName = prop.extend;
delete prop.extend;
instance = easy.create(extendClassName, prop,true);
delete instance.id;
} else {
instance = new BaseContainer(res, prop.isPolar);
}
$.extend(true, instance, prop, extraProp, { _className: className });
instance._ClassName = className;
this.Map[className].init&&this.Map[className].init.call(instance)
// prop.init && prop.init.call(instance);
if (!isBase) {
if (!instance.id) {
instance.id = className;
if (this.InstanceMap[instance.id]) {
instance.id = className + this.randomId;
this.randomId++;
}
} else if (this.InstanceMap[instance.id]) {
throw new Error(instance.id + " has already been declared");
}
this.InstanceMap[instance.id] = instance;
instance.fireEvent("created");
instance._Easy = this;
}
return instance;
}
/**
* @function getCmp
* @memberOf Base
* @description get a created instance
* @param {string} id className or ID
* @return {BaseContainer} A instance
*/
getCmp(id) {
return this.InstanceMap[id];
}
getClickSprite(name, x = 0, y = 0, isPlaySound = true) {
let container = new PIXI.Container();
let sprite = new PIXI.Sprite(this.res[name].texture);
let graphics1 = new PIXI.Graphics();
graphics1.Sprite = sprite;
graphics1.textureUnClick = this.res[name].texture;
graphics1.textureClick = this.res[name + 'click'] && this.res[name + 'click'].texture || graphics1.textureUnClick;
sprite.buttonMode = true;
sprite.interactive = true;
graphics1.on("pointerdown", function () {
this.Sprite.texture = this.textureClick;
this._isClick = true;
});
graphics1.on("pointerup", function () {
this.Sprite.texture = this.textureUnClick;
this._isClick = false;
});
graphics1.on("pointermove", function (e) {
if (this._isClick && !graphics1.containsPoint(e.data.global)) {
console.log("out");
this.Sprite.texture = this.textureUnClick;
this._isClick = false;
} else if (this._isClick) {
this.Sprite.texture = this.textureClick;
}
});
if (isPlaySound === true) {
graphics1.on("pointertap", () => {
this.playSound("click");
});
}
sprite.anchor.set(0, 1);
sprite.x = x;
sprite.y = y + sprite.height;
graphics1.beginFill(0x000000, 0);
graphics1.drawRect(sprite.x, sprite.y - sprite.height, sprite.width, sprite.height);
graphics1.alpha = 1;
graphics1.interactive = true;
graphics1.buttonMode = true;
container.on = (event, fn, context) => {
graphics1.on(event, fn, context);
};
container.once = (event, fn, context) => {
graphics1.once(event, fn, context);
};
container.removeListener = (event, fn, context, once) => {
graphics1.removeListener(event, fn, context, once);
};
container._events = graphics1._events;
container.range = graphics1;
container.addChild(sprite, graphics1);
container.Width = sprite.width;
container.Height = sprite.height;
return container;
}
/**
* @function removeAll
* @memberOf Base
* @description remove all instance except static instance
*/
removeAll() {
for (let i in this.InstanceMap) {
if (this.InstanceMap[i].isStatic) {
continue;
}
this.InstanceMap[i].Destroy();
delete this.InstanceMap[i];
}
}
/**
* @function removeAllAndStaitic
* @memberOf Base
* @description remove all instance
*/
removeAllAndStaitic() {
for (let i in this.InstanceMap) {
this.InstanceMap[i].Destroy();
delete this.InstanceMap[i];
}
}
/**
* @function destroy
* @memberOf Base
* @description remove instance which has been given
* @param {BaseContainer} instance the instance want to destroy;
*/
destroy(instance) {
this.InstanceMap[instance.id].Destroy();
delete this.InstanceMap[instance.id];
}
/**
* @function moveInterface
* @memberOf Base
* @description create a movable display object
* @param {PIXI.DisplayObject}
*/
moveInterface(obj) {
moveInterface(obj);
}
/**
* @function observable
* @memberOf Base
* @description create a observable object
* @param {object}
*/
observable(obj) {
Observable(obj);
}
/**
* @function shakeContainer
* @memberOf Base
* @description a shake container animate
* @param stage {object} 摇晃的容器
* @param Num {number} 摇晃次数默认3
* @param dist {number} 摇晃距离
* @param useTime {number} 单次摇晃时间
* @return {Promise}
*/
shakeContainer(stage, Num = 3, dist = 10, useTime = 100) {
return new Promise((resolve) => {
if (stage._shakeEvent) {
stage._shakeEvent.cancel();
}
stage._shakeEvent = {};
let fn = getAniFun("linear", 0, dist, useTime / 4);
let positive = true;
let isReverse = false;
let time = new Date().getTime();
let count = 0;
let base = stage.x;
stage._shakeEvent.cancel = function () {
clearInterval(this.twinkleInterval);
stage.x = base;
delete stage._shakeEvent;
};
stage._shakeEvent.twinkleInterval = setInterval(() => {
let dt = new Date().getTime() - time;
if (dt > useTime / 4) {
isReverse = !isReverse;
count++;
dt = dt % useTime / 4;
positive = parseInt(count % 4 / 2) === 0;
if (count > Num * 4 - 1) {
stage._shakeEvent.cancel();
resolve();
return;
}
time = new Date().getTime();
}
if (isReverse) {
dt = useTime / 4 - dt;
}
if (positive) {
stage.x = base + fn(dt);
} else {
stage.x = base - fn(dt);
}
});
});
};
}
let easy = new Base();
easy.define("normalBtn", {
});
easy.define("muteBtn", {
init() {
let btn = new PIXI.Sprite(this.res["pub_playsound"].texture);
btn.position.set(1920 - 40 - btn.width, 40);
btn.interactive = true;
btn.buttonMode = true;
this.isMute = false;
let allowMove = true;
btn.on("pointertap", () => {
allowMove = false;
if (this.isMute) {
btn.texture = this.res["pub_playsound"].texture;
PIXI.sound.unmuteAll();
} else {
btn.texture = this.res["pub_muteclick"].texture;
PIXI.sound.muteAll();
}
this.isMute = !this.isMute;
});
// btn.on("pointermove",(e)=>{
// if(btn.containsPoint(e.data.global)){
// if(!allowMove){
// return;
// }
// btn.texture = this.res["pub_muteover"].texture;
// }else{
// allowMove = true;
// if(this.isMute){
// btn.texture = this.res["pub_muteclick"].texture;
// }else{
// btn.texture = this.res["pub_playsound"].texture;
// }
// }
// });
// btn.on("pointerupoutside", ()=>{
// if(this.isMute){
// if(allowMove){
// btn.texture = this.res["pub_muteclick"].texture
// }else{
// btn.texture = this.res["pub_playsound"].texture
// }
// }else{
// btn.texture = this.res["pub_playsound"].texture
// }
// });
// btn.on("pointercancel",()=>{
// if(this.isMute){
// if(allowMove){
// btn.texture = this.res["pub_muteclick"].texture
// }else{
// btn.texture = this.res["pub_playsound"].texture
// }
// }else{
// btn.texture = this.res["pub_playsound"].texture
// }
// });
// btn.on("pointerup", ()=>{
// if(this.isMute){
// if(allowMove){
// btn.texture = this.res["pub_muteclick"].texture
// }else{
// btn.texture = this.res["pub_playsound"].texture
// }
// }else{
// btn.texture = this.res["pub_playsound"].texture
// }
// });
this.addChild(btn);
this.show();
}
});
easy.define("container", {});
function getEasy() {
let easy = new Base();
easy.define("normalBtn", {});
easy.define("muteBtn", {
init() {
let btn = new PIXI.Sprite(this.res["pub_playsound"].texture);
btn.position.set(1920 - 40 - btn.width, 40);
btn.interactive = true;
btn.buttonMode = true;
this.isMute = false;
let allowMove = true;
btn.on("pointertap", () => {
allowMove = false;
if (this.isMute) {
btn.texture = this.res["pub_playsound"].texture;
PIXI.sound.unmuteAll();
} else {
btn.texture = this.res["pub_muteclick"].texture;
PIXI.sound.muteAll();
}
this.isMute = !this.isMute;
});
btn.on("pointermove", (e) => {
if (btn.containsPoint(e.data.global)) {
if (!allowMove) {
return;
}
btn.texture = this.res["pub_muteover"].texture;
} else {
allowMove = true;
if (this.isMute) {
btn.texture = this.res["pub_muteclick"].texture;
} else {
btn.texture = this.res["pub_playsound"].texture;
}
}
});
btn.on("pointerupoutside", () => {
if (this.isMute) {
if (allowMove) {
btn.texture = this.res["pub_muteclick"].texture
} else {
btn.texture = this.res["pub_playsound"].texture
}
} else {
btn.texture = this.res["pub_playsound"].texture
}
});
btn.on("pointercancel", () => {
if (this.isMute) {
if (allowMove) {
btn.texture = this.res["pub_muteclick"].texture
} else {
btn.texture = this.res["pub_playsound"].texture
}
} else {
btn.texture = this.res["pub_playsound"].texture
}
});
btn.on("pointerup", () => {
if (this.isMute) {
if (allowMove) {
btn.texture = this.res["pub_muteclick"].texture
} else {
btn.texture = this.res["pub_playsound"].texture
}
} else {
btn.texture = this.res["pub_playsound"].texture
}
});
this.addChild(btn);
this.show();
}
});
easy.define("container", {});
return easy;
}
easy.getNewInstance = getEasy;
let Easy = easy;
/**
* @class BigMath_StarScoreBoard
* @extends BaseContainer
* @classdesc 大数学通用过关结算星星动效
* @property {Number} topicNumber - 游戏题目总数 - 默认值：3
* @property {Number} marginDistance - 星星间隔值 - 默认值：80
* @property {Object} starBgLocation - 背景位置 - 默认值：{x:34,y:36}
* @property {String} StarScoreBoard - 计分板 - 默认值："image_StarScoreBoard"
* @property {Object} starLocation - 第一颗星星位置 - 默认值：{x:63,y:55}
* @property {String} bgIcon - 默认状态的星星 - 默认值："image_starIdle"
* @property {String} loseIcon - 失败状态的星星 - 默认值："image_starLose"
* @property {String} lightSpineName - 成功状态的星星动效名称 - 默认值："animation_star"
* @property {String} lightAniName - 成功状态的星星播放的动画名称 - 默认值："star_in"
* @property {String} starPathSpineName - 星星飞的路径动效名称 - 默认值："animation_starflash"
* @property {String} starPathAniName - 星星飞的路径播放的动画名称 - 默认值："starflash_in"
* @property {String} starSound - 星星组件的音频配置 - 默认值:"audio_starSound"
*
* @example
* import {Easy} from "pubtool4pixi"
* Easy.create("BigMath_StarScoreBoard",{
* topicNumber : 3,
* marginDistance:80,
* starBgLocation:{
* x:34,y:36
* },
*}).show();
* */
Easy.define("BigMath_StarScoreBoard", {
topicNumber: 3,
marginDistance: 80,
starSound: "audio_starSound",
bgIcon: "image_starIdle",
lightSpineName: "animation_star",
starPathSpineName: "animation_starflash",
lightAniName: "star_in",
starPathAniName: "starflash_in",
loseIcon: "image_starLose",
StarScoreBoard: "image_StarScoreBoard",
starBgLocation: {
x: 34, y: 36
},
starLocation: {
x: 63, y: 55
},
init() {
let topicNumber = this.topicNumber;
this.starBg = new PIXI.Sprite(res[this.StarScoreBoard].texture);
this.starBg.position.set(this.starBgLocation.x, this.starBgLocation.y);
this.addChild(this.starBg);
this.aStar = [];
for (let i = 0; i < topicNumber; i++) {
let star = Easy.create("BigMath_Star", {
bgIcon: this.bgIcon,
lightSpineName: this.lightSpineName,
lightAniName: this.lightAniName,
loseIcon: this.loseIcon,
parentContainer: this,
x: this.starLocation.x + i * this.marginDistance, y: this.starLocation.y
});
star.show();
this.aStar.push(star);
}
},
/**
* @function addWinStar
* @memberOf BigMath_StarScoreBoard
* @param {Number} presentTopicNumber 当前关卡的下标
* @description 添加成功星星
* @return {Promise} 星星与路径动效播放完成
* */
addWinStar(presentTopicNumber) {
return new Promise((resolve) => {
let starPath = this.starPath();
let sound = this.playAudio();
let light = this.aStar[presentTopicNumber].light();
Promise.all([sound, light, starPath]).then(() => {
resolve();
});
});
},
/**
* @function addLoseStar
* @memberOf BigMath_StarScoreBoard
* @param {Number} presentTopicNumber 当前关卡的下标
* @description 添加失败星星
* @return {Promise} 添加完成后
* */
addLoseStar(presentTopicNumber) {
return new Promise((resolve) => {
this.aStar[presentTopicNumber].dark().then(() => {
resolve();
});
});
},
/**
* @function reset
* @memberOf BigMath_StarScoreBoard
* @description 重置星星动效
* */
reset() {
this.aStar.forEach(item => {
item.reset();
});
},
/**
* @function starPath
* @memberOf BigMath_StarScoreBoard
* @description 播放星星路径动效
* @return {Promise} 路径动效播放完成
* */
starPath() {
return new Promise((resolve) => {
let starPath = new PIXI.spine.Spine(this.res[this.starPathSpineName].spineData);
starPath.setAni(this.starPathAniName);
starPath.addEventOnce("onAniEnd", () => {
resolve();
});
this.addChild(starPath);
});
},
/**
* @function playAudio
* @memberOf BigMath_StarScoreBoard
* @description 播放星星音频
* @return {Promise} 音频播放完成
* */
playAudio() {
return new Promise((resolve) => {
try {
PIXI.sound.play(this.starSound, {
complete: () => {
resolve();
}
});
} catch (e) {
resolve();
}
});
}
});
Easy.define("BigMath_Star", {
bgIcon: "image_starIdle",
lightSpineName: "animation_star",
lightAniName: "star_in",
loseIcon: "image_starLose",
init() {
this.bg = new PIXI.Sprite(this.res[this.bgIcon].texture);
this.addChild(this.bg);
if (this.res[this.loseIcon]) {
this.loseBg = new PIXI.Sprite(this.res[this.loseIcon].texture);
} else {
this.loseBg = new PIXI.Sprite(this.res[this.bgIcon].texture);
}
this.loseBg.position.set(-2.0801850104436426, -0.2934630807666849);
this.addEventOnce("Destroyed", () => {
this.bg = null;
this.loseBg = null;
this.lightStar = null;
});
},
/**
* @function light
* @memberOf BigMath_Star
* @description 关卡成功播放收集星星
* @return {Promise} 收集星星动效播放完
* */
light() {
return new Promise((resolve) => {
this.removeChildren();
this.getNewAni();
this.addChild(this.bg, this.lightStar);
this.lightStar.setAni(this.lightAniName);
this.lightStar.addEventOnce("onAniEnd", () => {
resolve();
});
});
},
/**
* @function dark
* @memberOf BigMath_Star
* @description 关卡失败添加失败星星切图
* @return {Promise} 添加完成
* */
dark() {
return new Promise((resolve) => {
this.addChild(this.loseBg);
resolve();
});
},
/**
* @function reset
* @memberOf BigMath_Star
* @description 关卡星星重置
* */
reset() {
this.removeChildren();
this.addChild(this.bg);
},
getNewAni() {
this.lightStar && this.lightStar.destroy();
this.lightStar = new PIXI.spine.Spine(this.res[this.lightSpineName].spineData);
this.lightStar.position.set(37.80634360986528, 37.550228996097076);
}
});
/**
* @class BigMath_GuideHand
* @extends BaseContainer
* @classdesc 大数学通用引导手势
* @property {Object} origin - 拖拽引导手势起点 - 默认值：{x:500,y:960}
* @property {Object} destination - 拖拽引导手势终点 - 默认值：{x:1400,y:500}
* @property {Boolean} isDrag - 是否是拖拽手势 - 默认值：true 【不可更改】
* @property {String} spineName - 手势动效名称 - 默认值："animation_hand_guide"
* @property {String} clickAniName - 点击手势动画名称 - 默认值："zhiyin"
* @property {St