Laya开发小游戏最终总结

1:例一,注意点如下:

1.1:注意on函数中的监听器的名字不能带(),dianjiwenben不能写成dianjiwenben(),不然该函数只会在启动的时候被触发一次

1.2:通过Sprite来加载的图片将会覆盖它下方的所有view,也就是说,它下方的所有view都不能相应监听事件,只有它能响应监听事件。

代码如下:

Laya.init(600, 400);
Laya.stage.scaleMode = "full";
/*加载文本*/
var text = new Laya.Text();
text.align = "center";
text.text = "我是文本";
text.color = "red";
text.bold = true;
text.fontSize = 30;
text.on(Laya.Event.CLICK, "", dianjiwenben);//注意on函数中的监听器的名字不能带(),dianjiwenben不能写成dianjiwenben(),不然该函数只会在启动的时候被触发一次

/*加载图片*/
var tuyi=new Laya.Image();
tuyi.width=100;
tuyi.height=100;
tuyi.x=Laya.stage.width / 2;
tuyi.y= Laya.stage.height / 2;
tuyi.dataSource="res/images/1.png";
tuyi.on(Laya.Event.CLICK, "", dianjitupian);

Laya.stage.addChildren(text,tuyi);

function dianjiwenben() {
    console.log("你点击了文本")
}
function dianjitupian() {
    console.log("你点击了图片")
}
function wanbi() {
    console.log("加载完毕")
}

效果如下:

从控制台可以看到点击文本就出发文本的监听事件,点击图片就触发图片的监听事件

如果是图片是通过Sprite的loadImage来加载的,效果就不一样了,代码如下:

Laya.init(600, 400);
Laya.stage.scaleMode = "full";
/*加载文本*/
var text = new Laya.Text();
text.align = "center";
text.text = "我是文本";
text.color = "red";
text.bold = true;
text.fontSize = 30;
text.on(Laya.Event.CLICK, "", dianjiwenben);//注意on函数中的监听器的名字不能带(),dianjiwenben不能写成dianjiwenben(),不然该函数只会在启动的时候被触发一次

/*加载图片*/
var tupian = new Laya.Sprite();
tupian.loadImage("res/images/1.png", Laya.stage.width / 2, Laya.stage.height / 2, 100, 100, wanbi());
tupian.on(Laya.Event.CLICK, "", dianjitupian);

Laya.stage.addChildren(text,tupian);

function dianjiwenben() {
    console.log("你点击了文本")
}
function dianjitupian() {
    console.log("你点击了图片")
}
function wanbi() {
    console.log("加载完毕")
}
通过控制台可以看出text已经获取不到点击事件了,全都让图片消费了单击事件了

为什么会这样呢?因为图片的坐标是屏幕的宽和高的中点,那么图片的响应事件的区域就是下方图片的白色边框区域,所以text也被覆盖了:

如果是图片是通过Sprite的graphics.drawTexture来加载的,效果又不一样了,代码如下:

Laya.init(600, 400);
Laya.stage.scaleMode = "full";
/*加载文本*/
var text = new Laya.Text();
text.align = "center";
text.text = "我是文本";
text.color = "red";
text.bold = true;
text.fontSize = 30;
text.on(Laya.Event.CLICK, "", dianjiwenben);//注意on函数中的监听器的名字不能带(),dianjiwenben不能写成dianjiwenben(),不然该函数只会在启动的时候被触发一次

/*加载图片*/
var tupian = new Laya.Sprite();
Laya.loader.load("res/images/1.png",Laya.Handler.create(this,huizhitupian));
tupian.on(Laya.Event.CLICK, "", dianjitupian);

Laya.stage.addChildren(text,tupian);

function huizhitupian(){
    tupian.graphics.drawTexture(Laya.loader.getRes("res/images/1.png"), Laya.stage.width / 2, Laya.stage.height / 2, 100, 100);
}
function dianjiwenben() {
    console.log("你点击了文本")
}
function dianjitupian() {
    console.log("你点击了图片")
}

效果如下

从控制台可以看出图片响应不到任何事件,而且图片的位置也和其他两种加载图片的方式完全不一样了

2:例二:放大镜的例子,注意点如下:

