【Cocos TypeScript 零基础 15.1】

devtools/2025/2/13 12:59:36/

目录

  • 见缝插针
    • UI脚本
    • 针脚本
    • 球脚本
    • 心得_旋转
    • 心得_更改父节点
    • 心得_缓动动画
    • 成品展示图

见缝插针

本人只是看了老师的大纲,中途不明白不会的时候再去看的视频
所以代码可能与老师代码有出入
SIKI_学院_点击跳转

UI脚本

typescript">import { _decorator, Camera, color, Component, director, instantiate, Label, math, Node, Prefab, tween } from 'cc';
const { ccclass, property } = _decorator;@ccclass('ts_ui')
export class ts_ui extends Component {static inthis : ts_uistatic getinthis() : ts_ui {return this.inthis}@property(Prefab) pin : Prefab = null@property(Node) cam : Node = nullpin_num : number = 0    //  是否生成pin@property(Label) ui_fen : Label = nullfen : number = 0@property(Camera) camera : Camera = null@property(Node) but : Node = nullstart() {ts_ui.inthis = thisthis.schedule(this.on_rate,1)this.on_fen(0)}update(deltaTime: number) {}on_rate(){if (this.pin_num == 1){return}  //  是否生成const p = instantiate(this.pin)this.cam.addChild(p)p.setPosition(0 , -640)this.pin_num = 1}on_fen(num : number){this.fen += numthis.ui_fen.string = this.fen.toString()}on_end(){this.but.active = truethis.on_anim()this.scheduleOnce(function(){director.pause()},1)}on_anim(){  //  结束缓动动画函数let new_col = new math.Color()new_col.r = 60new_col.g = 5new_col.b = 5new_col.a = 255tween(this.camera).to(1 , {orthoHeight : 450 , clearColor : new_col}).start()}on_reset(){director.resume()director.loadScene(`s1`)}
}

针脚本

typescript">import { _decorator, Collider2D, Component, Contact2DType, Input, input, Node } from 'cc';
import { ts_circle } from './ts_circle';
import { ts_ui } from './ts_ui';
const { ccclass, property } = _decorator;@ccclass('ts_pin_s')
export class ts_pin_s extends Component {move_sp : number = -2   //  -2刚生成时 -1等待发射 0发射 1完成碰撞start() {const col = this.getComponent(Collider2D)if (col){col.on(Contact2DType.BEGIN_CONTACT,this.on_bc,this)}   //  开启碰撞else {console.log(`针头 开启碰撞异常`)}input.on(Input.EventType.TOUCH_END , this.on_te , this)     //  开启触摸}on_bc (me : Collider2D , oth : Collider2D){console.log(`针头碰撞`,oth.name)if (oth.name == `Circle<CircleCollider2D>`){const pw = this.node.getWorldPosition()const rw = this.node.getWorldRotation()const cir = ts_circle.getinthis()this.node.setParent(cir.node)       //  更新父节点this.node.setWorldPosition(pw)this.node.setWorldRotation(rw)this.move_sp = 1const ui = ts_ui.getinthis()ui.pin_num = 0ui.on_fen(1)}if (oth.name == `Pin<BoxCollider2D>`){ts_ui.getinthis().on_end()}}on_te(){if (this.move_sp == -1){this.move_sp = 0}}update(deltaTime: number) {this.move(deltaTime)}move(deltaTime: number){if (this.move_sp >= 1){return}const pos = this.node.getPosition()if (this.move_sp == -2){if (pos.y <= -500){this.node.setPosition(pos.x , pos.y + deltaTime * 500)}      //  新生成速度else {this.move_sp = -1}}if (this.move_sp == -1){return}if (this.move_sp == 0){this.node.setPosition(pos.x , pos.y + deltaTime * 1000)}      //  发射速度}
}

move 函数处于性能考虑
应该在条件判断成立时 返回的,不应该多个IF轮流判定

球脚本

typescript">import { _decorator, CircleCollider2D, Collider2D, Component, Contact2DType, Input, Node } from 'cc';
const { ccclass, property } = _decorator;@ccclass('ts_circle')
export class ts_circle extends Component {static inthis : ts_circlestatic getinthis() : ts_circle {return this.inthis}start() {ts_circle.inthis = thisconst col = this.getComponent(Collider2D)if (col){col.on(Contact2DType.BEGIN_CONTACT,this.on_bc,this)}else {console.log(`球 开启碰撞异常`)}}on_bc(me : Node , oth : Node){console.log(`球 碰撞` , oth.name)}update(deltaTime: number) {this.node.angle += 2if (this.node.angle >= 360){this.node.angle = 0}}
}

