webassembly 网页游戏

0

WebAssembly 使开发人员能够创建曾经只能通过本机代码才能实现的高性能 Web 应用程序。 无论您是构建沉浸式游戏、实时多媒体应用程序还是复杂的科学模拟,WebAssembly 都开辟了新的可能性。

此外,Emscripten 的功能是将 C 和 C++ 代码作为输入,并使用一系列工具将其转换为 WebAssembly 字节码。 随后可以在 Web 浏览器中加载并运行生成的字节码,从而使开发人员能够利用 C 和 C++ 代码构建 Web 应用程序。

Microsoft 的 Blazor 引入了一种不同的方法腾讯游戏盒子 有游戏,支持使用 C# 和 .NET 进行客户端开发,为熟悉这些生态系统的开发人员开辟了新的可能性。

AssemblyScript 作为一种专为 WebAssembly 设计的类 TypeScript 语言脱颖而出,为想要利用 WebAssembly 性能优势的 JavaScript 开发人员简化了过渡过程。

webassembly 网页游戏

WebAssembly有着丰富的框架和库等待着开发人员。 这些工具不仅简化了 WebAssembly 编程的艺术,还提升了它的艺术水平,满足了开发人员不同的背景和偏好。

要从 JavaScript 与 WebAssembly 代码进行交互,您需要导入 WebAssembly 模块并调用其函数。 您可以使用 WebAssembly JavaScript API 来实现此目的。

为您选择的语言安装必要的工具。 对于 Rust,您可以使用 Rust 的 WebAssembly 工具链,可以使用“rustup”安装该工具链。

使用 Electron 和 WebAssembly 等工具,您可以创建跨平台桌面应用程序,这些应用程序与 Web 应用程序共享大部分代码库。

Project Cthulhu 是一个基于网络的船舶模拟器,允许您在浏览器上计算、运行和可视化船舶模拟。 对于前端,它使用 React 和 Tailwind CSS。 对于该项目的 3D 部分,它使用 Three.js 和 React Three Fiber。

Project Cthulhu 是一个基于网络的船舶模拟器,允许您在浏览器上计算、运行和可视化船舶模拟。 对于前端,它使用 React 和 Tailwind CSS。 对于该项目的 3D 部分,它使用 Three.js 和 React Three Fiber。

Near Protocol 是用于使用 WebAssembly (AssemblyScript) 构建去中心化应用程序的公共区块链用于在 AssemblyScript 中开发 NEAR 智能合约的软件包集合,包括:

Peter Salomonsen 的 WebAssembly Music Experiment 使用 AssemblyScript 开发实时编码编辑器中每个可用乐器的逻辑和示例输出。 “WebAssembly 使实时合成音频成为可能,并具有一致/可预测的性能。” 这意味着,由于合成音频的计算量很大,JavaScript 很难完成这项任务,但这使其非常适合 WebAssembly。 因此,为浏览器解锁新的高性能功能!

Peter Salomonsen 的 WebAssembly Music Experiment 是一个网络音乐实时编码编辑器,其中的乐器是在 AssemblyScript 中实现的。

需要实时音频和视频处理的应用程序(例如视频会议或音乐制作软件)可以受益于 WebAssembly 的低级功能来有效处理数据。

Dream Engine 简介:一款突破性的实时 3D 引擎,将尖端游戏引擎的功能与 Google Docs 的协作能力无缝集成

如果您对移植 C/C++ 库或应用程序感兴趣,我强烈推荐 Ben Smith 的 (binji) SFHTML5 Talk,内容涉及将 C 项目移植到 Web。 本演讲与 D3Wasm 无关,但可以帮助推动移植这些类型的应用程序。

该项目使用 WebAssembly,因为它使用 Emscripten 移植了 Deviloution 的源代码。 这是非常值得注意的,因为它证明了 WebAssembly 可以使用 Emscripten 将这些大型 C/C++ 代码库带到网络上,以运行令人印象深刻的 3D 游戏。

WebAssembly 支持开发沉浸式 3D 游戏,这些游戏可以直接在浏览器中运行,性能与本机应用程序类似。 WebGL 等库和 Unity 等游戏引擎正在利用 WebAssembly 来突破基于 Web 的游戏的界限。

