丿寒风-CSDN博客

原创 WebGL之旅（十五）从文件中加载shader

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

2017-07-30 00:09:13 3177

原创 WebGL之旅（十四）点光源

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

2017-07-29 04:28:52 1546 2

原创 WebGL之旅（十三）平行光和漫反射

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

2017-07-28 02:54:30 1868 1

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

2017-07-27 00:27:00 1388 3

原创 WebGL之旅（十一）透视投影

与正射投影不同，透视投影会出近大远小的效果，与人的视觉效果一直，游戏中一般都是使用的透视投影。示例：/** * 透视投影矩阵 * [email protected] * */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 1062

原创 WebGL之旅（十）正射投影

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

2017-07-25 01:45:09 1487

原创 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 3031 6

原创 WebGL之旅（八）纹理映射

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

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

原创 WebGL之旅（七）varying变量

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

2017-07-21 22:52:40 3233

原创 WebGL之旅（六）动画

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

2017-07-21 00:39:58 1216

原创 WebGL之旅（五）组合变换

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

2017-07-20 22:55:18 1195

原创 WebGL之旅（四）简单变换

变换又叫仿射变换，包括平移，缩放，旋转。一变换前首先，我们绘制一个三角形，后面对齐进行变换，代码：/** * 变换前 * [email protected] * */// 顶点着色器源码var vertexShaderSrc = `attribute vec4 a_Position;// 接收传入位置坐标，必须声明为全局void main(){ gl_Position = a_P

2017-07-19 01:25:23 1702

原创手游摇杆(三)跟随式摇杆

前一篇博客实现的固定式摇杆，在市面上很多游戏中都有应用，但在最后也提出了一个不是太好的地方，就是转向需要移动的位置比较远，操作比较累，为了解决这个问题，出现了跟随式摇杆。一什么是跟随式摇杆所谓跟随式摇杆，即：当摇杆中心在摇杆大圆范围内时，跟固定式一样，大圆不动，中心移动；当遥感中心移动到大圆范围外时，大圆跟中心保持相对位置不变，大圆移动。二位置计算在大圆内移动的计算跟前面的基本一样，主要看

2017-07-19 00:05:13 2675

原创 WebGL之旅（三）VBO和多种图形绘制

gl.vertexAttribXX和gl.uniformXX函数，一次只能向shader中传递一个变量，要一次性向shader中传递多个数据就要用到顶点缓冲区对象(VBO)。一 VBOVBO使用步骤:创建缓冲区对象（gl.createBuffer()）；绑定缓冲区对象（gl.bindBuffer()）；将数据写入缓冲区（gl.bufferData()）；将缓冲区对象分

2017-07-18 01:55:14 2465 1

原创 WebGL之旅（二）向shader中传递数据(attribute和uniform)

一绘制鼠标点击过的位置当鼠标点击canvas时，记录点击位置，然后将所有点击过的位置都绘制一个红点。<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>WebGL</title></head><body onload="main()"> <canvas id="container"

2017-07-17 23:33:11 4685 1

原创手游摇杆(二)八方向摇杆和移动范围限制

前面的实现了一版最简单的四方向摇杆，基于此做两个方面的优化：升级为八方向限制移动范围一八方向前面做的四方向摇杆，确认方向是基于不等式区域做的，八方向的会有四条直线方程，处理起来稍微麻烦一点，所以这里换成角度来做。如图：已知点P的坐标为（x, y），求op与x轴正方向的夹角a。由 tan(a) = y/x 可得 a = atan(y/x)，所以由触摸点坐标p，可以得出op与x轴正向夹角。如图，

2017-07-17 22:01:55 6402 2

原创 WebGL之旅（一）canvas、WebGL和shader简介

一 canvascanvas（翻译为画布）是HTML5的一个标签，canvas可以使用JavaScript在网页上绘制图像，例如下面的代码就使用canvas绘制一个简单的矩形。 WebGL

2017-07-17 02:04:55 11387 2

原创手游摇杆(一)最简单的四方向摇杆

摇杆是所有手游中不可或缺的一部分，是最基本的操作方式，下面是用cococ creator实现的一个简单的摇杆，后面将基于此慢慢优化。一场景新建一个场景，拖入三中图片，如图：分别表示：spPlayer 代表游戏中的角色，通过摇杆控制其移动；spRoker 摇杆的事件影响区域；spRokerCenter 摇杆的中心点。二事件监听为了能控制摇杆，需要监听摇杆的事件，新建一个脚本CompRoke

2017-07-15 00:48:29 7983 1

原创 cocos creator 1.x 中使用自定义shader

为了减少游戏资源，游戏中免不了会使用一些shader，下面是一个将图片变灰shader，以此来看看如何在cocos creator中使用和管理shader。shader文件管理在assets中新建一个文件夹resources，然后在resources中新建一个Shader文件夹。将所shader文件放在Shader文件夹中。现在在Shader文件夹中新建两个文件gray.vert....

