再度マリオ型ゲームに挑戦。
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さまさまです。でも、初めに書いた通り、今回はジャンプだけ。
今後検討を要する課題としては、画面を横向き設定にすること。背景を動かすスピードを徐々にあげること。障害物のサイズを徐々に大きくすることなど。まだまだ先の先の話だが。。。
アプリ実行のビデオ:
ジャンプするだけのつまらないビデオ。
VIDEO
スクリーン・デザイン:
メインスクリーン 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.