Cocos Creater（3.6.1）开发笔记——Typscript

项目入门

关于cocos creator 3.x

相当于cocos所有版本的功能的综合，包含了成熟的2d和3d开发功能
其他的cocos版本还有

1. Cocos2 dx
2. CocosCreator 2.x
3. Cocos Creator 3.x

关于TypeScript

• javaScript能做的事情，TypeScript都能做
• TypeScript运行的时候会转为javascript，所以我们要了解javascript的核心机制
• 比如当我们打印一个TypeScript的class时，为什么会出现一串函数？
• 当我们使用TypeScript的时候，可能还要调用javascript

新建项目

VS setting json配置屏蔽项

{
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/*.meta": true,
        "library/": true,
        "local/": true,
        "temp/": true
    },

    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "build/": true,
        "temp/": true,
        "library/": true,
        "**/*.anim": true
    }
}

事件

节点添加脚本（事件）

案例代码

import { _decorator, Component, Input,  EventKeyboard, KeyCode, input, __private, director } from 'cc';

鼠标事件

    onLoad() {
        input.on(Input.EventType.MOUSE_DOWN, this.onMouseDown, this);
    }

    onMouseDown(){
		console.log('鼠标按下了')
    }

键盘事件

    onLoad() {
        input.on(Input.EventType.KEY_PRESSING, this.onKeyPressing, this);
    }

    onKeyPressing(NodeEventType: EventKeyboard) {
        var tank_player = this.node.getChildByName('tank_player')
        switch (NodeEventType.keyCode) {
            case KeyCode.KEY_A:
                console.log("left")
                tank_player.setPosition(this.x -= 3, null)
                break
            case KeyCode.KEY_D:
                console.log("right")
                tank_player.setPosition (this.x += 3, null)
                console.log(this)      //main_canvas
                break
            case KeyCode.KEY_W:
                console.log("top")
                tank_player.setPosition(null, this.y -= 3)
                break
            case KeyCode.KEY_S:
                console.log("down")
                tank_player.setPosition(null, this.y += 3)
                break

        }
    }

素材使用技巧

素材组合

固定布局（类似css）

添加组件