90s.dev

应用

关于

入门指南

指南

技术

参考

社区

博客

::Site::90s.dev::Page::

# 最终发布 90s.dev

我在 HN 上多次提到它，并且自大约二月份以来一直在不停地开发。 所以我很高兴最终将其公开。

# 收到的反馈！！

感谢 HN 上的所有人的反馈。 很明显，我发布得太早了，产品不够专注，并且需要具体的教程。 我将努力解决这些问题，并在几个月后回来。

# 梦想

自从我还是个孩子的时候，我就想重现《魔兽争霸 II》，或者至少是《魔兽争霸 I》。 但几十年来，我一直没有抽出时间来做。 今年二月的某一天，我在凌晨 2 点起床并开始编写代码。 我厌倦了等待。 所以我写啊写啊写。 但与其制作游戏，甚至是游戏引擎，甚至是游戏制作工具，我发现自己正在制作一个用于制作游戏制作工具、游戏引擎和游戏的 API。 事实证明，我骨子里真的是一个API 设计师。 我想我一直都知道这一点。 最终它演变成围绕一个 320x180 画布的 API，用于构建和共享应用程序，无论是像地图制作器这样的游戏制作工具，还是 60 fps 的游戏。

# 一款新的在 Web 上运行的游戏制作工具

简而言之，90s.dev/os/ 是一种独特的新型游戏制作工具：

默认情况下，它将附带用于制作游戏像素艺术数据的基本应用程序，例如 paint、sprite-maker 和 map-maker。 其他人将不得不制作音效编辑器和音乐编辑器，因为我对 web audio API 一无所知。 但这就是它的美妙之处和意义所在，你可以制作这些应用程序并发布它们，它们将成为任何人都可以运行的一流应用程序，并且你可以使用 iframe 或链接共享它们。 例如，单击此处打开我完成了 40% 的 paint 应用程序，再次单击以关闭它：/os/#sys/apps/paint.app.js

# 受游戏开发原型设计应用程序的启发

它受到 pico8、tic80、picotron 和 love2d 的启发：

您可以将其视为 meta-pico8，或带有 TypeScript 的 love2d，或垂直扩展而非水平扩展的 tic80。

# 真正的 GUI 创新

说实话，我并不是想在这里进行创新。 我只想要一个简单的 GUI，让我可以在《魔兽争霸 I》和《魔兽争霸 II》中构建带有“移动”和“攻击”等操作按钮的侧面板。 因此，我编写了一个非常典型的视图 API，其中视图将自身绘制到屏幕上并具有子视图。 有一段时间，它非常普通且乏味，对于 GUI 来说，这是一件好事。

# 布局 (Layout)

但我厌倦了手动定位和调整树中所有视图的大小，所以我最终得到了一个非常简单的 自动布局系统，该系统恰好也很强大。

# Refs

我也厌倦了手动设置大小、子项或背景颜色等值，尤其是当大多数时间都是响应另一个值更改时，并且新值直接基于该更改的值。 我也厌倦了为所有内容添加回调。 因此，refs 逐渐出现，基本上是可观察的指针，并且经过大约一个月左右的时间后，它们变得非常稳定，以至于我重新设计了视图 API，以便所有视图属性都由 refs 支持。 这意味着所有属性都是可观察的，您可以将 ref 赋予任何属性。 注意：即使 refs 与其他系统中的类似概念共享相同的名称，但我从头开始设计我的 refs，没有受到这些其他系统的任何启发。 它们与 React refs 完全不同，而且直到上周我才知道 Vue 有 refs。

# 组合 (Composites)

最后，我偶然发现了 JSX 的一个有趣的特性。 事实证明，如果您反转 HTML 和 React 使用字符串与值作为 JSX 标签的方式，则字符串标签将成为将抽象视图的实现与其用法解耦的完美方式。 使用具体的（大写）视图，您必须导入它并直接使用它。 但是抽象（小写）视图可以由某些库或应用程序添加到全局表中，然后由系统的完全独立的部分使用。 这导致了 composites：

import { Button } from '/os/api.js'
const b1 = <Button onClick={...}>...</Button> // concrete
const b2 = <button onClick={...}>...</button> // abstract

对于 GUI 应用程序开发来说，这是一个非常强大的概念。 上面的具体视图将始终看起来和工作方式相同。 但是上面的抽象视图可以以任何方式实现。 这在颜色选择器视图中最清楚：

const $color = $(0x00000000)
const view = <colorpicker $color={$color}/>

此的默认实现具有一个最基本的颜色选择器，仅允许从两个 24 色调色板（sweet24 和 vinik24）中选择 48 种颜色。 但是任何应用程序或库开发人员都可以覆盖此值以返回任何类型的颜色选择器。 也许是更传统的颜色选择器，它具有 RGBA 滑块并且具有 1600 万种颜色，或者也许是可以让您从大量调色板列表中进行选择的颜色选择器，或者也许是完全模仿 pico8 的颜色选择器。

# 关于发布应用程序的说明

直到几天前，内置文件系统中都有一个名为 net/ 的共享驱动器，该驱动器由数据库支持，并且共享应用程序或库或游戏资产的方式是将您的文件复制到您在此驱动器中的自己的文件夹中。 您可以通过以下方式轻松导入模块：

import { stuff } from '/os/fs/net/someuser/some/file.js'

并且感谢 service worker，它就可以工作。 但是这个周末，我顿悟了如何使用相同的 service worker 通过 CDN 导入托管在 NPM 或 GitHub 上的文件。 因此，我删除了 net/ 并决定支持以下操作：

import { stuff } from '/os/fs/ghb/someuser/project@1.0.0/some/file.js' // 或者：
import { stuff } from '/os/fs/npm/someuser/project@1.0.0/some/file.js'

这正在进行中，但大部分已经完成。

# 社区优先

由于它被设计为操作系统，屏幕只是一个 320x180 的画布，因此它需要应用程序。 内置应用程序最多只能使用。 理想情况下，社区可以制作自己的应用程序，并使用这些应用程序来制作游戏资产和游戏，所有这些都与其他用户共享。 由于这需要在社区之间进行协调，因此侧边栏中有一个问题跟踪器、wiki 和讨论论坛，每个都托管在 GitHub 存储库中。

对于共享应用程序，请使用链接格式 /os/#app，例如：

版权所有 © 2025 :: 使用 immaculata.dev 制作 :: 电子邮件 :: 服务条款 :: 隐私政策

网站主题

深色浅色系统

在本页