Pyxel on Xainome Blog

Cursorの話題に乗り遅れたけどpyxelの修正に使ってみたよ

Sun, 02 Mar 2025 00:00:00 +0000

Cursorを使ってみた

Cursorが凄いとだいぶ前に話題になりましたが、重い腰を上げてようやく使ってみました。

コードエディターとして使っても優秀ですし、テキストベースで自身の考えを整理するのにも使えそうですね。

興味を持ったのが音声入力でテキスト変換し、文字おこしした文を整理してもらうという記事です。日常的にも使えそうですし、コードの修正にも活用できそうでしたので使うことにしました。

Cursorのインストールとダウンロード

まずはインストーラーのダウンロードから。Windows、Mac、LINUXがあるので使っているPCに応じて選びましょう。

ダウンロードが完了したら、インストーラーを実行しましょう。基本的には何も変更せずポチポチ推して大丈夫です。こだわりがあれば変更するくらいですね。

Cursorの初期設定

インストールが完了したら実行して開きましょう。デフォルトのIDEはVS Codeになりますが、他のIDEを使ってる場合はそちらを選択しましょう。似たようなUIにしてくれると思います。

AIに対する言語は必要であれば選択しましょう。日本語なら"日本語"や"Japanese"で大丈夫だと思います。

Codebase-wideはプロジェクト全体を読み込ませるかどうかですね。単体のコードだけを読み込ませるなら不要だと思います。設定が完了したら"Continue"をクリックしましょう。

こちらはVS Codeを使ってると表示されます。VS Codeで使用してる拡張機能をそのまま使用するかの確認です。使うのであれば"Use Extensions"ですね。他のIDEはわかりませんが…

こちらは利用状況を送信するかの設定です。“Privacy Mode"であれば送信されなくなります。私は個人で使う分には気にならないですし、もっと発展してほしいので送信するようにしています。ただ、業務委託では使えませんが。

設定が完了したらログインが必要になります。Freeであってもですね。今のところはproにする予定がないのですが…

リポジトリのクローン

ログインが完了したら初期画面はこんな感じ。後はここからプロジェクトを開くなり、Gitからリポジトリの接続をすることになります。ちなみに日本語UIへの変更はVS Codeと同じ手順で変更できます。

真ん中のcloneをクリックするとGitからcloneすることができます。Githubの場合は8桁のコードを求められます。画面に表示されますのでそれをペーストすれば問題ありません。

初期画面はこんな感じ。拡張機能のCotinueと似たようなUIに感じますね。

freeの場合、最初の2週間はproを使うことができます。アカウントの設定画面でどれくらい使ったかを確認することができます。

Cursorを使ってコーディング

次は実際に使ってみましょう。Agent、Ask、Editを使い分けます。使い分けとしてはこんな感じみたいです。

Agent: AIが考えてコードの変更や提案をする
Ask: シンプルに質問する
Edit: コードやテキストを変更したり指示する

モデルは4oですね。モデルによってはproにするか設定を変えないとダメみたいです。

実際に実行してみるとこんな感じです。変更内容に問題なければ確定します。ちなみに動かしてみましたが、特に問題もなく動きました。リファクタリングが楽でめっちゃ嬉しい！

最後にAIに指示を出して意図通りの動きをするコードが作れるか試してみました。複雑になりすぎないように2つに分割しました。私が描いたイメージはAIが読み取ってくれるわけではないので、そこはコードをコピペして指示を出しました。こんな感じ。

少しだけ手作業で修正しましたが、ほぼ完ぺきに作ってくれました。障害物は名前から推定したんだと思います。流石に配色とその位置から形を推測するのはまだ無理だと思うので。

終わりに

ただ、正直に言うとなめてました（笑）ほぼ完璧に指示をこなしてコードを書いてくれるとは。何よりリファクタリングが嬉しいですね。もちろんこれだけのためにお試しで導入するのもありだと思います。読みやすくもなるし、今後の作業も楽になると思うので。ではでは。

