ActionScript
TypeScript
JavaScript

显示与切换图片

发布时间:2017-03-04

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


Sprite.loadImage

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


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

module laya {

    import Sprite = Laya.Sprite;

	export class ShowImage {

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

	}
}
new laya.ShowImage();

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


Graphics.drawTexture

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

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

module laya {

	import Sprite = Laya.Sprite;
	import Handler = Laya.Handler;

	export class ShowImage {

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

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

		}
	}
	
}
new laya.ShowImage();

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



Tips:

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



切换图片

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

loadImage切换图片示例代码:

module laya {

    import Sprite = Laya.Sprite;
	import WebGL = Laya.WebGL;

	export class ShowImage {
        private  monkey1:string = "res/img/monkey1.png";
        private  monkey2:string = "res/img/monkey2.png";
        private  flag:Boolean = false;
        private  img:Sprite;

		constructor() {
			//初始化舞台
			Laya.init(960,640,WebGL);                  
							
			//设置舞台背景色
			Laya.stage.bgColor  = "#ffffff"
			
 			this.img = new Sprite();                        
    
            //显示绘制的图片
            this.switchImg();
            
            //侦听switchImg中图片区域的点击事件,触发后执行switchImg切换纹理绘制
            this.img.on("click",this,this.switchImg);
            
            //将绘制的图片添加到舞台
            Laya.stage.addChild(this.img);
        }

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


drawTexture切换图片示例代码:

module laya {

	import Sprite = Laya.Sprite;
	import Handler = Laya.Handler;
	import Texture = Laya.Texture;
	import WebGL = Laya.WebGL;

	export class ShowImage {
        private  monkey1:string = "res/img/monkey1.png";
        private  monkey2:string = "res/img/monkey2.png";
        private  flag:Boolean = false;
        private  img:Sprite;

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

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

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


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