feat: 金币桶

src/Main.ts

@@ -6,6 +6,7 @@ import { changeScene, showWaiting, destroyAllCtrls, showPanel, hideWaiting } fro
 
 import { ResJson } from "./ResJson";
 import { Flop } from "./game/Flop"
+import { Gold } from './game/Gold'
 import { SkinJson } from "./SkinJson";
 import { FlappyBirds } from './game/FlappyBirds'
 import { PlayScene } from "./template/PlayScene";
@@ -64,7 +65,7 @@ export class Main {
         //h5环境时，隐藏加载中
         if (FYGE.getEnv() == "web" && document.getElementById("__loading__")) document.getElementById("__loading__").style.display = "none";
         //显示场景
-        changeScene(Flop)
+        changeScene(Gold)
     }
 
 

src/components/GoldLabel.ts

+import { Scene } from "../../module/views/Scene";
+
+export class GoldLabel extends Scene {
+    gold: FYGE.Sprite;
+    scoreNum: FYGE.TextField;
+    _time: number = 120
+    goldPosition: any[] = [200, 350, 480]
+    goldUrl: any[] = [
+        '//yun.duiba.com.cn/aurora/assets/51a6bcc6dea3de23a794eee8ec4f78b7b28f67c8.png',
+        '//yun.duiba.com.cn/aurora/assets/e935016b585aba3d4707ff9ce4b6a507f234f1b8.png',
+        '//yun.duiba.com.cn/aurora/assets/d7e98a64113c3d09d6e11d456ed9cac66fca5edc.png',
+    ]
+    constructor() {
+        super();
+        this.initUi();
+    }
+    initUi() {
+        var positionIndex = Math.floor((Math.random() * this.goldPosition.length))
+        var urlIndex = Math.floor((Math.random() * this.goldUrl.length))
+        let gold = this.gold = FYGE.Sprite.fromUrl(this.goldUrl[urlIndex])
+        gold.x = this.goldPosition[positionIndex]
+        this.addChild(gold)
+    }
+
+    reset() {
+    }
+}
\ No newline at end of file

src/game/Flop.ts

@@ -253,3 +253,209 @@ export class Flop extends Scene {
         super.update();
     }
 }
