开发记录

更新日期：2022-2-7

• 2022-2-7：移动相机，动画效果
• 2022-2-3：创建文档

开发中的一个2D示例

重力 cc.RigidBody2D

cc.RigidBody2D 受重力影响

Type设置成Dynamic，会受重力落下。设置成Static则不会落下。

碰撞 cc.PolygonCollider2D

加上这个组件后，可以选择Editing编辑碰撞边界。

左右移动脚本

控制节点左右移动，监听键盘按键事件

import { _decorator, Component, Node, input, Input, EventTouch, EventKeyboard, KeyCode, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Player')
export class Player extends Component {

    private curPos: Vec3 = new Vec3();

    horSpeed = 0; // 左右移动速度

    onLoad() {
        input.on(Input.EventType.KEY_DOWN, this.onKeyDown, this);
        input.on(Input.EventType.KEY_UP, this.onKeyUp, this);
    }

    start() {
    }

    update(deltaTime: number) {
        this.node.getPosition(this.curPos);
        this.curPos.x = this.horSpeed * deltaTime + this.curPos.x;
        this.node.setPosition(this.curPos);
    }


    onDestroy() {
        input.off(Input.EventType.KEY_DOWN, this.onKeyDown, this);
        input.off(Input.EventType.KEY_UP, this.onKeyUp, this);
    }

    onKeyDown(event: EventKeyboard) {
        switch (event.keyCode) {
            case KeyCode.KEY_A:
                this.horSpeed = -100;
                break;
            case KeyCode.KEY_D:
                this.horSpeed = 100;
                break;
        }
    }

    onKeyUp(event: EventKeyboard) {
        switch (event.keyCode) {
            case KeyCode.KEY_A:
                if (this.horSpeed < 0) {
                    this.horSpeed = 0;
                }
                break;
            case KeyCode.KEY_D:
                if (this.horSpeed > 0) {
                    this.horSpeed = 0;
                }
                break;
        }
    }
}

动画

准备几张图片，选定一个节点（或者预制体），制作动画效果

点击面板的「动画编辑器」

动画文件一般是.anim结尾

动画挂载在节点上，多个动画，需要设置clip数量

加载使用动画效果，会用到AnimationComponent

import { _decorator, Component, AnimationComponent } from 'cc';

var animCom = this.getComponent(AnimationComponent);
animCom.play('cowRight'); // 动画的名字

停止动画，会停在当前播放那一帧

import { _decorator, Component, AnimationComponent } from 'cc';

var animCom = this.getComponent(AnimationComponent); // 假设是当前节点
animCom.stop();

TiledMap

Tiled官网

Cocos Creator 配合Tiled地图的使用 - cnblog

tmx，图片文件，tsx，都放在一个目录下。这样比较简单。

相机

设置相机的范围

Canvas AlignCanvasWithScreen 取消

Camera OrthoHeight 设置数值小一点，让默认相机范围不能覆盖整个canvas

移动相机

private mCameraPos = new Vec3();
// --- 
const xGap = 70; // 以后这个再改成动态计算
const yGap = 60;
const self = this;
this.node.on(Input.EventType.TOUCH_START, function (event) {
    self.mainCamera.node.getPosition(self.mCameraPos); // 记录当前相机位置
}.bind(this));
this.node.on(Input.EventType.TOUCH_MOVE, function (event) {
    self.mCameraPos.x -= event.getDeltaX();
    self.mCameraPos.y -= event.getDeltaY();
    // 限制相机移动范围
    self.mCameraPos.x = Math.max(-xGap, self.mCameraPos.x);
    self.mCameraPos.x = Math.min(xGap, self.mCameraPos.x);

    self.mCameraPos.y = Math.max(-yGap, self.mCameraPos.y);
    self.mCameraPos.y = Math.min(yGap, self.mCameraPos.y);

    self.mainCamera.node.setPosition(self.mCameraPos);
}.bind(this));

本站说明

一起在知识的海洋里呛水吧。广告内容与本站无关。如果喜欢本站内容，欢迎投喂作者，谢谢支持服务器。如有疑问和建议，欢迎在下方评论~

📖AndroidTutorial 📚AndroidTutorial 🙋反馈问题 🔥最近更新 🍪投喂作者

Ads