Logo
  • Features
  • Educators
  • What's New
  • Blog
  • Showcase
  • About us
  • Contact
Try it now!
Lazyload 如何正确地加载音频视频

Lazyload 如何正确地加载音频视频

什么是懒加载?

懒加载,更好的理解可以是延迟加载。 指的是程序不是在首次加载所有的内容,而是只有在用户需要的时候再加载内容。

为什么要使用懒加载?

  1. 【用户体验好】懒加载可以让用户首次进入程序的时间更快,减少等待的痛苦和流失;
  2. 【服务器负担小】懒加载可以降低服务器负担,只传输用户需要的内容
🚨
注:以下,我们不讨论是否应该不使用任何扩展来做创作。 Gandi IDE 提供的所有插件的目的都是站在用户体验的视角进行设计的。我们不会鼓励任何开发者使用或者不使用插件。 这是作为开发者的自由。
🚨
根据 Alltale 的反馈,删除评价部分:

以社区里的音乐游戏 Alltale 为例:

image

Alltale 是一款优秀的音乐游戏, 整个工程在不使用任何扩展(可以放到所有社区里的普世性)的情况下可玩性很强。 保证到纯粹正统的原味固然重要。 站在用户体验上,你会发现此游戏加载时间十分长。

如上图所示,左边可以看到是用户游玩的界面,此时玩家甚至都还没有开始游戏; 右边是网络传输,此时程序已经去请求下载了大量的 mp3 文件。 正如作者自己在作品介绍里说的,项目体积有 112.69M,也就是任何一个玩家在没有开始游戏时,就要先下载 100 多兆的资源文件才能开始游戏。

以社区中某个作品为例,如下图所示,用户首次打开时,需要下载 327 MB 的资源,即便是高速的网络,也需要等待将近 1 分钟才能完全打开。 这极大地降低了用户的体验:

image

相比之下,《共创视频箱》 这个项目就用到了懒加载技术,虽然是一个播放视频的程序,但传输仅在用户选择播放具体视频时才下载资源。性能十分高,用户体验十分好。

image

什么样的内容推荐使用懒加载?

  1. 背景音乐,或者比较大尺寸的音频文件
  2. 视频素材
⚠️
过去 Scratch 中是不能播放视频的,为了实现动画效果通常有两种做法: 1. 通过转换成为一张张素材,播放帧动画; 2. 通过转化成数据流,用 Canvas 绘制 注意,这两种方式是在 Scratch 限制下的不得已的选择。懒加载的存在就是为了突破这样的限制。 ( MPGE 4 的压缩算法及效率远高于每一帧的加载)

如何使用懒加载?

案例一、懒加载一个背景音乐,并且循环播放

第一步:打开 Gandi,上传音乐

在 Gandi 的左边,可以看到第二个选项《素材库》,如下图所示

image

在界面中下方,可以找到懒加载媒体库:

image

点击 Audio 或者 Video,再点上传。 选择并且上传。

image

你将会看到在懒加载媒体库里出现了音频文件。 可以点播放试听是否正确:

image

第二步:载入《媒体助手》插件,并且播放音乐

在 Gandi 中找到媒体助手,并且安装:

image

回到代码编写区,你会看到媒体助手被加载了。 找到音频部分,你需要用到以下几个代码块:

image

我们希望把刚才上传的音乐 gameover_loop_01.mp3 关联到 gameOver,只需要使用这句代码:

image

例如,我们想实现的是,当只角色被点击时,再载入资源文件并且在载入完成后循环播放。 我们只需要这样做:

image

示例源代码:

播放音频示例 | 媒体库和懒加载 - 肖恩老师的马甲 - 共创世界(ccw.site) - Scratch、游戏、动画、漫画、小说、编程创作社区

共创世界(CCW)是下一代 ACGN(游戏、动画、漫画、小说)内容创作社区。这里有强大易用的 Scratch 编程创作工具、十万开发者、百万独立游戏。想创作、学习、试玩独立游戏都可以来这里。

www.ccw.site

案例二、载入一个视频,并且把它当作背景播放

第一步:上传视频文件

和上传音频步骤一样,不再赘述

第二步:懒加载中载入视频,并且播放

image

没错,就这么简单!

☝
Tips: 一个视频可以被载入到多个角色的前面或者后面,作为前景或背景。 其中: 1. x y 偏移量是指和被绘制角色的坐标的偏移 2. 宽高当都不填的时候,会默认用视频原始尺寸绘制 3. 当只填写宽时,高度会自动按比例计算 4. 当只填写高时,宽度会自动按比例计算 更多详情,请见媒体助手的文档

媒体助手 Media Utils 文档

示例源代码:

播放视频示例 | 媒体库和懒加载 - 肖恩老师的马甲 - 共创世界(ccw.site) - Scratch、游戏、动画、漫画、小说、编程创作社区

共创世界(CCW)是下一代 ACGN(游戏、动画、漫画、小说)内容创作社区。这里有强大易用的 Scratch 编程创作工具、十万开发者、百万独立游戏。想创作、学习、试玩独立游戏都可以来这里。

www.ccw.site

更多参考资料

媒体助手 Media Utils 文档

Logo

Designed by 2ndR with love

Discord