Skip to content

入门案例 -- 小球撞墙

(1) 资源管理器 创建文件夹

  • Scenes 场景

  • Marerials 材质包

  • Scripts 脚本

  • Prefeb 预制体

(2) 对象

保存场景到 Scenes 文件夹

  • Ctrl+S 保存场景

平面

  • (1) 创建一个 3D 物体

创建一个 3D 物体--Plane 平面

属性面板里面设置 x:2 y:1 z:2

  • (2) 创建材质包绑定物体

在 Marerials 下面创建一个材质.起名叫做 Ground

在 albedo 选择颜色

拖动材质包到平面上面

  • (3) 物体上面加组件
  1. 碰撞器

摄像机

  • (1) 先重置

  • (2) 在依据自己的喜好设置位置和角度

  • (1) 创建一个 3D 物体

创建一个 3D 物体--Cube 立方体

属性面板里面设置 x:2 y:1 z:2

  • (2) 创建材质包绑定物体

在 Marerials 下面创建一个材质.起名叫做 Wall

在 albedo 选择颜色

拖动材质包到平面上面

  • (3) 物体上面加组件
  1. 碰撞器

  2. 刚体

  • (4) 把这个放到 Prefeb 文件夹下面

做成预制体

子弹

  • (1) 创建一个 3D 物体

创建一个 3D 物体-- Sphere 球体

  • (2) 创建材质包绑定物体

在 Marerials 下面创建一个材质.起名叫做 Bullert

在 albedo 选择颜色

拖动材质包到平面上面

  • (3) 物体上面加组件
  1. 碰撞器

  2. 刚体

  • (4) 把这个放到 Prefeb 文件夹下面

做成预制体

创建两个空节点

  • (1) 所有墙体的合计 把预制体都放在墙体的下面

  • (2) 制作子弹的空节点.把预制体子弹都放在这个下面

(3) 脚本

摄像机随着视角移动

  • Scripts 下面创建 Move.js 挂载到相机
js
import { _decorator, Component, Node, input, Input, EventTouch } from "cc";
const { ccclass, property } = _decorator;

@ccclass("Move")
export class Move extends Component {
  start() {
    input.on(Input.EventType.TOUCH_MOVE, this.TouchMove, this);
  }

  TouchMove(event: EventTouch) {
    const pos = event.getDelta(); // 因为移动是像素,但是位置是米。所以换算一下
    this.node.setPosition(
      this.node.position.x + pos.x * 0.05,
      this.node.position.y + pos.y * 0.05,
      this.node.position.z
    );
  }

  update(deltaTime: number) {}
}

销毁脚本

  • CommonDestroy.js 挂载到子弹和墙的预制体上面,然后保存
ts
import { _decorator, Component, Node } from "cc";
const { ccclass, property } = _decorator;

@ccclass("CommonDestroy")
export class CommonDestroy extends Component {
  start() {}

  update(deltaTime: number) {
    const pos = this.node.getPosition();
    if (pos.y < -10) {
      this.node.destroy();
    }
  }
}

玩法脚本

ts
import {
  _decorator,
  Component,
  Node,
  Prefab,
  input,
  Input,
  EventTouch,
  instantiate,
  RigidBody,
  Vec3,
} from "cc";
const { ccclass, property } = _decorator;

// 1. 生成子弹 挂载到节点 设置位置 给与速度

// 2. 触摸 移动开始,移动结束

// 3. 设置间隔时间

@ccclass("StartAction")
export class StartAction extends Component {
  // 判断移动还是没移动

  private _isMove: boolean = false;

  // 设置间隔时间
  private _interval: number = 1;

  // 设置总数
  private _timer: number = 0;

  // 获取子弹的父节点

  @property(Node)
  bulletParent: Node = null;

  // 获取子弹预制体

  @property(Prefab)
  bulletPrefab: Prefab = null;

  start() {
    input.on(Input.EventType.TOUCH_START, this._touchStart, this);
    input.on(Input.EventType.TOUCH_END, this._touchEnd, this);
  }

  _touchStart(event: EventTouch) {
    this._isMove = true;
  }

  _touchEnd(event: EventTouch) {
    this._isMove = false;
  }

  // 运动
  startAll() {
    let node = this.cloneNode();
    this.setSpeed(node);
  }

  // 1 克隆节点

  cloneNode() {
    let node = instantiate(this.bulletPrefab);
    node.setParent(this.bulletParent);
    return node;
  }

  // 2 设置速度

  setSpeed(node: Node) {
    // 设置位置
    node.setWorldPosition(this.node.position);
    let rgd = node.getComponent(RigidBody);
    rgd.setLinearVelocity(new Vec3(0, 0, -50));
  }

  update(deltaTime: number) {
    if (this._isMove) {
      this._timer += deltaTime;
      if (this._timer >= this._interval) {
        this._timer = 0;
        this.startAll();
      }
    }
  }
}