Cocos2d-JS地图性能问题

简介: <p><span style="font-size:14px;">如图<span style="font-family: 宋体;">所示游戏场景,它是我们以往</span><span style="font-family: 宋体;">介绍的实例,在场景中有三个方块精灵(</span><span style="font-family: 'Times New Roman';">BoxA</span

如图所示游戏场景,它是我们以往介绍的实例,在场景中有三个方块精灵(BoxABoxBBoxC)和背景精灵,这个背景叫做“地图”有点牵强,地图采用了有规律的纹理。

 

游戏场景

那么我们如何设计这个游戏地图呢?我们可以使用两种方法:采用一张大图片和采用小纹理图片重复贴图。

1、采用一张大图片

我们在以往中介绍的实例,采用一张大图片。我们可以让美术设计师帮助我们制作一个屏幕大小的图片,大小960 x 640像素,如图所示。如果是RGBA8888格式,则占用内存大小大约2400K字节。

 

游戏地图

2、采用小纹理图片重复贴图

采用就是小纹理图片重复贴图,每个小的纹理图片大小是128 x 128像素,如图所示。如果是RGBA8888格式,则占用内存大小大约64K字节,纹理图片宽高必须是2的n次幂。

 

小纹理图片

提示  图片占用内存大小与图片格式有关,图片格式有关主要有:RGBA8888、RGBA4444RGB565等。RGBA8888和RGBA4444格式一个像素有4个(红、绿、蓝、透明度)通道,RGBA8888一个通道占8比特,RGBA4444一个通道占4比特,1字节 = 8比特。因此RGBA8888格式的计算的公式:长 x 宽 x 4字节,RGBA4444格式的计算的公式:长 x 宽 x 2字节。

采用小纹理图片重复贴图的方式可以通过瓦片地图实现,采用瓦片地图可以构建如下图所示的复杂地图。

 

复杂地图



更多内容请关注最新Cocos图书《 Cocos2d-x实战:JS卷——Cocos2d-JS开发
本书交流讨论网站:http://www.cocoagame.net
欢迎加入Cocos2d-x技术讨论群:257760386
更多精彩视频课程请关注智捷课堂Cocos课程:http://v.51work6.com
《Cocos2d-x实战 JS卷》现已上线,各大商店均已开售:

京东:http://item.jd.com/11659698.html

欢迎关注智捷iOS课堂微信公共平台,了解最新技术文章、图书、教程信息

目录
相关文章
|
10月前
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
704 0
|
JavaScript 定位技术
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
256 0
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
|
JSON 数据可视化 定位技术
【D3.js - v5.x】(7)绘制地图 | Geo布局 | 完整代码
【D3.js - v5.x】(7)绘制地图 | Geo布局 | 完整代码
740 0
【D3.js - v5.x】(7)绘制地图 | Geo布局 | 完整代码
|
10月前
|
JavaScript 定位技术 容器
vue.js实战案例(1):外部直接引入渲染echarts地图的实战案例
vue.js实战案例(1):外部直接引入渲染echarts地图的实战案例
59 0
|
7月前
|
JavaScript 前端开发 定位技术
JavaScript如何操作实现一个地图并标记到自身当前位置(本文从创建key值开始,到实现标点结束)
JavaScript如何操作实现一个地图并标记到自身当前位置(本文从创建key值开始,到实现标点结束)
46 0
JavaScript如何操作实现一个地图并标记到自身当前位置(本文从创建key值开始,到实现标点结束)
|
9月前
|
JavaScript 前端开发 定位技术
js实现地图选点获取经纬度
js实现地图选点获取经纬度
|
10月前
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏Echarts高级开发散点图实战案例分析(地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色)
数据可视化大屏Echarts高级开发散点图实战案例分析(地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色)
416 0
|
10月前
|
XML 存储 JavaScript
Echarts实战案例代码(18):GIS地图中GeoJson、TopoJson、SVG、SHP、JS常见格式相互转化的基础知识
Echarts实战案例代码(18):GIS地图中GeoJson、TopoJson、SVG、SHP、JS常见格式相互转化的基础知识
342 0
|
10月前
|
JavaScript 数据可视化 定位技术
Echarts实战案例代码(11):利用geojson数据地图map组件生成js本地版直接访问的解决方案
Echarts实战案例代码(11):利用geojson数据地图map组件生成js本地版直接访问的解决方案
285 0
|
10月前
|
存储 前端开发 定位技术
用Three.js搞个炫酷的3D区块地图
常用的3D区块地图除了那个区块,还要满足波纹散点、渐变柱体、飞线、下钻上卷、视角适配等,点开我,这就安排!用Three.js给你搞一个!
用Three.js搞个炫酷的3D区块地图