2.1:如果文件中要写全局变量的话或者是需要系统自动执行的代码,那么就将所有的代码写在(function () {...})()的花括号里面,这样的函数并没有写函数名,然后系统会自动调用该函数,也可以在该函数体中将全局变量抽取出来;

2.2:Laya.init(1136, 640, Laya.WebGL);第三个参数Laya.WebGL可以增加游戏的流畅度,如果不写这个参数的话,有时候就可卡了,但是写了这个参数一直都很流畅。

代码如下:

(function () {
    var bg2;
    var maskSp;
    Laya.init(1136, 640, Laya.WebGL);
    Laya.stage.scaleMode = "full";
    Laya.loader.load("res/images/1.png", Laya.Handler.create(this, setup));
    function setup() {
        var bg = new Laya.Sprite();
        bg.loadImage("res/images/1.png");
        Laya.stage.addChild(bg);

        bg2 = new Laya.Sprite();
        bg2.loadImage("res/images/1.png");
        Laya.stage.addChild(bg2);
        bg2.scale(3, 3);

        maskSp = new Laya.Sprite();
        maskSp.graphics.drawCircle(20, 20, 20, "green");
        maskSp.pivot(20, 20);
        bg2.mask = maskSp;
        Laya.stage.on(Laya.Event.MOUSE_MOVE, this, onMouseMove);
    }

    function onMouseMove() {
        bg2.x = -Laya.stage.mouseX * 2;
        bg2.y = -Laya.stage.mouseY * 2;
        maskSp.x = Laya.stage.mouseX;
        maskSp.y = Laya.stage.mouseY;
    }
})()

效果如下:

3:例三:绘制各种图形,注意点如下:

3.1:所有写在(function () {...})()的花括号里面的代码都会被系统自动执行,这类函数是没有函数名的,看下方的代码总结出的;

代码如下:

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

    (function()
    {
        // 不支持WebGL时自动切换至Canvas
        Laya.init(740, 400, WebGL);

        Laya.stage.scaleMode="full"
        Laya.stage.bgColor = "#232628";

        drawSomething();
    })();

    function drawSomething()
    {
        sp = new Sprite();
        Laya.stage.addChild(sp);
        //画线
        sp.graphics.drawLine(10, 58, 146, 58, "#ff0000", 3);
        //画连续直线
        sp.graphics.drawLines(176, 58, [0, 0, 39, -50, 78, 0, 117, 50, 156, 0], "#ff0000", 5);
        //画曲线
        sp.graphics.drawCurves(352, 58, [0, 0, 19, -100, 39, 0, 58, 100, 78, 0, 97, -100, 117, 0, 136, 100, 156, 0], "#ff0000", 5);
        //画矩形
        sp.graphics.drawRect(10, 166, 166, 90, "#ffff00");
        //画多边形
        sp.graphics.drawPoly(264, 166, [0, 0, 60, 0, 78.48, 57, 30, 93.48, -18.48, 57], "#ffff00");
        //画三角形
        sp.graphics.drawPoly(400, 166, [0, 100, 50, 0, 100, 100], "#ffff00");
        //画圆
        sp.graphics.drawCircle(98, 332, 50, "#00ffff");
        //画扇形
        sp.graphics.drawPie(240, 290, 100, 10, 60, "#00ffff");
        //绘制圆角矩形,自定义路径
        sp.graphics.drawPath(400, 310, [
            ["moveTo", 5, 0],
            ["lineTo", 105, 0],
            ["arcTo", 110, 0, 110, 5, 5],
            ["lineTo", 110, 55],
            ["arcTo", 110, 60, 105, 60, 5],
            ["lineTo", 5, 60],
            ["arcTo", 0, 60, 0, 55, 5],
            ["lineTo", 0, 5],
            ["arcTo", 0, 0, 5, 0, 5],
            ["closePath"]
        ],
        {
            fillStyle: "#00ffff"
        });
    }
})();

效果图如下:

4:例四:Timer和Tween的简单使用

代码如下:

