高品质2D游戏解决方案

高品质2D游戏解决方案

玛尔斯(北京)科技有限公司首席引擎架构师 / 副总经理

谭凯 

2

1

2

3

大量的图像平移

无限循环滚动图片

超过2048的纹理集

分享内容提纲

4

地图镜头的移动

5

神奇的混色

3

GPU加速的概念

GPU加速的概念

4

1

2

未知GPU渲染

渲染流程优化

批处理渲染

解决方案渲染

3

4

创意的深度结合

5

案例详解

6

大量的图像平移

使用场合：弹幕，道具，金币，粒子

缺点：不能旋转，缩放，倾斜

原理：把位移向量传递到着色器直接进行计算

gl_Position =  oRMatrix*vec4(aVertexPosition+aVertexGPU,1.0,1.0);

7

大量的图像平移

CPU

GPU

x+=500

CPU

GPU

x+=500

8

无限循环滚动图片

使用场合：横版背景，俯视背景，流水，激光

缺点：移动量不能过大，需要校准

原理：通过UV位移实现

gl_FragColor = texture2D(texture,vTextureUV)

9

10

超过2048的纹理集

使用场合：高精度动画，降低独立渲染次数

缺点：统一的着色器

原理：利用多纹理技术更改采样的纹理ID

if(jointListvarying.x==0.0)
{
           gl_FragColor = texture2D(texture_0,vTextureUV)*vVertexColor;
}else if(jointListvarying.x==1.0)
{
            gl_FragColor = texture2D(texture_1,vTextureUV)*vVertexColor;
}

11

texture2D(texture_0,vTextureUV)

12

地图镜头的移动

使用场合：场景的游戏，大量原始的统一移动

缺点：需要对鼠标拾取做特殊坐标处理

原理：把变换矩阵传递到单次渲染的着色器中

"gl_Position =  oRMatrix*vec4(aVertexPosition+aVertexGPU,1.0,1.0);

13

Shader(着色器)

14

神奇的混色

使用场合：灯光，迷雾，高亮，时间系统

缺点：需要对鼠标拾取做特殊坐标处理

原理：把变换矩阵传递到单次渲染的着色器中

gl.blendFunc(src,dst);

15

透明度混合

颜色相加混合

16

      深入了解项目的实现需求，并且利用GPU的编程思维和无限可能的解决方案来供给项目达到真正加速的目的，从而提高项目的品质！

17

如何寻找解决方案

18

在电脑前寻求解决方案

在生活中寻求解决方案

在电脑前寻求解决方案

在生活中寻求解决方案

网络，交流，书籍

网络，交流，书籍，电影，游戏，洗澡
睡觉，地铁，冥想，等等等

19

      带着激情与想法去未知的游戏世界
冒险吧,世界在进步,放下浮躁的心,从轮
子上下来,享受创造的乐趣。

20

HTML5游戏开发者社区交流群：326492427

     www.Sirius2D.com
     天狼星

     www.Sirius2D.com
     天狼星

HTML5游戏开发者社区交流群：326492427

21

谢谢

Thanks