木灵鱼儿
阅读:764
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译
问题起源
可能Cocos Creator软件的开发人员认为每个开发者都是有两个电脑屏幕的(苦笑);
它的脚本检测逻辑是:
当你改动完脚本文件后,切换到Cocos Creator面板,此时才会触发预览更新,如果你是双屏的话,就不用切换,一个屏幕打开Cocos Creator,一个屏幕打开vscode,然后vscode保存后就会自动更新,此时切换到浏览器预览,一切都是那么的正常,前提你得有两块屏幕。
非常蛋疼!!!这真是一个糟糕的体验!
如果我们是单屏,你vscode改动脚本保存后,还得切换到Cocos Creator软件上,然后再切到浏览器去查看,超恶心有没有,怎么会有这种体验,都2022年了,文件改动检测居然还得开发者主动去触发。
but!!你说官方没有给你解决这个问题,但是他有提供一个很莫名其妙的教程:《使用 VS Code 激活脚本编译》
他告诉你,windows用户需要先安装cUrl命令,然后再在Cocos Creator的顶部找到开发者选项 ---> Visual Studio Code工作流 ---> 添加编译任务;
点击后,啥反应没有,但是会在项目目录的.vscode
目录下,生成一个tasks.json
文件,其文件内容如下:
{
"version": "2.0.0",
"tasks": [
{
"label": "Cocos Creator compile",
"command": "curl",
"args": ["http://localhost:7456/asset-db/refresh"],
"type": "shell",
"isBackground": true,
"group": "build",
"presentation": {
"reveal": "always"
}
}
]
}
可能不同的电脑其端口会有不同。
然后我们在vscode中按下快捷键:ctrl + p
回车后,输入task CocosCreator compile
;此时就会触发脚本的重新编译,再去浏览器查看,预览项目就会自动刷新了。主要注意的是这不是常驻任务,是一次性的,也就是说,如果你再次改动了脚本,想要直接去浏览器查看,就得再来一遍。
但是!但是啊!我们需要的是自动检测文件改动并更新啊,都2022年,工程化处理这么薄弱吗???难道每改动一次就得来一遍ctrl + p
输入巴拉巴拉的命令吗?
我觉得是时候做出改变了!
教程
在以我们已经完成cUrl
命令安装和本地已经生成tasks.json
文件为前提下!!
在vsode插件市场查找插件:Run on Save
注意啊!是搜索结果的第二个插件哦!
不知道我也提供一下在线插件地址:Run on Save
安装它。
安装完后,在.vscode
目录下新增settings.json
文件,如果有这个文件就不用新建了。
往该文件插入一下内容:
{
"runOnSave.statusMessageTimeout": 3000,
"runOnSave.commands": [
{
// Match scss files except names start with `_`.
"match": ".*\\.ts$",
"command": "curl http://localhost:7456/asset-db/refresh",
"runIn": "terminal"
}
]
}
其中command
的内容中,那段http的地址,请自行去自己项目中的tasks.json
文件中,找到args
对应的那个地址,复制过来就行了。
此时,重启下vscode,我建议是重启,因为配置文件的更新不确定vscode能否动态检测到!
重启后,我们去改动项目的ts脚本文件,保存后就会触发预览项目的更新,建议是第一次预览再Cocos Creator面板中操作,然后剩下的脚本改动就正常使用了。
而上述配置的具体意思,其实还是很好理解的:
- match表示正则匹配的文件
- command 表示shell命令
- runIn 运行shell命令的程序,terminal表示使用vscode内置的。
- statusMessageTimeout 表示运行后命令展示的时间,我这里3秒后会自动关闭命令展示
还有更多可以自行查看插件文件,没多少,3分钟就看完了。
知道了这些配置,我们就可以新建更多的自定义文件监听了。
Save and Run
最近vscode更新之后上面那个软件无法正常使用了,不知道是不是个人原因,我又找了个新的插件 Save and Run
地址:Save and Run
使用方法也和上面那个差不多,安装成功后在tasks.json
中拿到地址,然后配置如下内容:
{
"saveAndRun": {
"commands": [
{
"match": "\\.ts$",
"cmd": "curl http://localhost:7456/asset-db/refresh",
"useShortcut": false,
"silent": false
}
]
}
}
具体解释直接去插件文档看吧,很简单。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
Cocos Creator 制作仿DNF血条优化版
前言看本文章前建议先看上一篇《Cocos Creator 制作仿DNF血条》,这样就会明白优化的处理有哪些了。上一章中,我们的血条它的逻辑是两条血条来回切换,包括颜色,宽度,层级,控制起来其实是非常不方便的, 逻辑也变得复杂了,而且没有考虑到秒杀的情况下血条的处理,所以这次根据同事提供的好主意我重新写了一版。教程原理我们可以将第二条血条作为一个固定的底色来控制,只有当第二条血没有的时候,我们将其设置白色的,这样每次血条width控制其实都在第一条上面。也就是说,血条的宽度控制其实一直是第一条在循环控制,扣完了马上切换成第二条的颜色,然后宽度设满,第二条的颜色变成第三条,直到没有血条了,第...

Cocos Creator 制作仿DNF血条
前言最近在想boss的血条制作,比较简单的就是单条血条,但是我想弄个想类似dnf那种,血条减完一条还有一条的那种,于是有了本篇文章预览图教程节点结构由于cocos原生没有这种血条,我们需要手动创建,我先通过两个单色精灵模拟血条的框架,大概就是一个大的节点里面包含一个小的节点,两个节点颜色不一致,里面的节点宽高都小4px,这样就模拟出边框的效果了。然后就是血条了,我的原理是通过两个血条节点进行来回替换实现的,当血量有两管血的时候,一开始就扣除时控制第一条血条的width,然后这是这个计算非常重要,它需要return出余值,当它存在余值的时候,说明还能扣血, 此时一瞬间将第一条置于第二条的底...

Cocos Creator 事件穿透
前言Cocos Creator 中可以通过挂载 BlockInputEvents组件来防止事件穿透,但是如果我们想让它能够事件穿透,官方的文档只字不提。这个需求也是有场景的,比如我们有两个元素,A和B,B会浮动到A上,从而导致click被B给挡住了,从而A事件无法触发了,这种场景在打地鼠游戏中是常见的。解决办法我们需要给挡住的那个元素添加允许事件穿透,用上面的例子,那就是需要给B节点添加一个事件穿透。import { _decorator, Component, Node } from "cc"; const { ccclass, property } = _deco...