init

defs/FYGE.d.ts

-declare var FYGE:any;

libs/SvgaParser.d.ts

+
+declare module SvgaParser {
+    /**
+     * 加载方法
+     * @param url 资源路径
+     * @param success 
+     * @param failure 
+     */
+    export function loadSvga(url: string, success: (videoItem: VideoEntity) => void, failure?: (err: string) => void): void;
+    /**
+     * 导出只是当作类型接口用
+     */
+    export interface VideoEntity {
+        /**
+         * SVGA 文件版本
+         */
+        version: string;
+        /**
+         * 影片尺寸
+         */
+        videoSize: {
+            width: number;
+            height: number;
+        };
+        /**
+         * 帧率，60，30等每秒
+         */
+        FPS: number;
+        /**
+         * 总帧数
+         */
+        frames: number;
+        /**
+         * base64图片数据记录
+         */
+        images: {
+            [key: string]: string
+        };
+        /**
+         * 图片是否已被缓存，缓存全局，注意名字覆盖
+         */
+        hasBeenCached: boolean;
+        /**
+         * sprite对象数据
+         */
+        sprites: SpriteEntity[];
+
+    }
+    interface SpriteEntity {
+        /**
+         * 标识
+         */
+        matteKey: string;
+        /**
+         * 图片key值
+         */
+        imageKey: string;
+        /**
+         * 帧数据数组
+         */
+        frames: FrameEntity[];
+    }
+    /**
+     * 还有很多其他数据，暂不需要，比如矢量路径和遮罩路径暂时都无
+     */
+    interface FrameEntity {
+        /**
+         * 透明度
+         */
+        alpha: number;
+        /**
+         * 2维矩阵数据
+         */
+        transform: {
+            a: number,
+            b: number,
+            c: number,
+            d: number,
+            tx: number,
+            ty: number,
+        };
+    }
+}
+
+declare module "svga-parser" { export = SvgaParser; }
\ No newline at end of file

libs/howler.d.ts

