検索:
Scrachでマリオ系のアクションゲームを作る③

前回は主人公をジャンプさせる方法を紹介しました。

次にステージを作る方法を紹介します。

Tiledのインストール

ステージの作成には第1回でも紹介したSuperpowers Asset Packを活用してみたいと思います。

ステージの編集ソフトは Tiled というフリーソフトを使うと簡単に行えます。

Tiled をダウンロードしたら立ち上げて、新しいプロジェクトを作成します。
次に新しいマップを作成します。

Scrachの画面サイズは「480 × 360」なので、分かりやすくそれに合わせたステージを作成します。

今回素材として使用する Superpowers Asset Pack の最小単位に合わせて

・タイルの大きさ:幅 8 px、高さ 8 px
・マップの大きさ:「固定」⇒「幅 60:タイル(480ピクセル)」×「高さ 45:タイル(360ピクセル)」

Superpowers Asset Packのタイルセットを開きます。

↓タイルセットの場所↓

(任意のパス)/superpowers-asset-packs-master/prehistoric-platformer/background-elements/tileset-1.png

※タイルファイルを選択する際、「マップに埋め込み」にチェックを入れます。

タイルファイルを開くと下図のように、右下の「タイルセット」の領域に素材が表示されます。

タイルセットをマウスでドラッグして、使用したい領域分を選択します。

左クリックで、ハンコを押すようにペタペタと好きなタイルを貼り、ステージを作っていきます。

ステージが完成したら、画像ファイルとして保存します。

C#でList型の2次元配列を使う

行ごとに大きさが変動するような2次元配列を使いたいときは、List型の2次元配列を使うと便利です。

下記のように使用します。

       public void DataGet(string[] data_lines) {

            //int j = 0;
            Boolean is_first = true;

           // 最初のドラッグ&ドロップで取得するデータ
            if (IsData == false)
            {
                this.titles = data_lines[0].Split(',');   // 先頭行を1次元配列で取得
            }

            list_num = data_lines.Length;


            foreach (string line in data_lines)
            {
                List<int> Items = new List<int>();

                // データを一次元配列に入れる
                string[] cells = line.Split(',');   // cells[]に各行の値1次元配列で取り込む

                if (is_first == true)
                {
                    is_first = false;
                }
                else {
                    /* データ */
                    for (int j = 0; j < cells.Length; j++)
                        if (cells[j] == "") {
                            break;
                        }else
                        {
                        Items.Add(Convert.ToInt16(cells[j]));
                    }
                    pList.Add(Items);
                }
            }
      }    

リストのサイズの最大値を取得する場合は下記のように記述します。

                PS_F.DataGet(data_lines);
                int ColNumMax= PS_F.pList.Count;//50
                int ColNumMin = PS_F.pList.Max(innerList => innerList.Count);

データの指定方法は下記のように記述します。

int value = PS_F.pList[3][7];  // 3行目の7列目を取得する
Githubを使ったチーム開発①

Githubを使ったチーム開発の方法を簡単に説明します。

1. Github でリモートリポジトリを作成

  • リモートリポジトリとは・・・
    他のコンピュータまたはネットワーク上にあるフォルダ・ファイルの保管場所のこと
  • 作成方法
    • github の画面右上にある「+」をクリックする  ⇒ New repository を選択
    • 任意の Repository name を入力
      アップロードするフォルダまたはファイル名など
    • Create repository をクリック

2. コマンドラインを使ってローカルリポジトリを作成

  • ローカルリポジトリとは・・・
    自分のPC内にあるフォルダ・ファイルの保管場所
  • 作成方法
    • コマンドライン(ターミナル)を開く
    • cd フォルダのパスコマンドを実行し、アップロードするフォルダへ移動する
    • git initコマンドを実行して、ローカルリポジトリを作成する
      • 実行後、Initialized empty Git repository 〜 と表示されれば、作成完了。
    • git add . コマンドを入力して、対象フォルダ内のファイル・フォルダをステージングさせる(コマンド実行後は、特に何も表示されません)
      • 「.」 : カレントディレクトリ直下にある全てのフォルダ・ファイルを指定
      • ステージング : アップロード対象として指定(コミット)すること
    • git commit -m "コミット名" コマンドを実行し、ステージング対象を保存する
       コミット名: 何のコミットなのかを識別するための名前 ⇒ 書き方は自由
      • コマンド実行後は、コミットの内容が表示されます。