Pyxelを使って簡単なゲームの作成を試してみたい！part3

Mon, 30 Dec 2024 00:00:00 +0000

前回 pyxeleditorを使ってサウンドを作って動かすところまでやってみました。

スコアとゲームオーバーの実装

スコア表示の実装

今回はゲーム性を持たせるところですね。やることはスコアの作成とゲームオーバーの作成ですね。まずはスコアの作成をしていきます。コードとしてはシンプルです。

class Scrolling_Game:
def __init__(self):
…
self.score = 0
…
def draw(self):
…
pyxel.text(5, 5, f"Score: {self.score}", 1)

textの後の引数はx座標とy座標。後はテキストとカラーパレットですね。カラーパレットはドット絵と同じで0が黒、7が白になります。

さらにスコアについては特定のアイテムを取った時にプラスしていきたいので、変数にしています。ただ、固定ならテキストを入力で問題ないですね。表示させるとこんな感じ。左上にスコアが出ています。

スコア増加の実装

次はどうやってスコアを増加させるかですね。シンプルな方法でアテイムを取ったら増加するという方法でやろうと思います。

というわけでアイテムを書きました。ハチミツの壺ですね。「ハチミツ食べたいな～」でおなじみの奴です。

他にもいろいろ描いてますが、将来的に使いたいなーと思って描いたやつです。気にしないでください（笑）

それから出現をランダムで出したいと思います。ここもそこまで難しくないですね。初期変数をランダムに設定し、draw関数でランダム変数を設定する感じですね。以下のコード

import random
class Scrolling_Game:
def __init__(self):
…
self.item_x = random.randint(0, 120)
self.item_y = random.randint(0, 120)
…
def draw(self):
pyxel.blt(self.item_x, self.item_y, 0, 8, 24, 8, 8, 0)

当たり判定の実装

これでランダムに出現するようになりました。ただ、初期配置でランダムになるだけで取得もできないし、スコアも変わらないです。なので、次は取得して配置を変え、スコアを上げるコードを書いていきます。

class Scrolling_Game:
…
def update(self):
…
# 当たり判定
if (self.char_x < self.item_x + 8 and
self.char_x + 16 > self.item_x and
self.char_y < self.item_y + 8 and
self.char_y + 16 > self.item_y):
self.score += 100
self.item_x = random.randint(0, 120)
self.item_y = random.randint(0, 120)
…

これで当たり判定とスコアの上昇、アイテムの再配置を行いました。動かすとこのような感じですね。

Pyxelを使って簡単なゲームの作成を試してみたい！part2

Fri, 27 Dec 2024 00:00:00 +0000

pyxeleditorでキャラの動きやサウンド

前回 pyxelのインストールからドット絵を描いて表示させるところまでやってみました。今回は実際にキャラクターを動かしたり、サウンドを作ったりしたいと思います。

pyxeleditorで作った部分

実際に動いた画面がこちら。

コードの中身_init

一旦各コードを簡単に見ていこうと思います。まずは__init__内ですね。前回も話したのでざっくりと見ます。

pyxel.init(128, 128, title='Scrolling Game')
pyxel.load('assets/scroll_game.pyxres')
self.char_x = 50 # キャラクターのX座標
self.char_y = 50 # キャラクターのY座標

initで画面サイズの設定、char_xとchar_yはキャラ座標を設定しています。loadでpixel editで作成したものをロードしています。ドット絵、タイルマップ、サウンドなど全て一旦ロードしています。

self.char_frame = 0 # 表示する画像のインデックス (0 または 1)
self.frame_count = 0 # フレームカウンター
self.is_moving = False # 移動中フラグを追加
self.last_input = False #直前のフレームでキー入力があったか
pyxel.run(self.update, self.draw)

他のコードはコメントも記載していますが、キャラ画像の入れ替えやフラグの設定をしています。後はpyxelの起動ですね。

コードの中身_update

