从0开始用CocosCreator开发飞机大战小游戏(二)

194 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第9天,点击查看活动详情

上一次我们说了创建项目,菜单的背景,游戏标题,开始按钮等。今天我们继续。

1.上次说了外部编缉器的一些设置。今天说下按钮脚本的内容。

(1)用外部代码编辑器打开该脚本。添加一个点击函数,该函数主要作用是跳到game场景     onClicked(event:Event,cutomDate:string){         director.loadScene("game")     }

(2)关联脚本menu.ts,只需将脚本文件menu.ts拖动到右边即可,注意是选择Canvas image.png

(3)按钮关联该脚本上的函数。在start按钮节点上新增一个点击事件。 image.png

(4)选择Canvas下的menu下的onClicked函数,这样点击开始游戏按钮就可以跳转到game场景了。 image.png

2. 回到game场景,新建一个空节点,并且命名为background,在background下再新建两个Sprite(精灵),分别命名bg1,bg2。并且将背景图片资源关联到bg1,bg2。注意bg1和bg2用相同的图片背景资源。 image.png

image.png

3. bg2的position的y 设置为1280 image.png

4. 在script文件夹下新建一个backgroud.ts脚本。用来控制背景的循环移动。 image.png   5. 在update函数里处理背景循环移动。

    curPos:Vec3=null;

    bgSpeed:number=100

    update(deltaTime: number) {

        this.curPos=this.node.getPosition();

        this.curPos.y-=this.bgSpeed*deltaTime;

        if( this.curPos.y < - 1280){

            this.curPos.y=0          }

        this.node.setPosition(this.curPos)

    }

  6.在节点background上关联脚本backgroud.ts,只需将脚本backgroud.ts拖动到属性检查器上就可以了。这样背景循环移动这个功能就做好了。 image.png

7.添加角色,即添加飞机。在Canvas下添加一个Sprite(精灵),并且命名为play image.png

8. 节点play关联图片资源。这样角色就添加上去了。现在只是简单添加上去了,后面还要通过脚本控制飞机角色的移动 image.png 

今天就到这里了,主要说了背景的循环移动。下一次,再说怎样控制角色的移动。可能写的过程中还有很多不好的地方,希望大家能指出来,在此,谢谢大家