(function () {
    Laya.init(500, 500);
    var text = new Laya.Text();
    text.text = "我是文本";
    text.color = "green";
    text.fontSize = 30;
    Laya.stage.addChild(text);
    Laya.timer.loop(1000, this, chongfuX);
    Laya.timer.loop(1000, this, chongfuY);
    function chongfuX() {
        Laya.Tween.to(text, { x: text.x + 100 }, 1000);
    }
    function chongfuY() {
        Laya.Tween.from(text, { y: text.y + 100 }, 1000);
    }
})()

效果如下:

文字不停的上下左右做运动

5:例五:网络请求之get请求,代码如下:

var httpRequest = new Laya.HttpRequest();
httpRequest.on(Laya.Event.COMPLETE, this, response);
httpRequest.send('http://xkxz.zhonghao.huo.inner.layabox.com/api/getData?name=myname&psword=xxx', null, 'get', 'text');
function response() {
    console.log(httpRequest.data)
}

输出结果如下:

api总结如下:

//直接调用
**************************************************
Laya.init//初始化舞台的宽和高
**************************************************
Laya.stage//用来获取舞台示例
Laya.stage.width//获取舞台的宽
Laya.stage.height//获取舞台的高
Laya.stage.scaleMode//设置舞台的缩放比例
Laya.stage.addChild//添加一个view
Laya.stage.addChildren//添加多个view
Laya.stage.bgColor//设置舞台的背景颜色
Laya.stage.on//给舞台设置监听
Laya.stage.mouseX//鼠标在Stage上的X轴坐标
Laya.stage.mouseY//鼠标在Stage上的Y轴坐标
Laya.stage.alignV//设置舞台的垂直方向的对齐方式
Laya.stage.alignH//设置舞台的水平方向的对齐方式
**************************************************
Laya.Event//获取各种事件
Laya.Event.CLICK//单击事件
Laya.Event.MOUSE_MOVE//鼠标的移动事件
Laya.Event.PROGRESS//网络请求正在进行中的事件
Laya.Event.COMPLETE//网络请求完成之后的事件
Laya.Event.ERROR//网络请求出错之后的事件
**************************************************
Laya.loader
Laya.loader.load//加载资源,返回一个LoaderManager对象
Laya.loader.getRes//加载资源,返回资源
**************************************************
Laya.Handler
Laya.Handler.create//创建一个Handler对象
**************************************************
Laya.timer
Laya.timer.once//定时执行一次
Laya.timer.loop//定时重复执行
Laya.timer.frameOnce//定时执行一次(基于帧率)
Laya.timer.frameLoop//定时重复执行(基于帧率)
Laya.timer.callLater//延迟执行
**************************************************
Laya.Stat
Laya.Stat.show//显示性能统计信息
**************************************************
Laya.Tween
Laya.Tween.to//缓动对象的props属性到目标值
Laya.Tween.from//从props属性,缓动到当前状态
**************************************************


