75才からのモバイルアプリ作成

MIT App Inventor 2 を使ったアプリ作成

MIT App Inventor 2であのアプリを作ってみる (Pacman 2)

2024-06-30 08:15:16 | 日記

画面をもう少しPacmanらしく。Pacmanの移動を制御するために動けるルートをあらかじめ設定。

設定方法は以下の通り。

1. matrixList:Macのスプレッドシートで以下のようなルートを作成(左図)。0は侵入不可地域、1は移動可能地域。

赤線枠内がスクリーン(Canvasの領域)。Canvasの領域を出ることはできないが、一応0で囲むことにした。1の青色部分がpacmanが動ける範囲。スクリーン初期化の際にこのマトリックスをリストとして生成。

2. 侵入不可地域を画面上で認識するために右図のpacmanPositionリストを作成。例えば、pacmanが「23」の位置にいる場合、23の直下は、現在のposition 番号+12 の 35となる。もし、下に進もうとしたら(下矢印ボタンをタップ)、matrixListのindex35をチェックして0なので進めないようにする。

以下の画面スクリーンショットは、画面上部にチェックのためにmatrixListを表示したもの。

                                                             

アプリ実行のビデオ:

スクリーンのデザイン:

Text for Label4は、テスト用データのチェックを行うもの。

                                      

ブロック・コード:

追加部分のみ。

1. スクリーンの初期化時に関数makeMatrixを実行してmatrixListを生成する。

関数makeMatrixListは、0, 1 で上記スプレッドシートで作成した経路通りにリストを生成。1行目は、0が12個、2行目は、0が1個+1が10個+0が1個...という具合に。

                              ********** 以下続くが省略。 **********

2. Pacmanの初期の位置をmatrixList上のindex 23に設定し、変数pacmanPositionに格納。

upButtonをタップした時、例えば上記pacmanPositionマトリックスで、45の位置にいると、すぐ上は12を引いた33となる。もし、position33が「1」であれば、進むことができるので、pacmanのY座標の値から30(pixels)引いて、pacmanを一つ上に移動させる。downButtonの場合は、12加算してチェックする。rightButtonは、1加算してチェック、leftButtonは1引いてチェック。これを繰り返して、チェックkの結果「1」であればpacmanを移動させていく。

3. pacmanPositionを新たに設定したのに伴い、pacmanがghostを衝突して元の位置に戻された場合、pacmanPositionも初期値の23に設定し直す。(赤点線部分)

                                      ********************************************************

前回までのブログ:

MIT App Inventorであのアプリを作ってみる (Pacman 1)


MIT App Inventor 2であのアプリを作ってみる (Pacman 1)

2024-06-27 08:07:57 | 日記

パックマンというゲームはあまりよく知らないのだが、ネット情報を見て、こんな感じなのかなというパックマンを作ってみることにした。

まずは、パックマンが動き、パワーエサを食べ、ゴーストと会う(衝突する?)程度まで。これで終わってしまうかもしれないが。。。

理想的には、Google Doodleのようなものを作成できたらなあ〜と思うが。。。なかなか難しそう!

アプリ実行のビデオ:

スクリーンのデザイン:

右側画面の下部の右向きと左向き矢印はブロック・コードにて、それぞれ上向き、下向き矢印に回転させている。

                         

ブロック・コード:

1. extensionを使って右向き矢印と左向き矢印をそれぞれ時計回りと反対に90度回転させて、上向き矢印、下向き矢印に変更している。変数powerLevelの数値をpowerLevelLabelに表示。パワーエサを食べると、このパワーレベルが上がる。

2. 関数makeClockDisabled:Pacmanの口の開閉を制御するClockを無効にする。

3. upButton, downButton, rightButton, leftButtonをタップした時の動作を設定。Pacmanの口の開閉動作をオンにするとともに30pixels 動かす。upButton以外は省略。upButtonの場合はY軸上を、-30pixels、downButtonの場合は、30pixels移動。rightButtonの場合は、X軸上を30pixels、leftbuttonの場合は、-30pixels移動。ちょうど一コマ動く感じ。

