- 博客(203)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 CocosCreator插件推荐：H5版本分开部署
插件下载地址：https://store.cocos.com/app/detail/5709一 简介当游戏发布为H5版本时，我们通常是把整个web-mobile目录上传到服务器上，然后访问index.html即可。但有时侯运维会提出需求，希望把index.html放到运维人员维护的某个服（假定为A服），剩下的其它所有资源放到开发人员自己维护的服务器（假定为B服）。对这种分开部署方式，如果不做技术适...
2024-01-11 07:01:03
401
原创 如何用Cocos Shader实现基础光照
开发环境：Cocos Creator 3.7.3一 什么是光照现实世界中，人能够看到物体，是因为光线照射在物体上，反射回我们的眼睛。例如：一个物体是绿色的，实际是因为这个物体会反射更多的绿光波长，而吸收了其它波长。光线从光源发射出来后，和物体相交会有两种结果：散射和吸收。散射只改变光线方向，密度和颜色不变。而吸收只改变光线的密度和颜色，方向不变。光线经过物体表面散射后，有两种方向：1）散射到物体内...
2023-06-26 07:00:52
491
原创 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
690
原创 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
778
原创 分享：《如何让CocosCreator3.x引擎启动提速60%》源码
一 介绍上篇文章《如何让CocosCreator3.x引擎启动提速60%》发布后，经常有朋友问源码在哪？所以这次把项目定制代码剔除掉了，剩下的都是通用代码开放出来，支持平台包括H5和微信小游戏。裁剪后引擎和demo源码的提取方法见文末。为什么要做引擎裁剪呢？简单来说，是因为特定应用场景对包体和启动速度的极高要求，所以根据项目需求，在最小化引擎模块的基础上，对Creator 3.4.2引擎的源码进行...
2023-04-12 07:00:27
273
原创 如何让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
1220
原创 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
1855
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
515
原创 WebAssembly笔记(2)-从asm.js到wasm
随着Web网页的广泛发展，拥有JIT技术加持后，JavaScript的执行效率大幅提升，但由于解释型语言的特点，以及动态类型的天生缺陷，在某些CPU密集计算型的应用场景下，JavaScript的性能仍然力不从心。而且有大量C/C++等编译型语言的软件和库，也有着搬到Web上执行的需求，但如果全部用JavaScript语言重写，显然代价十分巨大。一系列原因催生出了WebAssembly技术的诞生，先...
2022-11-08 07:00:37
497
原创 WebAssembly入门(1)-JavaScript的执行流程
WebAssembly可以让C/C++、Rust、Java、C#等多种高级语言编写的代码，在Web上以接近原生性能的方式运行，有越来越多的大型应用通过它跑在了网页上，例如：AutoCAD在线版、Figma在线版，还有在微信上支持运行Unity小游戏，底层的关键技术都是基于WebAssembly。要了解WebAssembly，先从JavaScript的执行流程说起。一 JavaScript的执行流程...
2022-10-08 07:00:29
437
2
原创 CocosCreator3.x引擎的动态资源加载和释放方案
本文讲解CocosCreator3.x引擎的资源管理机制，提供一种动态资源的加载和释放方案，在3.3.2版本测试通过。1 简介Creator3.x引擎提供了一套基于引用计数的资源释放机制，简单说就是使用时计数加1，不用时计数减1，当计数为0时自动释放。通过引擎加载的资源，都会被临时缓存在 assetManager.assets，以便下次复用。不过这也会造成内存的占用和持续...
2022-05-10 07:00:00
4563
原创 CocosCreator引擎中designSize、visibleSize、frameSize等属性的计算公式
1 简介在使用CocosCreator引擎开发的过程中，如果需要做不同宽高比屏幕的适配或旋转，必定会接触到designSize、visibleSize、frameSize等不同属性，它们各代表什么意思？区别是什么？本文将解答这些问题，并总结这几个属性之间的推导公式。2 定义designSize视图的设计分辨率。运行中可通过以下代码获取：constdesignSize=...
2022-05-05 07:00:00
777
原创 CocosCreator引擎中designSize、visibleSize、frameSize的区别
1 简介在使用CocosCreator引擎开发的过程中，如果需要做不同宽高比屏幕的适配或旋转，必定会接触到designSize、visibleSize、frameSize等不同属性，它们各代表什么意思？区别是什么？本文将解答这些问题，并总结这几个属性之间的推导公式。2 定义designSize视图的设计分辨率。运行中可通过以下代码获取：const designSize = view.getDesignResolutionSize();这是开发者自己在CocosCreator中设定的尺寸，代表
2022-05-03 16:12:20
831
原创 Egret引擎启动流程和源码裁剪
最近因项目需要，对Egret引擎5.x版本的核心库做了一些裁剪，原因是游戏启动中有30-40%的时间都是在加载引擎代码，虽然Egret引擎自身已经很小巧，但为了缩短启动时间，还是删除了一部分用不上的引擎源码，力求更精简。
2021-12-06 23:06:11
3458
原创 微信小游戏和小程序的区别
微信小游戏在小程序的基础上提供了WebGL接口的封装，使渲染能力和性能有大幅度提升。和H5游戏相比小游戏 = H5游戏 + (微信社交能力、文件系统、工具链) - (DOM、BOM、CSS、EVAL)和小程序相比小游戏 = 小程序 + (渲染、文件系统、多线程) - (多页面、WXSS、WXML)...
2021-12-02 22:13:12
1104
原创 CocosCreator屏幕适配小结
1 原理CocosCreator引擎通过Canvas和Widget组件来适配不同分辨率的屏幕。Canvas(画布)：可以随时获得设备的实际大小并对所有渲染元素进行缩放。Widget(对齐组件)：能够将元素对齐父节点的不同参考位置。设计分辨率：场景制作时使用的模版分辨率。屏幕分辨率：设备运行时的屏幕显示的实际分辨率。假设设计分辨率的宽度为w1，高度为h1；屏幕实际分辨率的宽度为w2，高度为h2。那么当设计分辨率宽高比(w1/h1)小于屏幕分辨率宽高比(w2/h2) 时，说明实际屏幕更宽，
2021-11-03 23:46:28
2857
2
原创 Unity Shader 小结
1 渲染流水线指的是CPU和GPU根据一系列的顶点数据和纹理等信息，最终转换成人眼可以识别的图像的过程。1.1 渲染流程《实时渲染》一书将渲染流程分成3个阶段：应用阶段、几何阶段、光栅化阶段。1.1.1 应用阶段这个阶段由CPU负责实现，应用准备好模型、光源等渲染数据，设置好材质、纹理、Shader等渲染状态，然后输出为渲染所需的点、线、三角面等几何信息，即渲染图元，这些渲染图元将被传递给下一阶段–几何阶段。1.1.2 几何阶段这个阶段由GPU负责实现，处理绘制的几何相关事情，其中一个重要任务
2021-11-03 07:00:00
493
原创 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
1922
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
14559
2
原创 微信小程序/小游戏运行环境小结
1 运行环境微信小程序分为逻辑层和渲染层，分别运行在各自的线程中。两个线程之间的通信经由微信客户端（Native）做中转，逻辑层发送网络请求也经由Native转发。渲染层使用WebView...
2021-11-01 07:00:00
4598
原创 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
1251
原创 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
460
1
原创 一个操作让游戏内存立减50+%-性能优化之压缩纹理
1 什么是压缩纹理在游戏中，纹理不仅占据大量的包体，也占据了大量的内存。传统的图片压缩格式（如JPEG、PNG等）虽能减少资源大小，但是不能被GPU直接识别，还是需要先加载到内存通过CPU解码，转换成RGB/RGBA等能被GPU识别的格式，才能传送到GPU进行渲染。为避免这些问题，压缩纹理，指的是一种针对GPU的纹理压缩方案，使纹理能够直接被GPU识别并进行渲染，它具有以下优点。无需CPU解码，节省了CPU运算，减少耗电量。纹理直接被传送到GPU，避免了内存占用，提高渲染性能。高效的压缩算法，减
2021-02-24 23:41:16
1355
原创 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
1166
原创 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
1824
原创 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
571
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
4605
原创 JavaScript实现软件光栅化渲染器-如何画直线
在计算机屏幕上画直线碰到的第一个问题是：由于屏幕是一个由整数坐标表示的2D网格，因此要在屏幕上显示类似 (20.5, 30.3) 的点几乎是不可能的，只能采用近似值，例如，把点显示为 (...
2020-09-09 07:00:00
337
原创 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
324
原创 Shader实例02-动态水波纹
效果预览拖动滑动条可调节水纹波动频率的快慢。原理对当前uv坐标进行线性+三角函数等混合变换，结合动态变化的时间参数，得到一个新的采样坐标，产生图片折射扭曲效果，从而模拟动态水波纹特效。u...
2020-08-25 20:00:00
446
原创 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
754
原创 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
395
原创 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
2295
原创 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
904
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
2085
原创 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
3081
原创 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
2128
原创 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
1285
原创 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
3411
原创 Jenkins分布式部署到多台机器执行构建
Jenkins支持分布式部署，即主节点和子节点可以分布在不同的网络环境中，节点之间通过长链接通信。例如，Jenkins主节点在外网，随时随地可以访问，两个子节点在内网，一台Windows机器构建app的安卓版本，一台iMac机器构建app的iOS版本。本文演示如何添加一个子节点。新建节点1、Manage Jenkins -> Manage Nodes and Clouds -> 新建节点，节点名称自定义，例如：Agent1，点击确定。2、开始配置节点信息。其中远程工作目录，就是子
2020-06-16 21:10:09
4272
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关注的人