植物大战僵尸(二)

  • 添加拖拽植物的按钮

    • 添加一个精灵,命名为SunFlower_Bar(前面的基本NGUI操作都做过了,这里就不详细写了)

    • 将如图两个选中,添加进去进新图集,名为Card

      植物大战僵尸(二)_第1张图片
      image
    • 选中SunFlower_Bar,更换精灵,调整位置和尺寸

      植物大战僵尸(二)_第2张图片
      image
    • 克隆另一个,改名为PeaShooter_Bar,调整下位置,更换精灵图片

      植物大战僵尸(二)_第3张图片
      image
    • 效果

      植物大战僵尸(二)_第4张图片
      image
  • 添加拖拽植物

    • 添加太阳花和豌豆射手的图集

      • 选中单头向日葵中的所有图片

        植物大战僵尸(二)_第5张图片
        image
      • 打开图集编辑器

        植物大战僵尸(二)_第6张图片
        image
      • 点击New

        植物大战僵尸(二)_第7张图片
        image
      • 点击Create

        植物大战僵尸(二)_第8张图片
        image
      • 保存名为SunFlower的图集

        植物大战僵尸(二)_第9张图片
        image
      • 同理,得到PeaShooter的图集

      • 效果

        植物大战僵尸(二)_第10张图片
        image
    • 创建拖拽植物的预设体

      • 创建一个精灵,命名为SunFlower

      • 更改精灵图片,调整尺寸

        植物大战僵尸(二)_第11张图片
        image
      • 添加Sprite Animation脚本,更改属性

        植物大战僵尸(二)_第12张图片
        image
      • 添加LW_DragDropItem脚本,拖给SunFlower

        植物大战僵尸(二)_第13张图片
        image
      • 双击打开脚本,并编辑

        植物大战僵尸(二)_第14张图片
        image
      • 勾选Clone On Drag

        植物大战僵尸(二)_第15张图片
        image
      • 选中SunFlower,克隆一个,改名为PeaShooter

      • 更换成豌豆射手的精灵图片

        image
      • 将SunFlower和PeaShooter拖到Resources文件夹下的Prefab文件夹下

        植物大战僵尸(二)_第16张图片
        image
      • 对应着脚本,做一些操作

        • 给所有的格子添加碰撞盒

          • 选中UI Root,添加空物体,命名为Cell

            植物大战僵尸(二)_第17张图片
            image
          • 给Cell添加碰撞盒,勾选Is Trigger,并调整大小

            植物大战僵尸(二)_第18张图片
            image
          • 效果

            image
          • 选中UI Root添加一个Grid,命名为Row1

            植物大战僵尸(二)_第19张图片
            image
          • 重置位置

            植物大战僵尸(二)_第20张图片
            image
          • 将Cell放到Row1中

            image
          • 选中Cell,再克隆八个

          • 选中Row1,点击Execute

            植物大战僵尸(二)_第21张图片
            image
          • 效果

            image
          • 按W,切换到移动模式,移动到最上边一行格子

          • 选中Row1,修改参数

            植物大战僵尸(二)_第22张图片
            image
          • 效果

            image
          • 克隆4次,改名为Row2,Row3,Row4,Row5,依次放下调整位置

          • 效果

            植物大战僵尸(二)_第23张图片
            image
        • 创建一个空物体,命名为RowAll,重置位置

        • 将所有的Row都放到这个RowAll中

          植物大战僵尸(二)_第24张图片
          image
        • 给所有格子添加标签

          • 随意点击一个游戏对象,点击属性面板的Tag,点击Add Tag

            植物大战僵尸(二)_第25张图片
            image
          • 点击加号,命名Cell,点击Save

            image
          • 输入Cell

            image
          • Ctrl+A全选

            植物大战僵尸(二)_第26张图片
            image
          • 更改Tag为Cell

            植物大战僵尸(二)_第27张图片
            image
        • 点击叉号

          image
      • 添加碰撞盒,修改碰撞和尺寸和精灵尺寸一样大

        植物大战僵尸(二)_第28张图片
        image
      • 克隆SunFlower,改名为PeaShooter,跟SunFlower同理

      • 效果

        植物大战僵尸(二)_第29张图片
        image
      • 拖到Prefab文件夹中,做成预设体

        植物大战僵尸(二)_第30张图片
        image
    • 让SunFlower的位置和PeaShooter的位置重合,SunFlower同理

      植物大战僵尸(二)_第31张图片
      image
    • 将SunFlower和PeaShooter设为透明,A值不能为0,否则视为没有此游戏对象

      植物大战僵尸(二)_第32张图片
      image
    • 效果,不显示前面的SunFlower和PeaShooter

      植物大战僵尸(二)_第33张图片
      image
    • 让植物,起初不播放动画,释放植物的时候播放动画

      • 起初将UI Sprite Animation脚本禁用掉,不播放动画

        植物大战僵尸(二)_第34张图片
        image
      • 在LW_DragDropItem中添加代码,当释放植物的时候,播放动画

        植物大战僵尸(二)_第35张图片
        image
  • 让豌豆射手发射子弹

    • 让SunFlower和PeaShooter分别放到SunFlower_Bar和PeaShooter_Bar中

      image
    • 选中PeaShooter,创建一个Sprite,命名为Pea

      image
    • 将pea图片添加到Card图集中

      植物大战僵尸(二)_第36张图片
      image
    • 选中Pea,更换精灵图片,点击Snap,恢复原始大小

      植物大战僵尸(二)_第37张图片
      image
    • 先将PeaShooter拖出来,透明度改为255,因为Pea是PeaShooter的子物体,所以如果PeaShooter透明,Pea也会透明,所以为了方便观察,先显示出来

    • 调整Pea相对于PeaShooter的位置

      植物大战僵尸(二)_第38张图片
      image
    • 在Scripts文件夹下新建PeaAI脚本

      image
    • 选中Pea,将PeaAI拖给Pea

      植物大战僵尸(二)_第39张图片
      image
    • 双击打开脚本,并编辑

      植物大战僵尸(二)_第40张图片
      image
    • 给PeaAI脚本赋值

      image
    • 在Scripts文件夹下创建PeaShooterAI脚本,并将脚本拖给PeaShooter

      植物大战僵尸(二)_第41张图片
      image
    • 双击PeaShooterAI脚本,编辑,实现时间间隔攻击

      植物大战僵尸(二)_第42张图片
      image
    • 给PeaShooter赋值

      植物大战僵尸(二)_第43张图片
      image
    • 将PeaShooterAI禁用

      植物大战僵尸(二)_第44张图片
      image
    • 将Pea禁用

      image
    • 当克隆豌豆的时候激活,在PeaShooterAI脚本中添加

      植物大战僵尸(二)_第45张图片
      image
    • 在LW_DragDropItem脚本中添加

      image
    • 但这只针对PeaShooter才有PeaShooterAI,如果是SunFlower则会报错,为了改错,所以增加一个PlantAI类,做为PeaShooter和SunFlower的父类,得到父类的脚本就是间接的得到了前面游戏对象的对应的子类的脚本

      image
    • 让PeaShooterAI类继承PlantAI

      image
    • 相应的增加一个SunFlowerAI类,让它继承PlantAI,把SunFlowerAI脚本挂在到SunFlower身上

      image
    • 将PeaShooter继续放回原位,透明度设为1

    • 在PlantAI中添加

      image
    • 更改脚本内容,判断豌豆射手所在的行号的出生点是否有僵尸出生

      植物大战僵尸(二)_第46张图片
      image
    • 修改一处错误,这两句移到括号里面,不然如果surface不是Cell标签,就会销毁拖拽的植物,然后继续对这个销毁的植物进行操作,会出现报错

      植物大战僵尸(二)_第47张图片
      image
    • 豌豆碰到僵尸,僵尸掉血直到死亡

      • 首先给豌豆和僵尸都添加碰撞盒

        • 因为Pea是PeaShooter的子物体,为了方便观察,所以把PeaShooter的透明度改为255,不透明

        • Pea设为可见

          image
        • 选中Pea,给豌豆添加碰撞盒,点击Is Trigger改为触发器,点击Edit Collider进行编辑

          植物大战僵尸(二)_第48张图片
          image
        • 可以在Scene视图中直接对豌豆的碰撞盒编辑

          植物大战僵尸(二)_第49张图片
          image
        • 将PeaShooter的透明度继续改回1

        • Pea设为不可见

          image
      • 给僵尸添加碰撞盒和刚体

        • 将Zombie的预设体拖到场景中,对其操作

        • 添加刚体(发生碰撞检测的条件:两个碰撞的物体都有碰撞盒且其中一个有刚体)

          植物大战僵尸(二)_第50张图片
          image
        • 勾选Is Trigger改为触发器,调整中心位置和尺寸

          植物大战僵尸(二)_第51张图片
          image
        • 让僵尸的碰撞盒和每个格子的大小差不多,不然会存在如果其他道路的子弹碰到当前道路的僵尸的碰撞盒也会触发的BUG

          植物大战僵尸(二)_第52张图片
          image
        • 修改完后,点击Apply给预设体应用当前的修改

          植物大战僵尸(二)_第53张图片
          image
        • 删除场景中Zombie

          image
      • 添加代码

        • 在zombieAI中添加受伤的方法

          植物大战僵尸(二)_第54张图片
          image
        • 找到Zombie预设体,赋值血量

          image
        • 找到PeaAI脚本,添加触发检测的代码

          植物大战僵尸(二)_第55张图片
          image
      • 增加僵尸死亡的精灵图片到僵尸图集中

        植物大战僵尸(二)_第56张图片
        image
      • 选中zombie,把原先自己写的zombieAnimaiton移除掉

        植物大战僵尸(二)_第57张图片
        image
      • 点击下面的Add Component,输入SpriteAnimation,点击之后添加,然后修改值

        植物大战僵尸(二)_第58张图片
        image
    • 僵尸碰到植物,植物掉血直到死亡

      • 添加僵尸吃的精灵图片到僵尸图集中

      • 选中Eat的图片,添加到僵尸图集

        植物大战僵尸(二)_第59张图片
        image
      • 找到PlantAI脚本,添加受伤的方法

        植物大战僵尸(二)_第60张图片
        image
      • 给豌豆射手和向日葵添加血量

        • 在PeaShooterAI脚本中的Start中添加

          image
        • 在SunFlowerAI脚本中的Start中添加

          image
      • 为了方便测试,把僵尸的血量改的大一些

        image
      • 修改zombieAI代码

        植物大战僵尸(二)_第61张图片
        image
      • 添加Plant标签,把SunFlower和PeaShooter的标签更换为Plant

        植物大战僵尸(二)_第62张图片
        image
      • 选中SunFlower和PeaShooter的碰撞盒的Is Trigger勾选上

        植物大战僵尸(二)_第63张图片
        image
      • 在LW_DragDropItem脚本中添加激活碰撞盒的代码

        植物大战僵尸(二)_第64张图片
        image
      • 到这里后,僵尸可以吃植物了,但植物死了还在播放吃的动画,且在原地不动

      • 继续在zombieAI中添加代码,让僵尸恢复行走状态

        植物大战僵尸(二)_第65张图片
        image

你可能感兴趣的:(植物大战僵尸(二))