幻世(OurDream)2D图形引擎使用教程6——使用纹理

        通过前面几篇教程,我们已经学会了如何使用幻世引擎来绘制图形及文字,这很好,但是美中不足的是,我们绘制的图形现在还只能够描绘出简单的颜色及形状。如果需要更复杂的图案或样式该怎么办呢?

        这里我们就需要使用纹理贴图了,通过给基本形状附上纹理,我们就可以非常容易的实现复杂漂亮的画面了。这篇教程就来知道大家如何给图形附上纹理。

        之前我们在画基本图形时,曾经将幻世引擎提供的绘制函数的中的部分函数全部置零处理:

 

        这些置零的函数参数,就是给图形绘制附上纹理的关键了!下面我们就来动手编写代码。本教程将继续使用前面绘制四边形的教程所使用的演示代码。

        [给图形附上纹理]

        1、首先我们先准备好喜欢的纹理图片,这里需要注意的是,纹理图片的尺寸最好与绘制的图形相仿,这样可以避免纹理附上之后出现拉伸或者压缩等不和谐现象。

 

        我们选择了一张200x200的卡通火焰的图案(图片为摘自互联网,版权归相应作者所有,此处引用仅供演示!)。

        2、我们打开绘制四边形的演示程序的代码,添加载入纹理的代码。

 

        我们在程序的初始化部分(也就是渲染器接口获取完成之后)添加载入纹理的代码,直接使用渲染器接口提供的函数LoadTexture来加载我们上一步准备的图片。这里简单介绍下这个函数的参数用法:

        参数1:纹理资源的ID编号,这个我想大家都应该熟悉了,这是幻世引擎管理及使用资源的特色,这个编号可以自行制定,但是不能和已有的重复并且也不能指定0,稍后使用这个纹理资源时需要提供此编号,具体我就不多说了,要记住自己取的号码。

        参数2:作为纹理的图片的路径位置。

        参数3:透明色,这个透明色是指载入纹理的过程中,你希望幻世从图片中剔除的颜色,一般来说,如果希望纹理是背景透明的,那么就把背景色提供给函数,这样背景就会被幻世除去从而实现透明效果了,教程的最后我会演示下效果。

        3、好了,现在我们有一张纹理了,该把它附给某个我们准备画出的图形了。我们找到“帧渲染函数”部分,将纹理附给图形绘制函数并且制定好各个顶点的纹理坐标。

 

        这里我们分别填上需要使用的纹理资源的ID、四边形四边的纹理坐标位置就好了,这样我们就给这个四边形附上了纹理了,我们现在编译并且运行下看看效果。

        4、效果。

 

        喏~看到火焰图案啦!

        5、最后,我们再讲讲前面说到的透明色参数有何意义。我们现在重新选一张纹理图片来演示效果。

 

        我们看到这张纹理的背景色是纯白色的,我们准备让这样纹理的背景透明,从而只显示出红色五角星。

        6、下面载入它,并且将透明色设置白色,也就是这张纹理的背景色,我们期望能够让纹理实现背景透明。

 

        7、绘图部分不需要改动,现在我们再编译下看看效果。

 

        看!是不是和我们想的一样?!

 

        [完成]

        通过这篇教程的学习,现在我们可以画出更多更漂亮复杂的图案来了!

 

        [示例代码下载]

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值