ゲーム降霊術

古い YouTube 動画から Yahoo! Word Racer を蘇らせる

Read in English

0:00 / 0:11
YouTube映像・2013年12月
0:00/0:11
HTML再現

背景

中学・高校の頃、私は Yahoo! Word Racer に信じられないほどの時間を溶かしました。悲しいことに、Yahoo は12年前、このゲームを TowersYahoo! Towers の喪失はさらに痛手でした。テトリスに似た対戦型の色ブロック崩しゲームです。Pool や Spades も、ときどき遊ぶお気に入りでした。ソフトウェアはいずれ死ぬものですが、Yahoo Games の名作たちは、Google Reader を除けば何よりも惜しく感じました。 や Pool といった他の名作もろとも終了させてしまいました。Word Racer と往年の Yahoo! Games は、古き良きインターネットの珠玉の作品でした。この実験は、その独創的で、愛らしく、楽しかった遺物を、遊び心を持って蘇らせたいという思いから生まれたものです。このプロジェクトは、収益を目的としない非商用の取り組みとして運営しています。将来的には停止するかもしれませんし、もっと軽量な需要ベースのコンテナ構成に切り替えたり、サーバーレスで動かしたりするかもしれません。ただ、それは初回リリースには少々手間がかかりすぎました。

ゲーム本体

デスクトップ推奨

Word の本当の 魔法 を味わえるのは、こういうマシンだけ!

ゲームルームの再現

ロビーの再現

Yahoo Pool のロビーがきれいに写った1枚のスクリーンショットを見つけるまでに、Yahoo Games をプレイする人々の古い YouTube 動画を、おそらく40〜50本も見漁る羽目になりました。

Screenshot of the original Yahoo Games lobby from a Yahoo Pool video: olive table directory with Watch and Join buttons, ratings legend, chat log, and player roster
https://youtu.be/QWNGNBV_Isg?si=fNqe7wegzGh61tvs&t=54 - ロビー(0:53)

そのスクリーンショットは完璧でした。ただ一点、Word Racer のような8人用ゲームのロビーは、Pool のような2人用ゲームよりもテーブルの席数が多かったので、オリジナルを取り戻すために UI を少しだけ作り直す必要がありました。

「一発生成(one-shotting)」については多くのことが語られてきましたが、私が多用している強力なテクニックがいくつかあります。

Table Who is Watching
  • #1 Watch Join 0/8 seated
    Guest-4d60's Table · Type: Public · unrated
  • #2 Watch Join 0/8 seated
    Guest-9c3a's Table · Type: Public · rated
ビフォー・最初の試作
Table Who is Watching
  • #1 Watch Join Join Join Join Join Join Join Join options: fast-paced, unrated, classic mode
  • #2 Watch Join Join Join Join Join Join Join Join options: fast-paced, rated, classic mode
アフター・現在の表示

1.) スナイパーショット

狙いを絞った、指示が明確で細部までこだわったプロンプト。エージェントを目標へと確実に、そして高速に前進させてくれます。

lounge_fix_prompt.md

We need to fix the styling/display of the lounge tables in the lounge. See @lounge_tables.png for reference. The main issues are the following:

  • kill this: 1
  • 2kill the top margin and side margin between watch button, join button, and the rest of the cell, all buttons are compact for maximal use of space
  • Watch has no padding and is the smallest cell that can accommodate the word watch
  • Fonts for the buttons should be 2px smaller
  • Rest of the text should also be 2px smaller
  • 3Do not announce whose table it is, that breaks verisimilutude. We just need this text to says: "options: fast-paced, rated". Do not announce the table type either
  • There should be a Watch button followed by four x2 rows of immediately adjacent JOIN buttons. They all must look exactly like this: @table_micro_view.png and we should just copy and paste the pixels of the buttons (with bounding boxes extracted from Gemini / ui-clone if possible). See grid diagram below for detail on structure
  • If a player is sitting in one of the seats, we display their rating color and name prefix instead
  • If a player is watching, we display them in the "Who is Watching" section on the lounge homepage.
  • We will need 8 different join buttons and it will be a grid as follows:
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ Table                                     | Who is Watching +
+_____________________________________________________________+
+ #1    | Watch | JOIN | JOIN | JOIN | JOIN | viewer_1, viewer2, viewer3
+       |       |______|______|______|______|                 +
+       |       | JOIN | JOIN | JOIN | JOIN |                 +
+       |_______|______|______|______|______|_________________+
+       | options: fast-paced, rated                          +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  • The + corresponds to a 2px black border
  • 4Table and Who is Watching should be unbolded
  • Left sidebar Play Now and Create Table buttons should have more rounded corners and a #CBC996 background