+// Type definitions for howler.js v2.1.1
+// Project: https://github.com/goldfire/howler.js
+// Definitions by: Pedro Casaubon <https://github.com/xperiments>
+//                 Alexander Leon <https://github.com/alien35>
+//                 Nicholas Higgins <https://github.com/nicholashza>
+//                 Carlos Urango <https://github.com/cjurango>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+interface HowlerGlobal {
+    mute(muted: boolean): this;
+    volume(): number;
+    volume(volume: number): this;
+    codecs(ext: string): boolean;
+    unload(): this;
+    usingWebAudio: boolean;
+    html5PoolSize: number;
+    noAudio: boolean;
+    autoUnlock: boolean;
+    autoSuspend: boolean;
+    ctx: AudioContext;
+    masterGain: GainNode;
+
+    stereo(pan: number): this;
+    pos(x: number, y: number, z: number): this | void;
+    orientation(x: number, y: number, z: number, xUp: number, yUp: number, zUp: number): this | void;
+}
+
+declare let Howler: HowlerGlobal;
+
+interface IHowlSoundSpriteDefinition {
+    [name: string]: [number, number] | [number, number, boolean]
+}
+
+interface IHowlProperties {
+    src: string | string[];
+    volume?: number;
+    html5?: boolean;
+    loop?: boolean;
+    preload?: boolean;
+    autoplay?: boolean;
+    mute?: boolean;
+    sprite?: IHowlSoundSpriteDefinition;
+    rate?: number;
+    pool?: number;
+    format?: string[] | string;
+    xhrWithCredentials?: boolean;
+    onload?: () => void;
+    onloaderror?: (soundId: number, error: any) => void;
+    onplay?: (soundId: number) => void;
+    onplayerror?: (soundId: number, error: any) => void;
+    onend?: (soundId: number) => void;
+    onpause?: (soundId: number) => void;
+    onstop?: (soundId: number) => void;
+    onmute?: (soundId: number) => void;
+    onvolume?: (soundId: number) => void;
+    onrate?: (soundId: number) => void;
+    onseek?: (soundId: number) => void;
+    onfade?: (soundId: number) => void;
+    onunlock?: (soundId: number) => void;
+}
+
+interface Howl {
+    play(spriteOrId?: string | number): number; // .play() is not chainable; the other methods are
+    pause(id?: number): this;
+    stop(id?: number): this;
+
+    mute(): boolean;
+    mute(muted: boolean, id?: number): this;
+
+    volume(): number;
+    volume(idOrSetVolume: number): this | number;
+    volume(volume: number, id: number): this;
+
+    fade(from: number, to: number, duration: number, id?: number): this;
+
+    rate(): number;
+    rate(idOrSetRate: number): this | number;
+    rate(rate: number, id: number): this;
+
+    seek(seek?: number, id?: number): this | number;
+
+    loop(id?: number): boolean;
+    loop(loop: boolean, id?: number): this;
+
+    playing(id?: number): boolean;
+    duration(id?: number): number;
+    state(): 'unloaded' | 'loading' | 'loaded';
+    load(): this;
+    unload(): void;
+
+    on(event: 'load', callback: () => void, id?: number): this;
+    on(event: 'loaderror', callback: (soundId: number, error: any) => void, id?: number): this;
+    on(event: 'play', callback: (soundId: number) => void, id?: number): this;
+    on(event: 'playerror', callback: (soundId: number, error: any) => void, id?: number): this;
+    on(event: 'end', callback: (soundId: number) => void, id?: number): this;
+    on(event: 'pause', callback: (soundId: number) => void, id?: number): this;
+    on(event: 'stop', callback: (soundId: number) => void, id?: number): this;
+    on(event: 'mute', callback: (soundId: number) => void, id?: number): this;
+    on(event: 'volume', callback: (soundId: number) => void, id?: number): this;
+    on(event: 'rate', callback: (soundId: number) => void, id?: number): this;
+    on(event: 'seek', callback: (soundId: number) => void, id?: number): this;
+    on(event: 'fade', callback: (soundId: number) => void, id?: number): this;
+    on(event: string, callback: Function, id?: number): this;
+    on(event: 'unlock', callback: (soundId: number) => void, id?: number): this;
+
+    once(event: 'load', callback: () => void, id?: number): this;
+    once(event: 'loaderror', callback: (soundId: number, error: any) => void, id?: number): this;
+    once(event: 'play', callback: (soundId: number) => void, id?: number): this;
+    once(event: 'playerror', callback: (soundId: number, error: any) => void, id?: number): this;
+    once(event: 'end', callback: (soundId: number) => void, id?: number): this;
+    once(event: 'pause', callback: (soundId: number) => void, id?: number): this;
+    once(event: 'stop', callback: (soundId: number) => void, id?: number): this;
+    once(event: 'mute', callback: (soundId: number) => void, id?: number): this;
+    once(event: 'volume', callback: (soundId: number) => void, id?: number): this;
+    once(event: 'rate', callback: (soundId: number) => void, id?: number): this;
+    once(event: 'seek', callback: (soundId: number) => void, id?: number): this;
+    once(event: 'fade', callback: (soundId: number) => void, id?: number): this;
+    once(event: string, callback: Function, id?: number): this;
+    once(event: 'unlock', callback: (soundId: number) => void, id?: number): this;
+
+    off(event: string, callback?: Function, id?: number): this;
+    off(): this;
+
+    stereo(pan: number, id?: number): this | void;
+    pos(x: number, y: number, z: number, id?: number): this | void;
+    orientation(x: number, y: number, z: number, xUp: number, yUp: number, zUp: number): this | void;
+    pannerAttr(o: {
+        coneInnerAngle?: number,
+        coneOuterAngle?: number, coneOuterGain?: number,
+        distanceModel: 'inverse' | 'linear', maxDistance: number,
+        panningModel: 'HRTF' | 'equalpower', refDistance: number, rolloffFactor: number
+    }, id?: number): this;
+}
+
+interface HowlStatic {
+    new(properties: IHowlProperties): Howl;
+}
+
+declare let Howl: HowlStatic;
+
+declare module "howler" {
+    export let Howler: HowlerGlobal;
+    export let Howl: HowlStatic;
+}

public/index.html