+
+export class MovieClip extends Container {
+    /**
+     * 原始数据，接口在解析类上，不搞先
+     */
+    private rawData;
+    /**
+     * 锁步将按时间间隔来执行动画
+     */
+    lockStep: boolean;
+    /**
+     * mc的当前帧,从1开始
+     * @property currentFrame
+     * @public
+     * @since 1.0.0
+     * @type {number}
+     * @default 1
+     * @readonly
+     */
+    get currentFrame(): number;
+    /**
+     * @property _curFrame
+     * @type {number}
+     * @private
+     * @since 2.0.0
+     * @default 1
+     */
+    private _curFrame;
+    /**
+     * 当前动画是否处于播放状态
+     * @property isPlaying
+     * @readOnly
+     * @public
+     * @since 1.0.0
+     * @type {boolean}
+     * @default true
+     * @readonly
+     */
+    get isPlaying(): boolean;
+    /**
+     * @property _isPlaying
+     * @type {boolean}
+     * @private
+     * @since 2.0.0
+     * @default true
+     */
+    private _isPlaying;
+    /**
+     * 动画的播放方向,是顺着播还是在倒着播
+     * @property isFront
+     * @public
+     * @since 1.0.0
+     * @type {boolean}
+     * @default true
+     * @readonly
+     */
+    get isFront(): boolean;
+    /**
+     * @property _isFront
+     * @type {boolean}
+     * @private
+     * @default true
+     */
+    private _isFront;
+    /**
+     * 当前动画的总帧数
+     * @property totalFrames
+     * @public
+     * @since 1.0.0
+     * @type {number}
+     * @default 0
+     * @readonly
+     */
+    get totalFrames(): number;
+    get videoWidth(): number;
+    get videoHeight(): number;
+    /**
+     * 锁步的时间间隔，按fps定,毫秒
+     */
+    private timeInterval;
+    /**
+     * 前提引擎按60设置
+     */
+    private deltaFrame;
+    /**
+     * 中间帧计时
+     */
+    private frameCount;
+    /**
+     * 构造函数
+     * @method MovieClip
+     * @public
+     * @param mv VideoEntity格式，这里不给了
+     */
+    constructor(mv?: any);
+    /**
+     * 可以手动用init，
+     * @param mv
+     */
+    init(mv: any): void;
+    private initChildren;
+    /**
+     *
+     * @param imagekey 对应的imagekey
+     * @param imageUrl 图片路径，以后考虑支持多种形式
+     */
+    setImage(imagekey: string, imageUrl: string): void;
+    /**
+     * 调用止方法将停止当前帧
+     * @method stop
+     * @public
+     * @since 1.0.0
+     */
+    stop(): void;
+    /**
+     * 将播放头向后移一帧并停在下一帧,如果本身在最后一帧则不做任何反应
+     * @method nextFrame
+     * @since 1.0.0
+     * @public
+     */
+    nextFrame(): void;
+    /**
+     * 将播放头向前移一帧并停在下一帧,如果本身在第一帧则不做任何反应
+     * @method prevFrame
+     * @since 1.0.0
+     * @public
+     */
+    prevFrame(): void;
+    /**
+     * 将播放头跳转到指定帧并停在那一帧,如果本身在第一帧则不做任何反应
+     * @method gotoAndStop
+     * @public
+     * @since 1.0.0
+     * @param {number} frameIndex 批定帧的帧数或指定帧的标签名
+     */
+    gotoAndStop(frameIndex: number): void;
+    /**
+     * 如果当前时间轴停在某一帧,调用此方法将继续播放.
+     * @method play
+     * @public
+     * @since 1.0.0
+     */
+    play(isFront?: boolean): void;
+    /**
+     * @property _lastFrame
+     * @type {number}
+     * @private
+     * @default 0
+     */
+    private _lastFrame;
+    /**
+     * 刚执行到的帧数，用于帧监听时判断用，刚好执行到当前帧，而不是之前保留的状态
+     * 不是60fps的videoItem的中间有几帧curFrame会不变，判断只执行一次监听时会出错，刚好动画满帧60fps时就无所谓
+     */
+    get isInTimeFrame(): boolean;
+    /**
+     * 将播放头跳转到指定帧并从那一帧开始继续播放
+     * @method gotoAndPlay
+     * @public
+     * @since 1.0.0
+     * @param {number} frameIndex 批定帧的帧数或指定帧的标签名
+     * @param {boolean} isFront 跳到指定帧后是向前播放, 还是向后播放.不设置些参数将默认向前播放
+     */
+    gotoAndPlay(frameIndex: number, isFront?: boolean): void;
+    /**
+     * 记录的startAniRange对应的fun
+     */
+    private startAniRangeFun;
+    /**
+     * 优先级最高，会覆盖
+     * @param beginFrame 默认1
+     * @param endFrame 默认 this.totalFrames
+     * @param loops 默认1 小于等于0为无线循环，
+     * @param callback 动画循环次数播放结束时回调，无限循环时不会有回调
+     */
+    startAniRange(beginFrame?: number, endFrame?: number, loops?: number, callback?: Function): void;
+    /**
+     * 开始时间，每次有play的时候就需要重置now
+     * 锁步思想，设置开始时间，后面每帧实际时间与开始时间相减，得到当前帧数
+     *
+     */
+    private startTime;
+    /**
+     * 开始时的frame
+     */
+    private startFrame;
+    /**
+     * 与startFrame相间隔的帧数量，绝对值
+     */
+    private lastDeltaFrame;
+    /**
+     * 锁步时的每次end的标识
+     */
+    private _endMark;
+    commonDeltaTime: number;
+    updateFrame(): void;
+    private getCurFrameWhenLockStep;
+    /**
+     * 重写刷新
+     * @method update
+     * @public
+     * @since 1.0.0
+     */
+    update(): void;
+    destroy(): void;
+}

src/game/Gold.ts

