ハクソク

世界を動かす技術を、日本語で。

Show HN: 90s.dev – ウェブ上で動作するゲームメーカー

370日前原文(90s.dev)

概要

90s.dev は、1990年代風のGUIアプリやゲーム開発ツールをWeb上で構築・共有できる 新しいAPIプラットフォーム です。 ゲームエンジンやゲームメーカーそのものではなく、それらを作るためのAPIを提供します。 TypeScript中心のSDK や WebGL2対応 など、現代的な技術も取り入れています。 アプリの公開・共有 が容易で、コミュニティ主導の拡張が期待されています。 GUIやレイアウト、データバインディング などで独自の工夫が施されています。

90s.dev 公開：90年代風ゲーム開発APIプラットフォーム

90s.devとは

  • Web技術を包み込む「OS」的なAPI を提供すること
  • ゲーム、ゲームエンジン、ゲームメーカーコンポーネント の作成を支援するAPI設計
  • GUIアプリ開発が楽しかった90年代 の雰囲気を再現すること
  • ゲームエンジンやゲームメーカー自体ではない 点を明確化すること
  • pico8, tic80, picotron, love2d などの影響を受けつつ、独自性を追求すること

特徴

  • HTML Canvas上で動作し、ブラウザで完結 するプラットフォームを実現すること
  • 320x180（16:9）画面をウィンドウサイズに合わせて拡大 する設計
  • Web Workerでアプリを隔離実行 し、セキュリティとパフォーマンスを両立すること
  • OffscreenCanvas経由でWebGL2を利用可能、60fpsゲームも対応すること
  • GitHubやNPMにあるアプリの公開・ロードが可能 になること
  • TypeScriptファーストでVSCode対応SDKを同梱 し、プロトタイピングを高速化すること
  • WASMにコンパイルできる任意言語のモジュールインポート を許容すること
  • ピクセルアート作成アプリ（paint, sprite-maker, map-maker等）を内蔵 すること
  • サウンド・音楽関連アプリはコミュニティに委ねる方針 を取ること

デモ・利用例

  • paintアプリ（80%完成）を即座に試せるUI を提供すること
  • アプリの起動・終了がワンクリックで可能 な設計
  • アプリの共有はURLリンクやiframeで簡単に実現 すること

インスピレーション元と違い

  • pico8 ：美学的ミニマリズム・単一言語サポートを踏襲すること
  • tic80 ：pico8の制約を緩和した設計を参照すること
  • love2d ：外部IDE利用前提の開発スタイルを採用すること
  • picotron ：OS的アーキテクチャを模倣すること
  • meta-pico8、TypeScript版love2d、縦方向拡張型tic80 として位置付けること

GUI設計の独自性

  • Warcraft I/II風のサイドパネルUIを目指したシンプルなView API を開発すること
  • ビューの自動レイアウト機構を極限までシンプル化 し、手動配置の手間を削減すること
  • 「ref」機構（監視可能なポインタ）を全プロパティに導入し、データバインディングを容易化 すること
    • 他フレームワークのrefとは無関係 で独自設計を強調すること
  • JSXのタグ表現を活用し、具体ビューと抽象ビューを分離 すること
    • 抽象ビューはグローバルテーブル経由で任意に差し替え可能 な柔軟性を持つこと
    • colorpicker例：デフォルトの48色パレット以外にも、任意の実装に差し替え可能 とすること

アプリ公開・共有の仕組み

  • 従来のnet/共有ドライブ方式から、GitHub/NPM/CDN経由のインポート方式へ移行 すること
    • 例：
      • 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'
  • OS的な設計の中で、アプリは320x180キャンバス上で動作 すること
  • ビルトインアプリは最低限で、コミュニティによる拡張・共有を重視 すること
  • GitHubリポジトリ上にIssue Tracker, Wiki, Forumを設置し、共同開発・議論・管理を促進 すること
    • Issue：機能要望・バグ報告
    • Forum：プロジェクトの告知・議論
    • Wiki：プロジェクトのキュレーション・整理
  • アプリ共有用リンク形式を統一 すること
    • 例：/os/#sys/apps/paint.app.js, /os/#ghb/someuser/someapp.app.js（近日対応）

先行事例・経歴

  • minigamemaker.com や 90s.dev/v1（sys32） など、過去の試作プロジェクトを踏襲・発展させること

コントラクトワーク募集

  • 興味深くチャレンジングな案件については契約作業も受託可能 とすること

まとめ

  • 90s.devは、ゲーム開発者やツール開発者向けの新しいAPIプラットフォーム であり、
  • Web技術の現代性と90年代GUIの楽しさを融合 した設計思想を持つこと
  • コミュニティ主導での拡張・共有・改善が期待される次世代型ゲーム開発基盤 として提案

Hackerたちの意見

これが何なのか、能力については完全には理解していないけど、見た目がめっちゃ好きだな。見た目が感情に影響を与えて、もっと興味を引くって面白いよね。

