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‘
Chrome浏览器不能打开https网页的另类技巧
问题 有时候用Chrome浏览器打开一个https网页，会出现以下提示。 您的连接不是私密连接 攻击者可能会试图从 x.x.x.x 窃取您的信息（例如：密码、通讯内容或信用卡信息）。了解详情 NET::ERR_CERT_INVALID 解决 在当前页面用键盘输入 thisisunsafe ，不是在浏… 阅读更多 »Chrome浏览器不能打开https网页的另类技巧
本地搭建支持https的Web服务器
首先需要有Node.js环境。 1 安装 http-server 打开命令行窗口，进入项目目录，通过 npm 安装 http-server包 cd project npm install -g http-server 2 创建证书 通过 openssl 创建私钥和证书： openssl genrsa… 阅读更多 »本地搭建支持https的Web服务器
微信小程序/小游戏运行环境小结
1 运行环境 微信小程序分为逻辑层和渲染层，分别运行在各自的线程中。两个线程之间的通信经由微信客户端（Native）做中转，逻辑层发送网络请求也经由Native转发。 渲染层使用WebView进行渲染，逻辑层采用JSCore运行JS脚本。因为一个小程序可能存在多个界面，所以渲染层也可能有多个WebV… 阅读更多 »微信小程序/小游戏运行环境小结
CocosCreator屏幕适配小结
1 原理 CocosCreator引擎通过Canvas和Widget组件来适配不同分辨率的屏幕。 Canvas(画布)：可以随时获得设备的实际大小并对所有渲染元素进行缩放。 Widget(对齐组件)：能够将元素对齐父节点的不同参考位置。 设计分辨率：场景制作时使用的模版分辨率。 屏幕分辨率：设备运行… 阅读更多 »CocosCreator屏幕适配小结
解决mac系统全局安装提示权限问题
在Mac系统中，使用npm全局安装有时会报错，例如： npm install -g gulp 报以下错误 checkPermissions Missing write access to /usr/local/lib/node_modules/gulp npm WARN checkPermissio… 阅读更多 »解决mac系统全局安装提示权限问题
微信小游戏和小程序的区别
微信小游戏在小程序的基础上提供了WebGL接口的封装，使渲染能力和性能有大幅度提升。 和H5游戏相比 小游戏 = H5游戏 + (微信社交能力、文件系统、工具链) – (DOM、BOM、CSS、EVAL) 和小程序相比 小游戏 = 小程序 + (渲染、文件系统、多线程) – (多页面、WXSS、WX… 阅读更多 »微信小游戏和小程序的区别
使用Charles进行手机抓包
一 http抓包 1.1 安装Charles 在电脑上安装Charles，并且让手机和电脑处在同一网段。 1.2 打开 Charles 的代理功能 通过主菜单打开Proxy | Proxy Settings 弹窗，填入代理端口(端口默认为 8888)，勾选 Enable transparent HT… 阅读更多 »使用Charles进行手机抓包
M1 Mac如何安装Homebrew
目前brew还没有完全适配M1芯片的Mac系统，需要手动安装。 安装步骤 1、先创建安装目录 sudo mkdir -p /opt/homebrew 2、将目录属主改为当前用户，方便当前用户直接brew install软件 sudo chown -R $(whoami) /opt/homebrew … 阅读更多 »M1 Mac如何安装Homebrew
Unity Shader 笔记
1 渲染流水线 指的是CPU和GPU根据一系列的顶点数据和纹理等信息，最终转换成人眼可以识别的图像的过程。 1.1 渲染流程 《实时渲染》一书将渲染流程分成3个阶段：应用阶段、几何阶段、光栅化阶段。 1.1.1 应用阶段 这个阶段由CPU负责实现，应用准备好模型、光源等渲染数据，设置好材质、纹理、S… 阅读更多 »Unity Shader 笔记