チュートリアル | ページ 4

エクステンション

日本語化プロジェクト版LookExtension

機械学習を使って画像を分類するエクステンションです。機械学習モデルをアンドロイドデバイス上に持つのでネットワーク接続がない環境でも動きます。MITオリジナルのLookExtensionは動かないアンドロイドデバイスがありますが、日本語化プロジェクトでハックしたバージョンは推論速度は遅くなるものの、こういったアンドロイドデバイスでも動くようになっています。ここからダウンロードしてください。

このエクステンションを使ったアプリの作り方はまだ公開していません。エクステンションを使わない精度の高い人工知能画像分類アプリのチュートリアルは公開中です

オリジナルのLookExtensionからの変更点とその理由

LookExtensiomは機械学習用ソフトウェアのTensorFlowのJavaScript版であるTensorFlow.jsを使っています。TensorFlow.jsは推論を行うBackendモジュールとしてデフォルトでWebGL2(GPU使用)を使用しますがすべてのアンドロイドデバイスがWebGL2をサポートしているわけでは無いのでWebGL2をサポートしていないデバイスでは実行時にエラーが発生します。そこでWebGL2をサポートしないデバイスではWebGL2を使わずにCPUを使うように変更しました。変更ファイルはassests/look.jsのみです。以下の＋行を追加します。

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

記事を読むエクステンション

ボールころがしゲーム

ゲーム,チュートリアル

スマホのセンサーを使ったゲームを作りましょう

スマホらしく方位センサーを使ったゲームを作ります。スマホを傾けて紫色のボールをころがしてゴールにボールを入れて得点します。途中にあるブラックホールに落とさないようにうまくコントロールする必要があります。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"RollingBall“と名前を付けます。Screen1のタイトルを"ボールころがしゲーム"にします。

ページの最後にあるダウンロードセクションから使用する画像と音源をクリックしてダウンロードしてください。このチュートリアルでは段階的にアプリの組み上げ、テストを繰り返してアプリを作っていきます。ここで行うように段階的に作っていく方がバグの少ないアプリを作れます。

ボール部分

まずは紫色のボールを動かす部分からです。

コンポーネントの追加

ドローイングとアニメーション パレットから キャンバス をビューアーにドラッグし、"フィールドキャンバス“と名前を付け、横幅は"親要素に合わせる"、高さは"70%"に設定します。

ドローイングとアニメーション パレットから画像スプライト を"フィールドキャンバス“に追加し、名前を"ボール“に設定します。ダウンロードした 3DPurpleBall.png をアップロードしてボールの画像として設定し、次のプロパティを設定します。

有効：チェック

インターバル：10

進行方向：０、この値はプログラム内で変更します

スピード：0.0、この値はプログラム内で変更します

目に見える：チェック

センサーパレットから、 方位センサーをビューアーにドラッグアンドドロップします。

ブロック編集機能を使用したプログラミング

アプリの動作をプログラミングするには、ブロック編集機能にアクセスする必要があります。画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

方位センサーでボールを動かす

方位センサー1 パネルの"いつも方位センサー1.方位が変化したら"ブロックを追加します。

ボール.進行方向 と ボール.スピード にそれぞれ 方位センサー1.角度 と 方位センサー1.マグニチュード を下図のように指定します。方位センサーの角度は-180～180の範囲の数値で、スマホ画面を水平から真右に傾けると0、左に傾けると-180、スマホの上側に傾けると90、手前に傾けると-90になります。方位センサーのマグニチュードは0～1の範囲の数値で、スマホ画面が水平なら0、垂直なら1になります。

ここまででテストしてみましょう。Companionアプリをつないで実際にスマホを傾けてボールが動くことを確認してください。うまく動きますか？

ゴール部分とテキスト部分

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

記事を読むボールころがしゲーム

もぐらたたきゲーム

ゲーム,チュートリアル

簡単なゲームを作りましょう

このチュートリアルでは、スマホで遊べる「もぐらたたき」ゲームを作成します。モグラがランダムに現れるので、タッチして得点を稼ぐシンプルなゲームです。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"MoleMash"と名前を付けます。

デザイン編集

Screen1のタイトルを"もぐらたたき"にします。モグラの画像をここからパソコンにダウンロードします。

コンポーネントの追加

ドローイングとアニメーション パレットから キャンバス をビューアーにドラッグアンドドロップし、高さと横幅を280ピクセルに設定します。

ユーザーインターフェース パレットから ラベル と ボタン をキャンバス1の下に配置し、以下のように名前とプロパティを設定します。

ラベル：名前="点数"、テキスト="点数: 0″

ボタン：名前="リセットボタン"、テキス ="リセット"

メディアパレットから、 サウンドコンポーネントをビューアーにドラッグアンドドロップします。非可視コンポーネントのサウンドコンポーネントを使ってモグラがたたかれた時にスマホをバイブレートさせます。

タイマーコンポーネントの追加

モグラは定期的にジャンプして位置を変えます。このためにセンサーパレットのタイマーコンポーネントを使います。タイマーコンポーネントをビューアーにドラッグアンドドロップしてください。タイマーイベント間隔を700ミリ秒に設定してこの間隔でモグラが動くようにします。タイマー有効がチェックされていることも確認してください。