└

ありがとう！説明するのって本当に難しいよね！実際、この全記事は、これが何なのかをできるだけ短く説明しようとしてるだけなんだ。最短バージョンはこうかな：90s.devは320x180のウェブキャンバスを使ったAPIで、ゲームやゲーム制作ツールを作るために特化していて、共有機能も内蔵されてて、ゲーム制作ツールを素早く簡単に作れる革新的なGUIがあるんだ。でも、まだちょっと曖昧すぎるな。諦めるわ。

└

見た目は好きだけど、16:9と90年代のコンピュータを一緒にするのはちょっとおかしいよね。背中が痛くなるような、ちょっと四角じゃないトリニトロンモンスターが一番だった。

└

説明の仕方がわかったかも：ゲームプロトタイピングのために、もっと使いやすいpico8を作りたかったんだ。それで320x180のデザインになったし、このプロトタイプもね：https://90s.dev/v1/でも、VS Codeの完全な便利さも求めてたんだ。TypeScriptの完全な型チェックとオートコンプリートサポートも含めてね。だから、pico8のタブに含まれるものを作って公開するためのプラットフォームになるようにデザインしたんだ。今思うと、これをリリースするのが早すぎたな。

すごくクールに見えるけど、始めるのがちょっと難しいかも。ミニゲームを作るための簡単なウォークスルーがあればいいな。

└

ありがとう。ゲームを作る現在の方法は、アプリを作るためのウォークスルーと同じだよ[1]、ただカスタムビューを作って、その描画メソッドをオーバーライドするだけ。より高いパフォーマンスを求めるなら、オフスクリーンキャンバスを作って、好きなように描けばいいんだ。WebGL2をもっと便利にラップするAPIはまだないよ。何もないところから本格的なゲームに至るガイドを書くべきだし、書くつもりだけど、今はガイドがアプリ作成に向けられてるんだ。ゲームを作る前に、スプライトメーカーやマップメーカーみたいなゲーム制作ツールを作る必要があるからね。[1] https://90s.dev/getting-started/hello-world.html

こんにちは、作者です。皆さん、フィードバックありがとうございます。これを早すぎるタイミングでリリースしたのは明らかですね。皆さんが指摘した問題点に取り組んで、数ヶ月後に戻ってきます。

└

早めにリリースしてくれてありがとう。頻繁にリリースするのが大事だよ。10,000回の反復。1回終わった。あと9,999回頑張るぞ。

└

いいえ、早すぎるってことはないよ。うまくいってるよ！

└

Show HNにはちょうどいい感じだね。Hello Worldツアーを見つけて、ここで何が起こってるのかを理解できたよ。前のPICO-8やReactの経験から。すごくクールだし、16:9はいい選択だと思う。PICO-8が四角いのはちょっと変だしね。

└

全然早すぎないよ！これは素晴らしいプロジェクトだね。すごく、めちゃくちゃ過剰に設計されてるけど、それが最高なんだ！今まで見た中で一番美しい自転車小屋だよ。自分のリアクティビティシステムまで実装してるし。大好きだわ。

ペイントアプリ、誰か動いてる？ https://90s.dev/os/#sys/apps/paint.app.js LinuxのFirefoxとChromeの両方で試したけど、色を選んでクリックしても何も描けない。コンソールには何かが間違ってるって警告も出てないし。別の話だけど、90年代をうまく捉えてると思う。90年代って本当にこんな感じだったんだなって気づいた瞬間があった。最初は70年代/80年代の端末に見えたけど。これからどうなるのか楽しみにしてるよ。

└

私も動かないよ。

└

まだ実装されてないんじゃないかな。ウィンドウの左上にある「ハッシュ」ボタンをクリックすると、「ソースを表示」ってのがあるよ。そこから見ると、ただのモックアップUIで、スクロールエリアはピンストライプを描いてるだけだよ。

└

ああ、混乱させてごめんね。カラーピッカーがそのアプリで私ができたところまでなんだ、比較的新しいからね。でも、たぶん1時間以内には完全に動くようにできると思う。あと、ありがとう、まさにそれを目指してたんだ！90年代のGUIアプリを作る楽しさやワクワク感、そして生のパワーを捉えたかったんだ（でも不便さはなしで）。だから90s.devって名前にしたんだよ。