Use subagents to explore existing codebase and keep context for orchestrator agent as pure as possible, then use an agent team to implement these changes

2026年のエージェント型コーディングについての所感

  • コードは一度も読みませんでした
  • プロジェクトの序盤、そして中盤にかけて、エージェントとの「対話」に膨大な時間を費やします。そして残り80%の労力は、細かなディテールやバグを直すための粗探しです。これを省く近道は、私の知る限り存在しません
  • それでも、こうしたツールがなければ、私はこのプロジェクトに着手すらしなかったでしょう。古い YouTube 動画をつぎはぎして、素朴な Yahoo Games ラウンジとゲーム本体そのものを蘇らせられたのは、なかなか驚くべきことです
  • エージェント型コーディングは、文章を書くことと同じ意味で一つのスキルだと私は思います。プロジェクトをここまで持ってくるのに、何百もの判断が必要だったからです: https://www.newyorker.com/culture/the-weekend-essay/why-ai-isnt-going-to-make-art
  • とはいえ、このような古いゲームの再現は、モデルの進化とともに、間違いなく容易になっていくでしょう
  • このプロジェクトは複数のモデルを組み合わせて作りましたが、主に Fable と Opus を使いました
  • コードベースがある規模に達すると、何もかもが遅く、つまらなくなっていきます。コンテキストは膨れ上がり、一つの変更に20〜60分かかるようになります。

スナイパーショットはこれを和らげてくれますが、手間がかかるため、影響の大きい変更に取っておくのが得策です。もう一つの面白いテクニックが、こちらです:

ショットガン・ブラスト:

バリエーションを6つ作って。一番良いものは私が選ぶから。

これを使って、次のような細部を再現しました:

  • スクロールバー
  • ボタン
  • アイコン

自分のものにする/改良する

  • 4文字以上・5文字以上モード。3文字の単語は単調で、あまり創造的ではないからです
  • ラウンドレビュー/ゲームレビューのリンク機能
  • ラウンド最長単語のリンク機能
  • 高得点を狙える豊かな盤面のファンモード
  • 個人練習向けの投票モード。全員一致の決定で、盤面をシャッフルしたり、ラウンド3・4へ早送りしたりできます

完全に動作するゲーム本体に加え、往年の Yahoo Games を思わせるロビーまで、丸ごと蘇らせることができました。

得点
  1. あなた 0
R
L
F
N
C
J
E
T
W
L
U
S
G
A
L
P
O
I
T
S
R
N
E
D
A
E
S
R
「ゲーム開始」をクリックして開始
3ラウンド 残り時間 2:00 ゲーム終了
単語を入力
単語を入力して「送信」をクリック。
デスクトップ推奨

Word の本当の 魔法 を味わえるのは、こういうマシンだけ!

100%非商用で、できればフェアユースの範囲内、そしておそらくは一時的なアートプロジェクトとして、オリジナルの魔法をできる限り忠実に再現しようと試みました。たとえゲームが取り下げられても、この記事が、これを成し遂げるために私が使った、有用で効果的なテクニックを伝えるものになれば幸いです。

素晴らしいゲームでした。私はかつて、5文字以上の単語を素早く見つけるのが妙に得意でしたが、今ではすっかり失われた、何の役にも立たない才能です。

ともあれ…先週、私はこれを蘇らせました。実際のプレイ映像なら、質の高い動画が(YouTube などに)少なくとも十数本はオンラインに存在します。ラウンジ/ロビーについては、昔のロビーがきれいに写った映像を見つけるために、40本以上の YouTube 動画を見漁る必要がありました。これを実現するために行ったことを、一つひとつ再現してお見せすることはできません。時間がかかりすぎますし、出来上がったものも、さほど示唆に富むものにはならないからです。

そこで代わりに、全体的な戦略と、その過程で学んだいくつかの戦術、そしてちょっとした工夫をご紹介します。

楽しいプロジェクトでした。永遠に(というより、そもそもどれだけの期間であれ!)ホスティングし続けると約束はできません。ですが、完全にサーバーレスなバージョンも作ってあり、将来的にデプロイするかもしれません。

そしてこのブログ記事そのものが、新しいプロジェクトに挑もうとしている人や、効果的なテクニックを学びたい人にとって、それ単体で役に立つものになれば嬉しく思います。