4. upButtonをタップすると、upMouthClockが稼働し、関数animationUpProcedureを実行。

pacmanのアイコンは以下の通り、8種類アプリに同梱されている。ファイル名は左から、1.png, 2.png 〜 8.pngとなっている。upButtonをタップした場合は、animationUpProcedureを実行することにより、100ミリ秒毎に7.pngと8.pngを交互に表示させ口パクを実現。

以下downButton, rightButton, leftButtonも同様(省略)。

5. pacmanがghostやエサに遭遇(衝突)した場合の対応:

ghostと衝突した場合、pacmanは元の位置に戻される。powerLevelが2超ある場合は、powerLevelが2減少する。

エサ(バナナ)と遭遇し食べた場合、エサは消え、powerLevelは5増加する。

 

                                 ************************************************************************************

<余談>

後期高齢者になって初めての自動車運転免許の更新はがきを受け取った。後期高齢者の場合、認知機能検査と高齢者講習を受ける必要がある。認知機能検査は今回初めて受ける検査。早速、YouTubeなどにある模擬テストをやってみたが、、、記憶力の減退をはっきりと自覚させられた。

 


MIT App Inventor 2で遊ぶ (色と描画4-ColorPicker2-)

2024-06-25 08:38:05 | 日記

お絵描き帳の中にカラーピッカーを追加する。もうすでにどちらのアプリも作成済みなので、新しい要素は特にない。

アプリ実行のビデオ:

スクリーンのデザイン:

右2つは、描画モードとカラーピッカーモードの画面。

        .       

ブロック・コード:

カラーピッカーの表示の部分のみ。(前回までと重複部分が多いので、かなり省略。)

1. 背景色がグラデーションの「カラーピッカー」ボタンをタップした時の動作。

描画用キャンバス(Canvas1)が表示されている時は、カラーピッカー用キャンバスが設定されているVerticalArrangement3を表示。

カラーピッカー用キャンバス(Canvas2)に配置されているBall1(黒色の丸)の位置をx=120, y=120 にセットする。(ほぼ中心)

「カラーピッカー」ボタンの表示文字を「キャンバスへ戻る」に変更。

逆に、カラーピッカー用キャンバスが表示されている場合は、描画用キャンバス(Canvas1)を表示し、ボタンの表示も元に戻す。

2. カラーピッカーとして表示する画像3種類のファイル名をリストとして変数colorFileに格納。

3. 「changeWheelButton」ボタンをタップする毎にカラーピッカーとして表示する画像を順番に表示する。

4. タッチした座標 (currentX, currentY) へカラーピッカー用キャンバス上のBall1を移動させ、そのタッチした座標の色をselectedColorLblの背景色にセットする。

「showSelectedColorBtn」をタップしてcanvasPaintColorにカラーピッカーで選択した色をセットする。

以下canvasPaitnColorにセットする色毎にボタンを設定しているが赤を除き省略。

                                           ***************************************************

色と描画に関する前回までのブログ:

MIT App Inventor 2で遊ぶ (色と描画3-ColorPicker1-)

MIT App Inventor 2で遊ぶ (色と描画2-お絵描き帳2-)

MIT App Inventor 2で遊ぶ (色と描画1-お絵描き帳-)

 


MIT App Inventor 2で遊ぶ (THE MOVIE DB 8)

2024-06-22 07:24:18 | 日記

俳優の出演作品を検索。人気順。ページ送り機能はつけず、また、1ページ目のみ表示の簡素型とした。

アプリ実行のビデオ:

スクリーンのデザイン:

「Starring films」ボタンをタップすると、右図の赤点線部分が非表示となり、緑点線部分が全面表示される。

                            

ブロック・コード:

1. 変数pageに1を設定。今回は1ページのみ表示。

URLに埋め込むパラメーターを日本語の場合と英語の場合にわけて変数parameterListに設定。

