ブラウザでゲーム開発! 90s.devが登場
引用元:https://news.ycombinator.com/item?id=44042371
いやー、みんなフィードバックありがとね。確かにローンチ早すぎたわ。みんなが指摘してくれた改善点に取り組んで、数ヶ月後にまた来るわ。
全然早すぎないよ!これ超良いプロジェクトじゃん。信じられないくらい、バカみたいにoverengineeredで、それって最高の褒め言葉!今まで見た中で一番美しいバイク小屋だよ。独自のリアクティビティシステムまで作ってるし。
大好きだわこれ。
はは、ありがとね!うん、リアクティビティシステムは早く色々やろうとして生まれたんだ。いちいち手動で変数設定するのに飽きちゃって、簡単に「チェーン」とか「アダプト」できるようにしたんだよね。auto-layoutシステム(ハッキー?)も同じ。早く済ませるためのショートカット!
最高だね。俺もVueのリアクティビティをgta multiplayer serverで使って、プレイヤーの状態変化追跡したり、それ周りのリアクティブ機能書いたりしたことあるよ。そしたらみんなに「バックエンドでフロントエンドの技術使うなんて頭おかしい」って言われたけどね :c
面白いことに、俺はVueにRefってものがあるのを一週間前まで知らなかったんだ。でも俺のRefはすごく似たデザインなんだよね。ただ俺のRefの方がずっと良くて、もっと汎用的に使えると思うな。
実際、俺のRefはcomp sciにおいて本物のブレークスルーかもしれない、主に.defer()のおかげで。誰か同意するか知りたいから、これだけで博士論文書きたいくらいだよ。
Show HNとしてはちょうど良いね。Hello Worldツアーで何が起きてるか理解できたよ、PICO-8とReactの経験があったからね。結構クールに見えるし、16:9は良い選択だと思う。PICO-8がスクエアなのはやりにくいんだよね。
あなたや他の返信くれた人たち、みんなありがとね。すごく励みになるよ。改良を続けて、もっと使いやすく、使い方も分かりやすくするね。みんなからのフィードバックを元に、HNのフロントページに載ってる間に(すごい!)せめていくつかタスク終わらせられるかも。今からペイントアプリ完成させる作業に取りかかるよ、一時間以内に終わると良いな。
早期ローンチしてくれてありがとね。
絶対頻繁にローンチするべきだよ。
10,000回のイテレーション。一つ終わった。あと9,999回だね。
ありがと!そういう見方、励みになるね。まだ100%完璧じゃないものを出荷できるってことになるから。でも、どんなに頑張っても、本当に完璧になることなんてないんだろうね、違うかな?
大体は本当に完璧にならないんだけど、バグが全くなくて100%仕事をするなら完璧と言えるかも(そう判断できるかは別として、可能性はある)。俺にも完全に終了したと思ってるプロジェクトはあるよ。:D
すごいものを見せるのと、すごいものを見せるポテンシャルがあるのとは違うんだよね。俺は後者の段階でリリースしちゃった、本当は見せたかったんだけど。正直、昨日はマジで最悪な日で、燃え尽きてて、完全に諦めてリリースしちゃったんだ。まだこれのすごさを見せるコード書いてないって分かってたのにね。待つべきだったって分かってたよ。まあ、学んだわ。
過去15年間で、HNの運営から数ヶ月に一度しか目立たせてくれないって何度か言われたんだよね。だからこれが2025年半ばの唯一のちゃんとしたリリースチャンスだったんだ。まあいいや、学んだことが大事。次の大きな改善に進んで、おそらくQ3かQ4にまた投稿するよ。
>2月のある日、夜中の2時に起きてコードを書き始めたんだ。待つのが疲れたんだ。だからひたすら書いた。
いいね。読んでて嬉しいし、なんか刺激されるよ ニコ
>ゲームメーカーツールやゲームエンジン、ゲームを作るための API を作ってる自分に気づいたんだ。結局、俺は根っからの API デザイナーらしい。なんとなくいつも分かってた気がする。
誰かが自分の情熱を見つけて全速力で進むのを聞くのは好きだよ。
ありがとう。俺のプロジェクトの本質を捉えきれなかったな。本当にエキサイティングなのは API なんだ。でも API は見えない、風みたいなもんで、その効果を通して実際に動いてるところを見る必要があるんだ。これらの API がいかに革新的かを示すもっと多くのものを作るまで待つべきだった。早すぎたよ、リリース。
だいたいの目安だけど、もし恥ずかしくないなら、リリースが遅すぎたってことだよ。人間は細部まで完璧にしたがる傾向があるけど、それが原因で全然リリースしないことによく繋がるんだ。あなたがリリースした時期に感謝してるよ。すごそうじゃん!
いやいや。たいていの場合、遅いより早い方がいいって!あと HN のフィードバックはほどほどにね …
ペイントアプリ誰か動いた?
https://90s.dev/os/#sys/apps/paint.app.js
FirefoxとChrome(Linux)で試したけど、色選んだりクリックしても何も描けないんだよね。コンソールにもエラー出てないし。
別の話だけど、90年代の雰囲気すごくうまい!最初は70s/80sのターミナルみたいって思ったけど、見てたらまさに90年代だったね。これから楽しみにしてるよ。
あー、ごめんごめん、紛らわしかったね。
カラーピッカーが現状なんだ。まだ新しくて。1時間以内にはちゃんと動くようにできると思うよ。
あとありがとう!まさにそれ狙ってたんだ!90年代のGUIアプリ開発の楽しさとか興奮を、不便さ抜きで再現したかったんだよね。だから90s.devって名前にしたんだ。
今ペイントアプリ作業してるよ!canvas追加、リサイズ、グリッド、ズーム、描画、消去、保存読み込みの機能は実装完了したんだ。編集できる間に終わらせたかったんだけど、間に合ったよ!ソースコードも公開してるから見てみてね。ボーナスでundo/redoもやるつもりだよ。
ねえ、無理しないでね :)
これすごくクールだよ、よくこういう投稿で見るものの90%よりすごいと思う。
ありがとう、でもストレスじゃないよ。
編集ボタンが消える前に、自作のイケてるGUI APIでどこまでできるか試すのが面白くてさ :)
まだ実装されてないと思うな。
ウィンドウの左上の”ハッシュ”ボタンをクリックすると”View Source”が見れるんだけど、それ見るとモックアップされたUIってわかるよ。スクロールエリアはただの飾りで描いてるだけみたい。
君の言った通り、その時はね。
今は動くようになってるよ、undo/redo以外はね。
僕のでも動かないな。
バッチリ動くね!
これが何でどんな機能があるのか、正直よく分かんないんだけどさ、もう見た目が最高だよ。見た目って感情に訴えかけて、すごく興味を引くもんだなって改めて思ったよ。
説明の仕方が分かった気がするよ:要は、ゲームのプロトタイプ作りに Pico8 より使いやすいのが欲しかったんだ。だから 320x180 デザインで、このプロトタイプがある。VS Code みたいな型チェックや TypeScript の補完みたいな便利機能も全部欲しくて、Pico8 の各タブにあるものを作る&公開できるプラットフォームとして設計したよ。
こうしてみると、リリースが早すぎたな。
見た目は良いんだけど、16:9と90sコンピューティングの組み合わせはなんか違うな。
あの腰が痛くなるような、正方形じゃないトリニトロン管のデカいモニターが最高だったんだよ。
320x180は Animal Well の影響だよ。もともと Animal Well みたいなゲームを Pico8 より便利に作るために考えたんだ(Billy Bassoもプロトタイプに Pico8 を使ってたらしい)。320x180 はゲーム作る側も遊ぶ側も良いサイズだと思うよ。
このサイズのメリットは、コードエディターとかマップメーカーを画面に同時表示できて、各タブも使える大きさになること。これが初期プロトタイプだよ。https://90s.dev/v1/
ありがとう!説明するのってマジで難しい!この記事全部が、これを最短で説明しようとしてるんだ。
一番短い説明はこうかな:90s.dev は 320x180 のウェブキャンバスの API で、ゲームやゲームメーカーツールを作るためのもので、共有機能や革新的な GUI もあるよ。
いや、やっぱまだ曖昧すぎるな。もうダメだ。
もっとコメントを表示(1)
その説明文、”Welcome to 90s.dev.”の下に置いたら?もっとシンプルにしたら良いと思うよ。マーケターじゃないけど試してみた:
90s.dev はゲーム開発向けのゲームやツール作りをシンプルにします:
- 320×180 キャンバス周りの API
- 内蔵の共有機能
- 革新的な GUI
各項目はドキュメントにリンク、あとサンプル集のページも必要だと思うよ。
ありがとう、次のローンチで絶対検討するよ。
その調子で続けて、きっとうまくいくよ。うん、説明って難しいよね。ゲーム開発に関わってない身としては、APIだけどゲームエンジンじゃないって説明は正直よく分かんなかったかな。でも、その調子で頑張って、すごいことしてるよ。
これで作ったもののサンプルを見せてくれない?
今のところ、これで出来てるのはビルトインアプリだけだよ。
アプリ開いた時のデスクトップっぽいとこでクリックできるやつね。
今んとこ唯一完成してるのは fontmaker:https://90s.dev/os/#sys/apps/fontmaker.app.js
ビルトインアプリ全部のソースコードはここ https://90s.dev/os/helloworld.zip (https://90s.dev/getting-started/download-sdk.html に)
320x180って、なんか面白いもの作るのにだいたい十分なのかな?
Animal Wellは320 x 180使ってるよ
https://en.wikipedia.org/wiki/Animal_Well
(実はこれ作った理由の一つは、Animal Wellのクローン作りたかったからなんだ)
チェックしてみるよ。320 x 180を増やすのって、そんなに大変じゃなく技術的に可能なのかな?ちょっと気になっただけ!
技術的には今すぐ可能だよ。usr/config.jslnでサイズ設定すれば画面はリサイズされる。ドキュメント化しなかったのは、ほとんどのユーザーの決断麻痺を防ぎたかったから。pico8みたいに集中して作れるようにね。tic80はこれができなかった。
へえ、それは面白いね。‟advanced”とか‟power”ユーザー/開発者向けにドキュメント化するのは価値があると思うな。そんな制限がないって知るのは良いことだよ、あると思ってたからね。つまり思ってたより柔軟なんだ!
制限を守るのと、抜け道を用意するのは両立できないんだ。昔のtwitterの140字制限を例に考えてみて。もし抜け道があったら制限の意味がなくなる。デザインが制限を意図してるなら、それを貫くのが全く理にかなってる。
君の例(twitter)は違うと思うな、だってこれは僕自身のコードの話なんだ。僕次第であるべきじゃない?可能ならなぜドキュメント化しないの?それは全く意味不明だよ。セキュリティ・スルー・オブスキュリティみたいだ。それに、決断麻痺を防ぐためにデフォルトは何にでもできるんだから。
君たち両方とも正しいと思うよ。何かをデフォルトにするか定数にするか判断するのは難しいね。特に全てのユーザーを満足させることはできないから。
柔軟性を殺すだけだと思うな。デフォルトにする方が僕には理にかなってるし、製品を使う開発者に任せるべきだよ。もちろん完全に君次第だけどね。もしこれを定数に変えるなら、少なくともgit commitメッセージにはドキュメント化するだろうな。
これに対する面白い解決策として、そして僕が採用したのは、これらのパワー機能をイースターエッグとして残しておくことなんだ。開発者はそれを見つけた時の報酬があるからね。90sのGUI開発を学んでた頃の楽しさや興奮を感じさせてくれる。画面リサイズ機能は、ちょっとコードを掘れば誰でも見つけられるよ。
ホントだよ。作るより説明する方が大変なくらい。いつも自分のサイドプロジェクト説明しようとすると、「ほら…見せた方が早いんだよ」って結局言っちゃうんだ
うん、だからページをインタラクティブなデモ付きにできるようにしたんだよ。今のところhello world tourとrefs guideだけだけどね。
あんまり深掘りしてないけど、このaestheticには正直言ってたまらなく惹かれるんだ。きっと昔のシンプルだった時代を思い出させるんだろうけど、こういうプロジェクトを見ると何だか安心するんだよね。
すごくいいね、ただちょっと始めるのが難しいかも。ミニゲームの作り方の簡単なウォークスルーがあるといいかな?
ありがとう。ゲームの作り方はアプリのウォークスルー[1]と似てて、カスタムビューで描画する感じ。パフォーマンス求めるならOffscreenCanvasも使えるよ。WebGL2の便利なAPIはまだ。
ゼロからゲーム作るガイドは絶対書くね。今はツール系ガイド優先かな。スプライトメーカーとかマップメーカーとか。[1] https://90s.dev/getting-started/hello-world.html
キミがやったこと、めっちゃ好きだよ!最高のプロジェクトだね。子供の頃にワープしたみたい。pico8も好きだけど、あれは僕には10年早すぎたかな。デスクトップとGUIで育ったから。これはまたCDを買う感じに似てるな。
Pico8作った人によるPicotron[1]にも興味あるかもよ。基本Pico8と同じデザインのデスクトップOSだけど、ちょっと制限が緩い感じ。
僕は試したことないんだけど、ずいぶん前にgifを見ただけ。でもたぶん彼と僕、同じ基本的なアイデアだったんじゃないかな、Pico8を作れるプラットフォームを作ろうって。ただアプローチが違ったんだね。[1] https://www.lexaloffle.com/picotron.php
ありがとう!うん、picotron知ってるよ、最初のバージョン試したことある。あれも素晴らしい環境だと思う。最初にVoxatronを何年も前に買ったんだ、その裏側の技術がすごく好きだったから。進化しなくてちょっと悲しかったけど。
とにかく、picotron教えてくれてありがとう!両方のプロジェクトに注目し続けなきゃね。^^
ありがとう。ああ、Voxatron買ったの覚えてるよ。すごくクールなアイデアだと思ったけど、全然使い方が分からなかったり、デモ以外で何をすればいいか分からなかったり。たぶん開発者も同じ問題にぶつかったんだろうね。それでもクールなアイデアだよね。
なるほどね:Pico8に対するPicotronって関係は,Tic80に対する90s.devって感じかな。それか,Pico8に対するTic80が,Picotronに対する90s.devって関係か。
「Getting Started」ガイドで詰まってるよ。helloworld.zipをDLして,filer.app.jsを開いたんだけど,helloworld/appをマウントしようとしても何も起きないんだ。ファイルはどうやって90s.devインスタンスにアップロードするの?
フィードバックありがとう。多分Firefox使ってるでしょ? この機能はFirefoxが非対応のshowDirectoryPickerに依存してるから,ガイドはChromeで試してね。あと,ドライブ名にはパスを含めないで,「foo」みたいにして。ガイドも更新するよ。
「Chromeだけ」なんてやだね!Firefoxもサポートする回避策を見つけてくれない?
Firefox対応は頑張ったんだけど,ローカル開発のドライブマウント機能はFFがshowDirectoryPicker
をサポートしないと無理なんだ。代わりにローカルファイルサーバーを立てて(python -m http.server 8080)ファイルを直接インポートすることはできるよ: import ’http://localhost:8080/index.js’
このコードをusr/myapp.app.jsに入れてfiler[1]で開いてみて。ファイル作成・編集・保存はfilerでできるよ。Chromeが嫌いな人向けに,ウェブサイトに「Using Firefox」ページを追加するつもりだよ。
実はChromeでやってるんだけど,Getting Startedページで90s.devを動かすとこのエラーが出るんだ:SecurityError: Failed to execute ’showDirectoryPicker’ on ’Window’: Cross origin sub frames aren’t allowed to show a file picker.
Firefoxかエラー,キャンセルが発生したってエラーも出てるよ。
もっとコメントを表示(2)
それは新しいエラーだね。内部変更[1]のせいなんだ。今は,そのリンク[2]を新しいタブで開いて,そこで手順を進めてくれる?
[1] CORSエラー回避のために90s.dev/os/に置いてたけど,os.90s.devに戻したんだ。そのせいでエラーが出てる。
[2] https://os.90s.dev/#sys/apps/filer.app.js
Firefox系のFloorp Browser(11.26.0)で試したら,サンプルがLoading
画面で固まってカーソル軌跡が残るんだ。コンソールには「Failed to load ’https://90s.dev/os/fs/run? code=…’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘TypeError: Array(…).keys().map is not a function’」ってエラーが出てるよ。
Chromeでは問題ないみたい。
教えてくれてありがとう。うーん,Floorpが何を変えてるのか分からないな。もっとスタックトレースが必要だね。普通のFirefoxでは動くんだけど。遠慮なくissuesページにスタックトレースとかスタックトレースのスクリーンショットを貼ってくれたら見てみるよ。
普通のFirefox ESRでもOPと同じ問題出てるよ。
修正したよ!フィードバックありがとう。
これで直ってるはずだよ!もう一回試してみてくれる?
試したけど、もう動くようになってる!
ランディングページについて批評(他は全然触ってないんだけどね):これをゲームメーカーって呼んでるのに、機能じゃないリストに”ゲームメーカー”が含まれてて、その後のパラグラフでまたゲームメーカーって呼んでるのがすごく紛らわしいんだ。用語が全体的にバラバラだよ。
同意するよ。公平に言うと、命名はコンピューティングの3大難問の一つだからね(もう一つはキャッシュの無効化)。
いやー、この aesthetic 最高だね。あのフォント、マジ素晴らしい。どうやら80年代のピクセルアートより90年代の見た目の方が断然好きなみたいだ。
アイデアすごく好き。PS4のDreamsをプレイして以来、共同でゲーム開発できるインターフェースにずっと興味があったんだ。
共同作業は僕のお気に入りのことの一つだったんだ。
このプロジェクトを始めてすぐ、ユーザーがファーストクラスのアプリやライブラリを作って、それを自分の作品で簡単に見つけて使えるようにすることに焦点を当てるようになった。APIの多くはこのアイデアをサポートするために進化したんだ。
シェルプロセスを終了させたら、即座にWindows 95のノスタルジーにやられた。これ最高だね。
あはは、そうなんだ。クラッシュした時にまたマウストレイルが出るように、わざと ctx.clear() は呼んでないんだよ。
気に入ったよ、リリースおめでとう!
もしかしたら見落としてるだけかもだけど、エンジンで作られたデモゲームがあったら、ピッチは断然良くなると思うな。ちゃんと探せなかっただけかな?
次のアップデート楽しみにしてるよ!
まだゲームもゲーム制作ツールもほとんどできてないんだ。プラットフォームの安定化に時間をかけちゃってね。コミュニティが手伝ってくれるって期待してたんだけど。
でも、君の言う通りかもね。ツールやゲーム、チュートリアルを自分でいくつか作ってから、数ヶ月後に再ローンチした方がいいのかも。
どんどん早くリリースしてフィードバックをもらうのはいいことだよ。全部完成するまで待つよりずっといいから、何も変えなくて良かったと思うな。
僕が言いたいのは、投稿タイトルについてなんだ。
もしフレームワークってタイトル(そして将来的にゲームエンジンになるって書いてあれば)だったら、ウェイティングリストに登録する人もいたかもね。
次のアップデート楽しみにしてるよ!
同意だよ。
実は投稿タイトルは「Finally releasing 90s.dev」にしたんだけど、HNモデレーターが今の「Show HN: …」に変えちゃったんだ。
ブログの記述を基にしたんだけど、僕がそれを変えて、HNタイトルが正確じゃないって補足したんだ(僕のせいだけどね)。
君の言う通り、ウェイティングリストを追加するべきだったな。
まあいいや、次のリリースで参考にさせてもらうよ。
リリースおめでとう!
https://90s.dev/getting-started/hello-world.html を見た感じだと、JSXとpico8を合わせたみたいな感じかな?
そんな説明で合ってる?
ありがとう!
うーん、まあそんな感じかな。
JSXは主に、pico8のツールみたいなゲーム制作アプリを作るのに使うんだ。
それらのアプリを使ってゲームのアセットを作るんだけど、ゲームと同じキャンバスで動くよ。
マップメーカーもゲームも、キャンバスに描画する時は同じGUIを使うかな。
ゲームはたぶんViewのdrawメソッドをオーバーライドして描画するのが主だけど、MinecraftのインベントリみたいなUIにはJSXを使うかもね。
いいね、Firefoxでも動く?
動くようにすごく頑張ったんだ。
Firefoxで唯一サポートしてないのは、ローカルドライブをマウントして開発を早くすることなんだ。
これは https://developer.mozilla.org/en-US/docs/Web/API/Window/show… が必要で、Firefoxにはまだないんだよ。
Firefox ESRだと動かないよ。