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

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

MIT App Inventor 2で遊ぶ (新ことわざ遊び -番外編 2-)

2024-12-09 14:29:48 | 日記

Layoutのcomponentを使って複数画面の「ことわざ遊び-英語編-」を作ってみた。

アプリ実行のビデオ:

スクリーン・デザイン:

左から、ランディング・ページ(1600ミリ秒経過後メインスクリーンに自動的に遷移)、メインスクリーンの初期画面(クイズの画面)、メインスクリーンのデータ追加画面

なお、メインスクリーンの編集画面(更新・削除)は次回以降の予定。

                                         

ブロック・コード:

基本的にすでにこのブログで紹介したブロック・コードが多く、かなり重複していますが。。。

ランディング・ページ =>

画面初期化時にClock1を有効にする。intervalはあらかじめ400ミリ秒にセット。

画面遷移のタイミングを決める変数countを0で初期化。

countが4以下の場合は、400ミリ秒毎にcountの数値を1ずつカウントアップする。

countが4超となったら、Clock1を無効とし、メインスクリーンに遷移する。

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

クイズの画面、追加画面、編集画面で共通に使うブロック・コーディング((Firebase Realtime DBよりデータを取得し、項目毎にリスト形式の部分データを抽出)=>

この部分は以前のブログの内容と同じですが。

関数getTagList:各データのIDリストを取得するために所定のURLに対しGETのリクエストを行う。パラメーターshallowをtrueにし、IDのみを取り出すようにセット(既出)。

取得するTag List(データのIDリスト)は以下のようなDictionary形式なので、keyのみを取り出すとIDリストとなる。

tagListからデータの個数(length of list)を抽出し変数lengthOfDataに格納。そして、さらにデータ自体を取得する関数makeGETRequestを実行する。

関数makeGETRequest:パラメータshallowを外して、各データの詳細を取得するために所定のURLに対しGETリクエストを行う。

正常にデータを取得できたら、デコードを行った後、各項目毎のデータを抽出する。

関数makeFirstPartList(最初の句)、関数makeSecondPartList(次の句)、関数makeFullTextList(ことわざの全文)、関数makeMeaningList(ことわざの意味)、関数getRandomlyChosenFirstPart(任意に取り出した最初の句)を実行し、それぞれ変数にデータを格納する。

なお、メインスクリーンが表示されている場合は、mainListPickerに変数secondHalfListの値を渡し、追加画面が表示されている場合は、checkDataListViewに変数fullTextListを渡すようにセット。(赤黄色点線部分)

関数makeFirstPartListは以下の通りで、各データのIDをキーにしてデータを抽出しリスト形式で変数に格納。

なお、他の関数も内容的には同じなので省略形のみとした。

関数getRandomlyChosenFirstPartでは、extensionを利用して「最初の句」のリストをシャフルしてindex 1(最初のデータ)を取り出している。=> mainFirstHalfLabel(最初の句)に表示されるので、ユーザーは「Tap & pick second half」ボタンをタップし表示されるリストより「次の句」を選択することになる。

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

メインスクリーン(クイズの画面)=>

解答が正しい場合と間違った場合に再生する効果音をMultimedia ComponentであるSound1およびSound2にセットする

ことわざのデータ関係の変数およびListViewを初期化。

変数AuthStatusをfalseで初期化しセットする。(追加画面に入るためにはパスワードが必要だが、一度パスワードを入力すれば、追加画面からクイズ画面に戻って、再度追加画面に遷移する場合パスワードの入力を不要にするために使用)

「Add」ボタンをタップした際の動作を設定。

AuthStatusがtrueの場合=>変数を初期化。関数makeAddSCreenVisibleを実行し、メインスクリーンを非表示に、追加画面を表示にそれぞれ変更する。

AuthStatusがfalseの場合=>追加画面に入るためのパスワードを入力した事がないので、パスワードの入力を促すポップアップが表示される。

 

パスワードを促すポップアップで、パスワード(123)が正しく入力されれば、変数AuthStatusをtrueに設定。関数makeAddSCreenVisibleを実行し、変数の初期化、メインスクリーンの非表示、追加画面の表示を行う。パスワードが空白あるいは間違っていれば、正しいパスワードの入力を促すポップアップを表示。

関数makeAddScreenVisible:変数の初期化、Labelの初期化、メインスクリーンの非表示、追加画面の表示をそれぞれ行う。

変数startButtonStatusをfalseで初期化。これは、「Start」ボタンの表記を「Start」あるいは「Next」に変更するタイミングをコントロールするためのもの。

「Start」ボタンをタップすると、初回は、「Start」ボタンの表示をStartよりNextに変更。=> statusButtonStatusをtrueにセット。=> 変数などの初期化 => 関数getTagListを実行してデータを取得(この関数および関連ブロックは冒頭の「クイズの画面、追加画面、編集画面で共通に使うブロック・コーディング」を参照)

任意に選択された最初の句に続く次の句をmainListPickerより選択=>変数answerFullTextに当該最初の句と選択された次の句を結合して格納。=>mainFullTextLabelに結合したテキストを表示=>最初の句のindexをキーにして、正しい次の句を取り出し、mainListPickerで選択されたものと同じであれば正解なので、その場合は、mainResultLabelに「Correct」と表示し、同時にことわざの意味もmeaningLabelに表示する。

=>正解でなければ、再度次の句の選択を促すポップアップを表示する。

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

データ追加画面 =>

メイン画面に戻るボタンをタップした時の動作の設定:

取得データを項目毎に格納する変数や追加画面のLabelの初期化(関数clearAddScreen)。追加画面の非表示とメイン画面の表示。

メイン画面側のLabelの初期化。これら初期化を行った後、関数getTagListを実行して追加画面で追加したデータなどを含め改めて最新のデータを取得する。

ちょっとブロックがぼやけてしまってわかりにくいが、追加画面の3つの入力画面にテキストの入力がされていれば、それら入力データをデータベースの項目(キー)の値としてセットし変数postData(Dictionary形式)に格納。

そして、所定のURL(赤黄点線部分)に対しpostDataのデータをPOSTする。(赤白点線部分)

「Clear」ボタンの動作設定

 

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

スクリーンを一つだけにして画面展開をするメリットはあるが、今回のようなの独立した機能を持った画面の場合は、コードは重複するかもしれぬも、スクリーンを分けた方が良いと思われる。

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

前回までのブログ:

MIT App Inventor 2で遊ぶ (新ことわざ遊び -番外編 1-)

MIT App Inventor 2で遊ぶ (新ことわざ遊び 3 -U&D of CRUD-)

MIT App Inventor 2で遊ぶ (新ことわざ遊び 2 -R of CRUD-)

MIT App Inventor 2で遊ぶ (新ことわざ遊び 1 -C of CRUD-)

 


MIT App Inventor 2で遊ぶ (新ことわざ遊び -番外編 1-)

2024-12-01 07:17:07 | 日記

今回は、番外編として、一つのスクリーンで複数の画面を作るということについて復習してみたい。

「新ことわざ遊び」では、メイン画面に、データ追加画面、データ編集画面(更新および削除)の3つのスクリーンで構成し作成した。複数スクリーン間での関数、変数の使い回しができず、かなり重複したブロック・コードとなった。

そこで、スクリーン一つで作り直してみることとした。

レイアウト用のcomponentであるVerticalArrangementを縦に3つ配置。

VerticalArrangement(垂直配列)とは、MIT App Inventor2(日本語版)によれば、

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

垂直配列

上下に表示されるコンポーネントを配置する書式設定要素です。 (最初の子コンポーネントは一番上に保存され、2 番目の子コンポーネントはその下に保存されます。) コンポーネントを並べて表示したい場合は、代わりに horizontalArrangement(横配置) を使用してください。

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

要するに、コンポーネントを縦方向に配置する場合に使うのがVerticalArrangement(垂直配列)で、横方向に配置する場合に使うのがHorizontalArrangement(横配列)。

各VerticalArrangementの高さを「Fill parent」に設定。「Fill parent」は、使うことができるスペースいっぱいに高さを設定することになる。

このように設定すると、以下左図のように、3つのVerticalArrangementがスクリーンの高さを1/3ずつ占拠する結果となる。

      

このようにスクリーンを3分割しているのは、各VerticalArrangementのVisible属性をtrue(上記ではチェックが入っている状態)になっていることによる。

ここで、Layout Componentについて復習してみると。。。

Layout Component の VerticalArrangement と HorizontalArrangement にはスクロールタイプのものもある。スクリーン・キャプチャーでみてみると次の通り。上から、VerticalArangement、VerticalScrollArrangement、HorizontalArrangement、HorizontalScrollArrangementとなる。もちろん、これらlayout componentの中にlayout componentを配置し、さらに複雑なレイアウトを設定することもできる。

本題に戻り、今回の「ことわざ遊び」の画面に合わせると下の左図通りとなる。

そして、VerticakArrangement2 (Add Screen)およびVerticalArrangement3 (Edit Screen) のVisible属性をfalseに設定(非表示)すると右図の通りとなり、メインスクリーンのみの画面となる。

             

後は簡単。

「ADD」ボタンをタップしたら、VerticalArrangement1 (Main Screen)を非表示 (visible = false)として、VerticalArrangement2 ( Add Screen) を表示 (visible = true) とすれば、以下の図のように、あたかも画面展開をしているように見える。これは、今まで「お天気アプリ」、「MovieDB」など色々なアプリで使ってきたやり方で特に目新しいものではないが。

       

この方法の利点は、スクリーンが一つなので関数、変数の使い回しができること。例えば、Public APIを利用している場合など、データを取得する関数は一つ作っておけば何度でも使い回しができる。

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

次回 新ことわざ遊び -番外編 2- では、この方法で、実際に「ことわざアプリ(英語版)」を作ってみる予定。

(実際には、ランディングページがあるので2つのスクリーンとなる予定)

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

<余談>

以前にも紹介したが、MIT App Inventor2は簡単に言語の切り替えができますよ!

ユーザーインターフェイスのメニューを英語と日本語で見たら以下の通り。

英語そのままのものもあるし、全体的に慣れのせいか英語の方がしっくりくる。

                               

 


MIT App Inventor 2で遊ぶ (Weather App New 4)

2024-11-27 07:17:15 | 日記

対象都市名の横に国名を表示。都市の位置をgoogle map上に表示。いずれも既にこのブログで紹介したもので、目新しいものはない。

なお、google mapの利用方法については、以前にも紹介した通り、 こちらのブログ に教えてもらった。

アプリ実行のビデオ:

任意の都市名を入力して検索する場合の「Fetch Data」ボタンの表示が、言語を日本語に変更してもそのままになっていたことを発見。次回修正したい。

スクリーン・デザイン:

すでに紹介済みのものもあるが、左より、アプリ立ち上がり時の画面、言語選択後の初期画面、左上の拡大鏡アイコンタップ時遷移する任意検索画面、Google Map表示画面。

なお、このスクリーンショットではわからないが、City Name:の右側には都市名に加え国名のLabelが追加されている。

               

ブロック・コード:

国名と対象都市の経度緯度を取得する部分及び地図を表示するmapScreenに関する部分のみ。

メインスクリーン=>

お天気データの取得と同時に、アプリに同梱の国名・国コード一覧表(JSONファイル)を読み込む。

なお、iso_countryCode.jsonは、以下のような内容で、英日の国名、3文字または2文字のISO国コード、地域名で構成されている。

[
 {
   "countryNameJp": "アイスランド",
   "countryNameEn": "Iceland",
   "ThreeDigit": "ISL",
   "TwoDigit": "IS",
   "Area": "北ヨーロッパ"
 },
 {
   "countryNameJp": " アイルランド",
   "countryNameEn": "Ireland",
   "ThreeDigit": "IRL",
   "TwoDigit": "IE",
   "Area": "西ヨーロッパ"
 },

....

データを取得した後、関数getTargetCityLonLatを実行し、対象都市の緯度経度のデータを抽出。

また、2文字の国コードをパラメーターとして関数getCountryNameを実行の上、国名(選択言語により日本語または英語)を抽出。=>LabelのcountryNameにセット。いずれも赤黄点線部分。

iso_countryCode.jsonよりデータを取得し、デコードの上、変数countryListJSONに格納。

国名の日本語および英語名を格納する変数countryNameJpおよびcountryNameEnを設定。

関数getCountryName=>パラメータ(abbrev)として受け取る2文字の国コードをキーにして、データをスキャンし、日本語名および英語名を抽出・取得。

地図画面に遷移するボタン「jumpToMapImageButton」をタップした際のイベントハンドラーの内容:

受け渡すデータとして、対象都市の緯度経度、都市名、日英の国名(括弧でくくり)をstartValueに格納。

以下は、関数getCountryTwoDigitおよび関数getTargetCityLonLatの内容。取得したJSONデータより2文字の国コードと対象都市の緯度経度を抽出。

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

Googel Map画面=>

メイン画面より遷移あった際に受け取るデータ(対象都市の緯度経度、都市名、国名)を変数に格納し、関数showMapを実行する。

Googel Mapのズーム・レベルを15に設定し変数に格納。

関数showMap:

所定のURLに緯度経度、ズームレベルおよびdataTypeをnormalとしてセットし、mapを呼び出す。また、cityCountryLabelに都市名と国名(括弧内)を表示する。

Google MapのdataTypeを格納している変数dataTypes(Dictionary型)。内容は、この使い方を教えてもらったブログに書いてあった通り。衛星写真などGoogle Mapでみる地図タイプを選択できる。

メイン画面に戻るbackButtonを設定。

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

次回は、表示するデータを増やしたい。

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

前回までのブログ:

MIT App Inventor 2で遊ぶ (Weather App New 3)

MIT App Inventor 2で遊ぶ (Weather App New 2)

MIT App Inventor 2で遊ぶ (Weather App New 1)


MIT App Inventor 2でチャレンジしたらどうなる (Coding Challenge 1)

2024-11-22 08:07:58 | 日記

Coding Challengeとは、Google先生によると、プログラミング能力を競う競技や、スキルを向上させるための課題を解くこと、とのこと。

Coding Challengeを行う場や機会がウエッブサイトにて多数提供されている。

MIT App Inventor2 は、子供から大人までが手軽にスマホのアプリを作れるようにと開発されたツールなので、Coding Challengeのようなものには向かないと思うが。componentの使い方やアルゴリズムの練習にはいいかもしれない。

今回のCoding ChallengeはProject Eulerという有名な(?)サイトにある906個の問題の中で、もっともやさしい問題2つにチャレンジするもの。

実行画面のビデオ(Problem 1 and Problem 2):

問題は以下の通り。

Problem 1

If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23. Find the sum of all the multiples of 3 or 5 below 1000.

要するに、1000未満の自然数で、3または5の倍数の合計を計算せよ、という問題。

スクリーン・デザイン:

                                                    

コード・ブロック:

problemLabelに問題の内容を表示し、倍数のリストと合計を表示するlabelを初期化。

該当の倍数を格納する変数numPickedを初期化(0)。

該当の倍数をリスト形式で格納する変数pickedNumsListを初期化。

1000未満までの自然数なので、範囲は1から999。

各数字が3あるいは5の倍数かをチェックし、もしその条件に該当する場合は、その数を変数pickedNumsListに格納。

なお、3または5の倍数ではなく、3と5の公倍数の場合は、「or」の代わりに「and」を指定すればOKか。

変数numPickedに3または5の倍数だった数を加算して行く。

999までチェックが終わったら、該当の数を合計した数字が格納されているnumPickedをaddedUpAmountLabelに表示。また、picked NumsListの数字をlistOfNumsLabelに表示。

 

Probelm 2(2番目にやさしい問題)

Each new term in the Fibonacci sequence is generated by adding the previous two terms. By starting with 1 and 2, the first 10 terms will be:
                                                                    1,2,3,5,8,13,21,34,55,89...
By considering the terms in the Fibonacci sequence whose values do not exceed four million, find the sum of the even-valued terms.

要するに、4,000,000未満のフィボナッチ数列の偶数のみを合計せよ、という問題(?)

フィボナッチ数列の全ての数を合計した場合と偶数のみを合計してた場合に分けて表示するようにした。

スクリーン・デザイン:

                                                           

コード・ブロック:

変数firstNumに1をセット。(1番目の数字で、最初に1が与えられている)

変数secondNumに2をセット。(2番目の数字で、最初に2が与えられている)

変数thirdNumには0をセット。

数列を格納する変数numsListを初期化。

偶数の数列を格納する変数evenNumsListを初期化。(この数字の合計が今回の問題の解答)

2番目の数字が4,000,000未満であれば、

=>変数firstNum(1番目の数字=1)に同secondNum(2番目の数字=2)を加算し、結果を変数thirdNumに格納

=>次に1番目の数字としてsecondNumを設定

=>また、2番目の数字としてthirdNumを格納

 さらに、thirdNumの数字が4,000,000未満であれば、thirdNumの数字をnumsListに追加

 そして、このthirdNumの数字が偶数であれば、

  =>thirdNum の数字をevenNumsListに追加する。

わざわざ図解するほどでもないが、

                                 

関数addFirstTwoNums、関数addFirstEvenNum、関数sumUpNumbers、関数sumUpEvenNumbersを実行し、それぞれのLabelに結果を表示する。

関数addFirstTwoNums:

 =>所与の一番最初の数字(1)と2番目の数字(2)をnumsListの最初に(index =1)追加する関数

関数addFirstEvenNum:

 =>また、偶数である所与の2番目の数字(2)をevenNumsListの最初に(index =1)追加

関数sumUpNumbers:

 =>numsListに保存されている数字を合計し、変数summedNumに格納

 =>extensionを使って3桁毎にカンマを入れている

関数sumUpEvenNumbers:

 =>evenNumsListに保存されている数字を合計し、変数summedEvenNumに格納(これが解答

 =>extensionを使って3桁毎にカンマを入れている

 

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

以上が正解かどうかはわからないが。

ちょうどいいコーディング(アルゴリズム)の練習になり、頭の体操にもなる。でも、「Start」ボタンを押したら一瞬で終了で、それ以上の動きがないのはちょっと寂しい。やはり普通のアプリの方が動きがあって、作っていても楽しい。

もう少し、アプリらしく作った方がいい。

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

次回は、別のCoding Challengeにも挑戦したい。

 


MIT App Inventor 2で遊ぶ (T-Rex Jump 1)

2024-11-18 08:29:15 | 日記

再度マリオ型ゲームに挑戦。

Google Chromeの有名なゲーム T-Rex Game がお手本。今回のブログでは、T-Rex (ティラノサウルス・レックス)をジャンプさせてみるだけで、背景はまだ動かない。と言うより、今のところ背景を右から左へ動かすとうまくいかないから、が正確な表現。

また、本来であればスクリーン・オリエンテーション(画面の向き)は、landscape(横向き)だが、とりあえず慣れているportrait(縦向き)に設定。試験的に横向きで試行錯誤してみたが、これまた、うまく作動しない。

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

作り方は、marioに非常によく似ていると言うよりは、marioの代わりにティラノサウルスが飛び跳ねるようなものを作ればよい。たったそれだけのことなのだが。

marioの復習を兼ねて作ってみることにした。mario型ゲームの技術面なら、YouTuber Tutorials Azaotlさんに教えを乞うのがいちばんの近道。というより、Tutorials Azaotlさんが教えてくれる通りに作ればうまくいく(はず)!!!

marioの時はAzaotlさんのブロック・コードを理解せずに、単に「模写」しただけだったが、今回はブロック・コードの理解を深めたい。特に、ジャンプする際のブロック・コードなど私にとってブラック・ボックスだった部分も細かくみていきたい。

YouTubeには、いくつかのプログラミング言語でこのゲームの作り方に関するチュートリアルがアップされている。ゲーム全体の感じを知る上で参考になったのは、以前も紹介したYouTube Channel "Code with Ania Kubów" の T-rex run in JavaScript! (Super simple!!!)

では、現実問題として、

ポイントは2つ。1つは、T-Rexをジャンプさせること。もうひとつは、背景を右から左に動かすこと。どちらも私が出る幕はない。Tutorials Azaotlさまさまです。でも、初めに書いた通り、今回はジャンプだけ。

今後検討を要する課題としては、画面を横向き設定にすること。背景を動かすスピードを徐々にあげること。障害物のサイズを徐々に大きくすることなど。まだまだ先の先の話だが。。。

アプリ実行のビデオ:

ジャンプするだけのつまらないビデオ。

スクリーン・デザイン:

メインスクリーン Screen1(左)=>

  Check (Button):ジャンプ時のT-RexのY座標値を確認するためのスクリーンへ遷移するボタン。

  RexSprite:ティラノサウルスのイメージを格納するコンテナー(sprite)

  animationClock:T-Rexが走っているように表示するアニメーション用Clock

  jumpingClock:T-RexがジャンプするためのClock(画面をタップしたらジャンプする)

checkYPosScreen(右)=>

  Back:メインスクリーンに戻るボタン

  PositionY of T-Rex:T-Rexがジャンプした際の45ミリ秒ごとのY座標値を表示するLabel

                     

ブロック:コード:

以下のブロック・コードは私が考えたブロック・コードではない。また、記述内容はTutorials Azaotlさんのコードを私なりに理解し学んだ内容。

Tutorials Azaotlさんのtutorial  App Inventor Tutorial: how to make Mario jump | variable jump height を「模写」しながらブロックを組み立てた。(ファイル名等は異なるが))

ポイントとなるブロック・コードのみ。

1. T-Rexを走らせる:

 animationClockは、アプリ実行と同時に有効になるように設定。timerIntervalは45ミリ秒。

 有効になると関数AnimateRexを実行。

 

 表示するT-Rexのイメージのコマ番号を格納する変数animationFramesを設定。

 

 変数animationFramesを 1 にセット。

 animationFramesが 3 未満の場合は、Dino + animationFrames + .png を表示。

 animationClockのTime Intervalである 45ミリ秒間隔で、animationFramesに 1 と 2 が交互に挿入される。

 その結果、Dino1.pngとDino2.pngが交互に表示されることになる。

 animationFramesが 3 以上になると、animationFramesを初期値の 0 にセットし直す。

 こうして、パラパラ漫画のようにT-Rexが走っているように表示される。(説明するまでもないが)

 

                          

               Dino1.png          Dino2.png

 

2. T-Rexをジャンプさせる:

 Canvasを押し込んだ場合は、TouchDownのイベントハンドラーにより関数PrepareForRexJumpを実行

 (軽くタップし、すぐに指先を上げた場合は、後述のTouchUpのイベント・ハンドラーが対応する)

 ジャンプしているかどうかを判定する変数Jumpingを作成し、falseで初期化

 変数RexSpeedYを作成し、T-Rexのジャンプする速度(縦方向)を 0 で初期化

 事前準備のための関数 (PrepareForRexJump) を設定

 変数Jumpingがfalseの場合(まだジャンプしていない時)は、以下を実行

  T-Rexが飛び上がる初速を設定=>-60pixels (Canvasの左上端が座標の 0, 0 。下に移動は+、上に移動はー。)

                                                                (Set global RexSpeedY to -60)

  animationClockを停止=>ジャンプした場合は、走る動作を休止 (Set animationClock.TimerEnabled to false)

  T-Rexのイメージを上記のうちの一つ(Dino1.png)に固定する。(Set RexSprite.Picture to Dino1.png)

  jumpingClockの起動。(Set jumpingClock.TimerEnabled to true)

 junmpingClockの設定:

 jumpingClockが有効になった場合(変数Jumpingがtrueとなった時)は、関数RexJumpingを実行する

 関数RexJumping:

 ジャンプする場合、上に上がるにつれて速度が減速し、最高到達点で速度が 0 になる。その後は加速しながら下に下がっていく。

 jumpingClockのTimeIntervalをあらかじめ45ミリ秒に設定。

 また、減速、加速の程度を変数gravityとして5(pixels)に設定。

 T-Rexの最初の位置を変数groundに格納。(Canvasの高さ X 0.65 。 今回の場合は、Canvasの上端から496.6 pixelsの位置)

 45ミリ秒ごとに以下を実行させる

 (1)T-Rexの飛び上がる速度 RexSpeedY = RexSpeedY - gravity に設定。gravityは 5 (pixels)に固定。

    (上に行くほど速度が減速していく 最初は -60 + 5 = -55、 45ミリ秒後は、-55 + 5 = -50 。。。という具合に)

    (速度が0 に到達すると、今度は、+5、次に +5 + 5 = +10という具合に加速しながら下向きに移動していく)

 (2)今回の場合、最高到達点はCanvas上端から166.6 (pixels)の点で、そこから下向けに+5ずつ加速しつつ下方向に移動。

    T-Rexの位置が496.6を超えた時点で、T-Rexの位置を変数groundの位置(496.6 (pixels))に設定し、ジャンプは終了。

 (3)T-RexのY座標値を見れば以下の通りで、上記(1)(2)の通りとなっている。

   上にジャンプする時は、出発時点のY座標 (496.6) => 441.6 差は、-55、441.6 => 391.6 差は-50 。。。

   下に降りてくる時は、166.6 => 171.6 差は -5、171.6 => 181.6 差は -10 。。。

 (4)以下記録のキャプチャーとアプリ実行中のビデオは異なる日に作成。数値が若干異なっているが、理由は不明。

                                              

ジャンプの高さを低くしたい場合は、長押しするのではなく、素早く指を離す(タッチ・アップのイベントハンドラー作動) 

この場合、以下の「When Canvas1.TouchUp」のイベントハンドラーが対応するが、Rex-Tの速度が-30未満であれば、その速度を-30に設定する。このようにして、少し上に上がって、すぐに下に下がるスモール・ジャンプとなる。

(タップのタイミングにより、どこまで到達するかが変わっていくことになるのか)

この時の時系列的な速度は以下の通りとなる。スタートは、上記と同じ496.6。

最初に設定された速度-60は、-30より小さいので、-60上に上がる前に-30に変更となりその後は以下の通りとなる。

496.6 => 441.6 差は -55 だが、指を離したら-30に変更され、gravityが加算され -25となる。

441.6 => 416.6 差は -25、416.6 => 396.6 差は -20、396.6 => 381.6 差は -15、381.6 => 371.6 差は -10、 

371.6 => 366.6 差は -5、366.6 => 366.6 差は 0、366.6 => 371.6 差は +5、371.6 => 381.6 差は +10、

381.6 => 396.6 差は +15、396.6 => 416.6 差は +20、416.6 => 441.6 差は +25、441.6 => 471.6 差は+30、

471.6 => 506.6 差は +35 となり、若干下がり過ぎてしまうが??大勢に影響なし??

               

 

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

あまりにも、Tutorials Azaotlさんのブロック・コードそのままなので、少し違う方法も考えてみたい。

また、次回には、背景が右から左に動き、その中で T-Rexをジャンプさせることができたら、と思う。

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

All block codes in this blog originally crafted by Tutorials Azaotl and adapted to the  above app with slight modifications.