2. 関数setParameters:parmeterListより日本語(index 2)あるいは英語(index 1)いずれを選択するかにより、language, region, countryの変数に値を設定する。

3. 日本語を選択した場合、関数setParametersのパラメーターindexとして2を渡し実行。

4. 英語を選択した場合、関数setParametersのパラメーターindexとして1を渡し実行。

5. toStarringFilmsButton」をタップすると、今ままで表示されていた画面を非表示とし、出演映画の一覧をリストアップするVerticalArrangement1を表示する。スクリーンのタイトルも「About XXXXX」より「About movies XXXXX acts in」に変更。

6. 「closeButton」をタップすると、出演映画の一覧をリストアップするVerticalArrangement1を非表示とし、俳優の詳細情報画面を再表示する。そして、スクリーンのタイトルも「About XXXXX」に戻す。

7. 関数getfilmData:APIの所定のURLにパラメーターを設定してGETリクエストを行う。

8. データ取得に成功すると、関数makeListおよび関数makeListForListViewを実行し、その結果をListView1に一覧表示する。

9. 関数makeList:JSONデータをfor each を使って、全出演作より項目ごとに(title, overview, poster_path,release_date) データを抽出してリストを作成する。

10. 関数makeListForListview:項目ごとのリストを統合してListView用のデータを作成。

 

                                         **************************************************************************

前回までのブログ:

MIT App Inventorで遊ぶ (THE MOVIE DB 7)

MIT App Inventorで遊ぶ (THE MOVIE DB 6)

MIT App Inventorで遊ぶ (THE MOVIE DB 5)

MIT App Inventorで遊ぶ (THE MOVIE DB 4)

MIT App Inventorで遊ぶ (THE MOVIE DB 3)

MIT App Inventorで遊ぶ (THE MOVIE DB 2)

MIT App Inventorで遊ぶ (THE MOVIE DB 1-2)

MIT App Inventorで遊ぶ (THE MOVIE DB 1)


MIT App Inventor 2で遊ぶ (色と描画3-ColorPicker1-)

2024-06-20 08:38:01 | 日記

MIT App Inventorのチュートリアルの定番として、カラーピッカーがある。最初に見た時は、えっえっ。。。どうしてできるの?と不思議に思った。

タネを明かせば、簡単。componentの中に、キャンバス内の特定ポイントの色をRGBで取得できるもの(以下)が用意されている。それだけのことなのだが。

                                         

アプリ実行のビデオ:

(ビデオの撮影がうまくいきませんでしたが。。。)

スクリーンのデザイン:

アプリに同梱した3枚の写真の他に、写真ライブラリーからまたは撮影した写真からも色を取得できる。

                                         

ブロック・コード:

変数color:取得した色のRGBの値をリスト形式で格納

変数photoList:同梱の画像名のリストを格納

変数colorIndex(photoIndexとすべきか?):現在表示している同梱画像のindexを格納

 

「Next Image」ボタン:アプリに同梱の画像(3枚)を順番に取り出し、キャンバスに表示。

写真ライブラリーより取得の画像をキャンバスに表示。

ImagePickerのボタンをタップしたら、ボタンの表示を「Bundled Images」へ変更。

カメラボタンをタップしたら、写真撮影モードに。

写真を撮る場合、portrait(縦長)の位置で撮影すると時計と反対回りに90度回転した画像となる。その補正(90度時計回り)をextension (ImageConverter) を使って行い、キャンバスの背景画像にセットする。

左がextensionを使わない場合、右がextensionを使って画像を回転補正した場合。

            

 

白いボールの現在座標の色を取得し、HorizontalArrangement3の背景色に設定すると共に、RGBAの数値をLabel3に表示。

Ball2の位置座標は左上端なので、Ball2の半径分(10pixels)位置を調整しておく。

 

                                           ***************************************************

色と描画に関する前回までのブログ:

MIT App Inventorで遊ぶ (色と描画2-お絵描き帳2-)

MIT App Inventorで遊ぶ (色と描画1-お絵描き帳-)