AI を使用してインタラクティブなゲームを作成する

このアクティビティでは、手のジェスチャーに応答するインタラクティブゲームをプログラムする方法を学び、その知識を応用して独自のインタラクティブゲームを開発します。次に、ユニークなゲーム要素を作成するためのデザインの課題に取り組み、ゲームにおける AI の可能性を探り、AI がどのように機能するかをより深く理解します。 AI の驚くべき可能性を発見する準備をしましょう。

手の検出は、コンピューターが画像から手を識別するために使用するプロセスです。これは、ロボット工学、コンピュータービジョン、人間とコンピューターのインタラクションなど、さまざまな分野で重要です。機械が人間と効果的に対話できるようにするには、正確な手検出モデルが必要です。学習ベースの手法の出現により、手検出モデルはより堅牢かつ正確になり、現実のアプリケーションに適したものになりました。

たとえば、手検出モデルは、コンピュータビジョンを使用してアメリカ手話を認識し、テキストや音声に翻訳する SignAll のようなジェスチャ認識システムに使用できます。その機械学習モデルは、さまざまな手話ジェスチャーを認識するようにトレーニングされており、聴覚障害者や難聴者が手話を知らない他の人たちとコミュニケーションするのに役立ちます。

SignAll のコアテクノロジーは、画像やビデオなどの視覚情報を使用し、その情報をコンピューターで処理できるデータに変換します。

手話は表現力豊かな視覚的な言語であるため、従来の技術では解釈が難しい場合があります。 SignAll では、携帯電話またはコンピュータのカメラを使用して、手話の核となる要素をキャプチャ、分析、翻訳します。

これらすべての要素はコンピュータソフトウェアによってカタログ化および解釈され、ユーザーの手話を理解できるようになります。アプリはこの視覚情報を収集し、それを数千もの潜在的な手話ジェスチャーのデータベースと比較します。機械学習を使用して可能性を絞り込み、最も可能性の高いオプションを予測します。アプリはこれらのオプションをユーザーに提示し、ユーザーは言おうとしていた内容に一致するオプションを選択します。

機械学習は、聴覚障害者にとってのコミュニケーションの課題に対処するための強力なツールとなり得ます。聴覚障害者または難聴者は、聴覚コミュニティのメンバーと署名する際にコミュニケーションの障壁を経験することがよくあります。 AI は、聴覚障害者がいつでもどこでも他の人と自発的かつ効果的にコミュニケーションできるようにする技術ソリューションを開発することで、これらの障壁を克服するのに役立ちます。

SignAll の仕組みがわかったので、次の質問について考えてみましょう。

このテクノロジーをさらに一歩進められるとしたら、どのようなものになるでしょうか? 確認してみましょう！

このアクティビティでは、SignAll アプリの背後にあるアイデアを取り入れて単純化し、手の動きを認識してそれに反応するインタラクティブなゲームを作成します。ランダムに表示されるオブジェクトをタッチしながら、画面上で手を動かします。コンピューター上のカメラが手の動きを監視し、その人工知能が動きを追跡して理解します。

このプロジェクトではパートナーやグループと協力して、アイデアのブレインストーミング、フィードバックの提供、コードのデバッグを手伝ってくれる友人を得ることができます。このアクティビティを実行するには、AI や機械学習に関する事前の知識は必要ありません。

このプロジェクトでは、MIT の PoseBlocks ソフトウェアを使用します。この無料ツールキットは、人気のある Scratch コーディング言語とよく似た、ドラッグアンドドロップブロックを使用してコードを作成します。それらの違いは、PoseBlocks には、組み込みの身体追跡人工知能を使用するための特別なブロックがあることです。

コードを作成するには、スライサースプライトをクリックし、ブロックをワークスペースにドラッグします。 PoseBlock ワークスペースにはいくつかのセクションがあります。 (Scratch に慣れている人なら、これは非常に馴染みのあるものだと思われるでしょう。)

左側の領域には、「コード」、「コスチューム」、「サウンド」というラベルの付いた 3 つのタブがあり、それぞれに使用できるアイテムのライブラリが含まれています。すべてのコードブロックはコードライブラリにあり、機能ごとにグループ化され、色分けされています。コスチュームライブラリを使用すると、スプライトを追加、変更、または描画できます。「スプライト」とは、PoseBlock 内のオブジェクトまたはキャラクターの名前です。各スプライトには、プログラム内で何かを実行するためのコードを与えることができます。スプライトに複数のフォームがある場合、それらをコスチュームと呼びます。たとえば、Elements スプライトには 9 つのコスチュームがあります。「コスチューム」タブをクリックしてご覧ください。 (任意のスプライトを使用できます。独自のスプライトを描画することもできます。)

