如何用Cocos Shader实现基础光照
开发环境：Cocos Creator 3.7.3 本文代码：https://github.com/foupwang/ShadersForCocosCreator 一 什么是光照 现实世界中，人能够看到物体，是因为光线照射在物体上，反射回我们的眼睛。例如：一个物体是绿色的，实际是因为这个物体会反射更多… 阅读更多 »如何用Cocos Shader实现基础光照
轻量级绘图库NanoVG使用简介
开源项目地址：https://github.com/memononen/nanovg 一 NanoVG NanoVG是一个跨平台、基于OpenGL的矢量图形渲染库。它非常轻量级，用C语言实现，代码不到5000行，非常精简地实现了一套HTML5 Canvas API，做为一个实用而有趣的工具集，用来构… 阅读更多 »轻量级绘图库NanoVG使用简介
分享：《如何让CocosCreator3.x引擎启动提速60%》源码
一 介绍 上篇文章《如何让CocosCreator3.x引擎启动提速60%》发布后，经常有朋友问源码在哪？所以这次把项目定制代码剔除掉了，剩下的都是通用代码开放出来，支持平台包括H5和微信小游戏。裁剪后引擎和demo源码的提取方法见文末。 为什么要做引擎裁剪呢？简单来说，是因为特定应用场景对包体和启… 阅读更多 »分享：《如何让CocosCreator3.x引擎启动提速60%》源码
WordPress统计插件wp-statistics升级失败的解决方法
升级WordPress统计插件wp-statistics失败，报错信息如下： Warning: chmod(): Operation not permitted in /alidata/www/phpwind/wp-admin/includes/class-wp-filesystem-direct.… 阅读更多 »WordPress统计插件wp-statistics升级失败的解决方法
如何让CocosCreator3.x引擎启动提速60%
背景 一个采用 Cocos Creator 3.4.2 引擎开发的3D游戏，除了主游戏外，还有一个精简版游戏。精简版运行在小游戏平台，功能非常简单，所以要求启动速度一定要快。 首先在Creator项目设置中仅留下 WebGL 1.0、基础3D功能、基础2D功能、用户界面、运行状态统计 这几个模块，其… 阅读更多 »如何让CocosCreator3.x引擎启动提速60%
Creator3.x引擎切场景时阴影内存泄漏的非官方补丁
一 现象 CocosCreator3.x引擎的场景中开启阴影后，例如阴影贴图使用的是2048*2048，则每一次切换场景都会引起36M(贴图16M+深度20M)的内存泄漏，而且是必现。 这个BUG在3.x引擎一直存在，从3.6开始才没有这个问题，但没有找到专门针对这个BUG的fix说明。因为项目用的… 阅读更多 »Creator3.x引擎切场景时阴影内存泄漏的非官方补丁
WebAssembly笔记(4)-JavaScript和C++的交互
一 JS调用C++函数 从JS中调用C++函数，需要把C++函数声明为导出，有好几种方法，本文采用最原始也是效率最高的方法，就是函数签名加上 EMSCRIPTEN_KEEPALIVE。 1.1 EMSCRIPTEN_KEEPALIVE 作用是告诉C++编译器这个函数会被用到，不要在“tree sha… 阅读更多 »WebAssembly笔记(4)-JavaScript和C++的交互
WebAssembly笔记(3)-编译和运行HelloWorld
本文演示把一个C/C++代码编译成WebAssembly格式文件，并在浏览器上运行。以 MacOS 12.3.1为例，步骤如下： 一 前置条件 Git。Mac系统默认已经安装； CMake。Mac中使用 brew install cmake 安装； 系统编译工具。Mac中安装 XCode 即可； P… 阅读更多 »WebAssembly笔记(3)-编译和运行HelloWorld
WebAssembly笔记(2)-从asm.js到wasm
随着Web网页的广泛发展，拥有JIT技术加持后，JavaScript的执行效率大幅提升，但由于解释型语言的特点，以及动态类型的天生缺陷，在某些CPU密集计算型的应用场景下，JavaScript的性能仍然力不从心。而且有大量C/C++等编译型语言的软件和库，也有着搬到Web上执行的需求，但如果全部用J… 阅读更多 »WebAssembly笔记(2)-从asm.js到wasm
WebAssembly笔记(1)-JavaScript的执行流程
WebAssembly可以让C/C++、Rust、Java、C#等多种高级语言编写的代码，在Web上以接近原生性能的方式运行，有越来越多的大型应用通过它跑在了网页上，例如：AutoCAD在线版、Figma在线版，还有在微信上支持运行Unity小游戏，底层的关键技术都是基于WebAssembly。 要… 阅读更多 »WebAssembly笔记(1)-JavaScript的执行流程
JavaScript中 instanceof 的实现原理
一 定义 标准的MDN定义：用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。 用简单通俗的话来说就是，判断左侧是否为右侧的实例化对象。 二 使用方法 使用格式为：a instanceof b。其中，左侧 a 为对象，右侧 b 必须为函数类型。 示例代码如下 ‘abc’ … 阅读更多 »JavaScript中 instanceof 的实现原理
如何修改Image或HTMLImageElement的src属性实现
Image是HTMLImageElement的封装类，或者说HTMLImageElement是Image的基类。在前端开发中，创建一个图像有时会使用如下代码。 let img = new Image(); … img.src = url; return img; 如果重写src的set操作，可使… 阅读更多 »如何修改Image或HTMLImageElement的src属性实现
CocosCreator3.x引擎的动态资源加载和释放方案
本文讲解CocosCreator3.x引擎的资源管理机制，提供一种动态资源的加载和释放方案，在3.3.2版本测试通过。 1 简介 Creator3.x引擎提供了一套基于引用计数的资源释放机制，简单说就是使用时计数加1，不用时计数减1，当计数为0时自动释放。通过引擎加载的资源，都会被临时缓存在 ass… 阅读更多 »CocosCreator3.x引擎的动态资源加载和释放方案
CocosCreator引擎中designSize、visibleSize、frameSize等属性的计算公式
1 简介 在使用CocosCreator引擎开发的过程中，如果需要做不同宽高比屏幕的适配或旋转，必定会接触到designSize、visibleSize、frameSize等不同属性，它们各代表什么意思？区别是什么？本文将解答这些问题，并总结这几个属性之间的推导公式。 2 定义 designSize… 阅读更多 »CocosCreator引擎中designSize、visibleSize、frameSize等属性的计算公式
CocosCreator3.0引擎的Android环境配置
参考Creator官方文档：https://docs.cocos.com/creator/3.0/manual/zh/editor/publish/setup-native-development.html 关键点如下： 1、Android SDK的 API Level 不要太高，最好选择API L… 阅读更多 »CocosCreator3.0引擎的Android环境配置
Egret引擎的RES.getResByUrl方法在微信小游戏平台的实现流程
一 如何适配微信小游戏平台 Egret引擎构建微信小游戏版本后，会在library目录下生成image.js文件，通过重写ImageProcessor类来适配微信小游戏平台，以代替默认的图片加载器。 示例代码如下。 const processor = new ImageProcessor(); RE… 阅读更多 »Egret引擎的RES.getResByUrl方法在微信小游戏平台的实现流程
Egret引擎启动流程和源码裁剪
最近因项目需要，对Egret引擎5.x版本的核心库做了一些裁剪，原因是游戏启动中有30-40%的时间都是在加载引擎代码，虽然Egret引擎自身已经很小巧，但为了缩短启动时间，还是删除了一部分用不上的引擎源码，力求更精简。 引擎源码对应的是安装目录下的src/egret文件，最终优化后的结果是，构建后… 阅读更多 »Egret引擎启动流程和源码裁剪
解决Egret引擎加载外部图片跨域问题
使用Egret引擎加载外部图片，有时会碰到跨域问题。除了要在服务器上配置资源允许跨域外，还需要Egret引擎允许跨域，否则texture无法在webgl上下文中渲染。 如下所示，在加载图片前增加一行代码就可以了。 egret.ImageLoader.crossOrigin = ‘anonymous’… 阅读更多 »解决Egret引擎加载外部图片跨域问题
使用ESLint检查JavaScript或TypeScript代码
一、简介 好的编码规范有助于我们写出清晰、明确、更容易维护的代码。 ESLint是一个JavaScript语法检查器，它可以根据预置或自定义的编码规范，自动检查代码语法，并输出检查结果，同时也支持TypeScript代码。 二、安装 先确保你电脑已经安装了 node 和 npm。 2.1 安装ESL… 阅读更多 »使用ESLint检查JavaScript或TypeScript代码
解决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-cli npm uninstall webpack… 阅读更多 »解决webpack打包报错：Error: Cannot find module ‘webpack-cli/bin/config-yargs‘