Firefox（Floorp Browserバリアント 11.26.0）で読み込もうとしてるんだけど、例が「読み込み中」画面で止まっちゃう。マウスをその上に移動させるとカーソルが描かれて、画面に残るから、永久的なトレイル効果が出るよ。コンソールにはこう表示されてる：’https://90s.dev/os/fs/run? code=H4sIAAAAAAAACk2QMW%2BDMBCFd%2F%2BKa4QEKAiiKlMVs1Rqlw4dmy0GjsSNsRE2TVKL%2F16DSYq3d3ef797jTas6A6zlCVgIEnhFabBL4L1TfbtP4IMVKGb5BQPUnWogzJTOHJN%2B65AQdmF8%2BiJtOxR9hfqNS65PWBFSKqkNlKqXBigE0SaeS1yWrhDFQHPfTn%2BY6HG9vjMtkyjcyP%2Fv%2BqbThp3xc%2BxEFiRr8AVWJxRCwUV1olrBkBCAnTcBmv8itXc0GOUABSvPR%2BdGVtRurtvp1fWQO86R3jYcWUvtdi668pQCGLwaGi72PYWQPWbmiCb0%2BYG6RtEboyRocxNIQ90XDTchsNJwJal1QQx5KXh5hgZ3mR9e0IvV1gfFKtaaSI7JHSYQKwisHMDwBvUhHhZHZf6q2Z1X%2B1HtMh9STmJCpqzTWpW99uHGfz0j7XEYAgAA’を読み込めませんでした。ServiceWorkerがFetchEvent.respondWith()に渡したPromiseが「TypeError: Array(...).keys().mapは関数ではありません」と拒否されました。ただ、Chromeでは問題なく動いてるみたい。

└

教えてくれてありがとう。うーん、Floorpが何を違うことをしてるのか分からないな。もう少しスタックトレースが必要だね。でも、通常のFirefoxでは動いてるよ。スタックトレースやスタックトレースのスクリーンショットを問題ページに貼ってくれれば、見てみるよ。

└

今は修正されてるはず！もう一度試してみてくれる？

「はじめに」のガイドの最初のステップでつまずいてる。1. helloworld.zipをローカルコンピュータにダウンロードしたと思う。2. ウェブページのリンクをクリックしてfiler.app.jsを開く。これで90s.devのインスタンスがページ上に開く。3. それからhelloworld/appをアプリとしてマウントしてクリックするはずなんだけど、マウントボタンをクリックしたらドライブ名を聞かれて、helloworld/appって入れてマウントしたけど、何も起こらない。どうやってhelloworld.zipを90s.devのインスタンスに入れるのか見落としてるみたい…どうやってアップロードするの？

└

フィードバックありがとう。多分Firefoxを使ってるよね？この機能はshowDirectoryPickerに依存してるけど、Firefoxはそれをサポートしてないんだ。はじめにのガイドにはChromeを使う必要があるよ。それと、ドライブ名にはパスを含めない方がいい。例えば「foo」みたいな名前にしてみて。ガイドを更新してこれを反映させるね。そしたらfoo/helloworld.app.jsは/local/path/helloworld.app.jsを指すことになるから、「foo」を「/local/path」にマウントしておけば大丈夫だよ。

あなたのやったこと、めっちゃ好きだ！素晴らしいプロジェクトだね。子供の頃に直接戻った気分だよ。pico8は好きだけど、私には10年早いと思う。デスクトップとGUIで育ったから、これをCDを買うのに似てる感じがする。

└

同じ人が作ったPicotron[1]にも興味があるかもしれないよ。基本的にはPico8と同じデザインのデスクトップOSだけど、少し緩い制限があるんだ。実際には試したことはないけど、昔に彼のGIFを一度見たことがある。彼と私は同じ基本的なアイデアを持ってたと思う：pico8を作れるプラットフォームを作ること。私たちはただ違う道を選んだだけなんだ。[1] https://www.lexaloffle.com/picotron.php

シェルプロセスを終了させたら、すぐにWindows 95のノスタルジーに襲われた。これ、最高だね。

└

ハハ、そうだね。意図的にctx.clear()の呼び出しを避けて、クラッシュしたときにマウストレイルがまた見れるようにしたんだ :D

ランディングに関する批評（他のものは全然触ってないけど）：これをゲームメーカーって呼んでおいて、次に「ゲームメーカーじゃない」ってリストに入れて、その後の段落でまたゲームメーカーって呼ぶのはすごく混乱する。用語がちょっとバラバラだね。

└

同意だね。公平に言うと、物に名前を付けるのはコンピュータの三大難問の一つだよね（もう一つはキャッシュ無効化）。

今年の2月のある日、午前2時に起きてコードを書き始めたんだ。待つのに疲れたからね。それで、書いて書いて書きまくった。すごくいいね。これを読むと幸せな気持ちになるし、ちょっとインスパイアされる :) >ゲームメーカーのツールやゲームエンジン、ゲームを作るためのAPIを作ってる自分に気づいたんだ。どうやら自分は心の底からAPIデザイナーみたい。前からなんとなく気づいてたけどね。誰かが自分の情熱を見つけて全力で突き進むのを聞くのが好きなんだ。

└

ありがとう。自分のプロジェクトの本質をうまく捉えられなかった。APIが本当にワクワクするところなんだけど、APIは目に見えないからね、風みたいなもので、その効果を通じてしか見ることができない。もっと革新的なAPIを見せるものを作るまで待つべきだった。リリースするのが早すぎたな。