次はupdate関数ですね。

# ゲーム中断
if pyxel.btnp(pyxel.KEY_Q):
pyxel.quit()
# キー入力と移動処理
self.is_moving = False
key_pressed = False # 今のフレームでキーが押されているか

Qを押したらゲームを中断します。それからフラグとキー入力の初期設定をしています。

# キー入力処理とキャラクターの移動
if pyxel.btn(pyxel.KEY_LEFT):
self.char_x -= 1
self.is_moving = True # 移動中フラグを立てる
key_pressed = True
if pyxel.btn(pyxel.KEY_RIGHT):
self.char_x += 1
self.is_moving = True
key_pressed = True
if pyxel.btn(pyxel.KEY_UP):
self.char_y -= 1
self.is_moving = True
key_pressed = True
if pyxel.btn(pyxel.KEY_DOWN):
self.char_y += 1
self.is_moving = True
key_pressed = True

ここでは各方向キーを入力した時の設定をしています。上下左右分書いてるので記述は多いですが、内容はシンプルです。キャラクターの座標をずらして、フラグを書き換えています。というか関数化したほうがもっとシンプルになりますね…

Pyxelを使って簡単なゲームの作成を試してみたい！part1

Sat, 21 Dec 2024 00:00:00 +0000

Pyxelでゲーム開発入門

ゲームを作成するのであればUnityやUnreal Engineが有名です。それとは別にpythonでコーディングができるpyxelがあります。

pyxelはレトロゲームエンジンになります。ファミコンのようなドット絵スタイルのゲームしか作れませんが、pythonを知ってる人にはちょうどいいかもしれません。

開発環境の準備

pythonを導入している前提ですが、少し進めていきたいと思います。基本的にはREADME通りに進めていけばよいと思います。まずはライブラリのインストールを進めていきます。

pip install -U pyxel
私の例: py -3.10 -m pip install -U pyxel

-Uがないとエディター画面が出ないので忘れずにつけましょう！その後は参考のためサンプルを導入するのもよいと思います。なくても特に問題はありません。

pyxel copy_examples

基本的なコード構造

そうすると簡単なゲームやガイドなどが入ってます。これを理解できれば基本的なコードは書けるようになると思います。基本的なコードはこんな感じになってます。

import pyxel
class App:
def __init__(self):
pyxel.init(160, 120)
self.x = 0
pyxel.run(self.update, self.draw)
def update(self):
self.x = (self.x + 1) % pyxel.width
def draw(self):
pyxel.cls(0)
pyxel.rect(self.x, 0, 8, 8, 9)
App()

クラスの中に__init__関数とupdate関数とdraw関数があります。__init__関数では画面サイズの指定や各関数の実行ができます。

update関数ではキー入力や画面の切り替えを行う関数になります。update関数がメインになりそうです。もちろんupdate関数だけじゃなくて新しく関数を作っても問題ないです。キャラクター用や画面用などいろいろ作ると使い分けが楽になると思います。

draw関数では画面やキャラクターの描画を行います。エディター画面で作成した背景やキャラクターを呼び出したりします。

ドット絵とタイルマップの作成

というわけでまずはドット絵とタイルマップの作成からですね。ちなみに私は絵心は全くないので、大したものは書けません。所謂味がある絵みたいなイメージですね…コマンドは以下になります。

pyxel edit "絶対パス"
例: pyxel edit "C:\pyxel\assets\game.pyxres"

コマンドは相対パスだと開かないので気を付けてください。一応実行しているフォルダーに移動してファイル名のみ指定しても問題ありません。

こんな感じで蜂A、蜂B、空、草原、岩のタイルを用意してみました。適当ですが苦手なりにそれっぽくできた気がします。まずはタイルマップの作成をします。左上のエディターからタイルマップを選び、書いたタイルを指定して書いていきます。

タイルマップへのキャラクター表示

今度はコードを使ってタイルマップにキャラクターを表示してみます。