サウンドライブラリを使用すると、サウンドを追加または録音できます。中央のコード領域では、コードブロックをドラッグし、一緒にクリックしてゲームを作成します。右上にはステージがあります。ここでは、コード化したアクションをスプライトが実行するのを確認できます。緑の旗でゲームが始まります。赤い看板が止まっています。その下にはスプライトペインがあります。このパネルでは、コーディングするスプライトを選択し、スプライトのいくつかの設定を調整できます。カスタムの背景を選択することもできます。上部にツールバーがあります。ここでサンプルコードをロードし、プロジェクトに名前を付けることができます。また、「地球儀」🌐 をクリックして、使用する言語を調整できることにも注意してください。 70以上あります。

このプロジェクトをすぐに開始できるように、サンプルの特別なディレクトリが作成されました。このディレクトリには、Game、Tutorial、Game Graphics の 3 つのファイルがあります。

すぐにプレイできる完全なコードは「Game」ファイルにあります。これを使用するには、ファイルをコンピュータにダウンロードします。次に、PoseBlocks で、ツールバーから「ファイル」を選択し、「コンピューターからロード」を選択します。必要に応じて、ゲームコードのリミックスとゲームのカスタマイズをすぐに開始できます。アイデアやインスピレーションを得るには、「アクティビティ 3: インタラクティブゲームをカスタマイズする」に進んでください。このゲームを動作させるコーディングについて学びたい場合は、「アクティビティ 2: ゲームの作成とコーディング」に進み、段階的にゲームを構築してください。

次に進む前に、ディレクトリには興味のある項目がいくつかあります。「チュートリアル」ファイルには、ゲームで使用される個々のコードブロックがすべて含まれています。ゲームファイルと同じように、このファイルをコンピュータにダウンロードして Poseblocks にロードできます。コーディング中に各ブロックを検索する必要がない場合は、これが役立ちます。これにより、プログラミングプロセスがより速く簡単になると同時に、手順を実行する機会も得られます。 (ヒント: 教師の皆様、コードブロックの PNG バージョンも利用できます。スマートボードで教えている場合、またはプレゼンテーションにコードブロックを追加したい場合に最適です。)

最後に、「ゲームグラフィックス」というファイルには、ゲームで使用されるスプライトが PNG ファイルとして含まれており、編集したり、好きなものだけをアップロードしたり、その他のクリエイティブな方法で使用したりできます。このファイルをダウンロードして、すべてのスプライトを PoseBlocks に一度にアップロードすることもできます。

「スライサー」スプライトのコーディングから始めます。スプライトパネルの下部にある青い猫のアイコンをクリックし、「ペイント」オプションを選択します。開いたコスチュームウィンドウで、黄色の点（または好きな形）を作成します。「スライサー」と名付けます。スプライトパネルの「x」をクリックすると、他のスプライトを削除できます。このドットは指で動き回るため、画面上で進捗状況を追跡できます。

このゲームでは、と呼ばれる特別な機能を使用します。ペン , これにより、スプライトが画面上に図形を描画できるようになります。ペンに何をすべきかを指示するには、いくつかのコードブロックが必要です。「緑の旗がクリックされたとき」ブロックを見つけます。これにより、ゲームが開始されます。コードライブラリからコード領域にドラッグします。次に、ペンのサイズを 11 に設定し、色を白にしてアクティブにします。コードライブラリで「ペンサイズの設定」、「ペンの色の設定」、および「ペンダウン」ブロックを見つけて、それらもコード領域にドラッグします。最後に「セットサイズ」を追加します。オブジェクトのサイズを 10% に設定し、「show」ブロックを使用して表示します。これは、画面上での指の動きを追跡するのにも役立ちます。必要に応じて設定を変更できることを覚えておいてください。紫のペンラインがお好みの方はぜひ！

次のステップでは、永久ループを作成し、その中に「cutting」変数の値をチェックする条件を入れます。指先が画面上のランダムなアイテムの 1 つに「触れる」と、スライサースプライトがそれを「カット」し、アイテムを消します。カット変数は、オブジェクトと交差するときにスプライトを 15 度回転させるだけでなく、スプライト自体の形状も変更します。この機能は、ゲームプレイエクスペリエンスに視覚的に魅力的な要素を追加し、ゲームの美しさを高めます。

