Skip to content

开发记录

更新日期: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));

作者: rustfisher.com | rf.cs@foxmail.com
示例: AndroidTutorial Gitee, Tutorial Github
本文链接: https://www.an.rustfisher.com/cocos/creator/g/dev-2d-game/
一家之言,仅当抛砖引玉。如有错漏,还请指出。如果喜欢本站的内容,还请支持作者。也可点击1次下方的链接(链接内容与本站无关),谢谢支持服务器