纹理贴图集是一个 JSON 数据文件，其中包含子图像在雪碧图上的位置和大小。如果你使用纹理贴图集，你只需要知道子图像的名字。您可以按任意顺序排列雪碧图， JSON 文件将为您跟踪它们的大小和位置。...TexturePacker介绍 本人是在学习pixi的路上遇到了纹理贴图集，本文将介绍纹理贴图集的一款生成工具：TexturePacker 此软件有免费使用的功能，但是一些功能需要进行付费使用。...TexturePacker简单使用 因为我是为了pixi.js来使用的，所以直接看PixiJs的教程就可以啦。 官网上的教程是英文的，但是其实比较简洁，大家翻译工具翻译一下也不会有什么出错。...在右侧的输出文件选项中，可以选择你需要的配置，我使用的是pixi.js。当然其他的像unity这些软件的配置也都有。输出文件格式是json格式。之后点击发布精灵表即可。...你只需要知道sprite精灵的帧id（frame id），然后在pixi.js的使用过程中，根据帧id调用这些精灵来进行布局即可。 又一次新的工具和知识get了！
Parcel 内置支持 JS、CSS、HTML、文件资产等等，这不需要插件，对用户会更加友好； 零配置，内置了 code splitting、热模块加载、CSS 预处理、开发服务器、缓存等等； Parcel...Parcel简单使用 Parcel 的安装非常简单直接。...npm install parcel-bundler --save-dev Parcel的入口可以是html或者js文件 dev方式 parcel index.html parcel的hmr（热替换）也是很快的...build方式 parcel build index.js 也可以加参数指定构建路径： parcel build index.js -d build/output package.json文件里配置后可以使用...如果你是使用的全局安装的parcel-bundler，可能在构建vue项目时出现上面的错误 问题很明确，找不到该模块，只需要执行npm i --save parcel-bundler在项目里安装后再parcel
本文将为工友们介绍PixiJS的基础知识和使用方法，希望可以和工友们**快速光速入门**，掌握 Pixi.js 的用法。 实际工作中我还没有用上 Pixi.js，本文只是记录我的学习过程。...本文使用 Pixi.js 7.2 版本 CDN 本文为了和各位工友一起快速上手 Pixi.js ，所以会使用 CDN 的方式引入 Pixi.js。...图片 在 Pixi.js 里，加载图片资源需要做以下操作： 加载图片纹理 将纹理放入“精灵”对象 将“精灵”添加到画布中 // 创建画布 let app = new PIXI.Application(...(sprite) 使用 PIXI.Texture 方法加载图片纹理，但这个方法前面是不需要 new 的，这点要注意！...文本纹理 我们还可以使用图片作为文本的纹理。
H5动画/游戏 - 伴侣们 Three.js Three.js 是被广泛了解的开源项目，他是基于 JS 的 3D 库，我们可以依赖他完成炫酷的3D展示效果。...(当然，更深入的了解和更好的使用也需要你对 WebGL 的基础)。.../感想 图片超时处理: PIXI 的图片加载是使用 new Image()， 再触发 img.onload 的时候才会执行事件，如果我们没有显性处理 err 的情况， 就会一直处在等待状态不继续； 资源拆分...引入 JSON 文件，pixi-spine 会读取文件之后转化为 js 对象等待被调用，因此对可按需再加载的部分进行拆分，有利于减少js的工作量及占用的内存，也能提高访问的初始速度 独立到 DOM: 不管是用...WebGL进行渲染时，纹理图占用的是 GPU 内存，在确定这些纹理不在被使用时，我们可以手动执行 PIXI 的 dispose 方法主动释放纹理，保证当前占用的 GPU 中不包含多余纹理； 最后 几乎
：性能和配置经验，作者开始研究 Parcel 简介 Parcel 是一个Web应用程序 打包器(bundler) ，与以往的开发人员使用的打包器有所不同。...在需要时使用 Babel，PostCSS 和 PostHTML 自动转换模块 - 甚至是node_modules。 ✂️ 零配置代码分割使用动态import() 语句。 ? 内置支持热加载 ?...安装 可以使用yarn 或 npm安装 Parcel yarn global add parcel-bundler yarn init -ynpm install -g parcel-bundler npm.../index.js"> 转换 尽管许多 打包器(bundler) 都要求你安装和配置插件来转换资源，Parcel 内置许多常用的转换和转译器，让你开箱即用...这使您可以将你的应用程序代码拆分为可以按需加载的独立包，这意味着更小的初始包大小和更快的加载时间。 当用户在应用程序中浏览模块并需要加载时，Parcel 会自动负责按需加载子包。
你可以使用 tilePosition.x 和 tilePosition.y 属性来移动平铺精灵使用的纹理。以下是如何将平铺精灵使用的纹理移动30像素。...你还可以使用 tileScale.x 和 tileScale.y 属性更改平铺精灵使用的纹理的比例。...如果你想改变一个精灵的色调而不完全改变它的纹理，就使用着色。 蒙版 Pixi 允许你使用 Graphics （图形）对象来屏蔽任何精灵或具有嵌套子精灵的容器。...: true, resolution: displayResolution } //创建一个 Pixi应用 let app = new PIXI.Application(option); 然后根据设备像素比选择正确的图像加载到纹理中..."); } let anySprite = new PIXI.Sprite(texture); 如果你需要知道加载纹理的设备像素比是多少，可以使用 texture 的 baseTexture.resolution
Pixi 精灵没有自己的状态播放器，但你可以使用 SpriteUtilities 库中的 sprite 的方法，该方法将创建一个内置状态播放器的精灵。...SpriteUtilities 库的使用上一篇提到过了，可以看 学习 PixiJS — 动画精灵 这篇文章。 sprite 定义： 使用 sprite 函数制作任何类型的 Pixi 精灵。...= su.sprite(frameTextures, xPosition, yPosition); 参数： 第一个参数 frameTextures 可以是以下任何一个： 一个 PNG 图像字符串 一个Pixi...纹理对象 纹理图集帧 id 数组 一个 PNG 图像字符串的数组 一个 Pixi 纹理对象数组 如果你为 sprite 方法提供一个数组，它将返回一个动画精灵，这个动画精灵会内置了一个状态播放器。...你还可以使用 Shoebox 等工具将 Flash 的 SWF 文件格式转换为纹理图集。 Piskel 是一个免费的在线工具，用于制作像素风格的动画游戏角色。
和其他 PixiJS 模块一样，虽然它的功能很强大，但使用起来还是有些骨感。对于日常开发还需要将其做一些封装和完善，改造为更方便的开发模式来使用。...} from 'pixi.js'; import { Sound } from '@pixi/sound'; /** 资源总包 */ export class AssetsPacks { /**...按捆绑包加载 不过相比之下，我们还是推荐使用 Assets.loadBundle() 以发挥出 Pixi.Assets 的优势。...静态类 这里我们在自己项目中来实现一个和 Pixi.Assets 一样的静态类对象：使用前不需要实例化，项目内共享同一个静态实例。...} from 'pixi.js'; import { AssetsManager } from '.
,强烈建议使用node8.0以上。...install 其中parcel-bundler是主要的工具，对于vue结尾的单文件，需要单独处理文件类型， parcel-plugin-vue这个插件会通过vueify来生成对应的代码，parcel...会自动加载parcel-plugin开头的依赖。...├── index.js ├── index.js ├── app.vue ├── index.js 只需要执行npm run dev 和 npm run build 就可以进行开发和构建.../views/HelloWorld/HelloWorld.vue' // 此种方式引入即可实现路由懒加载,打包时js文件自动拆分 const HelloWorld = () => import('..
又有一个打包器（bundler）/ 构建工具？...Parcel 内置支持 JS、CSS、HTML、文件资产等等，这不需要插件，对用户会更加友好； 零配置，内置了 code splitting、热模块加载、CSS 预处理、开发服务器、缓存等等； Parcel...Parcel 的错误处理 那么，我们该何时使用 Parcel、Webpack 或 Rollup 呢？...接下来，我们快速看一下 Parcel。 安装 Parcel 的安装非常简单直接。 我们在本地安装了 parcel-bundler npm 包，现在我们要初始化一个 node 项目。...Vue 接下来，是一个使用 Vue 的样例。 首先，安装和，其中后者是用来支持组件的。 我们需要添加根元素，导入 vue index 文件并初始化 vue。
GitHub : https://github.com/parcel-bundler/parcel Vue 鼎鼎大名,自不多言。...vue init webpack vue-parcel-demo 使用 vue 脚手架生成 webpack 模板 ? Project name vue-parcel-demo ?...README.md（可以重写） 进入文件夹下，执行 yarn init （配置默认即可） 安装依赖 yarn add parcel-bundler vue vue-router --dev parcel-plugin-vue...parcel-bundler/parcel @1.7.0 support Vue Now....Parcel 使用 runtime-only, 修改 main.js 中内容为 Runtime-only 形式 render: h => h(App) 即可。 后记 = =，意外的访问量很高。
(bundles)分拆，因此你只需要在初次加载时加载你所需要的代码。...新建 index.html、index.js 和 index.css，然后 parcel index.html，就能拿到可运行的 html、js 和 css 组合。...esbuild为什么不用Rust，而使用了Go?bundler 这种事情，GC 未必是劣势。写一个打包工具，大部分的工作是字符串拼接和图遍历。对于图数据结构，GC 是一个很好的辅助工具。...这意味着它需要重写 js、ts、jsx、json 等资源文件的加载、解析、链接、代码生成逻辑。...还有如果您想使用无须额外设定的Meta-frameworks，那么您最好继续使用基于webpack 的框架，例如Nuxt.js，Next.js 直到Vite 的伺服器端渲染功能更完整。
本文主要跟大家一起来探讨一下Cocos Creator小游戏开发过程中内存优化、性能优化和包体优化。...这里面的原理是，当Creator使用DOM的Image对象去加载一个图片资源的时候，微信底层的引擎会解码图片数据，同时往GPU上传一份纹理，然后引擎的Sprite在渲染的时候会使用这个DOM Image...使用 Image.scr = '' 可以释放掉GPU里面多出来的一份纹理，同时也会释放CPU端解码的纹理内存。...5、如果使用物理引擎，可以把物理引擎的step间隔调大。 6、优化节点树，减少节点数量。 7、场景中不要挂载过多的Prefab，可适当将一些Prefab变成动态加载的。...3、不需要动态加载的图片资源不要放到resources目录，放到此目录的资源在构建导出的时候，会生成资源映射关系到Settings.js中，会导致该Settings.js文件变大。
Phaser同时支持Canvas和WebGL渲染引擎，预置了完备的精灵动画、输入 管理、瓦片地图、补间动画、资源加载器、物理系统、粒子系统等特性，几乎能够 满足你开发一个2D游戏的任何需求： ?...Phaser框架的绝大部分功能，都打包在单一phaser.js文件中。...我们只需要 在宿主HTML文件中引入这个框架文件，就可以开始使用Phaser： 几乎所有的框架API，都定义在Phaser命名空间之下...和webgl。...Pixi的Canvas渲染器 Phaser.WEBGL：使用Pixi的WebGL渲染器 Phaser.WEBGL_MULTI：使用Pixi的WebGL渲染器，并启用多纹理支持模式 Phaser.HEADLESS
1）静态图集 2）动态图集（包括文字） 3、prefab优化 4、代码体积 5、资源纹理压缩 6、减少try catch的使用 7、垃圾回收 8、减少 Mask 组件数量 9、借助cocos插件三、性能优化过程...配置完成后可以预览打包结果，包括已打包的图集和未能打包的碎图。在构建项目时，自动图集资源会生成真正的图集文件。...好处：自动图集资源的使用可以减少渲染调用次数、纹理切换次数，降低内存占用，提高纹理压缩效果，从而优化应用程序的性能，提升用户体验。特别是在移动设备等资源受限的环境下，自动图集资源的优化效果更为显著。...好处：提升加载性能这个也需要我们根据实际的使用情况进行选择。...后查看cocos2d-js-min.js体积。引擎：把不要的模块去掉就可以，需要知道哪些模块是占体积多的。物理引擎，能不用的模块，就不用。
通过geocoder使用 Google 地图 API 访问位置数据。 将 Tableau Public 用于可视化。...Blazing fast, zero configuration web applic… JavaScript parcel-bundler parcel Parcel Organization NaN...Blazing fast, zero configuration web applic… 13981 463 JavaScript parcel-bundler Parcel Organization...Blazing fast, zero configuration web applic… 13981 463 JavaScript parcel-bundler Parcel Organization...Blazing fast, zero configuration web applic… 13981 463 JavaScript parcel-bundler Parcel Organization
Deno 和 Next.js 都使用了 SWC 作为编译器。 esbuild esbuild是一个极快的 web 打包工具，使用 go 语言编写。...bun bundler bun 对 JavaScript 模块的打包有原生的支持（官方的 benchmark 中比 esbuild 要快很多）。...parcel 2.0 版本使用了 swc 作为编译器，速度快了很多。...vite vite是一个新兴的前端构建工具，在开发时使用 HMR 技术实现秒级的热更新，编译时使用 esbuild 和 Rollup 进行编译与打包，速度非常快。...前端框架（React.js 生态） next.js next.js是一个 React 框架，提供了 SSR、SSG、CSR 等多种渲染模式，同时提供了很多优秀的功能，比如图片优化、代码分割、预取、预加载
为什么选择TensorFlow.js,因为有两个很关键的优点： 可以加载TensorFlow和keras预训练好的模型，这个是必须的，因为直接在网页上进行训练的速度是比较慢的，我们可以利用在GPU端的TF...无缝和webGL结合，webGL是浏览器的图像加速协议，可以借助主机上的显卡对浏览器进行相应的图像加速，这样我们就可以在浏览器上使用显卡来进行训练和预测了。...通过parcel打包执行 如果想要将我们设计好的神经网络应用打包到web应用中，那样应该会很有趣，这里我们简单利用parcel对TF.js进行简单的打包。...安装TensorFlow.js:npm install @tensorflow/tfjs 安装parcel打包工具npm install -g parcel-bundler 初次使用parcel时，会生成一个...我们可以看到parcel的watch和build命令。
2、Texture2d 的配置（下文简称【配置2】）：主要定义纹理相关属性。 上图显示，有两个属性配置（WarpMode, FilterMode）会使我们使用图片和修改配置上更灵活。...合并图集中的 SpriteFrame 将图集中的全部 SpriteFrame 合并到同一个包中。...优化前后，iphone6 测试的加载速度提升了43%左右： Texture2d 加载流程优化 原生的纹理加载的流程，把纹理数据转换成 ArrayBuffer 传给 js，然后在 js 层再重新组装返回...修改后的流程如下（红框部分为省略的部分）： 注：修改为如上流程后，原生端的动态合图将无法使用。但是大多数的原生开发都会使用压缩纹理，并且压缩纹理也是不支持动态合图的。...四、附加题 spine 加载优化 由于 spine 的骨骼动画是在原生端单独加载的，所以在 js 加载的时候可以移除 spine 骨骼加载，减少一次 IO。
背景 最近用svg.js 做一些图形展示的demo， 在vscode下搭个web的编码环境，支持语法补全和实时预览。...demo目录 初始化环境 npm init -y 安装代码提示 npm install -D eslint （devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖使用...-D参数将依赖添加到devDependencies节点） 安装svg.js npm install @svgdotjs/svg.js 安装 parcel npm install -g parcel-bundler...7.添加 index.js import { SVG } from "@svgdotjs/svg.js"; var draw = SVG().addTo('body').size(300, 300) var...rect = draw.rect(100, 100).attr({ fill: '#f06' }) 8.运行 parcel index.html 图片
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