集成:WebAssembly 可以与 JavaScript 无缝交互。 开发者可以从 JavaScript 调用 WebAssembly 函数,反之亦然,从而实现与现有 Web 应用程序的顺利集成。

执行:加载后,WebAssembly 代码将由浏览器的虚拟机执行。 它以接近本机的速度运行,因为它更接近计算机 CPU 可以理解的机器代码。

编译:使用 C、C++、Rust 等高级语言编写代码。然后将此代码编译为 WebAssembly 二进制文件(扩展名为 .wasm)。 该二进制文件针对快速执行进行了高度优化。

WebAssembly 提供了一种接近原生代码的速度运行来此类任务的方法,从而解决了这些限制。 WebAssembly通过更接近机器代码并且更加有效地利用硬件资源来实现这一点。

为了真正理解 WebAssembly 的重要性,先来看一下设计这门语言的初衷。 传统 Web 应用程序的功能严重依赖 JavaScript。 虽然 在现在的互联网应用中,JavaScript 占据了重要地位,用途广泛而且易于访问,但是在某些任务中, JavaScript的表现也不尽人意,例如在执行 3D 渲染、视频编辑或科学模拟等高性能任务时,JavaScript表现出一定的局限性。

与主要是基于文本的脚本语言的 JavaScript 不同,WebAssembly 被设计为一种低级语言,允许您将 C、C++ 或 Rust 等高级语言编译为可以在浏览器中运行的二进制格式。

WebAssembly 本质上是一种二进制指令格式。 虽然这听起来可能很复杂,但它可以被定义为一种通用语言,浏览器可以理解并以接近本机的速度执行。

当代社会, 万事万物总是在快速地变化着,,有一种新技术正在产生巨大的影响。 想象一下一个超快的网络,几乎可以像常规计算机程序一样完成任务。 这就是 WebAssembly(简称“wasm”)的用武之地。

我之前重新编译过godot,确实可以减少体积,重编简单,但是减少组件之后游戏容易崩溃这个比较难受。

以上便是,在用 Godot 引擎导出到网页端的一些具体的实践。通过上面的操作,可以显著降低导出包的大小,希望能对你有所帮助。

资料分散,我在做中文社区,不管有没有人用,当给自己整理

同时,如果在服务端能够开启 gzip 压缩,则能够进一步地减小包传送的大小,经过测试,10M 左右的包在开启压缩以后,只传送了 2.8M 的数据,只有原来的 1/3 大小了,如下:

刚开始学godot,这个不错

使用的定制模板导出的文件大小,就会在把 3d 模块、视频播放等一些不必要模块去掉以后,生成的 wasm 大小可以压缩到 10M 以内,优化了一半大小。(这里需要注意的是,如果开启了图片有损压缩,那就需要把 webP 功能打开,不然会 error)

怎么导出发布微信小游戏呀

把这个文件丢到引擎的源代码根目录,再运行 scons 的时候,就能够识别到了。它会在 bin 目录下生成一个 zip 文件。这个文件需要放置到导出窗口下的 Custom Template,如下图所示,在每次导出前配置即可。

最简单的,可以用 scons platform=javascript tools=no target=release 来打包一个 Release 环境的包。

然后就可以按照之前的文档去进行构建了,可以先运行 scons platform=list 查看有哪些打包环境可用。(对于导出到网页端来说,如果不安装 emsdk,就无法进行到下一步)

默认的 Emscripten 安装脚本有点问题,尤其是在先前已经安装过 python 的情况下,这里根据自己的情况改,然后使用 pip install scons 安装 scons

# Activate PATH and other environment variables in the current terminal

# Make the "latest" SDK "active" for the current user. (writes .emscripten file)

Godot 提供了通用模板的方式,允许使用者按照他自己的实际情况来开/关某些模块。也就是说,你可以通过重新编译源代码的方式,来生成你自己专属的 wasm。官方文档其实写的很详细了,但是第一次看还是会蛮头大的,这里面其实还是有很多潜在坑的。

