ActionScript
TypeScript
JavaScript

显示与切换图片

发布时间:2017-03-04

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


Sprite.loadImage

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


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

package
{
      import laya.display.Sprite;

      public class ShowImage
      {
            public function ShowImage()
            {
                //初始化舞台
                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);
            }
      }
}

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


Graphics.drawTexture

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

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

package
{
    import laya.display.Sprite;
    import laya.resource.Texture;
    import laya.utils.Handler;

    public class ShowImage
    {
        public function ShowImage()
        {
            //初始化舞台
            Laya.init(960,640);                
            //设置舞台背景色
            Laya.stage.bgColor = "#ffffff"                        
    
            //先加载图片资源,在图片资源加载成功后,通过回调方法绘制图片并添加到舞台
            Laya.loader.load("res/img/Layabox_logo.png",Handler.create(this,graphicsImg));          
        }
        
        private function graphicsImg():void
        {
            var img:Sprite = 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切换图片示例代码:

package
{
    import laya.display.Sprite;
    import laya.webgl.WebGL;

    public class ShowImage
    {
        private var monkey1:String = "res/img/monkey1.png";
        private var monkey2:String = "res/img/monkey2.png";
        private var flag:Boolean = false;
        private var img:Sprite;
        
        public function ShowImage()
        {
            //初始化舞台
            Laya.init(960,640, WebGL);                
            //设置舞台背景色
            Laya.stage.bgColor        = "#ffffff"                        
    
            img = new Sprite();                        
            
            //显示绘制的图片
            switchImg();
            
            //侦听switchImg中图片区域的点击事件,触发后执行switchImg切换图片
            img.on("click",this,switchImg);
            
            //将图片添加到舞台
            Laya.stage.addChild(img);                        
        }
        
        
        private function switchImg(e:*=null):void
        {                        
            //清空图片
            img.graphics.clear();
            
            //获得要切换的图片资源路径
            var imgUrl:String = (flag = !flag)? monkey1:monkey2;
                                    
            //加载显示图片,坐标位于200,100
            img.loadImage(imgUrl, 200, 100);
            
        }
    }
}

drawTexture切换图片示例代码:

package
{
    import laya.display.Sprite;
    import laya.resource.Texture;
    import laya.utils.Handler;
    import laya.webgl.WebGL;

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

        
        private function graphicsImg(e:*=null):void
        {
            img = new Sprite();                        
    
            //显示绘制的图片
            switchImg();
            
            //侦听switchImg中图片区域的点击事件,触发后执行switchImg切换纹理绘制
            img.on("click",this,switchImg);
            
            //将绘制的图片添加到舞台
            Laya.stage.addChild(img);
            //设置图片坐标
            img.pos(200, 100);
            
        }
        
        private function switchImg(e:*=null):void
        {                        
            //清空绘制
            img.graphics.clear();
            
            //获得要切换的图片资源路径
            var imgUrl:String = (flag = !flag)? monkey1:monkey2;
            //获取图片资源
            var texture:Texture = Laya.loader.getRes(imgUrl);
            //绘制纹理
            img.graphics.drawTexture(texture);                        
            //设置纹理宽高
            img.size(texture.width, texture.height);        
            
        }
    }
}


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