CocosCreator3D微信小游戏入门RunningBall（四）：音效、远程加载图片资源

CocosCreator3D微信小游戏入门：RunningBall（四）

这一节主要完成几个细节的组件开发

CustomAudioSourceComponent

CocosCreator3D目前在音乐音效这块只提供了一个AudioSourceComponent组件，像我们熟悉的Creator2D中AudioEngine这些都没有开放出来。

且我们的ButtonComponent组件，它的点击事件的触发，是在触摸抬起时才触发的，如果我们想在抬起触摸时调用点击回调方法，在按下时就播放音效那就会比较麻烦了。

另外CocosCreator1.0.0还有个Bug，是在场景切换的时候，旧场景正在播放的音效并不会自动停止下来，并且在切换到新场景的时候还会把这些音效重新播放一遍，除非我们手动调用stop方法，但这样的话会使得我们的逻辑编写变得很复杂，同时也很麻烦

因此我做了这个CustomAudioSourceComponent组件，用来替代AudioSourceComponent组件，绕过这个麻烦的地方以及BUG

代码很简单

export class CustomAudioSourceComponent extends AudioSourceComponent {

	//是否需要在切换场景的时候，自动停止播放
    @property
    autoStopWhenSceneChange: boolean = false;

	//是否在按钮按下的时候自动播放音效
	//此功能需要将这个脚本和ButtonComponent组件挂在同一个节点上
    @property
    autoplayWhenClicked: boolean = true;

    start () {
        if (this.autoplayWhenClicked) {
        		//监听自身node节点上的TOUCH_START事件，当发生触摸时，播放音效
            this.node.on(SystemEventType.TOUCH_START, () => {
                this.play();
            }, this);
        }

        if (this.autoStopWhenSceneChange) {
        		//监听director对象身上的‘EVENT_BEFORE_SCENE_LAUNCH’事件
        		//当监听到这个事件时，停止播放
            director.on(Director.EVENT_BEFORE_SCENE_LAUNCH, () => {
                this.stop();
            } , this);
        }
    }

}

Director在运行新场景之前会触发EVENT_BEFORE_SCENE_LAUNCH事件，因此我们监听它就好了

这样就绕过了困扰我们的一些问题，同时使用起来也很方便

RemoteSprite

这是一个加载远程资源的脚本组件
代码如下：

@ccclass("RemoteSprite")
@requireComponent(SpriteComponent)
export class RemoteSprite extends Component {

    @property
    imageUrl: string = "";

    @property(Texture2D)
    defaultTexture: Texture2D = null;

    private _sprite: SpriteComponent = null;

    start () {
        this.updateDisplay();
    }

    setImageUrl (value: string) {
        this.imageUrl = value;
        this.updateDisplay();
    }

    updateDisplay () {
        this._sprite = this.node.getComponent(SpriteComponent);

        if (!this.imageUrl || this.imageUrl === "") {
            this._sprite.spriteFrame.texture = this.defaultTexture;
            return;
        }
        
        loader.load({url: this.imageUrl, type: 'png'},  (err: null | undefined | string, texture: ImageAsset) => {
            var tex = new Texture2D();
            tex.image = texture;
            this._sprite.spriteFrame.texture = tex;
        });
    }
}

这个组件需要与SpriteComponent组件同时使用，因此我们利用requireComponent装饰器来确保运行环境

这里与Creator2D有区别的地方主要是，如果加载远程图片，返回回来的资源类型不再是我们熟知的Texture2D或是SpriteFrame类型，而是ImageAsset类型。因此使用上和Creator2D还是有所区别的