検索:
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)に変わっているかで、環境の切り替えを確認することもできます。

OpenCVとPythonで硬貨を検出してみた

OpenCVをPythonで走らせてコインの認識を行ってみました。

まずはカメラの映像をライブでウィンドウにキャプチャします。

Python
import cv2

# カメラを開く
cap = cv2.VideoCapture(1)

while True:

    # 画像をキャプチャする
    ret, frame = cap.read() #カメラ動画
    
    # 画像の表示
    cv2.imshow("Image", frame)
    
    # `q`キーを押すとループを終了する
    if cv2.waitKey(1) == ord('q'):
        break

# カメラを閉じる
cap.release()

# すべてのウィンドウを閉じる
cv2.destroyAllWindows()

実行結果がこちら↓↓

接続するカメラが違う場合は、4行目の関数の閾値の数字を変えてみてください。これでUSBカメラの映像をライブで取り込めるようになりました。

次に Hough 関数を使って円を検出してみます。

Python
import cv2
import numpy as np

# カメラを開く
cap = cv2.VideoCapture(1)

#フォントの指定
fontType = cv2.FONT_HERSHEY_DUPLEX

while True:

    # 画像をキャプチャする
    ret, frame = cap.read() #カメラ動画

    # グレースケール画像の生成
    image_gray = cv2.cvtColor(frame,cv2.COLOR_BGR2GRAY)

    #==============================================
    # Cannyでエッジ検出処理
    canny_gray = cv2.Canny(image_gray,100,200)
    cimg = canny_gray

    j = 0
    
    # hough関数
    circles = cv2.HoughCircles(cimg, cv2.HOUGH_GRADIENT, 1, 20, param1 = 120, param2 = 15, minRadius = 10,maxRadius = 30)
        # param1 : canny()エッジ検出器に渡される2つの閾値のうち、大きいほうの閾値0
        # param2 : 円の中心を検出する際の投票数の閾値。小さくなるほど、誤検出が起こる可能性がある。
        # minRadius : 検出する円の最小値
        # maxRadius : 検出する円の最大値

    #検出された際に動くようにする。
    if circles is not None and len(circles) > 0:

        #型をfloat32からunit16に変更。
        circles = np.uint16(np.around(circles))
        
        for i in circles[0,:]:
            # 外側の円を描く
            cv2.circle(frame,(i[0], i[1]), i[2], (0, 191, 255), 2)
            # 中心の円を描く
            cv2.circle(frame,(i[0], i[1]), 2, (255, 255, 0), 2)
            # 円の数を数える
            j = j + 1

    #円の合計数を表示
    cv2.putText(frame,'Total :'+str(j), (30,30), fontType, 1, (0, 0, 0), 1, cv2.LINE_AA)

    #==============================================

    # 画像の表示
    cv2.imshow("Image", frame)
 
  # `s`キーを押すと画像を保存する
   if cv2.waitKey(1) == ord('s'):
        #結果の書き込み
        cv2.imwrite('image1.jpg',frame)   
  
    # `q`キーを押すとループを終了する
    if cv2.waitKey(1) == ord('q'):
        break

# カメラを閉じる
cap.release()

# すべてのウィンドウを閉じる
cv2.destroyAllWindows()

実行結果がこちら↓↓

これで円形状のものを検出し、数をカウントできるようになりました。

慣性モーメントを分かりやすく説明してみた

「慣性モーメント(イナーシャ)」とは

<抽象度★★★★★>

物体の「回りにくさ」「止まりにくさ」を表す値です。


<抽象度★★★★☆>

直動系の超有名な方程式(ニュートンの運動の法則)
$$ F=ma =m \ddot x$$

[N] = [kg] [m/s2]

を回転系に直すと

$$ \tau =Ja= J \ddot \theta $$

[Nm] = [kg・m2] [rad/s2]

となり、ここに出てくる「J」が「慣性モーメント[kg・m2]」です。

すなわち、回転系における「重さ」を示す値と言えます。


<抽象度★★★☆☆>

機械設計において、慣性モーメントはモータの容量を計算する際に必要になります。

台形の速度プロファイルで回転体の位置決めをする場合、「各加速度」に「慣性モーメント」をかけると、モータに必要なトルクが分かります。(摩擦などの負荷トルクは無視しています)

慣性モーメントが大きいと必要なトルクが大きくなり、慣性モーメントが小さいと必要なトルクが小さくなることが分かります。


<抽象度★★☆☆☆>

下図のような質点mの回転を考えます。

この時、中心軸周りの回転の慣性モーメントは、

$$ J = m r^2 $$

で表されます。