Logo
    打开 Gandi IDE
    Lazyload 如何正确地加载音频视频

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

    📚 返回主页面
    ‣
    更多链接

    其他扩展文档

    Gandi IDE 中的最佳实践

    从头开始,制作在线联机游戏 - 消息系统篇

    Feb 14, 2023 5:55 AM
    从头开始,制作在线联机游戏 - 同步系统篇

    Feb 14, 2023 5:55 AM
    👨‍💻
    如何使用控制台拓展帮助你 Debug

    Feb 14, 2023 5:55 AM
    Lazyload 如何正确地加载音频视频

    Feb 14, 2023 5:55 AM
    【历史版本】功能上线啦

    Feb 14, 2023 5:55 AM
    从头开始,制作在线联机游戏 - 匹配系统篇

    Feb 14, 2023 5:55 AM
    如何在 Gandi IDE 中协同创作

    Feb 14, 2023 5:55 AM
    如何使用 Gandi 排行榜编辑器制作排行榜

    Feb 14, 2023 5:55 AM
    如何制作云存档

    Feb 14, 2023 5:55 AM
    ☁️
    云变量,KV 数据库 和 MMO 该怎么选用

    Feb 14, 2023 5:55 AM

    什么是懒加载?

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

    为什么要使用懒加载?

    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 文档

    本页索引

    • 什么是懒加载?
    • 为什么要使用懒加载?
    • 什么样的内容推荐使用懒加载?
    • 如何使用懒加载?
    • 案例一、懒加载一个背景音乐,并且循环播放
    • 第一步:打开 Gandi,上传音乐
    • 第二步:载入《媒体助手》插件,并且播放音乐
    • 案例二、载入一个视频,并且把它当作背景播放
    • 第一步:上传视频文件
    • 第二步:懒加载中载入视频,并且播放
    • 更多参考资料
    Gandi IDE 🧑‍💻 开发者中心 @ 共创世界

    Designed by 2ndR with love @ Chengdu

    Tencent QQGitHub