CocosCreator开发合成大西瓜(四)

205 阅读2分钟

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

上一篇,我们说了如何创建预制体,今天我们继续新的内容,如果在顶部产生新的元素,就是如果产生新的水果。

1. 显示顶部出现的元素  

(1)之前我们已经创建了一个block_show的节点,并且在该节点下创建了5个子节点 image.png

(2)在游戏开始前,我们是不是先隐藏该节点,然后通过代码再调用出来。接下我们就在脚本game上进行编辑。

  在game新增一个初始化的函数,并且让block_show节点先隐藏。

init(){      this.block_show.active=false }

  (3)要在start函数里调用init函数,这样就可以让游戏一开始运行时就隐藏block_show节点

    start() {        this.init() }  

2. 添加显示顶部元素的函数

(1)定义一个随机数,该随机数主要的作用是用来随机生成一个水果元素的类型。

    block_random: number;

  (2)在初始化时让随机数等于

`init(){

     this.block_show.active=false

     this.block_random=1 }`

`    //显示生成的元素块

    show_block(){

        this.block_show.active=true

        this.block_show.setPosition(0,530)

        this.block_show.parent=this.node

        let children=this.block_show.children

        for (let i = 0; i < children.length; i++) {

            if(children[i].name==this.block_random){

                children[i].active=true             }else{

                children[i].active=false

            }

        }

        tween(this.block_show)

        .to(0.1,{scale: new Vec3(0,0,0)})

        .to(0.1,{scale:new Vec3(1,1,1)})

        .delay(0.1)

        .start()     }`

(3)当然初始化函数也要加上调用该函数

        this.show_block() 

3. 控制顶出现在元素只能左右移动,不能上下移动,因此要在onTouchStart和onTouchMove函数上进行控制。

`   onTouchStart(event: EventTouch) {

       let v2_touchStart=event.getUILocation()         let v3_touchStart=this.node.getComponent(UITransform).convertToNodeSpaceAR(new Vec3(v2_touchStart.x,v2_touchStart.y,0))

          this.block_show.x=v3_touchStart.x

          this.block_show.parent=this.node     }

      onTouchMove(event: EventTouch) {

        let v2_touchStart=event.getUILocation()          let v3_touchStart=this.node.getComponent(UITransform).convertToNodeSpaceAR(new Vec3(v2_touchStart.x,v2_touchStart.y,0))

        // 修改 X 轴坐标

        this.block_show.setPosition(v3_touchStart.x,530);

         this.block_show.parent=this.node

    }`  

4. 接下来,我们添加一个函数专门用来生成水果元素的。参数说明i_type表示生成水果元素的类型,pos_touch表示生成水果元素的位置,can_scale是否缩放。

` //创建元素化

      crateBlock(i_type,pos_touch,can_scale){

        let node_block= instantiate(this.block_arr[i_type]) //实例化

        node_block.parent=this.node

          node_block.setPosition(pos_touch)

        let block_js= node_block.getComponent(block);

        block_js.init(i_type)

        if(can_scale){

            tween(node_block)

            .to(0.1,{scale:new Vec3(0.5,0.5,0.5)})

            .to(0.1,{scale: new Vec3(1,1,1)})

            .start()

        }

    }`

今天就到这里了,这个函数什么时候调用,我们下次再说。可能写的过程中还有很多不好的地方,希望大家能指出来,在此,谢谢大家