これは何度も繰り返して発生させたいアクションであるため、特別なブロックが必要です。ループとは、コンピューターに対する命令であり、この場合は永遠に繰り返されます。「forever」ブロックをコード領域にドラッグし、コードのブロックに追加します。そのループ内で行われることはすべて、ゲームが実行されている限り発生し続けます。

変数とは、受け取る情報に応じて変化する値です。変数を作成するには、コードライブラリの [変数] セクションをクリックし、[変数の作成] を選択します。「cutting」という変数を作成します。この場合、変数カットが 1 に等しい場合、ゲームの動きとカットの視覚的反応の一部として、指が画面上のいずれかの要素に触れたときにペンが 15 度回転します。、それらを消滅させるために。演算子ブロックを使用して切断変数の値を確認する条件を含む「If-then」ブロックを追加します。

AIを起動する時が来ました！コードの最後に「go to」ブロックを追加し、「人差し指」と「先端」を選択します。コードは手の位置、特に人差し指の先端を検出します。

次に、演算の絶対値を取得する条件があります。この操作は、画面上の指先の座標を追跡します。「X」の値は指の水平位置を表します。この操作では、現在の X 位置「x 位置」と以前の X 位置「最後のマウス x」の差を計算し、その差が正の数 (abs) であることを確認します。差が 2 より大きい場合、オブジェクトが元の位置から大きく移動したことを意味します。コンピューターはこの計算を非常に高速に実行できます。「if-then-else」ブロックを使用して、コンピューターがこの決定を行えるようにします。変数を「最後のマウス x」にする必要があることにも注意してください。

手が速く動いている場合、変数「カッティング」が 1 に設定され、ペンが 15 度回転し、線が目に見えるように描画されます。過去と現在のペン位置の差が小さい場合、「カット」は 0 に設定されます。移動していないため、ペンを回転する必要がなく、すべてのマークが消去されます。ゲームの目的上、指を動かしていないとき、コンピュータは指がタッチしたとみなします。

最後のステップは、指の現在位置の X 座標と一致するように最後のマウスの X 変数を設定することです。その後、プロセスがループして最初からやり直します。

これらの手順を完了すると、すべてのブロックは次のようになります。

次に、スライサーコードの 2 番目の部分に取り組みます。ここでの目標は、元のスプライトのクローン、つまりコピーを作成することです。クローンの仕事は、ゲーム内で切断アクションを実行した直後、つまり指先がオブジェクトに触れてそれが消えたときに、何か素晴らしいことを行うことです。スライサースプライトは点滅するアニメーションを表示し、ゲームに楽しさとより多くのインタラクションを追加します。

クローンを定義するには、まずオブジェクトのサイズを 100% に設定して表示します。

次に、10 回繰り返すループを作成します。コードを 15 度回転し、サイズを 1 ずつ変更し、カラー効果とフェード効果を追加するように設定します。 Y の位置を -2 に変更します。これにより、指先がゲーム内のグラフィック要素の 1 つに触れたときに、カラフルな点滅効果が作成されます。最後に、アニメーションが完了したら「クローンを削除」を追加します。設定をいじって、好みのタイプの点滅アニメーションを作成してください。

次に、「要素」スプライトをコーディングします。これらの画像はランダムに表示され、ゲーム内の画面上を移動します。指先でそれらを「タッチ」する必要があります。これにより、最初のステップで作成したスライサーアニメーションがトリガーされます。

前と同じように、もう一度新しいスプライトを追加する必要があります。それを「要素」と呼びます。ただし、今回は、複数の異なるオブジェクトを表示できるようにする必要があります。提供されているゲームグラフィックスを使用するか (「アクティビティ 1: PoseBlock プラットフォームを理解する」を参照)、独自のものを描画するか、ライブラリからスプライトを選択します。 [コスチューム] タブをクリックして表示します。最も重要なことは、図に示すように、すべてのオブジェクトが同じ「要素」スプライトの下のコスチュームである必要があることです。

要素のスプライトをクリックして、コードワークスペースにブロックを追加します。ゲームを開始するとき (緑の旗をクリックするとき)、オブジェクトを非表示にして永久ループを作成します。ループ内で、下向き矢印をクリックして「自分」のクローンを作成します。次に、待機ブロックを追加し、1 ～ 2 秒間設定します。これにより、1 ～ 2 秒の間のランダムな時間にスプライトが生成されるため、いつ表示されるか予測できません。これはゲームが実行されている限り継続されます。