C:\baictCorn>git init
Initialized empty Git repository in C:/baictCorn/.git/

3. ローカル リポジトリと github(リモートリポジトリ) の関連付け・アップロード

  • git remote add origin URL名 コマンドを実行し、ローカル リポジトリと github(リモートリポジトリ)を関連付ける(リモートリポジトリを追加する)※ コマンド実行後は、特に何も表示されません。
    • origin: 追加するリモートリポジトリ名
    • URL名 : 追加するリポジトリ(ローカルリポジトリを作成したときの画面に表示される HTTPS の URL をコピペする)
  • git push -u origin main を実行し、ローカルリポジトリの main ブランチを リモートリポジトリの main へプッシュ(アップロード)します。
    • ※エラーが出るときは「main」を「master」に変更してみてください。
  • 以上でアップロード完了です。
  • 以下でブランチ名を確認することができます。
    • git branch
C:\baictCorn>git branch
* master

C:\baictCorn>git push -u origin master
Enumerating objects: 399, done.
Counting objects: 100% (399/399), done.
Delta compression using up to 8 threads
Compressing objects: 100% (360/360), done.
Writing objects: 100% (399/399), 13.32 MiB | 5.72 MiB/s, done.
Total 399 (delta 124), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Resolving deltas: 100% (124/124), done.
To https://github.com/abstech2022/BaictCorn.git
 * [new branch]      master -> master
branch 'master' set up to track 'origin/master'.
Scrachでマリオ系のアクションゲームを作る②

前回は主人公を左右に移動させる方法を紹介しました。

ここでは主人公をジャンプさせる方法について記載します。

ジャンプ動作の実装

ではジャンプのコードを実装してみましょう。ジャンプのコードは下記になります。

ここでは「Y座標=-124」を地面とした場合のソースコードを記載しています。
これを前回の左右へ移動するコードと並列に記載することで、ジャンプしながら左右への移動も可能になります。

コスチュームの設定

次にジャンプ動作時のコスチュームを設定します。コスチュームを確認すると、12 ⇒ 13 ⇒ 14 ⇒ 12・・・と変化させると、髪をなびかせながら上昇していくモーションを実現できそうです。

同様に、下降時は15 ⇒ 16 ⇒ 17 ⇒ 15・・・と変化させることで、膝を曲げながら髪をなびかせて下降する動きになりそうです。

ここでは「状態」という変数を作成し、「状態=0」は着地状態、「状態=1」なら上昇中、「状態=2」なら下降中、という具合にしてみたいと思います。

状態の設定は、先ほど作成したジャンプ動作の部分に追記します。

これで動作に合わせて状態が変わるようになりました。

最後に状態の値に合わせてコスチュームを変化させる部分を実装します。

これでジャンプができるようになったと思います。

こちらがScrachのサンプルです。

これでプレーヤーの基本動作はできるようになったので、次回はステージのスクロール方法を紹介したいと思います。

Scrachでマリオ系のアクションゲームを作る①

Scratch(スクラッチ)は、アメリカ・マサチューセッツ工科大学(MIT)のメディアラボが開発したプログラミング言語で、誰でも無料で使用することができます。画面上のブロックをつなぎ合わせることでプログラムを作れるため、小学生でも簡単にプログラミングを学ぶことができます。

ここでは Scratch を使ってスーパーマリオブラザーズのような2次元のアクションゲームを作ってみたいと思います。

主人公の作成

まずは、マリオで言うところのマリオ、真ん中で動く主人公を作ってみます。

Scratch では、画面上に表示する一つ一つの要素を「スプライト」と呼びます。主人公もスプライトで作成します。スプライトに使用する素材は、Scratchにデフォルトでいくつか用意されていますが、これだけでは物足りないので、フリー素材などを探して活用すると良いと思います。

ここでは、Superpowers Asset Pack の使い方を紹介します。Superpowersとは、ゲーム制作会社のSparklin Labsで開発されたHTML5向け2D/3Dゲームメーカ(開発環境)です。これは、オープンソースで無料で利用することができます。

