Skip to content

I
icbcRPG
Commit 2a28a290 authored by zhangjinzhou's avatar zhangjinzhou
Browse files
Options

loading,选人，引导

parent 47ebc388
Hide whitespace changes
Inline Side-by-side
Showing with 656 additions and 2 deletions
project/package.json
View file @ 2a28a290
......@@ -9,6 +9,7 @@
},
"dependencies": {
"@spark/api-base": "^1.0.11",
"@spark/guideact": "^1.0.2",
"@spark/projectx": "^1.0.3",
"@spark/ui": "^1.0.25",
"axios": "^0.19.2",
......
project/src/app.less
View file @ 2a28a290
......@@ -9,7 +9,10 @@ body {
height: 100%;
}
#root{
width: 100%;
height: 100%;
}
#toast_container * {
box-sizing: border-box;
......
project/src/pages/main3/bundle.js 0 → 100644
View file @ 2a28a290
import { Shape, Container, TextField, TEXT_ALIGN, TEXT_lINETYPE, Sprite, MouseEvent, TextureCache, WidgetBase } from 'spark-wrapper-fyge';
import metaConfig from './meta.json';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var GameStage = /** @class */ (function (_super) {
__extends(GameStage, _super);
function GameStage() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.step = 1;
return _this;
}
GameStage.prototype.onLaunched = function () {
this.stagew = this.stage.viewRect.width;
this.stageh = this.stage.viewRect.height;
this.guideRect = new Shape();
this.addChild(this.guideRect);
this.rolecont = new Container();
this.addChild(this.rolecont);
this.messagetxt = new TextField();
this.messagetxt.size = 32;
this.messagetxt.textAlign = TEXT_ALIGN.LEFT;
this.messagetxt.lineSpacing = 10;
this.messagetxt.lineType = TEXT_lINETYPE.MULTI;
this.addChild(this.messagetxt);
this.nextbtn = new Sprite();
this.addChild(this.nextbtn);
this.touchrect = new Shape();
this.addChild(this.touchrect);
this.skipbtn = new Sprite();
this.addChild(this.skipbtn);
this.skipbtn.addEventListener(MouseEvent.CLICK, this.skipGuide, this);
this.touchrect.addEventListener(MouseEvent.CLICK, this.toNextLevel, this);
this.setGuideShow();
};
/**
* 事件回调
* @param type
* @param payload
*/
GameStage.prototype.onEvent = function (type, payload) {
};
/**
* 销毁回调
*/
GameStage.prototype.onDestroy = function () {
};
//skipLevel
GameStage.prototype.skipGuide = function () {
var stepdata = this.props['guideconfig'][this.step];
var skipbtn = stepdata.skipbtn;
var lastlevel;
if (skipbtn) {
lastlevel = skipbtn.skiplevel;
}
this.step = lastlevel;
this.setGuideShow();
};
//toNextLevel
GameStage.prototype.toNextLevel = function () {
this.step++;
this.setGuideShow();
};
//步数渲染
GameStage.prototype.setGuideShow = function () {
console.log("配置===》", this.props);
var stepdata = this.props['guideconfig'][this.step];
if (!stepdata) {
console.error("引导完毕====》");
this.dispatchOutEvent("guidecomplete", null);
return;
}
var hole = stepdata.hole, txt = stepdata.txt, role = stepdata.role, nextbtn = stepdata.nextbtn, skipbtn = stepdata.skipbtn, touch = stepdata.touch;
this.guideRect.clear();
this.guideRect.beginFill(0x000000, 0.7);
this.guideRect.drawRect(0, 0, this.stagew, this.stageh);
if (hole) {
var holetype = hole.holetype, holex = hole.holex, holey = hole.holey, holesize = hole.holesize;
switch (holetype) {
case "cir":
this.guideRect.arc(holex, holey, holesize[0], 0, Math.PI * 2, true);
break;
case "cirect":
console.log("画圆角洞====》");
//点设置
var cirectwid = holesize[0];
var cirecthei = holesize[1];
var cirectrad = holesize[2];
var dot1 = [holex + cirectrad, holey];
var dot2 = [holex, holey + cirectrad];
var dot3 = [holex, holey + cirecthei - cirectrad];
var dot4 = [holex + cirectrad, holey + cirecthei];
var dot5 = [holex + cirectwid - cirectrad, holey + cirecthei];
var dot6 = [holex + cirectwid, holey + cirecthei - cirectrad];
var dot7 = [holex + cirectwid, holey + cirectrad];
var dot8 = [holex + cirectwid - cirectrad, holey];
this.guideRect.moveTo(dot1[0], dot1[1]);
this.guideRect.quadraticCurveTo(holex, holey, dot2[0], dot2[1]);
this.guideRect.lineTo(dot3[0], dot3[1]);
this.guideRect.quadraticCurveTo(holex, holey + cirecthei, dot4[0], dot4[1]);
this.guideRect.lineTo(dot5[0], dot5[1]);
this.guideRect.quadraticCurveTo(holex + cirectwid, holey + cirecthei, dot6[0], dot6[1]);
this.guideRect.lineTo(dot7[0], dot7[1]);
this.guideRect.quadraticCurveTo(holex + cirectwid, holey, dot8[0], dot8[1]);
this.guideRect.lineTo(dot1[0], dot1[1]);
break;
case "rect":
break;
case "nohole":
break;
default:
console.error("为定义类型");
break;
}
}
this.guideRect.endFill();
if (txt) {
var text = txt.text, txtwidth = txt.txtwidth, txtx = txt.txtx, txty = txt.txty, txtalign = txt.txtalign;
this.messagetxt.text = text;
this.messagetxt.x = txtx;
this.messagetxt.y = txty;
this.messagetxt.textWidth = txtwidth;
this.messagetxt.visible = true;
this.messagetxt.textAlign = txtalign || TEXT_ALIGN.LEFT;
}
else {
this.messagetxt.visible = false;
}
if (role) {
console.log('资源管理==》', TextureCache);
this.rolecont.removeChildren();
this.rolecont.visible = true;
for (var i = 0; i < role.length; i++) {
var irole = role[i];
var rolex = irole.rolex, roley = irole.roley, roletex = irole.roletex;
var ichild = new Sprite(TextureCache[roletex]);
ichild.x = rolex;
ichild.y = roley;
this.rolecont.addChild(ichild);
}
}
else {
this.rolecont.visible = false;
}
if (nextbtn) {
var btnx = nextbtn.btnx, btny = nextbtn.btny, btntex = nextbtn.btntex;
this.nextbtn.texture = TextureCache[btntex];
this.nextbtn.x = btnx;
this.nextbtn.y = btny;
this.nextbtn.visible = true;
}
else {
this.nextbtn.visible = false;
}
if (skipbtn) {
var skipx = skipbtn.skipx, skipy = skipbtn.skipy, skiptex = skipbtn.skiptex;
this.skipbtn.texture = TextureCache[skiptex];
this.skipbtn.x = skipx;
this.skipbtn.y = skipy;
this.skipbtn.visible = true;
console.log("skipbtn====》", skipbtn);
}
else {
this.skipbtn.visible = false;
}
if (touch) {
var touchx = touch.touchx, touchy = touch.touchy, touchsize = touch.touchsize;
this.touchrect.clear();
this.touchrect.beginFill(0x000000, 0.01);
this.touchrect.drawRect(touchx, touchy, touchsize[0], touchsize[1]);
this.touchrect.endFill();
}
else {
console.error("没有点击区域====》");
}
};
return GameStage;
}(WidgetBase));
/**
* Created by rockyl on 2020/9/19.
*/
/**
* @type CANVAS_WIDGET
* @name 测试模块
* @desc 测试模块的工厂方法
*/
function Guideact() {
return new GameStage(getMetaConfig('Guideact'));
}
function getMetaConfig(id){
return metaConfig[id]
}
//===== END APPEND CODE =====
export { Guideact };
project/src/pages/main3/main3.jsx
View file @ 2a28a290
......@@ -6,7 +6,7 @@ import resList from '../../resconfig/resList'; //import API from '../../api';
import { Aup, AUPOP, AUP_MBX_STATE } from '../../pop';
import './main3.less';
import { CanvasWidget } from 'spark-utils';
import { Guideact } from '@spark/guideact';
import { Guideact } from './bundle';//'@spark/guideact';//
import { widgetConfig } from './widgetConfig';
import {GDispatcher} from "spark-wrapper-fyge"
import dataCenter, { Store } from '../../dataCenter';
......@@ -57,6 +57,13 @@ class Main3 extends Component {
}
onEvent(type, payload) {
console.log(type, payload);
switch(type){
case "guidecomplete":
dataCenter.setData(Store.needguide,false);
break;
default:
break;
}
}
onAssetsProcess(loaded, total) {
console.log(`assets load process:${loaded}/${total}`)
......
project/src/pages/main3/meta.json 0 → 100644
View file @ 2a28a290
{
"Guideact": {
"props": {
"guideconfig": {
"1": {
"hole": null,
"txt": null,
"role": [
{
"rolex": 40,
"roley": 460,
"roletex": "guide1"
}
],
"nextbtn": null,
"skipbtn": {
"skipx": 321.5,
"skipy": 1390,
"skiptex": "skipbtn",
"skiplevel": 9
},
"touch": {
"touchx": 0,
"touchy": 0,
"touchsize": [
750,
1624
]
}
},
"2": {
"hole": {
"holetype": "cirect",
"holex": 15,
"holey": 33,
"holesize": [
395,
112,
70
]
},
"txt": {
"text": "您可以在此处编辑信息查看欢趣豆数量",
"txtwidth": 750,
"txtx": 0,
"txty": 224,
"txtalign": "center"
},
"role": [
{
"rolex": 375,
"roley": 911,
"roletex": "guide2_1"
}
],
"nextbtn": {
"btnx": 485,
"btny": 303,
"btntex": "nextbtn"
},
"skipbtn": {
"skipx": 321.5,
"skipy": 1390,
"skiptex": "skipbtn",
"skiplevel": 9
},
"touch": {
"touchx": 0,
"touchy": 0,
"touchsize": [
750,
1624
]
}
},
"3": {
"hole": {
"holetype": "cirect",
"holex": 600,
"holey": 26,
"holesize": [
135,
440,
40
]
},
"txt": {
"text": "点击图标您可查看规则、进行分享和签到\n \n偷偷告诉您，连签7天可获得大额欢趣豆哦～",
"txtwidth": 455,
"txtx": 100,
"txty": 245,
"txtalign": "left"
},
"role": [
{
"rolex": 375,
"roley": 911,
"roletex": "guide2_1"
}
],
"nextbtn": {
"btnx": 100,
"btny": 520,
"btntex": "nextbtn"
},
"skipbtn": {
"skipx": 321.5,
"skipy": 1390,
"skiptex": "skipbtn",
"skiplevel": 9
},
"touch": {
"touchx": 0,
"touchy": 0,
"touchsize": [
750,
1624
]
}
},
"4": {
"hole": {
"holetype": "cir",
"holex": 185,
"holey": 465,
"holesize": [
165,
440
]
},
"txt": {
"text": "欢趣豆可以兑换立减金，\n进入趣赶集即可进行\n兑换哦～",
"txtwidth": 375,
"txtx": 375,
"txty": 357,
"txtalign": "left"
},
"role": [
{
"rolex": 375,
"roley": 911,
"roletex": "guide2_1"
}
],
"nextbtn": {
"btnx": 375,
"btny": 536,
"btntex": "nextbtn"
},
"skipbtn": {
"skipx": 321.5,
"skipy": 1390,
"skiptex": "skipbtn",
"skiplevel": 9
},
"touch": {
"touchx": 0,
"touchy": 0,
"touchsize": [
750,
1624
]
}
},
"5": {
"hole": {
"holetype": "cir",
"holex": 540,
"holey": 700,
"holesize": [
165,
440
]
},
"txt": {
"text": "农场主集结～在这里\n就是向往的生活！\n收获成果的同时还可\n以兑换丰厚礼物哦",
"txtwidth": 320,
"txtx": 55,
"txty": 635,
"txtalign": "left"
},
"role": [
{
"rolex": 375,
"roley": 911,
"roletex": "guide2_1"
}
],
"nextbtn": {
"btnx": 55,
"btny": 860,
"btntex": "nextbtn"
},
"skipbtn": {
"skipx": 321.5,
"skipy": 1390,
"skiptex": "skipbtn",
"skiplevel": 9
},
"touch": {
"touchx": 0,
"touchy": 0,
"touchsize": [
750,
1624
]
}
},
"6": {
"hole": {
"holetype": "cir",
"holex": 175,
"holey": 850,
"holesize": [
165,
440
]
},
"txt": {
"text": "点击任务大厅，进入\n任务界面，完成任务\n可获得好礼哦～",
"txtwidth": 375,
"txtx": 375,
"txty": 600,
"txtalign": "left"
},
"role": [
{
"rolex": 375,
"roley": 911,
"roletex": "guide2_1"
}
],
"nextbtn": {
"btnx": 375,
"btny": 768,
"btntex": "nextbtn"
},
"skipbtn": {
"skipx": 321.5,
"skipy": 1390,
"skiptex": "skipbtn",
"skiplevel": 9
},
"touch": {
"touchx": 0,
"touchy": 0,
"touchsize": [
750,
1624
]
}
},
"7": {
"hole": {
"holetype": "cir",
"holex": 575,
"holey": 1110,
"holesize": [
165,
440
]
},
"txt": {
"text": "点击小卖铺可以进到\n商城页面，在这里购\n买心仪的物品哦～",
"txtwidth": 320,
"txtx": 85,
"txty": 790,
"txtalign": "left"
},
"role": [
{
"rolex": 68,
"roley": 1060,
"roletex": "guide2_1"
}
],
"nextbtn": {
"btnx": 86,
"btny": 966,
"btntex": "nextbtn"
},
"skipbtn": {
"skipx": 321.5,
"skipy": 1390,
"skiptex": "skipbtn",
"skiplevel": 9
},
"touch": {
"touchx": 0,
"touchy": 0,
"touchsize": [
750,
1624
]
}
},
"8": {
"hole": {
"holetype": "cir",
"holex": 180,
"holey": 1325,
"holesize": [
165,
440
]
},
"txt": {
"text": "这就是你的小家啦～\n进入我的e家可以查看在小\n镇获得的各项荣誉勋章",
"txtwidth": 375,
"txtx": 375,
"txty": 1200,
"txtalign": "left"
},
"role": [
{
"rolex": 238,
"roley": 768,
"roletex": "guide2_1"
}
],
"nextbtn": {
"btnx": 375,
"btny": 1382,
"btntex": "nextbtn"
},
"skipbtn": null,
"touch": {
"touchx": 0,
"touchy": 0,
"touchsize": [
750,
1624
]
}
},
"9": {
"hole": null,
"txt": {
"text": "小镇将会越来越热闹\n小e也会在这儿一直陪伴你哦，\n那么赶紧去逛逛吧～",
"txtwidth": 750,
"txtx": 0,
"txty": 1150,
"txtalign": "center"
},
"role": [
{
"rolex": 238,
"roley": 768,
"roletex": "guide2_1"
}
],
"nextbtn": {
"btnx": 250,
"btny": 1300,
"btntex": "finaguidebtn"
},
"skipbtn": null,
"touch": {
"touchx": 0,
"touchy": 0,
"touchsize": [
750,
1624
]
}
}
}
},
"assets": [
{
"name": "引导1图",
"url": "assets/guide1.png",
"uuid": "guide1",
"ext": ".png"
},
{
"name": "引导2图",
"url": "assets/guide2_1.png",
"uuid": "guide2_1",
"ext": ".png"
},
{
"name": "下一步",
"url": "assets/nextbtn.png",
"uuid": "nextbtn",
"ext": ".png"
},
{
"name": "立即体验",
"url": "assets/finaguidebtn.png",
"uuid": "finaguidebtn",
"ext": ".png"
},
{
"name": "跳过引导",
"url": "assets/skipbtn.png",
"uuid": "skipbtn",
"ext": ".png"
}
],
"events": {
"in": {
"start": {
"alias": "开始"
},
"stop": {
"alias": "停止"
}
},
"out": {
"show_one": {
"alias": "展示一个文本",
"data": {
"text": "文本"
}
}
}
}
}
}
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