Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

我的第一个上线小程序,案例实战篇二——LayaAir游戏开始界面开发

又过二十 2019-01-19 15:34:00 阅读数:220 评论数:0 点赞数:0 收藏数:0

不知不觉我的第一个小程序已经上线一周了,uv也稳定的上升着。

很多人说我的小程序没啥用,我默默一笑,心里说:“它一直敦促我学习,敦促我进步”。我的以一个小程序初衷是经验分享,目前先把经验分享到博客园,边学习边完善小程序。同时我会持续学习,持续更新,功能定会一天天的完善起来。

欢迎大家扫码体验。

闲话少叙,今天我们一起来练习LayaAirIDE搭建游戏开始界面。

既然要开发游戏,那自然少不了图片素材,大家可以根据实际情况自行备图。大致一下几种素材图片:

1、一张背景图片(750*1333)

2、开始按钮背景图片,尺寸自己选择即可

3、游戏规则按钮背景图片,尺寸自己选择即可

4、其它的游戏名称图片和Logo之类的图片可以自行选择

素材准备好了,下面就是一个字,干!

第一步:新建一个空的LayaAir 空项目(PS:不会的话,清先跳转我的第一个上线小程序,案例实战篇一

第二步:我们创建一个StartScene的场景,并且设置其宽度750,高度1333,点击确定

第三步:我们将场景切换到编辑模式,在Assets文件处右键-》新建目录-》并命名为images文件夹。如图:

然后我们把准备好的图片素材拖拽至images文件夹上即可将图片放入该文件夹中。

第四步:我们选中StartScene.scene场景文件,对场景进行编辑。

我们想场景中拖入一个image,并向其常用属性skin中拖入我们准备好的背景素材。

我们继续向场景中拖一个button,并设置其var 属性为btnRule,设置其stateNum为1,向其常用属性skin中拖入我们准备好的规则背景素材。

我们继续向场景中拖一个button,并设置其var 属性为btnStart,设置其stateNum为1,向其常用属性skin中拖入我们准备好的开始背景素材。

第五步:我们把窗口切换到IDE的代码模式,在src目录下面新建一个scripts的文件夹,在scripts文件夹右键-》新建模板文件-》新建脚本文件,命名为StartScene点击确定生成脚本文件,脚本和场景关联大家可以参考第一步。代码如下:

export default class StartScene extends Laya.Scene {
constructor() { super(); }
onBtnRoleClick(){
}
onBtnStartClick(){
}
onEnable() {
this.btnRule.on(Laya.Event.CLICK,this,this.onBtnRoleClick);
this.btnStart.on(Laya.Event.CLICK,this,this.onBtnStartClick);
}
onDisable() {
}
}

最终效果图:

 

若是喜欢微信小游戏开发,不妨和我一起学习成长!!!

版权声明
本文为[又过二十]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/wyang/p/10290218.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领