① こちらの Superpowersのサイトにアクセスして、「Download Now」ボタンをクリックします。

② 「No thanks, just take me to the downloads」をクリックします。
※ 寄付しても良い場合は支払う金額を入力します

③ 「Superpowers Mega Asset Pack (1200+ files!)」の横の「Download」ボタンを押します

④ ZIPファイルがダウンロードされるので解凍して利用します。

解凍すると下記のようなフォルダ構造になっています。中身にどのような素材が入っているか覗いて確認してみてください。

ここではアクションゲーム用の素材がまとめて入っている「prehistoric-platformer」を使ってみたいと思います。

主人公になる素材は「characters/playable」フォルダ内に入っています。

中身を見ると下記のような画像が入っています。

Scratchで使用するにはこれを一つ一つに分割した画像にしたいので、フリーソフトの分割ツールを使って分割したいと思います。ここでは「ImgSplit」という分割ツールを使います。

こちらのツールを使って分割を実行すると、下記のように別々の画像ファイルとして作成することができます。

素材が準備できたので実際にScratchでプログラミングしていきたいと思います。

素材を使ってスプライトを作る

Scratchには ①オンライン版と②オフライン版があります。

①オンライン版は、Scratchのサイトにアクセスし、ブラウザ上からプロジェクトの管理やプログラミングする方法です。ブラウザから利用できるので、パソコンに専用ソフをインストールさせておく必要がなく簡単に始められますが、インターネットが接続出来る環境でなくては、使用することが出来ません。

②オフライン版は、事前にインターネット経由でソフトをインストールしておき、PCのローカル環境でロジェクトの管理やプログラミングする方法です。インターネットが繋がらない環境でも学習を進めることが出来ますので場所を選びませんが、インターネット経由でソフトをダウンロードしインストールをして学習環境を設定しておく必要があります。

ここでは手軽に始められるオンライン版にて説明します。

Scratch のサイトに行き、右上の「Scratchに参加しよう」から、アカウントを作ります。

アカウントを作ったら、画面左上にある「作る」をクリックするとプロジェクトを作成することができます。

では早速スプライトを作ってみたいと思います。右下の「猫の顔+」のアイコンから「↑」スプライトをアップロードをクリックし、先ほど分割したキャラクターの画像を一つ選択します。

そうすると画面にキャラクターが現れます。右下のスプライト選択ウインドウから、アップロードしたキャラクターを選択し、左上のコスチュームタブを選択します。

「コスチュームをアップロード」をクリックし、先ほど分割した残りの画像を選択して、「開く」をクリックします。

これでスプライトの素材のアップロードは完了です。

スプライトを動かす

次にスプライトを動かすコードを生成します。下記のようにコードを入れてみましょう。

キャラクターが左右に滑るように動くようになったと思います。

次にもっと動いている感じを出すために、走る動作を加えてみます。スプライトのコスチュームを確認すると、6番~11番と順番に変化させると、走る動作になっていることが分かります。
※ 順番がずれている場合は、ドラッグ&ドロップで順番を入れ替えてください

つまり、右か左のキーが押され続けている間、コスチュームを6 ⇒ 11 に変化させるコードを実装すればOKです。下記のコードを先ほどのコードに加えて、別のブロックとして記述します。

スプライトが走る動作をしながら左右に動くようになったと思います。
次回の記事にて、「ジャンプ」する方法を紹介いたします。

Thunderbird メールを外付けHDDにバックアップする方法

Thundbird にメールがたまってしまうと、PCのドライブ容量を圧迫してしまうため、メールを外付けHDDに退避して、必要な時にだけ読み出したくなります。ここでは ImportExportTools NG というアドインでThunderbird のメールを外付けHDDにバックアップする方法を紹介します。

■ 外付けHDDへのバックアップ方法

1.「ツール」メニューの「アドオンとテーマ」から、ImportExportTools NGを検索して、「Thunderbird」をクリックする。

2.バックアップしたいフォルダ上で右クリックし、ImportExportTools NG から「フォルダ内のすべてのメッセージをエクスポート」を選択。「EML」形式「メッセージとHTMLインデックス」を選択。

以上で、選択した外付けHDDフォルダ内にバックアップデータが保存されます。

■ 外付けHDDからの復元方法