+import createCutTextures from '../utils/createCutTextures'
+import { Scene } from "../../module/views/Scene";
+import { TimeLabel } from '../components/TimeLabel'
+import createMovieClip from '../utils/createMovieClip'
+import { GoldLabel } from '../components/GoldLabel'
+
+
+
+export class Gold extends Scene {
+    private _barrelOut: FYGE.MovieClip
+    private _backGround: FYGE.Sprite
+    private _barrelIn: FYGE.MovieClip
+    private _goldUp: FYGE.MovieClip
+    private barrelOutCurrentFrame = 0;
+    private barrelInCurrentFrame = 0;
+    private goldUpCurrentFrame = 0;
+
+    private barrelOutMULTI = 1;
+    private barrelInMULTI = 1;
+    private goldUpMULTI = 1;
+    constructor() {
+        super();
+
+    }
+    async start() {
+        super.start();
+        const background = this._backGround = new FYGE.Sprite();
+        background.texture = FYGE.Texture.fromUrl('//yun.duiba.com.cn/spark/assets/24856c437cb945c2e4bafd2a1e6a34ee3938040b.png')
+        background.width = 750
+        background.height = 1624
+        background.x = 0
+        background.y = 0
+        this.addChild(background)
+
+        const barrelOut: FYGE.MovieClip = this._barrelOut = await createMovieClip('https://yun.duiba.com.cn/aurora/assets/2dcf3c143ed68cd983a032ccd0c6d3554911c7ee.svga')
+        barrelOut.y = 800
+        const barrelIn: FYGE.MovieClip = this._barrelIn = await createMovieClip('https://yun.duiba.com.cn/aurora/assets/acc4eabc4a02a41da52b5661c9fdc58c3a68f5d1.svga')
+        barrelIn.y = 800
+        const goldUp: FYGE.MovieClip = this._goldUp = await createMovieClip('https://yun.duiba.com.cn/aurora/assets/e44b7ce6520858b3e2b7063458819f25d202323b.svga')
+        goldUp.y = 780
+
+        this._barrelIn.gotoAndStop(this.barrelOutCurrentFrame);
+        this._goldUp.gotoAndStop(this.barrelInCurrentFrame);
+        this._barrelOut.gotoAndStop(this.goldUpCurrentFrame);
+
+        background.addChild(barrelOut);
+        background.addChild(goldUp);
+        background.addChild(barrelIn);
+
+        background.addEventListener(FYGE.MouseEvent.CLICK, this.onAddMulti, this)
+
+    }
+
+    onAddGold() {
+        let gold = new GoldLabel()
+        gold.y = 800
+        this._backGround.addChild(gold)
+        FYGE.Tween.get(gold)
+            .to({ y: 700 }, 100)
+            .to({ y: 600 }, 100)
+            .to({ y: 500 }, 200)
+            .to({ y: 600 }, 200)
+            .to({ y: 700 }, 100)
+            .to({ y: 800 }, 100)
+            .call(() => {
+                this._backGround.removeChild(gold)
+            })
+    }
+
+    onAddMulti() {
+        console.log(1);
+        this._barrelIn.gotoAndStop(this._barrelIn.totalFrames);
+        this._goldUp.gotoAndStop(this._goldUp.totalFrames);
+        this._barrelOut.gotoAndStop(this._barrelOut.totalFrames);
+
+        this._barrelIn.addEventListener(FYGE.MouseEvent.ENTER_FRAME, this.onBarrelInMulti, this)
+        this._goldUp.addEventListener(FYGE.MouseEvent.ENTER_FRAME, this.onGoldUpMulti, this)
+        this._barrelOut.addEventListener(FYGE.MouseEvent.ENTER_FRAME, this.onBarrelOutMulti, this)
+        this.onAddGold()
+        this.barrelOutCurrentFrame = 6;
+        this.barrelInCurrentFrame = 6;
+        this.goldUpCurrentFrame = 6;
+    }
+    onBarrelInMulti() {
+        this.barrelInCurrentFrame = this.barrelInCurrentFrame + this.barrelInMULTI;
+        this._barrelIn.gotoAndStop(this.barrelInCurrentFrame);
+        if (this.barrelInCurrentFrame > this._barrelIn.totalFrames) {
+            this.barrelInCurrentFrame = 6;
+            this._barrelIn.removeEventListener(FYGE.MouseEvent.ENTER_FRAME, this.onBarrelInMulti, this)
+
+        }
+    }
+
+    onGoldUpMulti() {
+        this.goldUpCurrentFrame = this.goldUpCurrentFrame + this.goldUpMULTI;
+        this._goldUp.gotoAndStop(this.goldUpCurrentFrame);
+        if (this.goldUpCurrentFrame > this._goldUp.totalFrames) {
+            this.goldUpCurrentFrame = 6;
+
+            this._goldUp.removeEventListener(FYGE.MouseEvent.ENTER_FRAME, this.onGoldUpMulti, this)
+
+        }
+    }
+    onBarrelOutMulti() {
+        this.barrelOutCurrentFrame = this.barrelOutCurrentFrame + this.barrelOutMULTI;
+        this._barrelOut.gotoAndStop(this.barrelOutCurrentFrame);
+        if (this.barrelOutCurrentFrame > this._barrelOut.totalFrames) {
+            this.barrelOutCurrentFrame = 6;
+            this._barrelOut.removeEventListener(FYGE.MouseEvent.ENTER_FRAME, this.onBarrelOutMulti, this)
+
+        }
+    }
+
+
+
+    update() {
+        super.update();
+    }
+}
\ No newline at end of file

src/utils/createMovieClip.ts

+async function createMovieClip(url: string): Promise<FYGE.MovieClip> {
+    return new Promise((resolve, reject) => {
+        function onSVGALoaded(videoItem: SvgaParser.VideoEntity) {
+            const movieclip = new FYGE.MovieClip(videoItem);
+            resolve(movieclip);
+        }
+        SvgaParser.loadSvga(url, onSVGALoaded, reject);
+    })
+}
+
+export default createMovieClip
\ No newline at end of file