幻世(OurDream)2D图形引擎使用教程3——基本图形的绘制

        

声明:本教程版权归Lizcst Software Lab所有,欢迎转载,但是转载必须保留本段声明文字,并注明文章来源:http://blog.csdn.net/kflizcst

谢谢合作!

        上篇教程我们成功的完成了第一个幻世程序的设计,编译运行后的结果让我们非常欣喜,想必大家都亟不可待的想要用幻世画出一些漂亮的图案来!别急,这篇教程将带领大家学习如何使用幻世引擎绘制图形到屏幕中。

        首先,作为绘图教程的第一篇,我们将先学习如何绘制计算机图形中最基础的一种图形——三角形。

        [画三角形]

        幻世引擎中提供了专门的函数用来绘制三角形,下面我们就动手来实际编写绘制代码。

        1、打开我们上篇教程所完成的程序并找到程序的“帧渲染函数”部分:

 

        我们可以看到,上次的程序,帧渲染部分并没有绘制任何图形的操作,只是简单的将屏幕颜色刷新成黑色。

        2、现在我们在这部分添加绘制三角形的代码,需要注意的是,绘图代码一定要出现在渲染器的BeginSceneEndScene函数之间,如果不在这之间的任何绘图代码都不会有效的执行。

 

        可以看到,幻世引擎提供了Draw2DTriangle函数来绘制三角形,这个函数有很多的参数,但是简单的来说其实就是:三角形三个顶点的XY坐标值,三个顶点的颜色值,三角形使用的纹理的编号(ID),三个顶点的纹理坐标值,是否填充选项以及颜色混合方式(关于颜色混合方式,我们将在后面的教程中介绍,在这里,读者只需要简单地将它设为默认值就可以了,也就是“BLEND_DEFAULT”)。

        从函数的参数值来看,我们在窗口的正中间绘制了一个用白色填充的三角形,并且没有使用任何纹理。

        这里需要注意的是,该函数对三个顶点的描述,分别是三角形的上顶点、左下角顶点和右下角顶点。开发者在描述每个顶点给函数的时候要注意顶点的顺序及位置,不然可能会画出一个与你的想法完全不同的图形来。

        3、好了,我们现在已经完成了代码的编写,简单吧?只需要一行代码就可以画出我们想要的图案来,现在我们编译一下然后运行看看是不是我们需要的:

 

        看!一个漂亮的三角形出现啦!现在黑板上不再是啥都没有了,终于有点什么东西了,呵呵~

        但是美中不足的是,一个白色的三角形,显得太单调了,要是能添加些颜色就好了。

        别急,我们现在就让它变得更漂亮些!

        4、要给图形添加颜色只需要在刚刚的绘制函数中,将顶点的颜色值换成自己想要的颜色即可,我们尝试让这个三角形变成五彩的!

 

        我们将三角形三个顶点分别设定为红色、绿色和蓝色,现在看看效果!

 

        哈哈~完美!漂亮!是不是好看多啦?!

        [完成]

        通过幻世引擎,我们可以发现,绘制图形是那么的简单好玩!下一篇教程,我们将学习绘制另一种基本的图形——四边形,敬请期待!

        [示例代码下载]

        全部源代码下载:http://kuai.xunlei.com/d/BiIvAG1pYYOhUgQAc97

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值