1.復元したいフォルダ上で右クリックし、ImportExportTools NG から「EMLメッセージのインポート」を選択。「フォルダ内のすべてのEMLメッセージ」を選択し、復元したいフォルダを選択すればメッセージがフォルダごと復元されます。

終了したプロジェクトなどをフォルダごと外付けHDDバックアップし、Thunderbird 上からは削除してしまい、見返す必要が生じた際にバックアップデータを外付けHDDからインポートするなどの運用がおススメです。

Pyserialを使ってシリアル通信

Pythonでシリアル通信を実装する場合、Pyserialが便利でしたので、簡単に紹介します。


最初にPyserialをインストールします。

pip install pyserial

COMポートをデバイスマネージャーで確認して、シリアル通信のインスタンスを定義します。

serial.Serialの1つ目の引数がポート番号、2つ目がボーレート、3つ目がタイムアウトの設定です。

import serial

ser = serial.Serial('COM9', 307200, timeout=1)

.writeコマンドを使ってメッセージを送信します。

#任意のメッセージを記述
senddata = [0x55, 0x0D, 0x0A] 

#送信
send_binary = bytes(senddata)
ser.write(send_binary)

受信は.readコマンドを用います。

#受信
res = ser.read(4)
print(res)

readのカッコ内の数で受信するByte数を設定できます。

.readline () というコマンドを使えば、改行コードまでを受信してくれますが、今回試した機器は改行コードを返さない仕様だったため readline ではうまくいきませんでした。

硬貨認識AI ② ~YOLOを使って硬貨を認識する~

前回はCVATを使ったアノテーションを紹介しました。
今回は実際にYOLOを使って硬貨の認識までを実施してみます。

ここではGoogle Colaboratory のGPUを使って学習してみたいと思います。
まずはGoogle Colaboratoryのサイトに行き、右上の「Open Colab」をクリックし、その後 Googleアカウントでログインします。

① ノートブックの新規作成、Runtimeの変更

「ファイル」から「ノートブックを新規作成」をクリックします。

GPUを用いて学習を行いたいため、「ランタイム」から「ランタイムタイプを変更」をクリックし、 T4 GPUを選択します。

② 必要なライブラリのインストール

pip install コマンドを使って必要なライブラリをインストールします。

!pip install ultralytics

③ Googleドライブにアクセスするため、マウント処理を実行。

from google.colab import drive
drive.mount('/content/drive')

④ 学習データ、テストデータをフォルダに格納。

「train」「val」フォルダを用意して画像ファイルとアノテーションファイルを同ファイル名(ここでは.jpgファイルと.txtファイル)にして格納します。

アノテーションデータのCOCO 1.0 -> YOLO形式への変換は、こちらを参考にいたしました。

⑤ 学習の実行

下記のコマンドで学習を実行することができます。
学習回数(epochs=)やバッチサイズ(batch=)なども引数として変更可能です。

!yolo task=segment mode=train model=yolov8n-seg.pt data=/content/drive/MyDrive/COIN/YOLO/coin_config.yaml epochs=400 imgsz=640 batch=2 project=/content/drive/MyDrive/COIN/YOLO/output name=coin_detection

ここで指定している「coin_config.yami」内では、下記のようにフォルダパスとラベルの種類を指定しています。

train: /content/drive/MyDrive/ISSEI/COIN/train # train images (relative to 'path') 128 images
val: /content/drive/MyDrive/ISSEI/COIN/val # val images (relative to 'path') 128 images
# test:  # test images (optional)

# Classes
nc: 5  # number of classes
names: ['1yen','5yen','10yen','50yen','100yen']

⑥ 学習結果の確認。

学習した結果が⑤で指定したフォルダ(/content/drive/MyDrive/COIN/YOLO/output)に格納されるので確認してみます。

results.png を確認すると下記のように学習回数(epochs)とロス関数の推移やRecall(再現性), Precision(適合率) などの関係を確認することができます。

また、「train_batch*.jpg」で、実際のYOLOでの認識結果を確認することができます。

ちゃんとコインを種類ごとに識別できていることが確認できました!

硬貨認識AI ① ~CVATのAI Toolsを使ってアノテーションをしてみたらすごく楽だった~

AIで物体認識を行うためには

① 画像