2017-06-10 01:50:00 17286 2

原创 RPG游戏新手引导

我们的游戏是cocos cretror做一个2D的ARPG，这周做了一版新手引导，把实现方式分享下。设计引导一般会由各种操作组成，如npc对白、屏幕对白、剧情动画、强制玩家点击某个按钮，打开某个界面等，首先要做的是将引导都抽象出来，变成一个个可配置的项，如下：操作类型参数说明 1 屏幕对白无 2 npc对话 npc编号 3 剧情动画图片名;时长;图片名;时长

2017-06-03 23:25:38 2465

原创 js比较两个数值是否相等

utils = {};/** * 判断两个值是否相等 */utils.isEqual = function (val1, val2) { var type1 = (typeof val1); var type2 = (typeof val2); if (type1 === type2) { if (type1 === 'object') {

2017-06-03 13:29:05 18573

原创手游戏服务器集群

一分类游戏服务器按照功能分独立的进程，一般分类如下： gm 中心服 db 数据库服game 游戏逻辑服gate 前端服gm在一个集群中只有一个，其他可以有多个，同类服务器之间都没有连接。gm跟所有的服相连，帮助其他服交换信息，控制其他服的关闭，跟所有的game连接，用于广播和game之间信息的转发。db跟数据库相连，接受game的请求，负责数据的存取，方便game异步读写数据库。gam

2017-04-20 22:59:25 1988

原创手游摇杆（零）摇杆设计原理

摇杆是ARPG游戏中的标配，目前摇杆主要有两种方式： 1. 固定式 2. 跟随式一摇杆显示假设外环旧的位置：posBig 外环新位置：posBigNew 外环半径：R 外环圆心：O 内环旧的位置：posSmall 内环新的位置：posSmallNew 触摸位置:p1 固定式内环在外环范围内移动；外环位置固定，不能移动；更新策略：判断触摸位置p是否在外环内，是则直接内

2017-04-01 19:02:29 4911

原创 unity声音和动画简单实用示例

声音如果需要在游戏中播放声音，需要在某个节点添加Audio Source组件，然后在拖一个音频文件到其AudioClip上，如果勾选了Play On Awake，该节点激活的时候，就开始播放声音，如果去掉够选，在在代码中播放：// panel为添加Audio Source组件的对象this.panel.GetComponent<AudioSource> ().Stop ();this.panel

2017-03-25 22:20:34 3765

原创 unity之UGUI去掉UI事件拦截(穿透)

如果需要当前节点及子节点都不响应UI事件，有两种方式可以做，其一就是写代码：using System.Collections;using System.Collections.Generic;using UnityEngine;public class TouchIgnore : MonoBehaviour, ICanvasRaycastFilter{ public bool I

2017-03-25 22:02:31 19630

转载基于libevent的网络服务器模型

概述本模型中采用了多线程技术，主线程和子线程之间通过管道进行通信。服务器有主线程和一组工作线程，其中主线程只负责监听客户端的链接请求，并将请求平均的分配给工作线程。工作线程负责处理与客户端的链接以及相关的业务。每个子线程维护一个连接队列，每一个连接有一个反馈的队列。设计思路说明初始化和线程间通信工作线程在初始化的过程中会注册管道的可读事件，主线程只注册对监听套接字的可读事件。主线程和

2017-03-23 16:42:45 792

原创 actor, reactor与proactor模型

高性能服务器的几种模型概念： actor模型：实体之通过消息通讯，各自处理自己的数据，能够实现这并行。说白了，有点像rpc。 skynet是actor模型。reactor模型： 1 向事件分发器注册事件回调 2 事件发生 4 事件分发器调用之前注册的函数 4 在回调函数中读取数据，对数据进行后续处理 libevent是reactor模型。proactor模型： 1 向事件分发

2017-03-10 17:07:40 2616

原创 lua命令行参数

lua命令行参数lua [options] [script [args]]首先，script 脚本名，options 可选参数：-e：直接将命令传入Lua代码-l：加载一个文件-i：进入交互模式args 传给脚本的参数在运行以前，Lua使用所有参数构造arg表。脚本名索引为0，脚本的参数从1开始增加。脚本前面的参数从-1开始减少。例如： lua -e “print(‘helloworl

2017-03-10 13:43:35 12875

原创 AI之用行为树来实现逻辑

行为树是一种在游戏中常用的实现AI的方式，通过行为树可行图形化实现常用的程序结构。一行为树节点类型每次执行AI时，从根节点(root)或running节点开始遍历，父节点执行子节点，子节点执行完后将结果返回父节点，父节点根据子节点的结果来决定接下来怎么做。通常每个节点有三个状态：成功(success)，失败(failure)，执行中(running)。行为树的遍历实际上是一次函数调用，立即完成的，

2017-03-03 12:32:12 4150

原创游戏开发中常用的的设计模式

单例模式游戏客户端就是一个单例。各类单例器，如UI管理器，事件管理器等。下面是Python实现的一个单例。class Singleton(object): @classmethod def Instance(cls): if not getattr(cls, "_instance", None): cls.__instance_num__

2017-01-17 18:07:05 1744

原创 Python 装饰器

Python 装饰器python的装饰器实际上是一种装饰器模式，可以在不改变原有方法的情况下，给它添加功能。一属性装饰器class Monster(object): def __init__(self): self._hp = 0 @property def hp(self): return max(0, self._hp) @hp.

2017-01-17 15:37:19 510

原创 mongo数据库入门

公司一直在用mongo数据库，但是都是封装好的接口，最近自己折腾了一下，记录一下整个过程，避免下次又从头开始弄，省去一些不必要的搜索。一安装配置1 安装下载安装mongod，并将mongo.exe添加到环境变量中；我的安装路径：C:\Program Files 环境变量路径：C:\Program Files\MongoDB 2.6 Standard\bin\mongo.exe2 配置数据和日

2016-12-01 09:42:44 734

原创 Python 字符编码详解

一默认编码Python解释器默认编码：ascii>>> import sys>>> sys.getdefaultencoding()'ascii'Python源码文件默认编码：ascii#test.pyprint "你好"#报错因为源码中有非ascii字符， Python无法正确解码。需要加上编码声明，告知Python解释器如何解码为str。#test.py# coding=utf-8

2016-10-12 18:49:27 845

原创手游优化方法汇总

一、CPU性能优化1、减少重复计算换高效的算法避免多次运算，例如减少循环中计算利用空间换时间，将常用运算结果缓存2、合理使用数据结构不同数据结构的增删改查消耗得性能是不同的，合理利用数据结构，避免计算上的浪费。3、减少复杂调用将轮询方式修改为事件驱动，比如将在update中状态监听，改为事件触发将节点递归更新修改为有效路径更新，例如UI树不同对象和状态有不同的逻辑帧数，比如小兵的逻辑

2016-09-27 17:17:14 3005

原创灰度图、高度图和法线贴图

灰度图某点的颜色为P(R，G，B)，灰度计算方法：浮点算法：Gray = R*0.3+G*0.59+B*0.11;整数方法：Gray = (R*30+G*59+B*11)/100;移位方法：Gray = (R*76+G*151+B*28)>>8;平均值法：Gray =（R+G+B）/3;仅取绿色：Gray = G;则点P在灰度图中的颜色为(Gray,Gray,Gray)高度图高度图一般是

2016-09-19 16:53:42 8177

原创 Lua热更新原理及示例

网上有不少Lua热更新的文章，都只说了理论，被没有给出实际可操作的代码，下面是我写的几个例子。热更新原理Lua的 require(modelname) 把一个lua文件加载存放到package.loaded[modelname]。当我们加载一个模块的时候，会先判断是否在package.loaded中已存在，若存在则返回改模块，不存在才会加载(loadfile)，防止重复加载。 package

2016-09-08 17:30:34 43719 1

原创 cocos2dx的渲染流程(源码走读)

注意：为了流程更加清晰，以下代码片段都是删除了其他无关的代码，只保留了与流程相关的函数调用。1 main 中调用 run：int main() { AppDelegate app; return Application::getInstance()->run();}2 Application 中调用 mainLoop ：int Application::run(){

2016-09-07 17:38:09 1500

原创全局变量危害小结

全局变量危害小结长期占用内存全局变量生命周期长，程序运行期一直存在，始终占有那块存储区；难以定位修改全局变量是公共的，全部函数都可以访问，难以定位全局变量在哪里被修改，加大了调试的难度；使函数理解使用全局变量的函数，需要关注全局变量的值，增加了理解的难度，增加了耦合性；初始化顺序全局变量的初始化顺序不定，如果全局变量之间有依赖，有可能导致某些变量初始化失败呢，引起莫名其妙bug。污染命名空间全局变量

2016-09-07 16:15:01 7067

原创 Unity之路（八）：GUI/GUILayout示例和Application

GUI 控件使用示例using UnityEngine;using System.Collections;public class test : MonoBehaviour { public string ar_str = ""; public string pwd_str = ""; public bool tg_val = false; void OnGUI (){

2016-08-23 12:37:29 845

原创 Unity之路（七）：游戏对象跟随鼠标移动示例

public float speed = 1.0f; // 角色移动速度 private Vector3 target; // 目标位置 private bool isOver = true; // 移动是否结束 void Update () { if (Input.GetMouseButton(0)) { GetMonsePos();

2016-08-19 21:59:29 4461