trim tibout
关注数: 26 粉丝数: 1,390 发帖数: 19,323 关注贴吧数: 21
第一个TBLZ引擎的学习--显示图片 源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>单个纹理显示</title> <!--把引擎安装目录下的相同文件夹对应文件拷至本工程目录下--> <script src="jslib/debug.js"></script> <script src="jslib/draw2d.js"></script> <script src="jslib/webgl/turbulenzengine.js"></script> <script src="jslib/webgl/graphicsdevice.js"></script> <script src="jslib/webgl/inputdevice.js"></script> </head> <body> <!--此处标记一个canvas标签,主要用来显示主界面--> <canvas id="canvas" width="640px" height="480px"/> <!-- 作者:[email protected] 时间:2015-07-20 描述:单个图片显示demo --> <script type="text/javascript"> /* Game code goes here */ // 初始化引擎 TurbulenzEngine = WebGLTurbulenzEngine.create({ canvas: document.getElementById("canvas") }); // 创建图形驱动器 var graphicsDevice = TurbulenzEngine.createGraphicsDevice({}); // 创建2D渲染对象 var draw2D = Draw2D.create({ graphicsDevice: graphicsDevice }); // 创建2D精灵对象 var sprite1 = Draw2DSprite.create({ width: 128, height: 128, x: 500, y: 200 }); // 声明一个加载纹理对象 var loadingTexture; // 声明一个纹理加载对象,并加载 var textureParameters = { src: "img/role.png", // 图片所在本文件相同目录img文件夹下的role2.png; mipmaps: true, onload: function onLoadedTextureFn(texture, status) { if (texture) { // 设置sprite1精灵纹理 sprite1.setTexture(texture); // 设置sprite1精灵显示矩形 sprite1.setTextureRectangle([0, 0, texture.width, texture.height]); } else { // 如果加载纹里失败,会提示以下语句 alert("Texture missing!"); } } }; // 利用图形器,创建一个纹理。 loadingTexture = graphicsDevice.createTexture(textureParameters); // 即时更新器函数 function update() { // 打开图形驱动器 if (graphicsDevice.beginFrame()) { // 打开2D绘制对象 draw2D.begin(); // 绘制sprite1精灵 draw2D.drawSprite(sprite1); // 关闭2D绘制对象 draw2D.end(); // 关闭图形驱动器 graphicsDevice.endFrame(); } } // 利用引擎设置一个定更新器 TurbulenzEngine.setInterval(update, 1000 / 60); </script> </body> </html> ====================================== 使用的IDE: HBuilder 6.1.2 由于本实例仅仅只是显示一张图片,作为游戏来说,还有很多其它功能。 希望各路大神,扩展开来。
首页 1 2 3 4 5 6 下一页