② アノテーション「=注釈」データ(どこに何が写っているかの情報)

が必要になります。

アノテーションデータを生成するための便利なツールがいくつも開発されています。

ここでは Intel 社が開発した CVAT(Computer VIsion Annotation Tool)を使って、硬貨を認識するためのアノテーションデータを生成してみます。


CVATのサイトへ行き、「Try for free」をクリックします。

ユーザー登録を行い、右上の「+」マークから “Create a nes task” を選択します。
下記の “Create a nes task” が開くので、タスク名とラベル名(分類したい種別)を入力します。ラベル名はEnterまたは ”Continue” ボタンで、次のラベル名を入力できます。

画像をウインドウにドラッグ&ドロップして”Submit & Open” をクリックすると、作業用のページが開きます。

左側のメニューから “AI Tools” を選択します。”Convert masks to polugons” にチェックを入れます。

次に “AI Tools” を使って硬貨を選択していきます。硬貨の上で左クリックすると、下図のように多角形で自動的に硬貨の領域を囲んでくれます。(最初の1回だけ少し時間がかかります)

ここで硬貨の種類を示すラベルを選択しても良いのですが、個人的には、硬貨の領域を教える作業だけを先にやってしまい、ラベリングはあとでまとめてやった方が効率が良いと思います。

キーボードの ”N” を押すと領域が確定でき、もう一度”N” を押すと “AI Tools” が再起動されるので、

「左クリック」⇒ 「N」⇒ 「N」

を連続でやっていけば、領域を教える作業は次々と進めることができます。また一度クリックしただけでは、所望の領域が選択されないことがありますが、同じ硬貨の上の別の場所を再度クリックすることで領域が修正されます。

全ての画像の領域チェックが終わったら、ラベリングをしていきます。右のリストでドロップボックスから選択しても良いですし、画像の上で右クリックでも選択可能です。

すべてのラベリングが完了したら、左上の ”MENU”から”Export job dataset”を選択。
「COCO 1.0」形式でエクスポートします。

以上で、アノテーションデータ「.jsonファイル」が完成しました。

AnacondaでPythonの仮想環境を構築する

Pythonでの開発において、Pythonのバージョン、インストールされているライブラリの種類・ライブラリのバージョンの状態をまとめて「環境」と呼びます。Pythonを実行するには環境の構築が必要です。

仮想環境とは

Pythonに限った話ではありませんが、プログラムを作成する際、「このライブラリのこのバージョンはPythonのこのバージョンにしか対応していない」のようなことがよくあります。
また、ライブラリをアップデートすることで以前作ったプログラムが動かなくなってしまったら困ります。

そこで「仮想環境」と言われる所望のパッケージの所望のバージョンをインストールした環境を用意し、環境を切り替えることで、簡単に実行できる環境を構築することができます。

ここではAnacondaを使用した仮想環境の構築につて紹介します。

仮想環境の生成

実際に仮想環境を作成してみます。
Windows PowerShell や Anaconda Powershell Prompt で下記のコマンドを実行してください。

PowerShell
conda create -n vir_env1 python=3.11.4

ここでは「vir_env1」という名前の仮想環境を構築しています。

仮想環境が正しく作成されたか、下記コマンドで確認します。

PowerShell
conda info -e

コマンドを打つと、下記のような結果が出力されます。

PowerShell
 base               *  C:\ProgramData\anaconda3 
 vir_env1              C:\Users\Users\.conda\envs\vir_env1

base 環境の他に、「vir_env1」が生成されていることが確認できます。

仮想環境の切り替え

仮想環境は activate/deactivate して切り替えます。
仮想環境「vir_env1」をactivateする方法は下記になります

PowerShell
conda activate vir_env1

コマンドを実行すると、「vir_env1」の仮想環境がアクティベートされます。

念のため「conda info -e」を実行すると、下記のように仮想環境が切り替えられたことを確認できます。

PowerShell
 base                  C:\ProgramData\anaconda3 
 vir_env1           *  C:\Users\Users\.conda\envs\vir_env1

「*」印が、有効になっている仮想環境を示しています。
Anaconda Powershell Prompt を使っている場合、コマンドラインの左端の表記が(base)から(vir_env1)に変わっているかで、環境の切り替えを確認することもできます。