pubtool4pixi
Version:
Usefultool for PIXI xes project
1,528 lines (1,488 loc) • 105 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Source: easy.js</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Source: easy.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>'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"
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;
}
/**
* 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;
}
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");
});
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;
},
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;
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 = {}){
let prop = this.Map[className];
let instance;
let Originalinit = null;
if(prop.extend){
instance = easy.create(prop.extend);
delete instance.id;
Originalinit = instance.init;
}else{
instance = new BaseContainer(res,prop.isPolar);
}
$.extend(true,instance,prop,extraProp,{_className:className});
instance._ClassName = className;
instance.init&&instance.init(Originalinit);
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,