欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CocosCreator3D微信小游戏入门RunningBall(四):音效、远程加载图片资源

程序员文章站 2022-06-11 11:44:39
...

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还是有所区别的