LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@interimadd

CursorのComposerを使ってEbitengine製のオセロを自然言語だけで作る

Posted at

要約

  • CursorのComposerを使ってEbitengine製のゲームを作ってみた
  • 1行もコードを書かずに30分程度で作りたかったゲームができてすごかった

背景

1年ほど前にCursorを使ってみようと思った時期があったのですが、WSL+Dockerの組み合わせで使ったときに上手くいかなかったのでVSCodeを使い続けていました。最近はそのあたりの問題も解決したという話を聞いたのと、Composerなる複数ファイルを同時に編集できる機能が便利という話を聞いたので改めてCursorの使い勝手を確認しようと思いました。

Cursorの機能を網羅的に紹介した記事はよく見かけましたが、プロジェクトを1から始めて、どのように実装が進んでいくのかがわかる記事がぱっと見つからなかったので、同じようなことを試そうとしている人が生成AIメインの開発がどのような感じになるのかイメージしやすいような記事があると良いのではと思い、手順をメモしておきました。

またGo言語製のゲームエンジンのEbitengineにも前々から興味があったので、合わせて試してみることにしました。
https://ebitengine.org/ja/
マルチプラットフォームで動くゲームを環境構築の手間がほぼ0で作れて、小さなゲームをさくっと作って公開するのにかなり向いていそうなライブラリです。

手順

準備

Curosrのインストール

Ubuntuで試したので下記の記事を参考にさせていただきました。
https://zenn.dev/mizki/articles/36535a1b75ab81

Cursorの設定

Cursor Setting → Features → Allow agent composers to run tools ... にチェックを入れる
image.png

Go環境のインストール

使用しているPCにGoがインストールされていなかったので、ChatでGo言語の環境のインストール方法も確認しました。

wget https://go.dev/dl/go1.23.6.linux-amd64.tar.gz
sudo tar -C /usr/local -xzf go1.23.6.linux-amd64.tar.gz
echo "export PATH=$PATH:/usr/local/go/bin" >> ~/.bashrc
source ~/.bashrc

Ebitengineのインストール

ebitenのインストールに関しても同様です。

sudo apt update
sudo apt install -y libgl1-mesa-dev xorg-dev
go get -u github.com/hajimehoshi/ebiten/v2

初期ファイルの作成

流石に何もない状態から作り始めるのは大変かと思ったので、最低限のhello worldくらいまでは用意することにしてみました。今思うと余計なお世話だったかもしれません。

package main

import (
	"log"

	"github.com/hajimehoshi/ebiten/v2"
)

// ゲームの状態を管理するGame構造体
type Game struct{}

// Updateメソッド (毎フレーム更新処理)
func (g *Game) Update() error {
	return nil
}

// Drawメソッド (描画処理)
func (g *Game) Draw(screen *ebiten.Image) {
	// ここに描画処理を書く
}

// Layoutメソッド (画面のサイズ設定)
func (g *Game) Layout(outsideWidth, outsideHeight int) (screenWidth, screenHeight int) {
	return 640, 480 // 画面サイズを640x480に設定
}

func main() {
	game := &Game{}
	if err := ebiten.RunGame(game); err != nil {
		log.Fatal(err)
	}
}

下記のコマンドで実行すると、黒いだけの画面が表示されます。

go mod init
go mod tidy
go run main.go

プロジェクトをcursorで開く

main.goがあるディレクトリをcursorで開きます。

/opt/cursor/cursor.appimage .

ゲームの開発

agentモードに切り替える

Cursorの右側のタブからCOMPOSERを選択し、モードをagentに切り替えます。agentにするとコマンドを実行する部分を勝手にやってくれたりするようです。

image.png

ベースを作る

早速、agentにオセロの作り方を聞いてみます。
ebitenを使うのも初めてで、オセロも作ったことはないので段階を踏んでやっていった方がいいだろうと思い、まずは手順を教えてもらうことにしました。

image.png

おお、手順を詳しくリストアップしてくれているな...と思ったのも束の間、勝手に実装に進み始めました。

image.png

そのまま見ていると、なんとゲームのロジックまで含めて全て完了してしまいました。