心得_旋转

在这里插入图片描述
项目设置 > 功能裁剪 > 2D物理系统 > 内置2D物理系统
在不改内置的情况下

this.node.angle += 2    //  旋转角度速度

球旋转会卡住不动,取消刚体组件也可以使其正常旋转,但碰撞就会有点麻烦

心得_更改父节点

在变更父节点的时候,子节点的位置和角度会被重置
不想重置,就需要记录之前的位置和角度,更换后再设置回来

        if (oth.name == `Circle<CircleCollider2D>`){const pw = this.node.getWorldPosition()const rw = this.node.getWorldRotation()const cir = ts_circle.getinthis()this.node.setParent(cir.node)       //  更新父节点this.node.setWorldPosition(pw)this.node.setWorldRotation(rw)this.move_sp = 1const ui = ts_ui.getinthis()ui.pin_num = 0ui.on_fen(1)}

心得_缓动动画

还没有仔细研究,看了老师的视频,依葫芦画瓢
但看使用情况来看,以下是个人理解
tween 传入缓动组件
to 传入 1缓动执行时间 2组件需要缓动变更的属性
start 开始

    on_anim(){  //  结束缓动动画函数let new_col = new math.Color()new_col.r = 60new_col.g = 5new_col.b = 5new_col.a = 255tween(this.camera).to(1 , {orthoHeight : 450 , clearColor : new_col}).start()}

成品展示图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


http://www.ppmy.cn/devtools/158485.html

相关文章

算法很美笔记(Java)——树

性质 树 上面的性质因为两个结点由一条边连成 结点数目越多&#xff0c;算法复杂度越高 二叉树 结构 层次遍历 利用队列&#xff0c;弹一个&#xff0c;加N个&#xff08;队列里弹出一个元素&#xff0c;就把这个元素的所有孩子加进去&#xff09; 具体来说&#xff1a;指…

开发完的小程序如何分包

好几次了&#xff0c;终于想起来写个笔记记一下 我最开始并不会给小程序分包&#xff0c;然后我就各种搜&#xff0c;发现讲的基本上都是开发之前的小程序分包&#xff0c;可是我都开发完要发布了&#xff0c;提示我说主包太大需要分包&#xff0c;所以我就不会了。。。 好了…

Office/WPS接入DeepSeek等多个AI工具,开启办公新模式!

在现代职场中&#xff0c;Office办公套件已成为工作和学习的必备工具&#xff0c;其功能强大但复杂&#xff0c;熟练掌握需要系统的学习。为了简化操作&#xff0c;使每个人都能轻松使用各种功能&#xff0c;市场上涌现出各类办公插件。这些插件不仅提升了用户体验&#xff0c;…

19vue3实战-----菜单子树的展示

19vue3实战-----菜单子树的展示 1.实现目标2.实现思路3.实现步骤3.1新建config配置文件3.2封装组件3.3使用组件 1.实现目标 如上,以上效果的难点是“在表格里面实现树形结构”。可以用element-plus框架中的table作为辅助: 可以自己查看文档了解怎么使用。 2.实现思路 上面的…

深入浅出学算法030-兔子繁殖

题目描述 有一种兔子&#xff0c;出生后一个月就可以长大&#xff0c;然后再过一个月一对长大的兔子就可以生育一对小兔子且以后每个月都能生育一对。现在&#xff0c;我们有一对刚出生的这种兔子&#xff0c;那么&#xff0c;n个月过后&#xff0c;我们会有多少对兔子呢&…

HTTP 请求头、响应头常见字段分析

目录 请求头AcceptAccept-EncodingUser-AgentConnectionCache-ControlHost 响应头Content-EncodingETagContent-TypeVaryx-business-use-case-usageAccess-Control-Allow-Originfacebook-api-versionStrict-Transport-SecurityPragmaCache-ControlExpiresx-fb-request-id 和 x-…

【C】链表算法题7 -- 环形链表||

leetcode链接https://leetcode.cn/problems/linked-list-cycle-ii/description/ 问题描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到…

w206基于Spring Boot的农商对接系统的设计与实现

&#x1f64a;作者简介&#xff1a;多年一线开发工作经验&#xff0c;原创团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339;赠送计算机毕业设计600个选题excel文…