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

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

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

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

[画三角形]

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

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



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

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



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

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

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

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



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

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

别急，我们现在就让它变得更漂亮些！

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



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



哈哈~完美！漂亮！是不是好看多啦？！

[完成]

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

[示例代码下载]

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