@@ -7,6 +7,26 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <script src="http://yun.duiba.com.cn/db_games/libs0924/fyge2018.minSpine.js" crossorigin="anonymous"></script>
+    <style>
+        html,
+        body {
+            padding: 0;
+            margin: 0;
+            border: 0;
+
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            position: absolute;
+            background-color: #9a3636;
+            /* background: linear-gradient(#93dbb7,#ff0,#b5d89a); */
+            /* background: linear-gradient(#93dbb7,#b5d89a); */
+            /* 背景图片，解决加载太慢，白屏问题,加了这个下面的__loading__可以删掉了 */
+            /* background-size: 100%;
+            background-position: center;
+            background-image: url("https://yun.duiba.com.cn/db_games/activity/game/1550472986/resource/assets/playscene/playscenebg.jpg"); */
+        }
+    </style>
 </head>
 
 <body>

src/drag.ts

+export const addDragDemo = (stage:FYGE.Stage) => {
+    const pic = FYGE.Sprite.fromUrl('//yun.duiba.com.cn/aurora/assets/b64757cc9839c1dcc80692f6b7db9d97d269c315.png');
+    stage.addChild(pic);
+
+    //鼠标按下起始点
+    let startPoint;
+    //图片起始位置
+    let picOriginPos;
+
+    const onStageMove = (event: FYGE.MouseEvent) => {
+        console.log('触发了onStageMove事件，当前时间戳=>', Date.now())
+        //鼠标当前位置
+        const currentPoint = { x: event.stageX, y: event.stageY };
+        //鼠标按下点到鼠标当前点的偏移量
+        let mouseOffsetX = currentPoint.x - startPoint.x;
+        let mouseOffsetY = currentPoint.y - startPoint.y;
+
+        pic.x = picOriginPos.x + mouseOffsetX;
+        pic.y = picOriginPos.y + mouseOffsetY;
+    }
+
+    const onMouseUp_pic = () => {
+        //鼠标抬起后应该移出舞台移动事件，否则会重复添加事件
+        stage.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMove, this);
+    }
+
+    const onMouseDown_pic = (event: FYGE.MouseEvent) => {
+        //图片鼠标弹起事件，事件触发一次即移除，否则会重复添加鼠标弹起事件
+        pic.once(FYGE.MouseEvent.MOUSE_UP, onMouseUp_pic, this);
+
+        //添加舞台移动事件，鼠标移动即触发
+        //FYGE.MouseEvent.MOUSE_MOVE 会在鼠标移动过程中触发
+        stage.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMove, this);
+
+        //event事件对象
+        //event.stageX，event.stageY当前鼠标在舞台的位置
+        startPoint = { x: event.stageX, y: event.stageY };
+
+        picOriginPos = { x: pic.x, y: pic.y };
+    }
+
+    //增加鼠标按下事件
+    pic.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onMouseDown_pic, this);
+}

src/main.ts

-var canvas:any = document.getElementById("canvas")
+import { addDragDemo } from "./drag";
+
+var canvas: any = document.getElementById("canvas")
 canvas.width = document.body.clientWidth * 1
 canvas.height = document.body.clientHeight * 1
 var stage = new FYGE.Stage(
@@ -12,16 +14,15 @@ var stage = new FYGE.Stage(
     false
 )
 
-stage.addEventListener(FYGE.Event.INIT_STAGE, onInitStage, this);
-
- function onInitStage() {
+var mouseEvent = stage.onMouseEvent.bind(stage);
+canvas.addEventListener("touchstart", mouseEvent, false);
+canvas.addEventListener('touchmove', mouseEvent, false);
+canvas.addEventListener('touchend', mouseEvent, false);
 
-    const textfield = new FYGE.TextField();
-    textfield.fillColor = '#ff0000';
-    textfield.text = 'hello world';
-    textfield.size = 50;
-    stage.addChild(textfield);
+stage.addEventListener(FYGE.Event.INIT_STAGE, onInitStage, this);
 
+function onInitStage() {
+    addDragDemo(stage);
 }
 
 (function loop() {

tsconfig.json

 {
     "compilerOptions": {
         "outDir": "./dist/",
-        "noImplicitAny": true,
+        "noImplicitAny": false,
         "module": "es6",
         "target": "es5",
         "jsx": "react",
         "allowJs": true
-    },
-    "include": [
-        "src",
-        "defs"
-    ]
+    }
 }
\ No newline at end of file