ActionScript
TypeScript
JavaScript

显示与切换图片

发布时间:2017-03-04

        图片的显示是游戏开发基础,本篇从API到示例分别介绍Sprite.loadImage与Graphics.drawTexture两种显示图片的方法。


Sprite.loadImage

在API文档中搜索laya.display.Sprite,可以找到loadImage()方法,我们先熟悉一下该方法的参数。


下面我们通过简单的示例代码加载显示一张图片,代码如下所示:

(function()
{
	var Sprite  = Laya.Sprite;
	var WebGL   = Laya.WebGL;

	(function()
	{
		//初始化舞台
		Laya.init(960,640,WebGL);                  
						
		//设置舞台背景色
		Laya.stage.bgColor  = "#ffffff"
		
		var img = new Sprite();                  
		//加载图片
		img.loadImage("res/img/Layabox_logo.png",50,50,130,35); 
		//添加到舞台
		Laya.stage.addChild(img);
	})();

})();

        在示例代码里,“50,50”是图片的显示坐标信息,“130,35”是图片的宽高信息。如果想使用默认值,除第一个参数“图片地址”外,其它参数可以不设置。示例代码运行效果如下图所示:


Graphics.drawTexture

        在API文档中搜索laya.display.Graphics,可以找到drawTexture()方法,除此之外,还需要了解laya.net.LoaderManager中的load()方法和getRes()方法,以及laya.utils.Handler中的create()方法,各方法的参数说明如下:

下面我们通过简单的示例代码加载显示一张图片,代码如下所示:

(function()
{
	var Sprite  = Laya.Sprite;
	var WebGL   = Laya.WebGL;
	var Handler = Laya.Handler;


	(function()
	{
		//初始化舞台
		Laya.init(960,640,WebGL);                  
						
		//设置舞台背景色
		Laya.stage.bgColor  = "#ffffff"
		
		//先加载图片资源,在图片资源加载成功后,通过回调方法绘制图片并添加到舞台
		Laya.loader.load("res/img/Layabox_logo.png",Handler.create(this,graphicsImg)); 
	})();

	function graphicsImg()
	{
		var img = new Sprite();
		//获取图片资源,绘制到画布
		img.graphics.drawTexture(Laya.loader.getRes("res/img/Layabox_logo.png"),150,50);
		
		//添加到舞台
		Laya.stage.addChild(img);
	}
})();

        loadImage()方法可以即时加载外部图片资源,也可以从缓冲区读取图片资源,drawTexture()方法则必须先加载完图片后,再绘制添加到舞台中来,因此在示例代码中使用到加载与回调的方法,代码说明请查看代码中的注释部分以及相关API说明。运行效果如下图所示:



Tips:

        需要提醒的是,示例代码中的Laya.loder是laya.net.LoaderManager的引用,并非是laya.net.Loader。



切换图片

    切换图片是在显示图片的基础之上,增加了清空绘制,然后通过代码逻辑获得新的图片资源重新绘制。具体的代码说明可以参考代码注释及API,结合实例运行体验。

loadImage切换图片示例代码:

(function()
{
	var Sprite  = Laya.Sprite;
	var WebGL   = Laya.WebGL;

	var monkey1 = "res/img/monkey1.png";
    var monkey2 = "res/img/monkey2.png";
    var flag = false;
	var img;

	(function()
	{
		//初始化舞台
		Laya.init(960,640, WebGL);     

		//设置舞台背景色
		Laya.stage.bgColor  = "#ffffff"                        

		img = new Sprite();                        
		
		//显示绘制的图片
		switchImg();
		
		//侦听switchImg中图片区域的点击事件,触发后执行switchImg切换图片
		img.on("click",this,switchImg);
		
		//将图片添加到舞台
		Laya.stage.addChild(img);              
        
	})();

	function switchImg()
	{
		//清空图片
		img.graphics.clear();
		
		//获得要切换的图片资源路径
		var imgUrl = (flag = !flag)? monkey1:monkey2;
								
		//加载显示图片,坐标位于200,100
		img.loadImage(imgUrl, 200, 100);
	}
})();


drawTexture切换图片示例代码:

(function()
{
	var Sprite  = Laya.Sprite;
	var WebGL   = Laya.WebGL;
	var Handler = Laya.Handler;

	var monkey1 = "res/img/monkey1.png";
    var monkey2 = "res/img/monkey2.png";
    var flag = false;
	var img;

	(function()
	{
		//初始化舞台
		Laya.init(960,640,WebGL);                  
						
		//设置舞台背景色
		Laya.stage.bgColor  = "#ffffff"
		
		//加载多张图片,在图片资源加载成功后,通过回调方法绘制图片并添加到舞台
        Laya.loader.load([monkey1,monkey2],Handler.create(this,graphicsImg));                
        
	})();

	function graphicsImg()
	{
		img = new Sprite();
		
		//显示绘制的图片
		switchImg();

		//侦听switchImg中图片区域的点击事件,触发后执行switchImg切换纹理绘制
        img.on("click",this,switchImg);
		
		//添加到舞台
		Laya.stage.addChild(img);
		//设置图片坐标
		img.pos(200, 100);
	}

	function switchImg()
	{
		//清空绘制
		img.graphics.clear();
		
		//获得要切换的图片资源路径
		var imgUrl = (flag = !flag)? monkey1:monkey2;
		//获取图片资源
		var texture = Laya.loader.getRes(imgUrl);
		//绘制纹理
		img.graphics.drawTexture(texture);                        
		//设置纹理宽高
		img.size(texture.width, texture.height);  
	}
})();


两段示例代码的效果一致,点击前与点击后运行效果如下图所示: