自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

X实验室

keep moving

原创 地图编辑器开发(五)

上一节篇尾提到,地图要切成小图便于加载,但地图编辑器是个网页版工具,要在网页上实现切图不是很方便,经过考虑之后,决定使用 nodejs 实现。Electron要做一个图形化的切图界面,加上要能使用 nodejs,最先想到的就是 Electron。Electron 是一个 nodejs 的扩展库,可以使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序。若之前写过网页,上手比较简单。界面完全基于 HTML 和 CSS 实现,切图只需两个简单功能,选择图片和生成切图,生成包含地图块和

2020-07-23 21:59:47 43

原创 地图编辑器开发(四)

前一节把测试功能加上了,地图信息编辑好,测试通过之后,需要导出到游戏中。这节来看数据的导出。主要包括以下几个功能点:导出地图信息地图数据压缩读取地图数据导出地图信息数据内容在导出地图信息之后,把数据格式定义好,必备数据有两个:阻挡遮罩信息和格子尺寸,其他的数据可以按需添加。getExportData() { return { size: [this.oriW, this.oriH], cell: [this.CELL_W, this.CELL_H],

2020-07-22 22:30:02 28

原创 地图编辑器开发(三)

上一节已经把地图信息编辑做好了,这一节实现对编辑好的地图信息的测试。主要实现以下功能:A星寻路显示路径角色移动A星寻路A星寻路算法的基本概念,参考维基百科,算法核心有以下几个点:开放列表和关闭列表按 f 值排序回溯路径推荐一个视频教程,概念,算法过程,实现都讲得非常详细。A星寻路发酸最终要实现的是,传入地图信息,起点和终点,要得到一个从起点到终点的路径,即从起点到终点所经过的格子列表。核心代码如下: // 把起点放入开启列表中 this.openList.push(this.

2020-07-21 16:22:19 34

原创 地图编辑器开发(二)

上一节已经把地图加载到游戏中了,这一节主要实现地图的编辑能功能,也是地图编辑器最主要的功能,可以拆分为如下几个功能:地图滚动地图缩放画网格编辑格子信息地图滚动上一节中加载进来的地图,只显示了地图的一部分,要能编辑整个地图,需要地图能够滚动。因此需要将地图 sprite 放入到一个 ScrollView 中,设置水平和竖直方向都能滚动,删除滚动条,防止挡住地图,如图:运行结果如下图:这样地图就滚动了,按住鼠标就能拖动地图。但是还有问题,窗口显示的范围并没有变大,希望能通过缩放,在窗口中

2020-07-18 21:58:36 67

原创 地图编辑器开发(一)

引言寻路是RPG游戏中必不可少的一部分,那么如何实现寻路呢?游戏中最常用的寻路算法是A星。A星寻路的基础是把地图划分成很多小格子,然后在格子上做不同的标记,即地图信息。然后给出起点和终点,A星算法就能找出从起点到终点的路径——经过格子列表。A星寻路算法网上有很多的资料,不做过多的介绍,主要看看地图信息如何生成?地图编辑器生成地图信息的工具,叫地图编辑器。我这里开发了一个简单的地图编辑器,主要包含以下几个功能:加载地图编辑地图地图缩放设置格子尺寸编辑格子信息测试阻挡A星寻路显

2020-07-18 14:41:02 83

原创 gzip压缩引起的热更新bug

gzip引擎的热更新bug就在昨天,一切都是那么的寻常,就是普通得打了一次热更新包,然后上传到服务器,然后…啊,什么情况呀,七百多兆呀,整个资源也才这么七百多兆,什么鬼~~~,冷静,一定要保持冷静。查找过程project.minifest推断 :cocos creator 热更新是基于对比资源列表 project.minifest 的,既然这么大,应该是资源列表里面的文件 md5 全...

2020-03-20 11:22:44 174

原创 Cocos Creator基于热更新的分包方案

cocos 的热更新是基于对比本来和远程文件列表的md5实现的,如果有多个远程资源库,就可以拿来作为分包方案。大概流程是这样的:一 确定分包策略首先是,策划要根据一定的策略,将动态加载的资源分成几个包。比如游戏等级,前80级之前一个包,120级之前分一个包,200级之前分一个包;或者是关卡什么的。这个逻辑需要策划来确定,前期不会用到的资源就放到中期的包,中期不会用到的就放到后期的资源包。如果...

2019-11-07 20:47:42 906

原创 Cocos Creator实现Google Play obb 分包

背景Google Play 对 APK 大小限制是 100 M,但是游戏稍微重度一点,资源会很多,很容易包体就会超过这个限制;Google Play 提供了 obb 分包方案,来解决包体问题。OBB 是 Opaque Binary Blob 的缩写,是一种类型 zip 文件格式,作为安卓应用的扩展数据包。参考:安卓开发指南和百度百科思路游戏多数资源都不需要在启动游戏时,就加载加载到内存,...

2019-10-26 12:45:10 1265

原创 多语言版本解决方案

背景:项目在开发过程中都完全使用的中文开发环境,在代码、配表、ui里面有非常多的地方都直接使用了中文字符串。项目需要上海外,而且支持多个语言版本,切支持个语言版本之间切换,预计会上六七种语言的版本。思路:使用脚本提取所有含有中文的字符串,根据字符串内容生成唯一的id,然后生成一份id和内容的映射表,将生成的映射表作为原始文件去翻译,格式如图:id中文繁体英文俄语阿拉伯语土耳...

2019-09-09 20:52:15 1177

原创 cocos creator 图片资源加密

cocos creator 没有对资源进行加密,打包资源的资源很容易被扒,需要自己实现一套加密方式。这里简单记录下资源的加密方式。加密加密算法: XOR时机:在资源压缩打包完成之后加密工具: python脚本def encrypt(content): """ 加密内容 :param content: 加密密的字符串 :return: 加密之后的字符串...

2019-08-20 20:47:27 1642

原创 资源压缩和纹理压缩对cocos creator的Android包体大小影响

对cocos creator 2.1.x的项目,分别作了图片压缩,etc1纹理压缩和gzip压缩。图片压缩:png 使用 pngquant 压缩jpg 使用 mozjpeg 压缩etc1纹理压缩工具 ARM 的 Mali Texture Compression Toolpng 生成带 Alpha 通道的合成纹理jpg 直接生成压缩纹理gzip 压缩pytho...

2019-08-20 20:28:43 736

原创 cocos creator 2.1+ 中使用材质和自定义shader

版本说明cocos creator 1.x shader 没有经过包装,可以直接定义shader,替换 sprite 原来的 shader,可以参考之前博客;cocos creator 2.x 引入了材质系统,使用 shader 必须通过材质,这里介绍下如何使用自定义 shader;2.1.2 版本编辑器中开放了实验版材质和shader,如图:过程如上图,新建一个shader,...

2019-07-20 14:25:55 3460 2

原创 ssh登陆设置

一 生成密钥对打开本地终端,执行 ssh-keygen 命令创建密钥对:ssh-keygen -t rsa -C 'your email@domain.com'-t 制定密钥类型,可以省略,默认为 ras-C 设置注释文本,方便知道每个公钥是谁的,可以省略在生成的过程中要求:输入保存文件名,默认为 id_rsa输入登陆口令,默认为空生成好的密钥对保存在 ~/.ssh 目...

2019-03-24 21:15:40 109

原创 Python 与 C/C++ 交互小结

Python 与 C/C++ 交互可以分为以下3类:Python 拓展Python 嵌入Python 调用一 Python 拓展介绍:在 Python 程序中调用 C/C++ 编写的裤目的:提高关键代码的性能引入 C/C++ 成熟的功能库方式:Cython, SWIG, ctypes, CFFI形式:Python 为主程序,C/C++ 通过 .dll/.so 形式使...

2019-02-20 12:40:56 461

原创 cocos creator实现的日期选择控件

UIDatePicker日期选择控件及其使用示例及其使用,效果如果:使用步骤:将 UIDatePicker 文件夹拷贝到项目中在脚本中创建一个 Prefab,值设为 UIDatePicker需要显示时,创建节点,设置日期和回调cc.Class({ extends: cc.Component, properties: { label: { ...

2018-12-12 22:11:23 2421 1

原创 游戏UI设计-公共内容整理

游戏开发一般最大的成本都花在了美术上面,减少迭代次数是降低开发成本的有效有段。因此,对于游戏UI,在游戏立项之后,很多公共的内容可先定下来。有了这些公共的内容,除了节约开发成本,同时可以提高美术资源的复用程度。在没有特殊要求的情况下,就直接用公共资源即可,不需要额外地为不同界面再提供背景图,按钮等美术至于。从而也为方便了后面的迭代。也可以为美术的修改和迭代提供方便。游戏从立项到最后上线,或者上...

2018-11-22 11:19:43 2047

原创 位运算及其应用

一 基本概念机器码 = 符号位 + 真值符号位:正数:0负数:11 原码原码 = 符号位 + 真值比如:+1: 0 001-1: 1 0012 反码正数反码 = 原码负数反码 = 符号位 + 真值取反比如:+1: 0 001-1: 1 1103 补码正数反码 = 原码负数反码 = 反码 + 1比如:+1: 0 001-1:...

2018-11-16 21:38:19 115

原创 RPG游戏寻找NPC流程

Created with Raphaël 2.2.0查找NPC是否在当前场景?是否在访问距离内?与NPC对话是否有任务?任务对话完成NPC功能对话跑到NPC附近是否Vip?跳转至目标场景传送门yesnoyesnoyesnoyesno...

2018-10-30 15:11:43 608

转载 VAO 与 VBO 的前世今生

VAO 与 VBO 的前世今生在现代OpenGL(3.0+)的体系里,VAO和VBO已经是个很基本的概念了,是学习GL必须要理解的一个点。昨天,组内的同学在学习Learn OpenGL的时候,就被这两个概念给拦住了。当然,具体遇到的问题倒不是理解障碍,实质是不清楚这几个概念的本质。我想了一下,空讲概念确实太虚,尤其是OpenGL这种带有历史尘埃的玩意。GL是一个工业上的标准,历史悠久,那么...

2018-06-26 12:41:50 477

原创 cocos creator 中使用shader实现流光

在论坛中有水友用多边形遮罩做了一个流光,这里分享一个用shader写的流光特效。原理将图片中指定区域的颜色亮度增大,或者加上颜色,然后在 update 中去更新这个高亮的区域。代码下面是 shader 内容, 关于 ShaderUtils 可以参考我之前的这篇博客。顶点 shader:module.exports =`attribute vec4 a_pos...

2018-04-14 18:39:18 9305 8

原创 2d游戏中角色动画解决方案

刚刚在cocos creator论坛中,看到有水友在update更新spriteFrame来做角色动画,其实是可以使用 cc.Animation 来做角色动画,,这是我们游戏的实现方式,给大家参考下。一 资源管理1 美术输出资源要求首先,规划美术输出角色的动画,一个角色文件夹,比如 warrior_ori,包含角色各种动作子文件夹,如 idle,walk,run 等,动作文件夹中包...

2018-04-04 19:16:02 1904

原创 skynet socket监听连接 demo

下载安装源码: https://github.com/cloudwu/skynet编译:https://github.com/cloudwu/skynet/wiki/Build服务器 demo新建 server 目录,将 skynet 原来克隆在 server 目录中;为了后面维护和更新方便,在 skynet 目录同级新建 game 目录 和 log 目录;在 game 目录中新建3个文件,c

2017-12-20 15:33:40 1455

原创 游戏日志系统设计与实现

作用游戏临近上线,需要做一个日志系统,记录玩家的行为,用途如下:监控玩家状态变化,如账号登记,角色创建,上线下线,充值等;分析玩家行为,如金币钻石消耗在什么系统上了,主要参与了哪些活动和玩法;帮助分析bug,记录玩家的行为和数据变化,可以回溯bug产生的过程;方便客服,查询和处理玩家的反馈。结构设计首先,用一台公共的服务器左右日志的db服务器,所有游戏中产生的日志,都...

2017-12-05 13:15:54 3164

原创 shadertoy上手指南

一 shadertoy是什么下面是维基百科上的定义: Shadertoy.com is a cross-browser online community and tool for creating and sharing shaders through WebGL, used both for learning and teaching 3D computer graphics in a web

2017-09-24 14:44:58 8285 3

原创 WebGL之旅(二十) 帧缓冲区对象FBO

一 概念前面都是将图片作为绘制图形时的纹理映射,这一节来看看如何将渲染结果作为纹理,即动态生成纹理,贴在另一个物体上。默认情况下,都是在屏幕提供帧缓冲区中绘制,如果要动态生成纹理,就需要另外新建一个缓冲区对象,来代替默认的缓冲区,在其中进行离屏绘制。帧缓冲区对象包括:颜色关联对象(可以是纹理对象或渲染缓冲区对象)深度关联对象(渲染缓冲区对象)模板关联对象要将动态生成的纹理作为贴图,只需要在帧

2017-08-05 23:42:44 2277 1

原创 WebGL之旅(十九) 雾化

一 原理雾化,即使用雾的颜色与场景中物体的颜色进行叠加。线性雾化,会指定一个起点和终点,起点为开始雾化点,终点为完全雾化的点:在起点之前的完全清晰,也就是说完全为场景中的物体颜色;在起点和终点之间的点,根据距离计算雾的因子;在终点之后就完成为雾的颜色。物体颜色和雾的颜色叠加公私如下:片元颜色 = 物体颜色 * 雾化因子 + 雾的颜色 * (1 - 雾化因子)雾化因子 = (终点 - 当

2017-08-03 00:17:45 601

原创 WebGL之旅(十八) 点选立方体

原理这里用了一个比较巧妙(山寨)的方法判断是否点击到了立方体:获取鼠标点击的位置;将立方体绘制成红色(也可以是其他颜色);判断鼠标点击位置的颜色恢复立方体的颜色示例由以上原理,当鼠标点击位置的颜色跟立方体重绘之后的颜色一致为红色时,则点击的位置就在立方体上。(如果背景色也为红色,就尴尬了)。function main() { var gl = getGL(); var vs

2017-08-02 02:20:07 679 1

原创 WebGL之旅(十七) 带纹理的立方体

带纹理的立方体在前面一片博客中,有绘制一个平面的带纹理的图形,现在绘制一个立,并分别制定纹理。/** * 绘制带纹理的立方体 * xu.lidong@qq.com * */function main() { var gl = getGL(); var vsFile = "./res/shader/mouserotate.vert.glsl"; var fsFile =

2017-08-01 01:46:19 1337

原创 WebGL之旅(十六) 层级模型

层次模型是指用一颗“有向树”的数据结构来表示表示各类实体以及实体间的联系,树中每一个节点代表一个记录类型,树状结构表示实体型之间的联系。——百度百科在变换时,父节点的变换会待着子节点一起,而子节点的变换则不会影响父节点。例如手臂的运动会带动手肘的运动,而手肘的运动不影响手臂的运动。即:子节点的模型变换 = 父节点的模型变换 * 自身的模型变换示例,如下两个立方体柱子,下面的为父节点,上面的未子

2017-07-30 22:51:00 1310

原创 WebGL之旅(十五)从文件中加载shader

随着程序越来越复杂,把shader写在js中不好管理,最好是把shader写在不同的文件中,然后当做资源去加载。一 文件加载添加一个方法loadShaderFromFile,从文件中加载内容,因为加载文件是异步的,因此需要通过回调返回。function loadShaderFromFile(filename, onLoadShader) { var request = new XMLHttp

2017-07-30 00:09:13 1932

原创 WebGL之旅(十四)点光源

点光源的方向对于平行光,直接指定颜色和方向,对于电光鱼的方向则需要通过位置来计算。对于已知坐标的点,其点光源的方向为:入射光线(反)方向 = 光源位置 - 顶点位置已知方向之后,反射光线的计算就跟平行光一样了。点光源示例/** * 点光源 * xu.lidong@qq.com * */var gl_SrcVS = `attribute vec4 a_Position;attribute

2017-07-29 04:28:52 815

原创 WebGL之旅(十三)平行光和漫反射

一 相关概念光:方向 + 颜色(包含了强度)光源平行光:同方向 + 颜色点光源:方向(光源位置到照射位置) + 颜色环境光:颜色入射角:入射光反方向与平面法线的夹角反射:漫反射: 反射的光在各个方向上均匀,反射光颜色=入射光颜色 X 基底色 X cos(a),a为入射角环境反射: 反射光颜色=环境光颜色 X 基底色漫反射 + 环境反射: 反射光颜色= 漫反射光颜色+ 环境光颜色二

2017-07-28 02:54:30 877

原创 WebGL之旅(十二)IBO绘制立方体

在计算机中,所有的图像都是有三角形组成,绘制立方也是通过绘制三角形。立方体有6个面,每个面需要2个三角形,每个三角形3个定点,因此需要绘制12个三角形即36个点。但立方体本来只有6个定点定点就可以确定了,如何优化点这些冗余的数据呢?答案就是IBO(index buffer object),在一个vbo中,保存这6个定点,指定36个定点时,通过索引从这6个定点中取值。另外,为了是代码更加简洁,将一些向

2017-07-27 00:27:00 810

原创 WebGL之旅(十一)透视投影

与正射投影不同,透视投影会出近大远小的效果,与人的视觉效果一直,游戏中一般都是使用的透视投影。示例:/** * 透视投影矩阵 * xu.lidong@qq.com * */var g_vs = `attribute vec4 a_Position;attribute vec4 a_Color;uniform mat4 u_ViewMat;uniform mat4 u_ProjMat;

2017-07-25 23:34:22 611

原创 WebGL之旅(十)正射投影

要将三维物体在二维的平面上显示,必须经过投影,投影分为两种:正射投影 长方体的可视空间 物体大小不随位置变化透视投影 四棱锥的可是空间 近大远小下面的例子绘制了三个三角形,可以通过wasd修改远近界面。<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>WebGL</title> <

2017-07-25 01:45:09 714

原创 WebGL之旅(九)视图矩阵

视图矩阵一 相机状态描述视点:相机在世界坐标中的位置 eye(eyeX, eyeY, eyeZ)观测点:被观察的目标点,指明相机的朝向 at(atX, atY, atZ)视线:从视点出发指向观测点方向的射线 dir(atX - eyeX, atY - eyeY, atZ - eyeZ)上方向:图像的上方向,指明相机以视线为轴的旋转角 up(upX, upY, upZ)二 相机坐标系定义: 以视点为原

2017-07-24 05:09:49 1712 4

原创 WebGL之旅(八)纹理映射

当传入几个顶点及其颜色后,虽然会对剩余的顶点进行插值,绘制出渐变的图像,但同要绘制的图像更加复杂时,就需要用到另一种方式——纹理映射,来确定每个点的颜色。当需要绘制一个点的颜色时,不在是通过计算得到,而是去一张事先保存好的图像中,对应的坐标取纹理的颜色。纹理的坐标st(或者叫uv)范围是0-1。示例:/** * 纹理映射 * xu.lidong@qq.com * */var vertexSha

2017-07-23 03:21:36 2232 2

原创 WebGL之旅(七)varying变量

前面已经说过的变量类型:attribute: 用在顶点着色器中接收顶点相关信息;uniform: 可以同时在顶点着色器和片元着色器中使用,接收无顶点无关的数据。现在来看一个新的变量类型:varying 同时在顶点着色器和片元着色器中定义,用于在两者之间传递数据。示例:/** * varing变量 * xu.lidong@qq.com * */var vertexShaderSrc =

2017-07-21 22:52:40 1528

原创 WebGL之旅(六)动画

动画原理已经知道如何绘制一个三角形了,利用变换举证可以让图形产生相应的变换。现在要做的是,绘制一个三角色,不断的更新旋转矩阵的角度,然后重绘就会产生旋转动画。实现/** * 旋转动画 * xu.lidong@qq.com * */// 顶点着色器源码var vertexShaderSrc = `attribute vec4 a_Position;// 接收传入位置坐标,必须声明为全局un

2017-07-21 00:39:58 689

原创 WebGL之旅(五)组合变换

复合变换,即对一个图形进行多次变换。一 复合变换原理比如,对图像g进行一次平移,然后进行一次缩放,求最终的得到图像g。那么: 平移后的坐标t = 平移矩阵 x 原始坐标g 缩放后的G = 缩放矩阵 x 平移后的坐标t所以: 缩放后的G = 缩放矩阵 x (平移矩阵 x 原始坐标g) = (缩放矩阵 x 平移矩阵) x 原始坐标g可见,对于多次变换,可以将变换矩阵相乘得到一个最终的矩

2017-07-20 22:55:18 593

提示
确定要删除当前文章?
取消 删除