请问soluna.js和soluna.wasm能用来做h5小游戏吗。 #62
Replies: 2 comments 2 replies
-
PS: 这方面确实存在指引缺失, @cloudwu 可以加入 wiki 至于 index.html 怎么编写, 这个比较自由, 由开发人员自行决定。一般来说需要做的工作有: 1. 定义 Module; 2. 引用 soluna.js 下面是一个最简单的 demo 供你参考: (在这个例子中, 我们将游戏源码和字体资源分装成两个 zipfile, 这样的好处是, 字体一般不需要更新, 而游戏源码可能会发生变更。可以有效的利用浏览器/cdn 缓存资源。最终他们会合并成一个 fs) (更多的关于 Module 的说明请参考: https://emscripten.org/docs/api_reference/module.html) <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Soluna Web (Lua test)</title>
<style>
body { margin: 0; background: #000; }
canvas { display: block; width: 100vw; height: 100vh; }
</style>
</head>
<body>
<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<script>
var Module = {
arguments: ["zipfile=/data/main.zip:/data/font.zip"], // 传递给 soluan 的参数, 告知游戏代码位于 /data/ 下, 多个 zip 最终会被合并成一个 zip
canvas: document.getElementById('canvas'),
preRun: [function () { // 前置钩子, 确保资源下载完成了再开始运行 soluna
const runDependency = 'load-main-zip'; // 添加前置依赖
const fontDependency = 'load-font';
Module.FS_createPath('/', 'data', true, true); // 在 memfs 中创建 /data 目录
Module.addRunDependency(runDependency);
fetch('/main.zip') // 从后端下载 main.zip
.then(function (response) {
if (!response.ok) {
throw new Error('HTTP ' + response.status + ' while fetching main.zip');
}
return response.arrayBuffer();
})
.then(function (buffer) { // 将下载的资源载入 memfs
const data = new Uint8Array(buffer);
Module.FS.writeFile('/data/main.zip', data, { canOwn: true });
console.log('main.zip loaded:', Module.FS.readdir('/data'));
})
.catch(function (err) {
console.error('Failed to load main.zip', err);
throw err;
})
.finally(function () {
Module.removeRunDependency(runDependency); // 资源下载完成, 解决前置依赖
});
Module.addRunDependency(fontDependency);
fetch('/font.zip')
.then(function (response) {
if (!response.ok) {
throw new Error('HTTP ' + response.status + ' while fetching font.zip');
}
return response.arrayBuffer();
})
.then(function (buffer) {
const data = new Uint8Array(buffer);
Module.FS.writeFile('/data/font.zip', data, { canOwn: true });
console.log('font.zip loaded:', Module.FS.readdir('/data'));
})
.catch(function (err) {
console.error('Failed to load font.zip', err);
throw err;
})
.finally(function () {
Module.removeRunDependency(fontDependency);
});
}],
onRuntimeInitialized: function () {
console.log('Soluna runtime ready');
},
onExit: function (status) {
console.log('Program exited with status', status);
},
onAbort: function (what) {
console.error('Program aborted:', what);
},
print: console.log,
printErr: console.error
};
</script>
<script src="soluna.js"></script> <!-- 引用 soluna.js 它会自动加载 soluna.wasm -->
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
我稍后加。其实 wiki 是开放编辑的。 |
Beta Was this translation helpful? Give feedback.
-
|
原来如此, 查了下文档好像有专用的仓库 https://github.com/cloudwu/soluna.wiki.git 可以提交分支 |
Beta Was this translation helpful? Give feedback.
-
|
已经放到 wiki 页面。待 wiki 内容更丰富后可能需要分拆页面。目前内容较少，所以还是保持单个页面。 |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
麻烦讲讲怎么开始用soluna.js或soluna.wasm做个h5小游戏；顺便提一下，作为中国特色可以建个QQ群吗，方便讨论
Beta Was this translation helpful? Give feedback.
All reactions