見出し画像

CreateXYZで東京おもてなしゲームを作ってみた #CreateTokyo

しらいはかせ(AI研究/Hacker作家)

Text to Appな生成AIサービス「Create.XYZ」の開発者が東京に来ているのでミートアップに参加してきました。

山手線一周を人生ゲームのようなすごろくのルーレットに見立てて、止まった駅についてのディープな情報を表示する「元祖ゲーム」です。

プロトタイプから最後の最後まで、プロンプトからガチャを回す感じでここまで出来てしまいます。

各観光名所の情報はスクリーンショットを与えることで生成したり、Stable Diffusion 3を使って生成したりしています。

一緒のグループで制作に参加した AICU AIDX LabのNaruさん + いまっち + のっぺ + 横田さんありがとうございました。これも何かのご縁ですね！

なお、今回のプロジェクト、終わってから自分的に納得いかないので完成させました。最終的に与えたプロンプトはこんな感じです。

Smartphone primary responsive site.
Japanese/English switch button.

This is index page of Tokyo Yamanote Backgammon.

It has 30 stations circles (black large dot) like actual Yamanote line, green color themed circle bold line.
Some of stations {Akihabara, Ueno, Okachimachi, Yurakucho, Shinagawa} are "Good Choice", they has particular pages like "/Akihabara". The others are novice, they do not has particular pages.

When the user tap the screen, white dot goes 30 steps clockwise, station flashing is not as a random, clockwise circular sequences. it spins 5 sec when the user click on the screen. The duration is a random  for 5000 msec to 10000 msec.

during the spinning, the center circle shows an iconic image of each station with the station name in Kainji Japanese.

When the spin stops, it shows animation of the station name for 1 sec, and the page goes to the particular pages like "/Akihabara" not as "akihabara" component.
If the stop to the not to "Good Choice" station, show "You lost the destination! Spin again!", when the user tap again, spin again.

Each pages of sites has  "back to the spin" button to back to this page.

When the player tap on [How To Play] button on the top left, it shows "このサイトは外国からの訪問客が東京を楽しむためにあります。これは #CreateTokyo イベントで開発したものです" in both languages.

On the bottom, it shows "Generated in #CreateTokyo, AICU AIDX Lab + いまっち + のっぺ + 横田さんチーム" with link to "https://x.com/AICUai/status/1812807771110375914".

後から振り返ると反省点いくつか。
・CreateXYZのプロジェクト、多人数同時編集はできるけど、10分〜20分のハッカソンで作るにはコード生成と保存とレビューが間に合わない。
・やるんだったらメインのページ（SPA）を作る人はひとりに限定して、他の人々は個々のページを並列に作ってリンクするのがいいと思った。
（今回の形式はそうなってます、行ったら戻ってこないけど）
・プロンプトが長くなると制御が効かなくなってくるので、ある程度のコードができたらコンポーネント化したらいいと思います。
・ルーレットが同じところに止まらないようにするためにシードを入れたり、美麗なアニメーションや駅名表示を実装したら、とたんに制御が効かなくなってガチャ運に頼るような開発になってしまいます。小さく切るのが大事かなと。
・例えば「ルーレットに戻る」という部品だけでも関数化して仕舞えばだいぶ楽ができたはず・・・。

まあでもまともに動くものが作れて、理解の解像度がギュン上がりしました。詳細のレポートはAICUの記事に任せます！

余談


デジハリ大学院CAIL24の井上さんも参加してました。


https://note.com/runos_log/n/nf30c62af560e

2時間でnoteとTwitterを立ち上げブログ4本書いているスピード感すごい。
将来楽しみだわ！



この記事が気に入ったらサポートをしてみませんか？