橫板闖關遊戲中的角色移動

時間 2021-01-22

標籤 node 微信 this 3d code blog 遊戲圖片開發欄目遊戲简体版

原文原文鏈接

前言

在不少2D遊戲中，都會涉及到角色移動，跳躍等操做，最典型的就是橫板闖關遊戲。例如經典的魂鬥羅、三國戰紀等。這兩款遊戲在地圖移動和角色行走的方式中惟一的不一樣就是魂鬥羅是沒有縱深的那種。
node

看似簡單，其實涉及了地圖，攝像機移動，數學和物理的一些內容。微信

本片內容先介紹一下移動組件的定義，稍後的文章會一點點講解地圖、自定義攝像機等，最終應用到遊戲中，作成一個完整的demo。this

座標系

首先不得不說的一點，全部的移動都是依託座標系的。咱們這裏的座標系是以左下角爲原點，橫向向右爲x正方向，縱向向上爲y正方向，朝向屏幕的方向爲z正方向，也就是unity使用的左手座標系。而cocoscreator使用的是右手座標系，可是這個轉換是比較簡單的。
3d

移動組件的定義

首先列舉一下移動中都須要支持哪些功能code

上下移動: 對於不能夠上下移動的遊戲來講，z方向的速度始終爲0便可。
左右移動：x座標的變化。
支持兩個方向同時移動：當同時按下前上鍵時應該能夠向左前方移動。
移動速度定義：當某個方向有速度時，纔會向某個方向移動，站立狀態下，全部方向速度均爲0.
彈力：這個是爲了模擬球的落地彈起，實現並不要求那麼嚴格的。
摩擦力：這個是爲了模擬逐漸中止的效果。實現並不要求那麼嚴格。
是否受重力影響：對於一些不受重力影響的物理，能夠不作重力計算
是否啓用：只有啓用之後纔會進行移動計算。
在遊戲地圖中的座標：記錄角色當前在地圖中的位置。

import { DIR } from "../../cfw/tools/Define";
import PhysicalManager from "./PhysicalManager";
const { ccclass, property } = cc._decorator;

@ccclass
export default class MoveSystem extends cc.Component {

    @property({ displayName: '是否受重力' })
    g: Boolean = true;

    @property({ displayName: '是否啓用' })
    enable: Boolean = true;

    @property({ displayName: '速度' })
    speed: cc.Vec3 = cc.v3(0, 0, 0)
    // 彈力
    @property({ type: cc.Float, displayName: '彈力' })
    elasticity: number = 0;

    //摩擦力
    @property({ type: cc.Float, displayName: '摩擦力' })
    frictional: number = 1;

    @property({ type: cc.Float, displayName: '跳躍高度' })
    jumpHigh: number = 350;

    //左右移動方向
    protected moveXDir: DIR = DIR.RIGHT;
    //上下移動方向
    protected moveZDir: DIR = DIR.UP;
    //角色在地圖中的位置
    protected position: cc.Vec3 = cc.v3(0, 0, 0)

    start() {
        if (this.enable) {
            this.setEnable(true)
        }

    }
    onDestroy() {
        if (this.enable) {
            this.setEnable(false)
        }
    }

    setEnable(f: boolean) {
        this.enable = f;
        cc.log('MoveSystem setEnable f ', f)
        if (this.enable) {
            PhysicalManager.instance().add(this)
        } else {
            PhysicalManager.instance().remove(this)
        }
    }

    isEnable() {
        return this.enable;
    }
    setMoveXDir(d: DIR) {
        this.moveXDir = d;
    }

    getMoveXDir() {
        return this.moveXDir;
    }

    setMoveZDir(d: DIR) {
        this.moveZDir = d;
    }

    getMoveZDir() {
        return this.moveZDir;
    }


    getFrictional() {
        return this.frictional;
    }

    setGrictional(n: number) {
        this.frictional = n;
    }

    setElasticity(n: number) {
        this.elasticity = n;
    }

    getElasticity() {
        return this.elasticity;
    }

    isG() {
        return this.g
    }

    setG(f: boolean) {
        this.g = f;
    }
    getJumpHigh() {
        return this.jumpHigh;
    }
    setJumpHight(h: number) {
        this.jumpHigh = h;
    }
    addJumpHigh(h: number) {
        this.jumpHigh += h;
    }

    isJumping() {
        return this.speed.y != 0;
    }
    setX(x: number) {
        this.position.x = x;
    }

    setY(y: number) {
        this.position.y = y;
    }

    getZ() {
        return this.position.z;
    }

    setZ(z: number) {
        this.position.z = z;
        this.node.zIndex = -z
    }

    getX() {
        return this.position.x;
    }

    getY() {
        return this.position.y;
    }


    getSpeedX() {
        return this.speed.x;
    }

    setSpeedX(s: number) {
        this.speed.x = s;
    }

    setSpeedY(spy: number) {
        this.speed.y = spy;
    }

    getSpeedY() {
        return this.speed.y
    }

    setSpeedZ(z: number) {
        this.speed.z = z;
    }

    getSpeedZ() {
        return this.speed.z;
    }
}