如何制作一个闪屏页面

简介: 闪屏(Splash)指的是当你打开一个应用时,首先映入眼帘的那个界面。通常闪屏页面都会比较简单,因为要一闪而过(这大概就是为什么叫做闪屏了),一般都会放置产品的 LOGO,在游戏中通常会放置游戏制作团队或者工作室的 LOGO。

闪屏(Splash)指的是当你打开一个应用时,首先映入眼帘的那个界面。通常闪屏页面都会比较简单,因为要一闪而过(这大概就是为什么叫做闪屏了),一般都会放置产品的 LOGO,在游戏中通常会放置游戏制作团队或者工作室的 LOGO。


微信小游戏制作工具目前暂时不支持自定义闪屏页,但是有不少朋友看见我的精致1010 中其实是有一个闪屏页的,就问那个小蚂蚁头像的闪屏页是怎么做的。虽然工具目前不支持,但是我们仍然可以找到一些其它的替代方案来实现,今天就来分享一下其中的原理以及方法。


640.png


如图,是我的所有游戏的闪屏页,非常的简单,一个背景,一个小蚂蚁的标志和一小段文字。


在小游戏制作工具中打开“作品设置”,其中有一个“资源加载方式”的选项,默认选择的是“全部加载后启动”。


640.png


首先,你需要把资源的加载方式,设置为“切换场景时加载”,这两种加载方式到底有什么不同呢?


我们先来看一下“全部加载后启动”这一过程是怎样的。


640.png

如图,当点击图标打开游戏时,会发生如下的过程:在正式进入游戏前,先把整个游戏需要的所有资源都加载好,这些资源都包含什么呢?图片,声音,积木块代码,总之所有供这个游戏运行所需要的东西都是资源,在所有的资源都加载完毕后,接下来才显示游戏的第一个首页面。


我猜你也发现了其中的问题了吧!如果一个游戏的资源特别少是可以使用这种方式的,因为加载资源的过程可能不需要太长时间。但是如果一个游戏的资源比较多,这种方式的弊端就显现出来了,玩家需要在加载页等待很久才能看到游戏的第一个页面,这种体验给玩家的感受肯定是不好的。


接下来,我们再来看一下“切换场景时加载”的过程。


640.png


点击图标打开游戏,依然需要加载资源,但是此时并不需要加载游戏中的所有资源,只需要将第一个闪屏页需要用到的资源加载完成就够了,所以相当于只需要加载少量的资源即可打开“闪屏页面”。接下来,在闪屏页面中再次加载资源,这次需要加载的资源是“游戏首页”需要用到的资源,加载完这部分资源后,就可以显示“游戏首页”了。


这就是在微信小游戏制作工具中做一个闪屏页的原理了。首先,将资源的加载方式设置成“切换场景时加载”,然后制作一个非常简单的“闪屏页”(只需要少量的资源),当点击游戏图标打开游戏时,我们先让游戏尽快的进入“闪屏页”,然后再从闪屏页加载资源进入到“游戏首页”。


制作起来非常的简单,创建一个“闪屏”场景,并且把它设置为“主场景”,这个场景中的内容非常少,只包含一个 LOGO 以及一个默认的背景。


640.png


然后在闪屏场景增加如下的积木块,其实只做了一件事,就是当“闪屏”场景启动时,立刻切换到“首页”场景。


640.png


好了,这就是在微信小游戏制作工具中做一个闪屏页的方法了。估计以后在项目设置中可能会直接增加一个设置闪屏页的功能,不过,在有这个功能之前,这个方法可以当作一个不错的替代方案。


我一直认为一个小游戏应该是轻巧的,体现在当玩家打开它时,应该能够立刻的进入游戏,在进入游戏后,应该能够立刻的上手进入状态。作为一个游戏的开发者,尽可能的合理使用资源,优化游戏设计,为玩家节省哪怕是一秒钟的等待时间,都是非常值得做的。


请相信,你在制作游戏过程中的每一点儿用心,玩家都会感受的到。共勉。

想学习做游戏的话,关注我的公众号就对啦!

相关文章
|
4月前
|
小程序
【微信小程序-原生开发】实用教程18 - 九宫格、底部悬停按钮、页内悬浮按钮、拨打电话、一键复制
【微信小程序-原生开发】实用教程18 - 九宫格、底部悬停按钮、页内悬浮按钮、拨打电话、一键复制
62 0
|
6月前
微信小游戏制作工具中关于背景图的设置
微信小游戏制作工具中关于背景图的设置
209 0
|
小程序 开发者
如何制作一个闪屏页面
闪屏(Splash)指的是当你打开一个应用时,首先映入眼帘的那个界面。通常闪屏页面都会比较简单,因为要一闪而过(这大概就是为什么叫做闪屏了),一般都会放置产品的 LOGO,在游戏中通常会放置游戏制作团队或者工作室的 LOGO。
202 0
|
小程序 JavaScript
微信小程序图片放大预览效果的实现,轮播图点击放大预览
微信小程序图片放大预览效果的实现,轮播图点击放大预览
1040 0
|
JSON Android开发 数据格式
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
小储云系统内置防红页面美化
小储云内置防洪美化,比较火的防洪页面,特意做到小储云上面,这是本站更新的第一个小储云的页面,会更新越来越多,上传到根目录即可,然后解压-压缩包!
290 0
小储云系统内置防红页面美化
|
存储 前端开发 JavaScript
|
Android开发
android手机中图片的拖拉及浏览功能
android手机中图片的拖拉及浏览功能
101 1
|
前端开发 JavaScript
两步实现在网站左下角实现音乐播放器弹窗听歌
两步实现在网站左下角实现音乐播放器弹窗听歌
158 0
两步实现在网站左下角实现音乐播放器弹窗听歌