默认导出的 wasm 大概有 18M 左右(可能随版本会有差异),里面包含了整个引擎的所有功能。换句话说,哪怕只是做了一个空的项目,导出的 wasm 也是一样的,因为 wasm 就相当于一个 exe 执行文件。其实并非所有的引擎功能都是需要的,例如只是做个 2D 游戏的话,3D 部分的代码就不需要了。

打开导出的文件,主要会包含 index.html、index.pck、index.wasm,还有一些 js 的胶水文件。index.pck 是场景、素材、资源文件的打包,而 index.wasm 即是游戏的引擎文件。占据主要大小的是后两者。

这也就意味着,如果以 C++ 写的引擎代码,可以直接编译到网页端运行,以 JS 作为胶水来粘合。这就形成了网页端游戏的第二大类实现,我们说它是基于 WebAssembly 的,把游戏引擎搬到了网页中,例如 Unity、Godot 等。这里的引擎有 WebGL 的部分,也有其他的(例如物理系统等等)。

现如今如果要在以浏览器内核运行游戏,你就会频繁听到以上这些概念。他们都与 JavaScript 有点关系,但彼此又不太相同。Canvas 其实是 HTML5 的一部分,可以用脚本去控制一些 2D 元素的渲染。而 WebGL 则脱胎于 OpenGL,是一套图形的 API 标准,可以在 Web 端渲染 3D 的图像。WebGL 是 OpenGL 的 web 实现,主要用于在浏览器上展示 3D 图形的底层图形技术。

它的引擎整个是开源的,并且是 MIT 协议,这也就意味着你可以在它的代码上改一改,就可以宣布自己做了个游戏引擎,要拿出去商用也都是可以的。引擎制作的游戏可以导出到多个平台,如 Windows、Linux、Android、iOS、Web 等等。

RustConf 2020 回顾。这一天的 Rust 会议吸引了来自全球的 Rust 开发者和社区成员。 讲座的内容从较强的技术性到游戏入门介绍,不一而足,也有儿童可参与的活动。

Rapier 是 nphysics 的继任者,专注于性能。 正如 nphysics, 它分为两个 crate: rapier2d 和 rapier3d,分别对应 2D 和 3D 物理。它一开始就设计为多线程的。 Rapier 需要较少的增量编译,节省了构建时间。 Rapier 的运行速度比 nphysics 快5至8倍。

Trunk 是一个 Rust 写的 CLI 工具。它提供了一个简单的零配置工具,用于构建 Rust WebAssembly 应用程序,捆绑应用程序资产(sass、css、图像和 c )并将其全部发送到Web。

Rust 1.46.0 发布。有什么重大提升? 现在,您可以在 const fn 中放置更多内容,从而在编译时,而不是运行时。执行更多计算。 这样可以大大提高特定 Rust 应用的性能。

划屏操作的三国类单机游戏代码根据规范生成 WebAssembly 6502 模拟器。本教程教您如何在WebAssembly 中为旧硬件(如Atari计算机)创建模拟器。

WebAssembly 小试牛刀:上手基本操作。这是浏览器中 WebAssembly 的入门指南,文中列举了 C 或 Rust代码示例。

Istio, 一个大受欢迎的Server Mesh产品,支持了 WASM。该视频显示了如何通过构建用于 Istio 的代理 Envoy 的个性化过滤器来扩展 Istio 的功能。这些个性化过滤器可以用任何能编译成 wasm 的语言编写。

这个项目将用于手写数字识别的经典神经网络算法编译到 WebAssembly 中。我们还看到了一个类似的用于识别手写数字的项目,将算法放到了服务端的 Rust 和WebAssembly 。 点击这里,可以详细了解他的代码。

Ring 是一个用于通用目的的编程语言。它支持命令式、步骤式、面向对象、函数式和声明式编程范例。 Ring 计划在9月发布的1.13版本中支持 Qt WebAssembly。 Qt WebAssembly 是一个 平台插件,用于创建可一集成到 web 页面中的 Qt 应用。

Motoko 由 Difinity 团队设计开发,专门针对 WebAssembly 设计。这篇发表在 Stackoverflow 上的博客文章解释了发明 Motoko 的原因。 Motoko 是用于计算机互联网(基于 WebAssembly 的去中心化云计算平台)的最佳语言。

专题: 单机三国战游戏   战三国单机游戏   单机老三国游戏