- 博客(204)
- 资源 (5)
- 收藏
- 关注
原创 Cocos插件:超强图片压缩(全自动图片压缩神器)
Cocos插件:超强图片压缩(全自动图片压缩神器)超强图片压缩(Creator 2.x版本) https://store.cocos.com/app/detail/6771超强图片压缩(Creator 3.x版本) https://store.cocos.com/app/detail/5438一 简介项目上线前,通常需要做包体优化,对包体影响最大的无疑就是图片资源,所以我们需要做图片压缩。但普...
2024-09-20 06:31:10 869
原创 CocosCreator插件推荐:H5版本分开部署
插件下载地址:https://store.cocos.com/app/detail/5709一 简介当游戏发布为H5版本时,我们通常是把整个web-mobile目录上传到服务器上,然后访问index.html即可。但有时侯运维会提出需求,希望把index.html放到运维人员维护的某个服(假定为A服),剩下的其它所有资源放到开发人员自己维护的服务器(假定为B服)。对这种分开部署方式,如果不做技术适...
2024-01-11 07:01:03 635
原创 如何用Cocos Shader实现基础光照
开发环境:Cocos Creator 3.7.3一 什么是光照现实世界中,人能够看到物体,是因为光线照射在物体上,反射回我们的眼睛。例如:一个物体是绿色的,实际是因为这个物体会反射更多的绿光波长,而吸收了其它波长。光线从光源发射出来后,和物体相交会有两种结果:散射和吸收。散射只改变光线方向,密度和颜色不变。而吸收只改变光线的密度和颜色,方向不变。光线经过物体表面散射后,有两种方向:1)散射到物体内...
2023-06-26 07:00:52 640
原创 Cocos Shader实现纹理的动态波浪效果
一 效果预览通过滑动条可调节波浪频率的快慢。二 实现原理对当前uv坐标进行线性+三角函数的混合变换,结合动态变化的时间值,得到一个新的采样坐标,使纹理呈现出动态、起伏不定的波浪形态。Shader中的关键代码如下。//得到波浪效果的新坐标vec2new_uv=wave(v_uv0)-wave(v_uv0+u_size);//2.0/u_size.x用来缩放波浪大小,控制水面形状...
2023-05-16 06:15:29 893
原创 Cocos Shader实现HSL和RGB颜色模型
HSL和RGB是两种常见的颜色模型,被广泛应用于计算机图形学、数字图像处理、Web设计等领域。在进行颜色处理时,经常需要将HSL和RGB相互转换,本demo演示如何通过Cocos Creator 3.7游戏引擎,用HSL模型来调节图片颜色,并详细介绍HSL和RGB互相转换的方法。一 效果预览色调(Hue)的取值范围是 (0, 360),饱和度(Saturation)的取值范围是 (-1, 1),亮...
2023-05-11 07:00:17 954
原创 分享:《如何让CocosCreator3.x引擎启动提速60%》源码
一 介绍上篇文章《如何让CocosCreator3.x引擎启动提速60%》发布后,经常有朋友问源码在哪?所以这次把项目定制代码剔除掉了,剩下的都是通用代码开放出来,支持平台包括H5和微信小游戏。裁剪后引擎和demo源码的提取方法见文末。为什么要做引擎裁剪呢?简单来说,是因为特定应用场景对包体和启动速度的极高要求,所以根据项目需求,在最小化引擎模块的基础上,对Creator 3.4.2引擎的源码进行...
2023-04-12 07:00:27 392
原创 如何让CocosCreator3.x引擎启动提速60%
背景一个采用Cocos Creator 3.4.2引擎开发的3D游戏,除了主游戏外,还有一个精简版游戏。精简版运行在小游戏平台,功能非常简单,所以要求启动速度一定要快。首先在Creator项目设置中仅留下WebGL 1.0、基础3D功能、基础2D功能、用户界面、运行状态统计这几个模块,其它的全部去掉。此时 Reelase 构建后,引擎自身文件cc.js是 2M 大小,在iPhone7手机上...
2022-11-29 07:00:44 1537
原创 WebAssembly笔记(4)-JavaScript和C++的交互
一 JS调用C++函数从JS中调用C++函数,需要把C++函数声明为导出,有好几种方法,本文采用最原始也是效率最高的方法,就是函数签名加上EMSCRIPTEN_KEEPALIVE。1.1 EMSCRIPTEN_KEEPALIVE作用是告诉C++编译器这个函数会被用到,不要在“tree shaking”的时候删掉,并且会将函数名加上前缀 _ 导出给 JS。另外还需加上 extern "C" 告诉 ...
2022-11-14 07:00:35 2117 1
原创 WebAssembly笔记(3)-编译和运行HelloWorld
本文演示把一个C/C++代码编译成WebAssembly格式文件,并在浏览器上运行。以 MacOS 12.3.1为例,步骤如下:一 前置条件•Git。Mac系统默认已经安装;•CMake。Mac中使用brew install cmake安装;•系统编译工具。Mac中安装 XCode 即可;•Python。安装 Python 2.7.x 或 Python 3.x 都可以,我的是 Pyth...
2022-11-13 22:29:18 611
原创 WebAssembly笔记(2)-从asm.js到wasm
随着Web网页的广泛发展,拥有JIT技术加持后,JavaScript的执行效率大幅提升,但由于解释型语言的特点,以及动态类型的天生缺陷,在某些CPU密集计算型的应用场景下,JavaScript的性能仍然力不从心。而且有大量C/C++等编译型语言的软件和库,也有着搬到Web上执行的需求,但如果全部用JavaScript语言重写,显然代价十分巨大。一系列原因催生出了WebAssembly技术的诞生,先...
2022-11-08 07:00:37 596
原创 WebAssembly入门(1)-JavaScript的执行流程
WebAssembly可以让C/C++、Rust、Java、C#等多种高级语言编写的代码,在Web上以接近原生性能的方式运行,有越来越多的大型应用通过它跑在了网页上,例如:AutoCAD在线版、Figma在线版,还有在微信上支持运行Unity小游戏,底层的关键技术都是基于WebAssembly。要了解WebAssembly,先从JavaScript的执行流程说起。一 JavaScript的执行流程...
2022-10-08 07:00:29 494 2
原创 CocosCreator3.x引擎的动态资源加载和释放方案
本文讲解CocosCreator3.x引擎的资源管理机制,提供一种动态资源的加载和释放方案,在3.3.2版本测试通过。1 简介Creator3.x引擎提供了一套基于引用计数的资源释放机制,简单说就是使用时计数加1,不用时计数减1,当计数为0时自动释放。通过引擎加载的资源,都会被临时缓存在 assetManager.assets,以便下次复用。不过这也会造成内存的占用和持续...
2022-05-10 07:00:00 4962
原创 CocosCreator引擎中designSize、visibleSize、frameSize等属性的计算公式
1 简介在使用CocosCreator引擎开发的过程中,如果需要做不同宽高比屏幕的适配或旋转,必定会接触到designSize、visibleSize、frameSize等不同属性,它们各代表什么意思?区别是什么?本文将解答这些问题,并总结这几个属性之间的推导公式。2 定义designSize视图的设计分辨率。运行中可通过以下代码获取:constdesignSize=...
2022-05-05 07:00:00 865
原创 CocosCreator引擎中designSize、visibleSize、frameSize的区别
1 简介在使用CocosCreator引擎开发的过程中,如果需要做不同宽高比屏幕的适配或旋转,必定会接触到designSize、visibleSize、frameSize等不同属性,它们各代表什么意思?区别是什么?本文将解答这些问题,并总结这几个属性之间的推导公式。2 定义designSize视图的设计分辨率。运行中可通过以下代码获取:const designSize = view.getDesignResolutionSize();这是开发者自己在CocosCreator中设定的尺寸,代表
2022-05-03 16:12:20 972
原创 Egret引擎启动流程和源码裁剪
最近因项目需要,对Egret引擎5.x版本的核心库做了一些裁剪,原因是游戏启动中有30-40%的时间都是在加载引擎代码,虽然Egret引擎自身已经很小巧,但为了缩短启动时间,还是删除了一部分用不上的引擎源码,力求更精简。
2021-12-06 23:06:11 3591
原创 微信小游戏和小程序的区别
微信小游戏在小程序的基础上提供了WebGL接口的封装,使渲染能力和性能有大幅度提升。和H5游戏相比小游戏 = H5游戏 + (微信社交能力、文件系统、工具链) - (DOM、BOM、CSS、EVAL)和小程序相比小游戏 = 小程序 + (渲染、文件系统、多线程) - (多页面、WXSS、WXML)...
2021-12-02 22:13:12 1227
原创 CocosCreator屏幕适配小结
1 原理CocosCreator引擎通过Canvas和Widget组件来适配不同分辨率的屏幕。Canvas(画布):可以随时获得设备的实际大小并对所有渲染元素进行缩放。Widget(对齐组件):能够将元素对齐父节点的不同参考位置。设计分辨率:场景制作时使用的模版分辨率。屏幕分辨率:设备运行时的屏幕显示的实际分辨率。假设设计分辨率的宽度为w1,高度为h1;屏幕实际分辨率的宽度为w2,高度为h2。那么当设计分辨率宽高比(w1/h1)小于屏幕分辨率宽高比(w2/h2) 时,说明实际屏幕更宽,
2021-11-03 23:46:28 3117 3
原创 Unity Shader 小结
1 渲染流水线指的是CPU和GPU根据一系列的顶点数据和纹理等信息,最终转换成人眼可以识别的图像的过程。1.1 渲染流程《实时渲染》一书将渲染流程分成3个阶段:应用阶段、几何阶段、光栅化阶段。1.1.1 应用阶段这个阶段由CPU负责实现,应用准备好模型、光源等渲染数据,设置好材质、纹理、Shader等渲染状态,然后输出为渲染所需的点、线、三角面等几何信息,即渲染图元,这些渲染图元将被传递给下一阶段–几何阶段。1.1.2 几何阶段这个阶段由GPU负责实现,处理绘制的几何相关事情,其中一个重要任务
2021-11-03 07:00:00 535
原创 3D游戏引擎小结
1 数学知识1.1 坐标系分为左手坐标系和右手坐标系两种,主要区别在于z轴的指向,z轴指向屏幕内的是左手坐标系,z轴指向屏幕外的右手坐标系。Unity和Direct3D使用的是左手坐标系,OpenGL使用的右手坐标系。法线和切线与椭圆有且仅有一个交点的直线,叫做椭圆的切线。二者公共点,叫做切点。经过切点且与切线垂直的直线,叫做该椭圆的法线。1.2 三角学整个圆周为360度(2π2\pi2π弧度),因此180度等于π\piπ弧度,约57.296度等于1弧度。三角函数sin和cos的参数以弧度为
2021-11-02 07:00:00 1969 2
原创 使用Charles进行手机抓包
1 安装Charles在电脑上安装Charles,并且让手机和电脑处在同一网段。2 打开 Charles 的代理功能通过主菜单打开Proxy | Proxy Settings 弹窗,填入代理端口(端口默认为 8888),勾选 Enable transparent HTTP proxying。3 手机端配置通过 Charles 的主菜单 Help | Local IP Address 可查看本机的 IP 地址,打开手机端的 WIFI 代理设置,输入电脑 IP 和 Charles 的代理端口。完成以
2021-11-01 07:32:13 14725 2
原创 微信小程序/小游戏运行环境小结
1 运行环境微信小程序分为逻辑层和渲染层,分别运行在各自的线程中。两个线程之间的通信经由微信客户端(Native)做中转,逻辑层发送网络请求也经由Native转发。渲染层使用WebView...
2021-11-01 07:00:00 4881
原创 VSCode插件CodeRunner直接运行TypeScript
1 简介在VSCode中编写的TypeScript代码不能直接运行,需要先用tsc编译为JavaScript,然后才能运行。有什么方法能直接运行TypeScript呢?使用VSCode插件Code Runner就可以了。2 使用步骤首先确保拥有Node.js环境。2.1 全局安装ts-node模块npm install -g ts-node2.2 安装Code Runner插件在VSCode插件商店搜索Code Runner,安装。2.3 运行运行TypeScript代码有好几种方式。
2021-11-01 06:55:02 1435
原创 setETC-一个自动化遍历Creator资源目录设置压缩纹理的脚本
1 功能简介目前 2.x 版本的Cocos Creator在设置压缩纹理格式时,需要一个一个资源去手动设置,对拥有成千上万个纹理资源的工程来说,这种操作显然不现实。本文代码的作用就是遍历Creator资源目录,自动化设置压缩纹理格式,并随时可以取消,恢复原始设置。2 代码代码里默认配置的是Android平台使用ETC1+A,iOS平台使用ETC2格式,转换选项都是slow,即质量最高压缩最慢。可根据需要自行修改const fs = require('fs');const path = requi
2021-02-25 23:44:06 580 1
原创 一个操作让游戏内存立减50+%-性能优化之压缩纹理
1 什么是压缩纹理在游戏中,纹理不仅占据大量的包体,也占据了大量的内存。传统的图片压缩格式(如JPEG、PNG等)虽能减少资源大小,但是不能被GPU直接识别,还是需要先加载到内存通过CPU解码,转换成RGB/RGBA等能被GPU识别的格式,才能传送到GPU进行渲染。为避免这些问题,压缩纹理,指的是一种针对GPU的纹理压缩方案,使纹理能够直接被GPU识别并进行渲染,它具有以下优点。无需CPU解码,节省了CPU运算,减少耗电量。纹理直接被传送到GPU,避免了内存占用,提高渲染性能。高效的压缩算法,减
2021-02-24 23:41:16 1566
原创 CocosCreator压缩纹理使用总结
如前文所说,和原始的PNG图片相比,压缩纹理在内存和包体上都有巨大的优势,但由于移动设备的硬件和OpenGL ES版本不同,目前还没有一种压缩纹理格式既能发挥优势,又能兼容所有设备,所以需要针对不同平台做定制。1 不同纹理的特点1.1 ETC1ETC1内存占用是PNG的1/4,文件大小是PNG的1-3倍(经过zip或打成apk后是PNG的1/2~1/3)。但是ETC1只能存储RGB信息,不适用带透明度的图片,为解决这个问题,Creator在ETC1文件中额外写入了透明度信息,即ETC1+A格式,所以占
2021-02-13 10:37:49 1340
原创 CocosCreator中png和etc纹理所占内存测试
1 PNG和ETC的加载区别1.1 PNGPNG是一种图片压缩格式,并不能被GPU直接识别,CPU把PNG图片读取到内存后,还需要在内存中解码,转换成GPU能识别的数据格式,然后传送给GPU渲染。整个过程所占内存是编码数据*1+解码数据*2,即原始PNG文件占一份,解码后的数据在内存和GPU各占一份。2.1 ETCETC是一种能被GPU直接识别的压缩纹理格式,CPU把ETC压缩纹理读取到内存后,无需解码,直接传送给GPU渲染。整个过程所占内存是压缩纹理数据*2。2 测试环境CocosCre
2021-02-05 00:47:06 2005
原创 webpack打包报错:Error: Cannot find module ‘webpack-cli/bin/config-yargs‘
报错 Error: Cannot find module ‘webpack-cli/bin/config-yargs’ 的原因是当前的 webpack 5.x 和 webapck-cli 4.x 有冲突,解决办法是:1、卸载当前的 webpack-clinpm uninstall webpack-cli -D2、安装 webpack-cli 3.* 版本npm install webpack-cli@3 -D...
2020-12-17 08:17:38 663 1
原创 使用ESLint检查JavaScript或TypeScript代码
一、简介ESLint是一个JavaScript语法检查器,它可以根据预置或自定义的编码规范,自动检查代码语法,并输出检查结果,同时也支持TypeScript代码。二、安装2.1 VSCode安装 ESLint 插件VSCode插件栏搜索 eslint 安装;开启eslint:在首选项的用户设置里搜索 formatOnSave,勾选上;2.2 安装ESLint先确保你电脑已经安装了 node 和 npm。假设要检验的项目目录是 test,进入 test 目录。$ npm init$
2020-12-02 22:59:52 4787
原创 JavaScript实现软件光栅化渲染器-如何画直线
在计算机屏幕上画直线碰到的第一个问题是:由于屏幕是一个由整数坐标表示的2D网格,因此要在屏幕上显示类似 (20.5, 30.3) 的点几乎是不可能的,只能采用近似值,例如,把点显示为 (...
2020-09-09 07:00:00 372
原创 JavaScript实现软件光栅化渲染器01-如何画点
项目代码:https://github.com/foupwang/JavaScript3DRenderer开发环境:VSCode+Chrome浏览器参考:《Windows游戏编程大师技巧》(第2版) /《3D游戏编程大师技巧》(André LaMothe)QQ交流群:1148938167(欢迎加入探讨图形渲染技术)整个项目跟平台相关的,只需要一个类似DrawPixel的绘制像素功能,其它的全部使用代码实现。因为是基于浏览器运行,所以我们使用网页Canvas的画点功能。1、新建一个DrawPoin
2020-09-08 21:25:24 369
原创 Shader实例02-动态水波纹
效果预览拖动滑动条可调节水纹波动频率的快慢。原理对当前uv坐标进行线性+三角函数等混合变换,结合动态变化的时间参数,得到一个新的采样坐标,产生图片折射扭曲效果,从而模拟动态水波纹特效。u...
2020-08-25 20:00:00 514
原创 Shader实例01-HSL转RGB
CocosCreator版本:2.3.4代码地址:https://github.com/foupwang/ShadersForCocosCreatorRGB和HSL(也叫HSB/HSV)是两种不同的色彩空间,RGB代表红(Red)、绿(Green)、蓝(Blue),HSL代表色调(Hue)、饱和度(Saturation)、亮度(Lightness或Brightness或Value)。RGB适用于机器采样,目前的显示器颜色都是由这三种基色构成;而HSL更符合人类的直观感觉,比如人表达一个颜色时会说:这个
2020-08-19 00:26:29 833
原创 JavaScript实现软件光栅化渲染器-前言
项目代码:https://github.com/foupwang/JavaScript3DRenderer开发环境:VSCode+Chrome浏览器参考:《Windows游戏编程大师技巧》(第2版) /《3D游戏编程大师技巧》(André LaMothe)QQ交流群:1148938167(欢迎加入探讨图形渲染技术)软件光栅化渲染器,是指用CPU(软件)实现GPU(硬件)绘图的功能。在现实环境中,因为OpenGL/Direct3D/游戏引擎的存在,我们基本接触不到光栅化过程中的细节,通过自己用纯代码实
2020-08-12 19:08:32 477
原创 Bresenham快速画直线算法(中文翻译+注释)
原文:https://www.cs.helsinki.fi/group/goa/mallinnus/lines/bresenh.html基本Bresenham算法考虑在光栅网格上绘制一条直线,这条直线的斜率是 0≤m≤10\leq m \leq 10≤m≤1。斜率定义:假设直线起点是(x1, y1),终点是(x2, y2),则斜率=(y2-y1)/(x2-x1)。如果我们进一步限制该绘制程序,使其在绘制时 x 值不断递增,那么很明显,在 (x, y) 处绘制一个点后,直线下一个点的位置范围非常有
2020-08-12 18:59:30 2444
原创 WordPress改为固定链接后不能访问的解决方法
以Apache服务器为例,打开httpd.config文件。1、确保以下这行是开启状态(即前面没有#号)LoadModule rewrite_module modules/mod_rewrite.so2、确保以下两处AllowOverride选项为All<Directory />Options FollowSymLinksAllowOverride All</Directory><Directory /var/www/html># … other d
2020-07-28 19:30:48 971 1
原创 用Jenkins构建Creator项目卡死的解决方案
Jenkins是个开源免费的自动化构建工具,通过简单的Web界面,支持一键轻松自动化打包/不同用户权限管理/自动触发构建。1、对于Creator 2.1.4及以下版本,只要在Windows的 控制面板->管理工具->服务 中为Jenkins服务指定一个本地管理员即可;(Windows系统有效)2、对于Creator 2.1.4以上版本,必须在Jenkins新建一个Agent节点,然后在Agent节点运行Creator构建命令就好了。Master和Agent可以是同一台机器,也可以是不同机器。
2020-07-20 21:21:45 2216
原创 Jenkins启动和停止的几种方式
浏览器访问方式假设Jenkins的访问地址是 http://localhost:8080。则只需在地址后加上相应命令即可。例如:关闭 http://localhost:8080/exit重启 http://localhost:8080/restart重新加载配置 http://localhost:8080/reloadLinux命令行方式停止 service jenkins stop开始 service jenkins start重启 service jenkins restart
2020-07-13 21:02:29 3419
原创 Jenkins的用户权限管理插件Role-based Authorization Strategy
随着Jenkins的使用深入,会发现需要给不同的用户配置不同的操作权限,虽然Jenkins也自带用户权限管理,但比较简单,不支持用户组和项目的划分,因此需要第三方插件来实现更精细的权限管理,使用比较广泛的是Role-based Authorization Strategy插件,可以满足所有关于用户和权限的管理需求。安装Jenkins插件管理中搜索Role-based Authorization Strategy进行安装。配置1、创建Jenkins用户Jenkins系统管理 -> 管理用户,先
2020-07-04 23:10:09 2318
原创 Jenkins的备份和恢复插件ThinBackup使用
ThinBackup是一个可以自动备份和恢复的Jenkins插件,使用简单又好用。安装Jenkins插件管理中搜索 ThinBackup 进行安装。备份Jenkins系统管理 -> ThinBackup -> Settings, 如下图所示。其中必填的两项是:Backup directory 这里的 /root/jenkinsBackup 代表备份路径。Backup schedule for full backups 这里的 H 13 * * 1-5 代表周一至周五每天的13点
2020-06-24 21:53:15 1369
原创 Jenkins和GitLab实现代码提交触发自动构建
利用GitLab的Webhook功能,可以实现当代码PUSH到仓库时,自动发送消息给Jenkins触发指定任务,从而节省人工操作,实现自动化构建。配置Jenkins1、安装插件Manage Jenkins -> 插件管理,安装GitLab Plugin和GitLab Hook Plugin两个插件。其中GitLab Hook Plugin插件很久没更新,Jenkins可能会提示风险漏洞,不介意的话忽略就好。2、配置GitLab凭据在Jenkins任务配置中,选择对应的GitLab凭据,如果没
2020-06-19 18:37:11 3512
fenbaoTest.zip
2020-04-03
protobuf-c#-3.4.0-win32.7z
2020-03-08
BestHTTP_1.11.0.7z
2020-02-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人