image.png

想像していたのは、

  1. ボードを作る
  2. 石を作る
  3. 初期状態を作る
  4. ...

というようなフローだったのですが、一足飛びに進んだ形でした。
本当にできているのか...？と思い、go run main.goしたところ無事立ち上がりました。

image.png

各マスをクリックした場合、置ける場所であれば石が置かれ、挟まれている石は色が変わります。置けない場所であればクリックは無効になります。というわけでゲームロジックも含めて完璧に実装されていました。盤の色が緑なのもオセロの商品の色に合わせてあって気が利いています。

改変してみる

オセロを作るだけであれば最初の1回だけで終わってしまったので、Cursor自体の使い勝手はわからないのと、メジャーなゲームなのでほぼほぼ近いソースコードがあったのだろうなと思われたので、追加の仕様を実装させてみることにしました。

見た目をリッチにできれば面白みが出るのではという安直な考えから、オセロの石をアプリのアイコンにしてみることを試してみます。(昔ねとらぼで紹介されていたゲームの再現です)

twitterとxのアイコンをpngでmain.goと同じディレクトリに保存し、それを石代わりに表示するようにお願いしてみます。

image.png

あっさり表示できてしまいました...自分でライブラリの仕様を調べたりしながらだとかなり時間がかかっていたと思います。

image.png

さらに改変してみる

ここまでできるのであれば、自分が思いつく範囲のことはやってもらえそうです。その場で思いついた内容をCOMPOSERに指示していきます。

↓が実際に指示に使った文面です。

  • 今がtwitterとXどちらの手番かを画面上に表示するようにしてください
  • 盤面を縦8マス、横6マスにしてください
  • tablet.jpgを背景に表示するようにしてください
  • エラーが出ます
  • 次に石が置ける場所を、透過したグレーの四角で塗りつぶすことはできますか？

面白いのはjpgファイルを表示するコードを追加したあと、go run main.goがエラーを出すようになってしまったのですが、エラーメッセージを渡してあげると自分でエラー内容を修正してくれたところです。偉い。
image.png

完成

そんなこんなで、タブレット上で繰り広げられるXとTwitterのオセロが30分ほどで完成しました。

othello.gif

コードの生成や実行結果を確認する時間はほとんど無く、プロンプトを考える時間や素材を探している時間がほとんどでした。こうすれば遊び勝手が良くなるのでは？と思ったことも、言葉で指示するだけで実装をやってもらって、実際に遊びやすくなるのかをすぐに確認できるので非常に快適でした

Webへのデプロイ

ブラウザから遊べるようにできるとスマホからでも実行できて面白いのではないかと思い、続けてやり方を聞いてみました。

image.png

wasmでビルドしてindex.htmlに埋め込んであげれば遊べるようです。

image.png

agentモードというだけあって、index.htmlやbuild.shを勝手にディレクトリ内に作成してくれます。コード補完の用途でしか生成AIを使っていなかったので、これはかなり便利だなと思いました。
また、COMPOSERの画面に表示されたコマンドを1クリックで実行できるも便利です。これまではやり方を聞いてコマンドをコピペしていました。条件はわかりませんが、指示によってはコマンドの実行までやってくれたり、コマンドを実行していいか聞いてきたりします。

感想

実装のスピードがこれまでとは次元が違うところが体験できて良かったです。自然言語だけでプログラミングというのは、頭で考えている内容を言葉で伝える過程で認識の差が生じて上手くいかないイメージでしたが、少なくとも今回扱ったくらいのボリュームであれば問題ないのは以外でした。

Github Copilotよりも性能が断然良いように感じたのと、細かい入力の手間が少なくなるように細部まで気を使って作られているように感じたので、Cursorへ乗り換えるモチベーションになりました。

2つ目の目的だったEbitengineに触ってみるというところは、Cursorがコードを全て書いてしまったし特におかしい挙動もなかったので、コードを読むタイミングが無く、始める前後で理解が深まった感触は全くありませんでした...とはいえ、成果物を見る限り記述の量が少なく、各関数がやっていることがわかりやすいので、非常にとっつきやすそうには感じました。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?