クローンが作成されたら、ランダム要素のスプライトコスチュームを選択します。コードを開始するには、「クローンとして開始するとき」ブロックを使用します。次に、隠しブロックと繰り返しループを追加します。「次のコスチューム」ブロックをループに追加し、演算子ブロックを使用して 1 ～ 10 の数字をランダムに選択します。これにより、どの要素のスプライトコスチュームがポップアップするかがランダムになります。

次に、要素に画面上で何かを行う必要があります。変数を追加し、「右に進む」ように設定します。同じランダム化されたコードを使用して、変数を 1 から 0 までのランダムな値に設定します。値に応じて、要素スプライトは画面上で右または左に移動します。

「X 速度」変数を使用すると、正の値を指定すると一方向 (右) に移動し、負の値を指定すると反対方向 (左) に移動します。速度の値によってオブジェクトの速度が決まります。基本的に、速度変数を使用すると、ゲーム内でオブジェクトがどのように動くかを制御できます。値を変更して要素の動きにどのような影響を与えるかを確認してください。

画面上に要素を表示することも必要です。これを行うには、「show」ブロックを使用します。「Y 速度」変数を作成して、Y 方向の速度 (速度) 変数を 20 (上下の動きを制御) に設定します。

ここで、要素スプライトがスライサーに出会ったときに何が起こるかをコード化する必要があります。永久ループ内で、Y 速度変数を -1 だけ変更します。変数「Y 速度」で Y の位置を変更し、X の位置でも同じことを行います。これにより、エレメントスプライトがステージの下部からランダムにポップアップし、その後再び落下します。次に、要素スプライトがステージの境界線に触れているかどうかを確認する条件を作成します。存在する場合は、そのクローンを削除します。

次に、要素スプライトを指（スライサーの白いペン）でタッチすると、スライサーのクローンが作成される条件を作成します。これにより、以前にコーディングしたアニメーションが停止されます。最後に、繰り返しループを追加し、「サイズ変更」ブロックを -10 に設定します。これにより、要素スプライトが非常に小さくなるまで縮小されます。

これらの手順を完了すると、すべてのブロックは次のようになります。

ゲームを保存する良い機会です。残念ながら、PoseBlocks にはセッション間でプログラムをオンラインで保存して共有する方法がありません。代わりに、ファイルを保存する必要があります。ツールバーの白いボックスにゲームの名前を入力します。次に、「ファイル」をクリックし、「コンピュータに保存」を選択します。もう一度ゲームで作業するには、アクティビティ 1 で説明したように、他のファイルをアップロードしたときと同じように、ゲームファイルを PoseBlock にロードします。各セッションの後に必ず保存してください。ゲームファイルを誰にでも送信できるので、他の人もプレイできます。

準備ができて？さあ、ゲームをテストしてみましょう!

基本的なゲームを理解したので、それを応用する方法を考えてみましょう。スプライトを変更したり、タイミングや動きのブロックを変えて遊んだり、スライサースプライトのアニメーションを調整したり、サウンドを追加したりすることもできます。ブロックを変更して新しいことを試すことができます。何か問題が発生した場合は、いつでも元に戻すことができます。

独自のゲームを作成する準備ができたら、次の質問を自問してください。

ゲームを作成したら、名前を付けて作業内容を保存します。他の人にゲームを試してもらい、フィードバックを得てください。他の人が作ったゲームをプレイしてください。どのような課題に直面したか、そしてそれをどのように克服したかについて話し合います。

PoseBlocks を使用してインタラクティブなゲームを作成するのは楽しかったですか? 楽しみはそれだけではありません。

クレジットカミラ・ルナとディエゴ・ルナによるレッスンと補足。ロイス・パーシュリーによるコピー編集。サンディ・ロバーツによるデジタル制作。

カミラとディエゴは、知識に情熱を注ぐクリエイターのコミュニティである MoonMakers の創設メンバーです。彼らは、さまざまなデジタル製造機械を備えたオープンスペースである Makerspace と、科学、テクノロジー、Maker 運動を促進する YouTube チャンネルをホストしています。彼らは、米国の Sesame Stree や Make: Community、メキシコの Educational Television や Fundación Televisa などの企業と協力して教育コンテンツを作成しています。カミラはまた、ハリスコ州コナサイトの教育長官、スペイン文化センターであるタレント・ランドとともにメキシコ共和国全土でワークショップを教えています。

チャットボットエンジニアになって、人工知能を使用して独自のチャットボットを設計、作成、適応させましょう。

チャットボットや機械学習テクノロジーを直接実験して、人工知能 (AI) について学びます。

ペンクレジット