//需要new的对象
var text=new Laya.Text()//new一个Text对象
text.align//设置对齐方式
text.text//设置文本内容
text.color//设置文本颜色
text.bold//设置文本是否加粗
text.fontSize//设置文本的大小
text.on//设置文本的监听事件
**************************************************
var image=new Laya.Image()//new一个Image对象
image.width//设置图片的宽度
image.height//设置图片的高度
image.x//设置图片的x坐标
image.y//设置图片的y坐标
image.dataSource//设置目标图片的路径
image.on//设置监听
**************************************************
var label = new Laya.Label();
label.font//设置label的字体
label.text//设置label的文本
label.fontSize//设置label的字体的大小
label.color//设置label的字体的颜色
label.stroke//设置label字体的外边线条的宽度
label.strokeColor//设置label字体的外边线条的颜色
**************************************************
var button= new Laya.Button()//new一个按钮
**************************************************
var radioGroup= new RadioGroup();//new一个单选框
radioGroup.skin;//设置单选框的皮肤
radioGroup.space;//设置项对象们之间的间隔(以像素为单位)
radioGroup.direction;//设置布局方向
radioGroup.labels;//设置标签集合字符串,以逗号做分割
radioGroup.labelColors;//设置每个标签的颜色
radioGroup.labelSize;//设置标签的大小
radioGroup.labelBold;//设置标签是否加粗
radioGroup.labelPadding;//设置标签的内边距
radioGroup.selectHandler;//当单选框的选择项改变的时候执行的处理器
**************************************************
var checkBox= new Laya.CheckBox();//new一个复选框
checkBox.labelColors//设置颜色
checkBox.labelSize//设置大小
checkBox.labelFont//设置字体
checkBox.labelPadding//设置内边距
**************************************************
var sprite=new Laya.Sprite()//new一个精灵
sprite.loadImage//加载图片
sprite.on//设置监听
sprite.graphics.drawTexture//绘制图片
sprite.graphics.drawCircle//绘制圆,如果是作为遮罩的话,记得写上颜色,不然遮罩是没有效果的
sprite.graphics.drawPoly//绘制多边形
sprite.graphics.drawLine//画线
sprite.graphics.drawLines//画连续直线
sprite.graphics.drawCurves//画曲线
sprite.graphics.drawRect//画矩形
sprite.graphics.drawPie//画扇形
sprite.graphics.drawPath//画自定义路径
sprite.pos//设置坐标位置
sprite.size//设置宽高
sprite.mask//设置遮罩
sprite.filters//应用滤镜
sprite.scale//设置缩放
sprite.graphics.clear//清空绘制
sprite.cacheAsBitmap//将多个显示对象缓存成静态图像可以大幅提升渲染效率
sprite.addChild//不仅舞台可以添加子节点,精灵也可以添加子节点
sprite.pivot//设置精灵的轴心点,改变pivot可以控制旋转和缩放的中心
**************************************************
var colorFilter=new Laya.ColorFilter()//new一个颜色滤镜
**************************************************
var glowFilter =new Laya.GlowFilter()//new一个发光滤镜
**************************************************
var blurFilter = new Laya.BlurFilter();//new一个模糊滤镜
blurFilter.strength//设置模糊强度
**************************************************
var movieClip= new Laya.MovieClip();//MovieClip可以加载并播放SWF动画,SWF由Flash IDE创建,SWF不能包含代码
movieClip.load//加载并播放SWF动画
**************************************************
var animation= new Laya.Animation()//Animation可以加载并播放图集动画,图集可以使用LayaAir IDE或者TexturePacker导出
animation.loadAtlas//加载图集动画
animation.interval//设置播放间隔(单位:毫秒)
animation.index//设置当前播放索引
animation.play()//播放图集动画
animation.getGraphicBounds()//获取动画的边界信息
**************************************************
var timeLine = new Laya.TimeLine();//可以实现缓动动画
timeLine.addLabel//在时间队列中加入一个标签,返回一个TimeLine对象
timeLine.to//控制一个对象,从当前点移动到目标点
**************************************************
var httpRequest = new Laya.HttpRequest();
httpRequest.on//给网络请求添加监听器
httpRequest.send//发送网络请求
httpRequest.data//网络请求所返回来的数据
**************************************************
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,837评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,551评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,417评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,448评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,524评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,554评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,569评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,316评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,766评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,077评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,240评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,912评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,560评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,176评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,425评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,114评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,114评论 2 352

推荐阅读更多精彩内容

  • 小游戏与小程序的区别? 小游戏是小程序的一个类目,小游戏是微信开放给小程序的更多的能力,让小程序开发者有了开发游戏...
    极乐叔阅读 18,099评论 0 19
  • 1:Text的用法 效果如下: 2:loadImage的用法,可以用来加载图片 效果如下: 再来一个例子(点击图片...
    名字_都被占了阅读 729评论 0 1
  • 1:利用编辑模式来设计UI的步骤 1.1:通过编辑模式设计好UI后,然后通过‘导出’->‘清理并导出’来将UI导出...
    名字_都被占了阅读 4,012评论 0 2
  • 本文同时发布至我的个人博客,点击进入我的个人博客阅读。本博客供技术交流与经验分享,可自由转载。转载请在评论区或私信...
    DamonTo阅读 1,979评论 0 0
  • 也不知是从什么时候开始,手机,平板等等掌上科技充斥在我们周围,地铁上、公交上、马路上;逛街时,吃饭时,如厕时。甚至...
    奶牛炮筒阅读 778评论 2 2