gamemaker吧 关注:13,651贴子:95,155

[GMS] 顶点绘制与拖尾、刀光特效实现

只看楼主收藏回复




稍微讲一下用绘制图元实现一些简单的特效的方法


IP属地:陕西1楼2021-07-10 22:12回复
    顶点绘制可以绘制自定义的图形来实现一些效果,主要用到以下函数:
    1、draw_primitive_begin :开始绘制图元
    需要填一个参数:图元类型

    如图,总共有六种图元类型(就是把你添加的顶点接成图像的方式)
    2、draw_vertex : 添加顶点
    有许多种变形,可以给顶点添加一些数据(比如draw_vertex_colour可以给顶点添加颜色和透明度)
    3、draw_primitive_end :结束绘制


    IP属地:陕西2楼2021-07-10 22:17
    收起回复
      简单运用:
      如下绘制代码能绘制一个渐变色的三角形
      draw_primitive_begin(pr_trianglelist)//开始绘制,图元类型为三角列
      draw_vertex_color(x,y,c_red,1)//添加一个顶点,颜色为红色
      draw_vertex_color(x+100,y,c_white,1)
      draw_vertex_color(x-50,y+100,c_green,1)
      draw_primitive_end()//结束绘制

      我用的最多的图元类型是三角带
      来试试添加四个顶点:
      draw_primitive_begin(pr_trianglestrip)//改用三角带图元
      draw_vertex_color(x,y,c_red,1)
      draw_vertex_color(x+100,y,c_white,1)
      draw_vertex_color(x-50,y+100,c_green,1)
      draw_vertex_color(x+150,y+120,c_blue,1)
      draw_primitive_end()//结束绘制

      可以看到,连接成了两个三角形


      IP属地:陕西3楼2021-07-10 22:19
      回复
        接下来看看添加了贴图的顶点绘制
        使用draw_primitive_begin_texture(图元类型,贴图)来开启
        贴图需要的是texture的id,通常用sprite_get_texture(精灵,0)来获取精灵贴图的id
        添加顶点的函数需要用
        draw_vertex_texture(x,y,纹理坐标u,纹理坐标v)
        其中纹理坐标的对应关系如图

        使用例子:
        draw_set_colour(c_white)
        draw_primitive_begin_texture(pr_trianglestrip,sprite_get_texture(sprite7,0))
        draw_vertex_texture(x,y,0,0)
        draw_vertex_texture(x+100,y,1,0)
        draw_vertex_texture(x-50,y+100,0,1)
        draw_vertex_texture(x+150,y+120,1,1)
        draw_primitive_end()
        效果如图

        使用贴图的同时可以使用颜色:
        draw_vertex_texture_colour


        IP属地:陕西4楼2021-07-10 22:24
        回复
          以上是基础知识,了解之后可以来试着实现一些特效

          要实现拖尾,首先需要记录这个obj在前几帧的位置
          用两个数组就可以记录:
          //Create,初始化数组
          length=15;//拖尾长度,单位:帧
          for(i=0;i<length;i++)
          {
          oldPosX[i]=0;
          oldPosY[i]=0;
          }
          //Step,记录坐标(建议自己理解)
          for(i=length;i>=1;i--)//记录坐标
          {
          oldPosX[i]=oldPosX[i-1];
          oldPosY[i]=oldPosY[i-1];
          }
          oldPosX[0]=x;
          oldPosY[0]=y;
          这样一来,oldPos[i]就是这个物体i帧前的坐标了
          然后要想一下怎么绘制出条带的形状
          这里给出一种基本的方法:给每个点作垂线往两边延长一定的长度

          然后按一上一下的顺序添加顶点,用三角带连接就能形成这样的条带图形

          其中,改变垂线往外延伸的宽度width就可以改变轨迹的形状


          IP属地:陕西5楼2021-07-10 22:48
          回复
            上楼的方法用代码写出来就是这样的
            因为没有向量,所以计算位置这里复杂了

            以及效果

            这个代码稍微改一下就能实现1L的效果
            明天更


            IP属地:陕西6楼2021-07-10 23:03
            收起回复
              这个强大,但是应该很吃手机性能吧


              IP属地:加拿大来自Android客户端7楼2021-07-11 07:49
              收起回复
                接下来给拖尾上纹理贴图

                这是《泰拉瑞亚》1.4中某个拖尾的纹理。
                要注意纹理坐标需要通过计算来获取

                易得最后的纹理坐标为
                上层:(i/length,0)
                下层:(i/length,1)
                写入代码,得到以下效果

                太暗了。
                增亮的方法可以使用简单的shader
                第一步:创建shader

                第二步:选择Fragment Shader

                第三步:"="后面就是最终的颜色。
                所以把最后的"="后面乘上一个数就可以简单地让图像变亮(比如这里乘了3.0)

                要注意:由于glsl语法,如果要乘整数的话一定要加".0",比如2.0,3.0。
                最后,开启shader。在绘制前写shader_set(shader名字);
                绘制后写shader_reset();

                效果很明显


                IP属地:陕西8楼2021-07-11 08:37
                回复
                  关于刀光:需要记录的信息增加一个剑的角度oldRot。

                  添加顶点的时候就简单了,直接用oldRot

                  然后是我用PS随便画的纹理以及最终的效果(颜色使用0,255,150)


                  接下来讲一些其它的处理


                  IP属地:陕西9楼2021-07-11 08:45
                  收起回复
                    拓展1、彩虹色处理
                    使用HSV创建颜色,让H变化即可获得彩虹色。


                    这样取颜色得到的效果

                    不过这样做的话,整个条带的颜色是固定的,可以给H再加一个随时间变化的量来实现动态颜色



                    IP属地:陕西10楼2021-07-11 08:59
                    收起回复
                      拓展2:渐变色
                      我这里写了个两颜色插值函数,用来实现两种颜色间的渐变
                      //ColorLerp script
                      c1=argument0;
                      c2=argument1;
                      n=argument2;
                      return make_colour_rgb(colour_get_red(c1)*(1-n)+colour_get_red(c2)*n,colour_get_green(c1)*(1-n)+colour_get_green(c2)*n,colour_get_blue(c1)*(1-n)+colour_get_blue(c2)*n);
                      然后添加顶点时颜色使用Colorlerp(c1,c2,n)
                      这个在刀光中挺好用的,比如下图是(150,255,150)到纯蓝色的渐变


                      IP属地:陕西11楼2021-07-11 09:12
                      回复


                        看到黑背景光效图,忍不住想抠一下。
                        这么看顶点绘制似乎比想象中的好玩,但暂时没想好在哪用,放到后续研究清单里好了。


                        IP属地:北京12楼2021-07-12 08:50
                        收起回复
                          看到4楼的图突然想到,用透视法做伪3D效果应该就是基于这个原理吧?


                          IP属地:上海13楼2021-07-12 13:12
                          回复

                            @人类的大敌 试试这个,“黑底-法阵”那一项


                            IP属地:北京14楼2021-07-13 10:40
                            收起回复
                              lztql


                              IP属地:广东15楼2021-07-17 17:19
                              回复