cocos creator 键盘监听事件 UI creama 组件的使用笔记

最新推荐文章于 2025-03-08 15:29:13 发布

nidekunji

最新推荐文章于 2025-03-08 15:29:13 发布

阅读量786

点赞数

CC 4.0 BY-SA版权

分类专栏： cocos creator js 文章标签：笔记 cocos creator 组件的使用

本文链接：https://blog.youkuaiyun.com/weixin_41475854/article/details/80834349

cocos creator 同时被 2 个专栏收录

5 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍了一个简单的游戏脚本实现方案，包括角色的左右移动、跳跃操作以及屏幕的自动跟随效果。通过监听键盘事件来控制角色的动作，并利用Cocos Creator的UI组件使相机能够平滑地跟随角色移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实现左右移动，空格跳跃，屏幕跟随主角

2.键盘监听事件,creama UI组件

3.记得开启碰撞引擎，绑到对应脚本就行了

cc.systemEvent.on(type, callback, target);

//hero.js

// 键盘,水平移动,左右// 跳跃为空给

cc.Class({
    extends: cc.Component,

    properties: {
       
    
    },

    // use this for initialization
    onLoad: function () {


        // 代码获取
        this.body = this.node.getComponent(cc.RigidBody);
        // end 
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.on_key_down.bind(this), this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.on_key_up.bind(this), this);

        this.input_flag = 0;
    },

    jump: function() {
        var v = this.body.linearVelocity;
        v.y = 600;
        this.body.linearVelocity = v;
    },

    // -1, 1
    walk: function(dir) {
        var v = this.body.linearVelocity;
        v.x = 300 * dir;
        this.body.linearVelocity = v;
        this.node.scaleX = dir;
    },

    on_key_down: function(e) {
        switch(e.keyCode) {
            case cc.KEY.left:
                this.input_flag = -1;
            break;
            case cc.KEY.right:
                this.input_flag = 1;
            break;
            case cc.KEY.space:
                this.jump();
            break;
        }
    },

    on_key_up: function(e) {
        switch(e.keyCode) {
            case cc.KEY.left:
                this.input_flag = 0;
            break;
            case cc.KEY.right:
                this.input_flag = 0;
            break;
            case cc.KEY.space:
            break;
        }
    },  

    // called every frame, uncomment this function to activate update callback
    update: function (dt) {
        if (this.input_flag !== 0) {
            this.walk(this.input_flag);
        }
    },
});
creama 主要是转换世界坐标，target 只跟随x

//creama.js

cc.Class({

extends: cc.Component, properties: { target: { default: null, type: cc.Node, }, }, onLoad: function () { }, update: function (dt) { if (this.target === null) { return; } // target到哪里, camera跟到哪里 var wpos = this.target.convertToWorldSpaceAR(cc.p(0, 0)); var pos = this.node.parent.convertToNodeSpaceAR(wpos); this.node.x = pos.x; }, });