Skip to content

Z
zeroing-engine
Commit 9079fb65 authored by rockyl's avatar rockyl
Browse files
Options

完成栈式视图动效功能

parent 9c1b9a40
Show whitespace changes
Inline Side-by-side
Showing with 1001 additions and 162 deletions
debug/engine.js
View file @ 9079fb65
......@@ -14845,7 +14845,7 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
var globalLoader = new Loader();
//# sourceMappingURL=Loader.js.map
var padding$1 = 10;
var padding$1 = 50;
var styleFields = {
color: 'fillStyle',
stroke: 'lineWidth',
......@@ -14872,6 +14872,9 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
_this._italic = false;
_this._bold = false;
_this._border = false;
_this._shadowColor = '#000';
_this._shadowBlur = 0;
_this._shadowOffset = new ObservablePoint(_this.onShadowOffsetChange, _this);
_this.realLines = [];
_this._instanceType = "TextFieldNode";
var canvas = document.createElement('canvas');
......@@ -15160,6 +15163,68 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
enumerable: true,
configurable: true
});
Object.defineProperty(TextField.prototype, "shadowColor", {
get: function () {
return this._shadowColor;
},
set: function (value) {
if (this._shadowColor != value) {
this._shadowColor = value;
this.dirty = true;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(TextField.prototype, "shadowBlur", {
get: function () {
return this._shadowColor;
},
set: function (value) {
if (this._shadowBlur != value) {
this._shadowBlur = value;
this.dirty = true;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(TextField.prototype, "shadowOffset", {
get: function () {
return this._shadowOffset;
},
set: function (value) {
if (this._shadowOffset != value) {
this._shadowOffset = value;
this.dirty = true;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(TextField.prototype, "shadowOffsetX", {
get: function () {
return this.position.x;
},
set: function (value) {
this._shadowOffset.x = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TextField.prototype, "shadowOffsetY", {
get: function () {
return this.position.y;
},
set: function (value) {
this._shadowOffset.y = value;
},
enumerable: true,
configurable: true
});
TextField.prototype.onShadowOffsetChange = function () {
this.dirty = true;
};
TextField.prototype._setupFont = function (font, size, bold, italic) {
var fontStyle = size;
fontStyle += "px ";
......@@ -15354,6 +15419,12 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
}
}
ctx.setTransform(1, 0, 0, 1, tx + padding$1, padding$1);
if (this._shadowBlur > 0) {
ctx.shadowBlur = this._shadowBlur;
ctx.shadowColor = this._shadowColor;
ctx.shadowOffsetX = this._shadowOffset.x;
ctx.shadowOffsetY = this._shadowOffset.y;
}
s._prepContext(ctx);
var lineH = s._lineSpacing + s.size;
var upY = 0;
......@@ -16828,58 +16899,353 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
}(Container));
//# sourceMappingURL=Node.js.map
function playViewEffect(name, params, mutex, lastView, view, container, callback) {
var effect = name ? effects[name] : effects.simple;
effect = effect || effects.simple;
effect(params || {}, mutex, lastView, view, container, callback);
}
var effects = {
simple: function (params, mutex, lastView, view, container, callback) {
if (mutex) {
container.removeChild(lastView);
}
else {
if (lastView && !view) {
container.removeChild(lastView);
}
}
if (view) {
view.visible = true;
}
callback();
},
fade: function (params, mutex, lastView, view, container, callback) {
var _a = params.duration, duration = _a === void 0 ? 300 : _a;
if (mutex) {
fadeOut(function () {
fadeIn(callback);
});
}
else {
fadeIn(callback);
}
function fadeOut(callback) {
if (lastView) {
Tween.get(lastView, null, null, true)
.to({ alpha: 0 }, duration)
.call(function () {
container.removeChild(lastView);
lastView.alpha = 1;
callback();
});
}
else {
callback();
}
}
function fadeIn(callback) {
if (view) {
view.visible = true;
view.alpha = 0;
Tween.get(view, null, null, true)
.to({ alpha: 1 }, params.duration || 300)
.call(function () {
callback();
});
}
else {
callback();
}
}
},
flew: function (params, mutex, lastView, view, container, callback) {
var _a = params.duration, duration = _a === void 0 ? 300 : _a, _b = params.direction, direction = _b === void 0 ? 'top' : _b, _c = params.ease, ease = _c === void 0 ? 'backOut' : _c;
var _d = exports.gameStage.stage, width = _d.width, height = _d.height;
var outPos = {};
switch (direction) {
case 'left':
outPos.x = -width;
break;
case 'right':
outPos.x = width;
break;
case 'top':
outPos.y = -height;
break;
case 'bottom':
outPos.y = height;
break;
}
var inEase = ease;
var outEase = ease.indexOf('Out') ? ease.replace('Out', 'In') : ease.replace('In', 'Out');
if (mutex) {
flewOut(function () {
flewIn(callback);
});
}
else {
if (lastView && !view) {
flewOut(callback);
}
else {
flewIn(callback);
}
}
function flewOut(callback) {
if (lastView) {
Tween.get(lastView, null, null, true)
.to(outPos, duration, Ease[outEase])
.call(function () {
container.removeChild(lastView);
injectProp(lastView, outPos);
callback();
});
}
else {
callback();
}
}
function flewIn(callback) {
if (view) {
var inPos = {
x: view.x,
y: view.y,
};
view.visible = true;
injectProp(view, outPos);
Tween.get(view, null, null, true)
.to(inPos, duration, Ease[inEase])
.call(function () {
callback();
});
}
else {
callback();
}
}
},
hulu: function (params, mutex, lastView, view, container, callback) {
var _a = params.duration, duration = _a === void 0 ? 300 : _a, _b = params.ease, ease = _b === void 0 ? 'backOut' : _b, _c = params.x, x = _c === void 0 ? 0 : _c, _d = params.y, y = _d === void 0 ? 0 : _d;
var inEase = ease;
var outEase = ease.indexOf('Out') ? ease.replace('Out', 'In') : ease.replace('In', 'Out');
var outPos = {
x: parseInt(x),
y: parseInt(y),
scaleX: 0, scaleY: 0,
};
if (mutex) {
huluOut(function () {
huluIn(callback);
});
}
else {
if (lastView && !view) {
huluOut(callback);
}
else {
huluIn(callback);
}
}
function huluOut(callback) {
if (lastView) {
outPos.x -= lastView.width / 2;
outPos.y -= lastView.height / 2;
Tween.get(lastView, null, null, true)
.to(outPos, duration, Ease[outEase])
.call(function () {
container.removeChild(lastView);
injectProp(lastView, outPos);
callback();
});
}
else {
callback();
}
}
function huluIn(callback) {
if (view) {
var inPos = {
x: view.x,
y: view.y,
scaleX: 1, scaleY: 1
};
view.anchorX = view.width / 2;
view.anchorY = view.height / 2;
outPos.x -= view.width / 2;
outPos.y -= view.height / 2;
view.visible = true;
injectProp(view, outPos);
Tween.get(view, null, null, true)
.to(inPos, duration, Ease[inEase])
.call(function () {
callback();
});
}
else {
callback();
}
}
},
zoom: function (params, mutex, lastView, view, container, callback) {
var _a = params.duration, duration = _a === void 0 ? 300 : _a, _b = params.ease, ease = _b === void 0 ? 'backOut' : _b;
var inEase = ease;
var outEase = ease.indexOf('Out') ? ease.replace('Out', 'In') : ease.replace('In', 'Out');
if (mutex) {
zoomOut(function () {
zoomIn(callback);
});
}
else {
if (lastView && !view) {
zoomOut(callback);
}
else {
zoomIn(callback);
}
}
function zoomOut(callback) {
if (lastView) {
Tween.get(lastView, null, null, true)
.to({ scaleX: 0, scaleY: 0 }, duration, Ease[outEase])
.call(function () {
container.removeChild(lastView);
injectProp(view, { scaleX: 0, scaleY: 0 });
callback();
});
}
else {
callback();
}
}
function zoomIn(callback) {
if (view) {
view.anchorX = view.width / 2;
view.anchorY = view.height / 2;
view.visible = true;
injectProp(view, { scaleX: 0, scaleY: 0 });
Tween.get(view, null, null, true)
.to({ scaleX: 1, scaleY: 1 }, duration, Ease[inEase])
.call(function () {
callback();
});
}
else {
callback();
}
}
},
};
var StackContainer = (function (_super) {
tslib_1.__extends(StackContainer, _super);
function StackContainer(mutex) {
function StackContainer(mutex, inserted) {
if (mutex === void 0) { mutex = true; }
if (inserted === void 0) { inserted = 0; }
var _this = _super.call(this) || this;
_this._stack = [];
_this._inserted = 0;
_this._mutex = mutex;
_this._inserted = inserted;
_this.percentWidth = 100;
_this.percentHeight = 100;
_this.mouseEnabled = false;
_this.addEventListener(Event.START, function () {
_this.mouseChildren = false;
});
_this.addEventListener(Event.COMPLETE, function () {
_this.mouseChildren = true;
});
return _this;
}
StackContainer.prototype.push = function (view, options, dispatch) {
if (dispatch === void 0) { dispatch = true; }
if (this._mutex && this.children.length > 0) {
this._stack.push(this.removeChildAt(0));
}
Object.defineProperty(StackContainer.prototype, "childNum", {
get: function () {
var len = this.children.length;
return len > 0 ? len - this._inserted : 0;
},
enumerable: true,
configurable: true
});
StackContainer.prototype.push = function (view, options, playEffect, callback) {
var _this = this;
if (playEffect === void 0) { playEffect = true; }
var action = 'push';
var lastView;
if (this._mutex && this.childNum > 0) {
lastView = this.getChildAt(0);
this._stack.push(lastView);
}
view.visible = false;
this.addChild(view);
if (dispatch) {
this.dispatchEvent('change', { action: 'push', view: view, options: options });
}
};
StackContainer.prototype.replace = function (view, options) {
if (this.pop(false)) {
this.push(view, options, false);
this.dispatchEvent('change', { action: 'replace', view: view, options: options });
}
var data = { action: action, view: view, lastView: lastView, options: options, hasView: true };
this.dispatchEvent(Event.START, data);
playViewEffect(playEffect ? options ? options.effect : null : null, options ? options.effectParams : {}, this._mutex, lastView, view, this, function () {
_this.dispatchEvent(Event.COMPLETE, data);
callback && callback();
});
};
StackContainer.prototype.pop = function (dispatch) {
if (dispatch === void 0) { dispatch = true; }
var len = this.children.length;
StackContainer.prototype.pop = function (options, playEffect, callback) {
var _this = this;
if (playEffect === void 0) { playEffect = true; }
var action = 'pop';
var len = this.childNum;
if (len <= 0) {
return false;
}
this.removeChildAt(len - 1);
var lastView = this.getChildAt(this.children.length - 1);
var view;
if (this._mutex) {
this.addChild(this._stack.pop());
}
if (dispatch) {
this.dispatchEvent('change', { action: 'pop' });
view = this._stack.pop();
view.visible = false;
this.addChild(view);
}
var data = { action: action, view: view, lastView: lastView, options: options, hasView: len > 1 };
this.dispatchEvent(Event.START, data);
playViewEffect(playEffect ? options ? options.effect : null : null, options ? options.effectParams : {}, this._mutex, lastView, view, this, function () {
_this.dispatchEvent(Event.COMPLETE, data);
callback && callback();
});
return true;
};
StackContainer.prototype.popAll = function (view, options) {
this.removeChildren();
StackContainer.prototype.replace = function (view, options, playEffect, callback) {
var _this = this;
if (playEffect === void 0) { playEffect = true; }
var action = 'replace';
var len = this.childNum;
if (len <= 0) {
return false;
}
var lastView = this.getChildAt(len - 1);
view.visible = false;
this.addChild(view);
var data = { action: action, view: view, lastView: lastView, options: options, hasView: len > 1 };
this.dispatchEvent(Event.START, data);
playViewEffect(playEffect ? options ? options.effect : null : null, options ? options.effectParams : {}, this._mutex, lastView, view, this, function () {
_this.dispatchEvent(Event.COMPLETE, data);
callback && callback();
});
};
StackContainer.prototype.popAll = function (view, options, playEffect, callback) {
var _this = this;
if (playEffect === void 0) { playEffect = true; }
var action = 'popAll';
var lastView = this.getChildAt(0);
var len = this.childNum;
while (this.children.length > 1) {
this.removeChildAt(1);
}
if (this._mutex) {
this._stack.splice(0);
}
if (view) {
this.push(view, options, false);
view.visible = false;
this.addChild(view);
}
this.dispatchEvent('change', { action: 'popAll', view: view, options: options });
var data = { action: action, view: view, lastView: lastView, options: options, hasView: len > 1 };
this.dispatchEvent(Event.START, data);
playViewEffect(playEffect ? options ? options.effect : null : null, options ? options.effectParams : {}, this._mutex, lastView, view, this, function () {
_this.dispatchEvent(Event.COMPLETE, data);
callback && callback();
});
};
return StackContainer;
}(Node$1));
......@@ -19770,16 +20136,23 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
}
Toast.prototype.show = function (props) {
if (props === void 0) { props = {}; }
return tslib_1.__awaiter(this, void 0, void 0, function () {
var contentView, lab, text, _a, padding, _b, duration, _c, showDuration, _d, hideDuration;
return tslib_1.__generator(this, function (_e) {
switch (_e.label) {
case 0:
if (!props.text) {
return;
return [2];
}
var contentView = this.getContent(props.viewName);
var lab = contentView.getChildByName('lab');
return [4, this.getContent(props.viewName)];
case 1:
contentView = _e.sent();
lab = contentView.getChildByName('lab');
if (!lab) {
console.warn('[lab] child no exists on toast view');
return;
return [2];
}
var text = props.text, _a = props.padding, padding = _a === void 0 ? 10 : _a, _b = props.duration, duration = _b === void 0 ? 1000 : _b, _c = props.showDuration, showDuration = _c === void 0 ? 300 : _c, _d = props.hideDuration, hideDuration = _d === void 0 ? 200 : _d;
text = props.text, _a = props.padding, padding = _a === void 0 ? 10 : _a, _b = props.duration, duration = _b === void 0 ? 1000 : _b, _c = props.showDuration, showDuration = _c === void 0 ? 300 : _c, _d = props.hideDuration, hideDuration = _d === void 0 ? 200 : _d;
lab.text = text;
lab.x = lab.y = padding;
this.width = contentView.width = lab.width + padding * 2;
......@@ -19793,6 +20166,10 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
.wait(duration)
.to({ alpha: 0 }, hideDuration)
.call(this.removeContentView, this);
return [2];
}
});
});
};
Toast.prototype.hide = function (animation, hideDuration) {
if (animation === void 0) { animation = true; }
......@@ -19816,22 +20193,29 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
this._content = null;
};
Toast.prototype.getContent = function (viewName) {
var view;
if (this.children.length == 0) {
if (viewName) {
view = this._gameStage.instantiateView(viewName);
}
return tslib_1.__awaiter(this, void 0, void 0, function () {
var view, bg, lab;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(this.children.length == 0)) return [3, 3];
if (!viewName) return [3, 2];
return [4, this._gameStage.instantiateView(viewName)];
case 1:
view = _a.sent();
_a.label = 2;
case 2:
if (!view) {
if (!this._contentSample) {
this._contentSample = new Node$1();
var bg = new Rect();
bg = new Rect();
bg.borderRadius = 10;
bg.percentWidth = 100;
bg.percentHeight = 100;
bg.fillColor = 'black';
bg.alpha = 0.7;
this._contentSample.addChild(bg);
var lab = new Label();
lab = new Label();
lab.name = 'lab';
lab.fillColor = 'white';
lab.size = 30;
......@@ -19841,11 +20225,14 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
}
this._content = view;
this.addChild(view);
}
else {
return [3, 4];
case 3:
view = this.getChildAt(0);
_a.label = 4;
case 4: return [2, view];
}
return view;
});
});
};
return Toast;
}(Node$1));
......@@ -20662,17 +21049,15 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
_this.percentWidth = 100;
_this.percentHeight = 100;
_this.mouseEnabled = false;
var blackLayer = _this._blackLayer = new Rect();
var loadingView = _this._loadingView = new Container();
_this.addChild(_this._sceneContainer = new StackContainer());
_this.addChild(blackLayer);
_this.addChild(_this._popupContainer = new StackContainer());
_this.addChild(_this._popupContainer = new StackContainer(false, 1));
_this.addChild(_this._toast = new Toast(_this));
_this.addChild(loadingView);
var blackLayer = _this._blackLayer = new Rect();
blackLayer.name = 'blackLayer';
blackLayer.percentWidth = 100;
blackLayer.percentHeight = 100;
blackLayer.visible = false;
blackLayer.width = stage.width;
blackLayer.height = stage.height;
blackLayer.fillColor = 0;
blackLayer.alpha = 0.7;
loadingView.percentWidth = 100;
......@@ -20680,7 +21065,8 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
loadingView.visible = false;
_this._sceneContainer.name = 'scene-container';
_this._popupContainer.name = 'popup-container';
_this._popupContainer.addEventListener('change', _this.onPopupContainerChange, _this);
_this._popupContainer.addEventListener(Event.START, _this.onPopupContainerStart, _this);
_this._popupContainer.addEventListener(Event.COMPLETE, _this.onPopupContainerComplete, _this);
return _this;
}
Object.defineProperty(GameStage.prototype, "sceneContainer", {
......@@ -20883,25 +21269,42 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
GameStage.prototype.getViewConfigByName = function (name) {
return arrayFind(this._config.views, function (view) { return view.name === name; });
};
GameStage.prototype.setBlackLayerVisible = function (visible) {
this._blackLayer.visible = visible;
};
GameStage.prototype.onPopupContainerChange = function (e) {
var _a = e.data, action = _a.action, view = _a.view, options = _a.options;
GameStage.prototype.onPopupContainerStart = function (e) {
var _a = e.data, action = _a.action, view = _a.view, lastView = _a.lastView, options = _a.options, hasView = _a.hasView;
var target = e.target;
switch (action) {
case 'push':
case 'replace':
case 'popAll':
if (options && options.center) {
view.horizonCenter = 0;
view.verticalCenter = 0;
view.x = (target.width - view.width) / 2;
view.y = (target.height - view.height) / 2;
}
break;
}
this.setBlackLayerVisible(this._popupContainer.children.length > 0);
var blackLayer = this._blackLayer;
var pParent = blackLayer.parent;
if (hasView) {
target.addChildAt(blackLayer, target.childNum - 1 - (view ? 0 : 1));
if (!pParent) {
blackLayer.alpha = 0;
Tween.get(blackLayer, null, null, true)
.to({ alpha: 0.7 }, 300);
}
}
else if (pParent) {
Tween.get(blackLayer, null, null, true)
.to({ alpha: 0 }, 300)
.call(function () {
pParent.removeChild(blackLayer);
});
}
};
GameStage.prototype.onPopupContainerComplete = function (e) {
};
return GameStage;
}(Node$1));
//# sourceMappingURL=GameStage.js.map
var template = "\n<div class=\"zeroing-loading-wrapper\">\n\t<div class=\"zeroing-loading-content\">\n\t</div>\n</div>\n";
var style = "\n.zeroing-loading-wrapper{\n\tposition: absolute;\n\ttop:0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tdisplay: flex;\n\tdisplay: -webkit-flex;\n\tjustify-content: center;\n\t-webkit-justify-content: center;\n\talign-items: center;\n\t-webkit-align-items: center;\n}\n@keyframes part-body\n{\n\t0%,40% {transform: scale(1);}\n\t20% {transform: scale(1.5);}\n}\n.zeroing-loading-part {\n\ttransform-origin: 2px 12px;\n\tposition: absolute;\n}\n.zeroing-loading-part-body{\n\tbackground-color: dimgray;\n\twidth: 4px;\n\theight: 6px;\n\tborder-radius: 2px;\n\ttransform-origin: 2px 6px;\n\tanimation: part-body 1500ms linear infinite;\n}\n";
......
debug/engine.js.map
View file @ 9079fb65
This source diff could not be displayed because it is too large. You can view the blob instead.
manifest.json
View file @ 9079fb65
{"id":"engine","url":"engine.e5b21b3c107402bf145ed205181b96d7c501b51f.js"}
\ No newline at end of file
{"id":"engine","url":"engine.741a07d921ba996527afc8c11ef426f24ada0932.js"}
\ No newline at end of file
rollup.config.js
View file @ 9079fb65
......@@ -12,7 +12,7 @@ const fs = require('fs');
const tslibWrapper = 'var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate: __decorate,__param: __param,__metadata: __metadata,__awaiter: __awaiter,__generator: __generator,__exportStar: __exportStar,__values: __values,__read: __read,__spread: __spread,__spreadArrays: __spreadArrays,__await: __await,__asyncGenerator: __asyncGenerator,__asyncDelegator: __asyncDelegator,__asyncValues: __asyncValues,__makeTemplateObject: __makeTemplateObject,__importStar: __importStar,__importDefault: __importDefault};'
const tslibCode = fs.readFileSync(__dirname + '/scripts/tslib.min.js');
const options = {
export default {
input: 'src/index.ts',
output: [
{
......@@ -23,7 +23,7 @@ const options = {
tslib: 'tslib'
},
banner: tslibCode + '\n' + tslibWrapper,
}
},
],
plugins: [
progress(),
......@@ -32,12 +32,7 @@ const options = {
//useTsconfigDeclarationDir: true,
}),
commonjs(),
process.env.BUILD === 'production' && uglify({})
],
external: ['tslib'],
};
if(process.env.BUILD === 'production'){
options.plugins.push(uglify({}));
}
export default options;
src/2d/text/TextField.ts
View file @ 9079fb65
import {SCALE_MODES, TEXT_ALIGN, TEXT_lINETYPE, VERTICAL_ALIGN} from "../const";
import Texture from "../texture/Texture";
import {getRGBA, hex2string} from "../utils/index";
import {Rectangle} from "../math/index";
import {ObservablePoint, Rectangle} from "../math/index";
import Sprite from "../display/Sprite";
import {Event} from "../events/index";
//文本canvas上xy的偏移量
const padding = 10;
const padding = 50;
const styleFields = {
color: 'fillStyle',
......@@ -486,6 +486,86 @@ export class TextField extends Sprite {
private _border: boolean = false;
/**
* 设置或获取阴影颜色
* @property property
* @public
* @since 1.0.6
* @param value
*/
public set shadowColor(value: string) {
if (this._shadowColor != value) {
this._shadowColor = value;
this.dirty = true;
}
}
public get shadowColor(): string {
return this._shadowColor;
}
private _shadowColor: string = '#000';
/**
* 设置或获取阴影模糊度
* @property property
* @public
* @since 1.0.6
* @param value
*/
public set shadowBlur(value: number) {
if (this._shadowBlur != value) {
this._shadowBlur = value;
this.dirty = true;
}
}
public get shadowBlur(): number {
return this._shadowColor;
}
private _shadowBlur: number = 0;
/**
* 设置或获取阴影偏移
* @property property
* @public
* @since 1.0.6
* @param value
*/
public set shadowOffset(value: ObservablePoint) {
if (this._shadowOffset != value) {
this._shadowOffset = value;
this.dirty = true;
}
}
public get shadowOffset(): ObservablePoint {
return this._shadowOffset;
}
get shadowOffsetX(): number {
return this.position.x;
}
set shadowOffsetX(value: number) {
this._shadowOffset.x = value;
}
get shadowOffsetY(): number {
return this.position.y;
}
set shadowOffsetY(value: number) {
this._shadowOffset.y = value;
}
private _shadowOffset: ObservablePoint = new ObservablePoint(this.onShadowOffsetChange, this);
private onShadowOffsetChange() {
this.dirty = true;
}
private _setupFont(font, size, bold, italic) {
let fontStyle: any = size;
fontStyle += "px ";
......@@ -588,7 +668,7 @@ export class TextField extends Sprite {
if (!text) {
s.canvas.width = 0;
s.canvas.height = 0;
if(!this._width && !this._height){
if (!this._width && !this._height) {
s._localBoundsSelf.clear();
}
this.anchorTexture = {x: 0, y: 0};
......@@ -728,6 +808,12 @@ export class TextField extends Sprite {
}
}
ctx.setTransform(1, 0, 0, 1, tx + padding, padding);
if (this._shadowBlur > 0) {
ctx.shadowBlur = this._shadowBlur;
ctx.shadowColor = this._shadowColor;
ctx.shadowOffsetX = this._shadowOffset.x;
ctx.shadowOffsetY = this._shadowOffset.y;
}
s._prepContext(ctx);
let lineH = s._lineSpacing + s.size;
//如果有_textHeight,就需要应用竖直对齐
......
src/zeroing/game-warpper/GameStage.ts
View file @ 9079fb65
......@@ -18,6 +18,7 @@ import {bind, createStore} from "./mvvm/index";
import {registerCustomModules} from "./custom-module";
import {dealPageRemainTime, dealPxEnv} from "../px-logics";
import Container from "../../2d/display/Container";
import {Event} from "../../2d/events/Event";
/**
* 游戏舞台
......@@ -48,19 +49,17 @@ export class GameStage extends Node {
this.percentHeight = 100;
this.mouseEnabled = false;
let blackLayer = this._blackLayer = new Rect();
let loadingView = this._loadingView = new Container();
this.addChild(this._sceneContainer = new StackContainer());
this.addChild(blackLayer);
this.addChild(this._popupContainer = new StackContainer());
this.addChild(this._popupContainer = new StackContainer(false, 1));
this.addChild(this._toast = new Toast(this));
this.addChild(loadingView);
let blackLayer = this._blackLayer = new Rect();
blackLayer.name = 'blackLayer';
blackLayer.percentWidth = 100;
blackLayer.percentHeight = 100;
blackLayer.visible = false;
blackLayer.width = stage.width;
blackLayer.height = stage.height;
blackLayer.fillColor = 0;
blackLayer.alpha = 0.7;
......@@ -71,7 +70,8 @@ export class GameStage extends Node {
this._sceneContainer.name = 'scene-container';
this._popupContainer.name = 'popup-container';
this._popupContainer.addEventListener('change', this.onPopupContainerChange, this);
this._popupContainer.addEventListener(Event.START, this.onPopupContainerStart, this);
this._popupContainer.addEventListener(Event.COMPLETE, this.onPopupContainerComplete, this);
}
/**
......@@ -272,29 +272,41 @@ export class GameStage extends Node {
return arrayFind(this._config.views, view => view.name === name);
}
/**
* 设置半透明层是否可见
* @param visible
*/
setBlackLayerVisible(visible) {
this._blackLayer.visible = visible;
}
onPopupContainerChange(e) {
const {action, view, options} = e.data;
onPopupContainerStart(e) {
const {action, view, lastView, options, hasView} = e.data;
const target = <StackContainer>e.target;
switch (action) {
case 'push':
case 'replace':
case 'popAll':
if (options && options.center) {
view.horizonCenter = 0;
view.verticalCenter = 0;
view.x = (target.width - view.width) / 2;
view.y = (target.height - view.height) / 2;
}
break;
}
this.setBlackLayerVisible(this._popupContainer.children.length > 0);
let blackLayer = this._blackLayer;
let pParent = blackLayer.parent;
if (hasView) {
target.addChildAt(blackLayer, target.childNum - 1 - (view ? 0 : 1));
if (!pParent) {
blackLayer.alpha = 0;
Tween.get(blackLayer, null, null, true)
.to({alpha: 0.7}, 300);
}
} else if (pParent) {
Tween.get(blackLayer, null, null, true)
.to({alpha: 0}, 300)
.call(() => {
pParent.removeChild(blackLayer);
});
}
}
onPopupContainerComplete(e){
}
lazyLoadAllAssets = async () => {
......
src/zeroing/game-warpper/StackContainer.ts
View file @ 9079fb65
......@@ -4,6 +4,8 @@
import {DisplayObject} from "../../2d/display/index";
import {Node} from "./nodes/Node";
import {Event} from "../../2d/events/Event";
import {playViewEffect} from "./view-effects";
/**
* 栈式视图容器
......@@ -11,77 +13,164 @@ import {Node} from "./nodes/Node";
export class StackContainer extends Node {
private _mutex: boolean;
private _stack = [];
private _inserted = 0;
constructor(mutex = true) {
constructor(mutex = true, inserted = 0) {
super();
this._mutex = mutex;
this._inserted = inserted;
this.percentWidth = 100;
this.percentHeight = 100;
this.mouseEnabled = false;
this.addEventListener(Event.START, () => {
this.mouseChildren = false;
});
this.addEventListener(Event.COMPLETE, () => {
this.mouseChildren = true;
});
}
get childNum() {
let len = this.children.length;
return len > 0 ? len - this._inserted : 0;
}
/**
* 推入视图
* @param view
* @param options
* @param dispatch
* @param playEffect
* @param callback
*/
push(view: DisplayObject, options?, dispatch = true) {
if (this._mutex && this.children.length > 0) {
this._stack.push(this.removeChildAt(0));
push(view: DisplayObject, options?, playEffect = true, callback?) {
const action = 'push';
let lastView;
if (this._mutex && this.childNum > 0) {
lastView = this.getChildAt(0);
this._stack.push(lastView);
}
view.visible = false;
this.addChild(view);
if (dispatch) {
this.dispatchEvent('change', {action: 'push', view, options});
let data = {action, view, lastView, options, hasView: true};
this.dispatchEvent(Event.START, data);
playViewEffect(
playEffect ? options ? options.effect : null : null,
options ? options.effectParams : {},
this._mutex, lastView, view, this,
() => {
this.dispatchEvent(Event.COMPLETE, data);
callback && callback();
}
)
}
/**
* 替换顶层视图
* @param view
* 撤出视图
* @param options
* @param playEffect
* @param callback
*/
replace(view: DisplayObject, options?) {
if (this.pop(false)) {
this.push(view, options, false);
this.dispatchEvent('change', {action: 'replace', view, options});
pop(options?, playEffect = true, callback?) {
const action = 'pop';
let len = this.childNum;
if (len <= 0) {
return false;
}
let lastView = this.getChildAt(this.children.length - 1);
let view;
if (this._mutex) {
view = this._stack.pop();
view.visible = false;
this.addChild(view);
}
let data = {action, view, lastView, options, hasView: len > 1};
this.dispatchEvent(Event.START, data);
playViewEffect(
playEffect ? options ? options.effect : null : null,
options ? options.effectParams : {},
this._mutex, lastView, view, this,
() => {
this.dispatchEvent(Event.COMPLETE, data);
callback && callback();
}
);
return true;
}
/**
* 撤出视图
* 替换顶层视图
* @param view
* @param options
* @param playEffect
* @param callback
*/
pop(dispatch = true) {
let len = this.children.length;
replace(view: DisplayObject, options?, playEffect = true, callback?) {
const action = 'replace';
let len = this.childNum;
if (len <= 0) {
return false;
}
this.removeChildAt(len - 1);
if (this._mutex) {
this.addChild(this._stack.pop());
}
if (dispatch) {
this.dispatchEvent('change', {action: 'pop'});
let lastView = this.getChildAt(len - 1);
view.visible = false;
this.addChild(view);
let data = {action, view, lastView, options, hasView: len > 1};
this.dispatchEvent(Event.START, data);
playViewEffect(
playEffect ? options ? options.effect : null : null,
options ? options.effectParams : {},
this._mutex, lastView, view, this,
() => {
this.dispatchEvent(Event.COMPLETE, data);
callback && callback();
}
return true;
)
}
/**
* 撤出全部视图
* @param view
* @param options
* @param playEffect
* @param callback
*/
popAll(view?: DisplayObject, options?) {
this.removeChildren();
popAll(view?: DisplayObject, options?, playEffect = true, callback?) {
const action = 'popAll';
let lastView = this.getChildAt(0);
let len = this.childNum;
while (this.children.length > 1) {
this.removeChildAt(1);
}
if (this._mutex) {
this._stack.splice(0);
}
if (view) {
this.push(view, options, false);
if(view){
view.visible = false;
this.addChild(view);
}
let data = {action, view, lastView, options, hasView: len > 1};
this.dispatchEvent(Event.START, data);
playViewEffect(
playEffect ? options ? options.effect : null : null,
options ? options.effectParams : {},
this._mutex, lastView, view, this,
() => {
this.dispatchEvent(Event.COMPLETE, data);
callback && callback();
}
this.dispatchEvent('change', {action: 'popAll', view, options});
)
}
}
src/zeroing/game-warpper/Toast.ts
View file @ 9079fb65
......@@ -23,12 +23,12 @@ export class Toast extends Node {
this.verticalCenter = 0;
}
show(props: any = {}) {
async show(props: any = {}) {
if (!props.text) {
return;
}
let contentView = this.getContent(props.viewName);
let contentView = await this.getContent(props.viewName);
let lab = contentView.getChildByName('lab');
if (!lab) {
console.warn('[lab] child no exists on toast view');
......@@ -72,12 +72,12 @@ export class Toast extends Node {
this._content = null;
}
private getContent(viewName) {
private async getContent(viewName) {
let view;
if (this.children.length == 0) {
if (viewName) {
view = this._gameStage.instantiateView(viewName);
view = await this._gameStage.instantiateView(viewName);
}
if (!view) {
if (!this._contentSample) {
......
src/zeroing/game-warpper/view-effects.ts 0 → 100644
View file @ 9079fb65
/**
* Created by rockyl on 2020-05-04.
*/
import {Tween} from "../../2d/tween/Tween";
import {gameStage} from "../launcher";
import {injectProp} from "../utils/index";
import {Ease} from "../../2d/tween/Ease";
export function playViewEffect(name, params, mutex, lastView, view, container, callback) {
let effect = name ? effects[name] : effects.simple;
effect = effect || effects.simple;
effect(params || {}, mutex, lastView, view, container, callback);
}
const effects = {
simple(params, mutex, lastView, view, container, callback) {
if (mutex) {
container.removeChild(lastView);
}else{
if (lastView && !view) {
container.removeChild(lastView);
}
}
if(view){
view.visible = true;
}
callback();
},
fade(params, mutex, lastView, view, container, callback) {
const {duration = 300} = params;
if (mutex) {
fadeOut(() => {
fadeIn(callback);
})
} else {
fadeIn(callback);
}
function fadeOut(callback) {
if (lastView) {
Tween.get(lastView, null, null, true)
.to({alpha: 0}, duration)
.call(() => {
container.removeChild(lastView);
lastView.alpha = 1;
callback();
});
} else {
callback();
}
}
function fadeIn(callback) {
if (view) {
view.visible = true;
view.alpha = 0;
Tween.get(view, null, null, true)
.to({alpha: 1}, params.duration || 300)
.call(() => {
callback();
});
} else {
callback();
}
}
},
flew(params, mutex, lastView, view, container, callback) {
const {duration = 300, direction = 'top', ease = 'backOut'} = params;
const {stage: {width, height}} = gameStage;
let outPos: any = {};
switch (direction) {
case 'left':
outPos.x = -width;
break;
case 'right':
outPos.x = width;
break;
case 'top':
outPos.y = -height;
break;
case 'bottom':
outPos.y = height;
break;
}
let inEase = ease;
let outEase = ease.indexOf('Out') ? ease.replace('Out', 'In') : ease.replace('In', 'Out');
if (mutex) {
flewOut(() => {
flewIn(callback);
})
} else {
if (lastView && !view) {
flewOut(callback)
} else {
flewIn(callback);
}
}
function flewOut(callback) {
if (lastView) {
Tween.get(lastView, null, null, true)
.to(outPos, duration, Ease[outEase])
.call(() => {
container.removeChild(lastView);
injectProp(lastView, outPos);
callback();
});
} else {
callback();
}
}
function flewIn(callback) {
if (view) {
let inPos: any = {
x: view.x,
y: view.y,
};
view.visible = true;
injectProp(view, outPos);
Tween.get(view, null, null, true)
.to(inPos, duration, Ease[inEase])
.call(() => {
callback();
});
} else {
callback();
}
}
},
hulu(params, mutex, lastView, view, container, callback) {
const {duration = 300, ease = 'backOut', x = 0, y = 0} = params;
let inEase = ease;
let outEase = ease.indexOf('Out') ? ease.replace('Out', 'In') : ease.replace('In', 'Out');
let outPos = {
x: parseInt(x),
y: parseInt(y),
scaleX: 0, scaleY: 0,
};
if (mutex) {
huluOut(() => {
huluIn(callback);
})
} else {
if (lastView && !view) {
huluOut(callback)
} else {
huluIn(callback);
}
}
function huluOut(callback) {
if (lastView) {
outPos.x -= lastView.width / 2;
outPos.y -= lastView.height / 2;
Tween.get(lastView, null, null, true)
.to(outPos, duration, Ease[outEase])
.call(() => {
container.removeChild(lastView);
injectProp(lastView, outPos);
callback();
});
} else {
callback();
}
}
function huluIn(callback) {
if (view) {
let inPos: any = {
x: view.x,
y: view.y,
scaleX: 1, scaleY: 1
};
view.anchorX = view.width / 2;
view.anchorY = view.height / 2;
outPos.x -= view.width / 2;
outPos.y -= view.height / 2;
view.visible = true;
injectProp(view, outPos);
Tween.get(view, null, null, true)
.to(inPos, duration, Ease[inEase])
.call(() => {
callback();
});
} else {
callback();
}
}
},
zoom(params, mutex, lastView, view, container, callback) {
const {duration = 300, ease = 'backOut'} = params;
let inEase = ease;
let outEase = ease.indexOf('Out') ? ease.replace('Out', 'In') : ease.replace('In', 'Out');
if (mutex) {
zoomOut(() => {
zoomIn(callback);
})
} else {
if (lastView && !view) {
zoomOut(callback)
} else {
zoomIn(callback);
}
}
function zoomOut(callback) {
if (lastView) {
Tween.get(lastView, null, null, true)
.to({scaleX: 0, scaleY: 0}, duration, Ease[outEase])
.call(() => {
container.removeChild(lastView);
injectProp(view, {scaleX: 0, scaleY: 0});
callback();
});
} else {
callback();
}
}
function zoomIn(callback) {
if (view) {
view.anchorX = view.width / 2;
view.anchorY = view.height / 2;
view.visible = true;
injectProp(view, {scaleX: 0, scaleY: 0});
Tween.get(view, null, null, true)
.to({scaleX: 1, scaleY: 1}, duration, Ease[inEase])
.call(() => {
callback();
});
} else {
callback();
}
}
},
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment