图集（Atlas）也称作 Sprite Sheet，是游戏开发中常见的一种美术资源。图集是通过专门的工具将多张图片合并成一张大图，并通过 plist 等格式的文件索引的资源。可供 Cocos Creator 使用的图集资源由 plist 和 png 文件组成。下面就是一张图集使用的图片文件：
上一篇文章讲述了利用cocos2d-x构建精灵的动画效果，今天打算以此为引子，创建一个在移动时同时指挥角色到我手指触摸的移动地点，那么就开始吧。
四、S9FrameNameSpriteSheetRotatedScaledNoInsets
使用纹理图集的优点: 1、减少文件读取次数，读取一张图片比读取一推小文件要快 2、减少OpenGL ES绘制调用并且加速渲染 OpenGL ES 1.1仅仅能够使用2的n次幂大小的图片(即宽度或者高度是2、4、8、64…)。 如果采用小图片OpenGL ES1.1会分配给每个图片2的n次幂大小的内存空间，即使这张图片达不到这样的宽度和高度也会分配大于此图片的2的n次幂大小的空间。那么运用这种图片集的方式将会减少内存碎片。 虽然在Cocos2d-x v2.0后使用OpenGL ES2.0,它不会再分配2的几次幂的内存块了，但是减少读取次数和绘制的优势依然存在。 3、减少内存消耗。 4、Cocos2d-x全面支持Zwoptex和TexturePacker，所以创建和使用纹理图集是很容易的
开发环境： cocos studio 3.10 quick-cocos2dx 3.7.8 windows11
一个例子就够了，单击文本标签，执行动画。我也是小白，写这个demo的时候遇到了问题，单击文本标签游戏就死掉了。今天为了解决这个问题也是一晚没睡，到学习群里问大神，经过大神的指点解决了问题。原来是Animation和Animate的生命周期的关系。先记下。 1 bool HelloWorld::init() 2 { 3 ////////////////////////////// 4 // 1. super init first 5 if ( !Layer::init() )
在游戏开发中,通常对于性能的处理是比应用型的App要敏感一些.游戏中的操作往往比较频繁而且多数都需要立刻响应,若是性能问题导致用户体验卡顿,算是比较糟糕的情况了,对于大型游戏开发公司来说,会有专门的团队(也可能是个人)处理性能优化,其重要性不言而喻.在cocos2d的项目开发中,性能调节的入手点往往都是最先由纹理开始的.下面我们就来讲一下纹理的基础知识.
一般来说，使用cocos2d_x开发游戏的时候都有两种做UI的方式，一种是用代码手写，一种是用cocos studio做UI，帧动画也一样，可以用这里两种方式，下面介绍博主常用的两种方法。
cocos2dx 英文官网：http://www.cocos2d-x.org/ cocos2dx 中文社区：http://www.cocos.com/
压缩png效果最好的当然是TinyPNG这种神器了，不过一般情况下TexturePacker压缩出来的也基本上能达到效果。
公司研发的系统为B/S架构，用户使用浏览器访问系统时，使用浏览器自带工具查看，对图片的请求数极多，多为小图片。 今天想对这个现状进行改善，网上查到一种雪碧图的方案，其实就是使用工具将数量很多的小图片拼成一张大图片，然后css里都引用这张大图片，并指定显示该图片的某一个区域，但这个方案需要手工作很多处理。 于是就想到能不能用目前比较成熟的grunt对前端样式文件自动进行处理，自动生成雪碧图，自动修改样式文件。一搜索果然找到了方案，下面为Gruntfile.js文件的片断： module.exports = f
在 Cocos Creator 中，使用场景文件名（不包含扩展名）来索引指代场景。并通过以下接口进行加载和切换操作：
今天我们使用前面将的精灵模型来模拟一个下雪的场景 使用精灵模型实现下雪场景的核心思路 一.利用for循环随机生成雪花，生成的雪花位置随机 二.雪花下落动画，定义一个函数，让其y坐标递减，判断当y坐标值小于0时，重新将其设置为800 三.利用requestAnimationFrame循环执行上面的函数 实现代码如下： 1.新建文件夹，命名为snow，在该文件夹下新建一个images文件夹用于存放雪花图片 2.在根目录新建index.html文件和index.js文件 3.在index.html文件中引入threejs和index.js，并新建一个id为webgl的div
在three.js中，展示的一切内容都是在canvas中绘制的，所以点击事件点击到物体上是无法获取点击对象的，要获取点击的对象，要使用RayCaster,是用于在三维空间中进行鼠标拾取，原理是相机与鼠标所在的设备坐标之间的连线经过哪些物体。
最近听了一首很好听的歌《一路生花》，于是就想用 Three.js 做个音乐频谱的可视化，最终效果是这样的：
查看旋转地球效果 主要用到几个知识点 （1）显示文字是使用了three.js 的精灵（Sprite），精灵的文字方向始终面向相机，文字是在canvas中画的，精灵的材质就是加载的带有文字的canvas function showText(){ const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); ctx.canvas.width =256; const x =0;
随着元宇宙概念的火爆，3D 渲染相关的技术频繁被提及，而 Three.js 是基于 WebGL 的 api 封装的用于简化 3D 场景的开发的框架， 是入门 3D 的不错的抓手，今天我们就来入门下 Three.js。
为了减少游戏资源，游戏中免不了会使用一些shader，下面是一个将图片变灰shader，以此来看看如何在cocos creator中使用和管理shader。
这个库给的示例代码是 webpack.config.js 但是我们现在在用的是 Vue
本文作者：IMWeb vienwu 原文出处：IMWeb社区 未经同意，禁止转载 使用cocos2d-js版开发跨平台手游非常简单，并且在手机端也拥有不错的性能。但因为推出时间并不够久，用户
使用cocos2d-js版开发跨平台手游非常简单，并且在手机端也拥有不错的性能。但因为推出时间并不够久，用户也不够多，项目里仍然存在不少bug，这里介绍一个常见的bug和个人解决方案。
今天周未，Shawn将之前在Cocos论坛中回答的问题，整理了部分继续我的分享之路！
在three.js中，展示的一切内容都是在canvas中绘制的，所以点击事件点击到物体上是无法获取点击对象的，要获取点击的对象要使用RayCaster，用于在三维空间中进行鼠标拾取，原理是：相机与鼠标所在的设备坐标之间的连线经过哪些物体。
月影（十年踪迹），360前端技术委员会委员。奇舞团技术总监，JavaScript程序猿，目前重点关注前端框架和新技术应用。本文来自月影在“2018携程技术峰会”上的分享。
使用到的插件是: webpack-spritesmith 依赖项: "webpack-spritesmith": "^1.1.0" "webpack": "^4.29.6" "webpack-cli": "^3.3.0" 预设命令: "build:dev": "npx webpack --mode development" "build:prod": "npx webpack --mode production" 配置webpack.config.js 配置输出模板: // 定义输出模板函数 const
在上一篇最后的例子中，我们写了一段代码实现一个简单的静态场景 demo，它跑起来了而且目前看起来也不复杂——从上到下写过来的代码，可以说是相当地“平铺直叙”了。
最近看到网上一篇文章，标题叫做《2016年 最火的 15 款 HTML5 游戏引擎》。目前针对HTML5游戏的解决方案已经非常多，但谁好谁差却没有对比性资料。特意花了几天时间，针对文章中出现的12款免费开源引擎做了一次相对完整的对比分析，希望能对大家有所帮助。 针对技术类产品对比，通常有多个维度进行对比，不仅仅是技术层面，还有许多非技术层面的内容会影响我们的使用结果。本文从如下几个维度进行多重对比。 2D与3D 编程语言 设计理念&功能 工作流 性能 学习资料 商业应用 2D与3D、编程语言对比2D与3
其实，效果的话，没有效果，比较枯燥，但是他的JS de 格式写的着实不错，继承，重写一一用到，接下来看代码：
其实总体自定义UI组件都比较简单，尤其是cocos2d-js是开源的，如果有什么不明白的直接看js代码或者C++代码即可。当然js代码基本就够了。 另外，js的ctor函数虽然说是构造函数，但毕竟不是flash或者c++的构造函数，这只是一个普通函数，也就是说可以不在第一行默认调用，这就给扩展带来了不少方便。 现在想做一个声音按钮，点一下能关闭音乐，再点一下又能打开。当然就是MenuItemToggle了。 但想做得再炫一点，有声音的时候，按钮的样子能有几个音波的变化。那么就需要用MenuItemSprit
最近看到网上一篇文章，标题叫做《 2016年 最火的 15 款 HTML5 游戏引擎 》。目前针对HTML5游戏的解决方案已经非常多，但谁好谁差却没有对比性资料。特意花了几天时间，针对文章中出现的12款免费开源引擎做了一次相对完整的对比分析，希望能对大家有所帮助。 针对技术类产品对比，通常有多个维度进行对比，不仅仅是技术层面，还有许多非技术层面的内容会影响我们的使用结果。本文从如下几个维度进行多重对比。 2D与3D 编程语言 设计理念&功能 工作流 性能 学习资料 商业应用 2D与3D、编程语言对比 2D与
在Cocos Creator中使用率最高的非精灵(Sprite)莫属了， 在游戏中我们经常会遇到将一张图片替换成另一张图片的情况，或者是在不同状态时来回切换图片。实现这个功能对程序员同学来说并不难，但是！回头检视一下编写的代码，能否让美术、策划同学使用上吗？如果不能的话，相信这篇教程可能对你和你的伙伴有更多启发！
官方文档：https://webpack.docschina.org/loaders/url-loader/
在线地址: https://yjmyzz.github.io/babylon_js_study/day09/01.html
不知道大家有没有注意到谷歌今天官网上的logo，刚开始一看还以为是gif，在仔细一看，发现并非如此，原来是使用CSS Sprite技术，利用一个初始图片和一张画满各个动作的拼接图片，从而实现了动画效果。
版权声明：本文为博主原创文章，欢迎转载，转载请注明出处。 https://blog.csdn.net/FE_dev/article/details/87022028
当今的Web开发中，图形和动画已经成为了吸引用户注意力的重要手段之一。而 Pixi.js 作为一款高效、易用的2D渲染引擎，已经成为了许多开发者的首选（我吹的）。本文将为工友们介绍PixiJS的基础知识和使用方法，希望可以和工友们**快速光速入门**，掌握 Pixi.js 的用法。
最近看项目视频的时候对里面使用 svg 的方式感到很好奇，于是去网上查了一下，发现 svg 竟然也有类似于 css 雪碧图一样的用法，也就是 svg-sprite（孤陋寡闻了），而且配合插件后能够以组件化的方式使用 svg，非常方便。这里记录下一些相关用法。
cocos2d-js是cocos2d-x的JavaScript版本，真正跨全平台的游戏引擎，采用原生JavaScript语言，可发布到包括Web平台，iOS，Android，Windows Phone8，Mac，Windows等平台。 利用cocos2d-js开发HTML5游戏/动画，我们可以通过SDK也可以直接使用js类库： l SDK下载：http://cn.cocos2d-x.org/download/ l js类库：http://www.cocos2d-x.org/filecenter/jsbuil
大掌教，从事游戏开发多年，精通 Cocos/Unity 等游戏引擎，精通安卓/iOS/H5等多种平台开发，发表过多个开源项目和 100 多篇原创博文，经验丰富，技术精湛。
最近手里有个Phaser游戏工程，上面让转化为微信小游戏，由于对这块儿不了解，所以上网查了很多资料，终于让我找到了案例，在此要感谢下 作者；下面是我转载的他的文章
SVG 是一种可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG 由 W3C 制定，是一个开放标准。
从前我以为 HTTP/2 开启以后，雪碧图可以逐渐退出舞台，现在感觉到自己的天真。且不论 svg 如果做成雪碧图可以通过 gzip 受益不少，多个单张的 png 还是比起一张要浪费请求。
PixiJS 是一个使用便捷且高效的2D渲染引擎——没错，它不是大而全的游戏引擎，而是更轻量的渲染引擎。
近期，我一直在研究macOS上的一些持久化技术，尤其是如何利用低等级用户权限来修改文件以影响用户交互。对于macOS终端用户来说，交互最频繁的当属Dock了。
根据默认图片的大小和位置，显示远程图片，只需要把组件挂载在Sprite上，需要更新的时候，调用以下方法即可。
安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1、去nodejs官网安装nodejs 2、打开命令行，OSX是终端，windows是命令提示符（window + r 输入cmd回车） 3、使用npm（nodejs的包管理器），或选装cnpm执行npm install cnpm -g --registry=https://registry.npm.taobao.org 4、全局安装gulp：(c)npm install gu
Assets，指项目中被引用的资源，通常为各种格式的图片和字体文件，当然也可能包含各式各样其他扩展名的文件（.json,.xml等），常见的图片和文字资源的处理包括：
在前面的文章讲述了mapboxGL中的sprite以及其java中的生成方式，本文将结合Promise讲讲其前端的生成方式。
经过分析是少了个解析插件 svg-sprite-loader ，用npm安装一下，然后需要在vue.config.js中添加配置
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
