この記事のポイント
車が「同じ速度」で走っているように見せる方法がわかります。
学べるスクラッチテクニック
変数の使い方がわかります。
はじめに
前回の記事で、車が前に進んでいるように見せるプログラムを作ることができました。しかし、白線がドンドン近づいてくるとドンドン車の速度が落ちているように見えてしまっていました。
従って前回のプログラムでは、車が速く走ったり、遅く走ったりを繰り返す変な動きになっていました。
第3回の今回の記事では、車を「同じ速度」で走っているように見せる方法を説明していきます。
参考記事
前回記事
前回の記事では、車は前に進んでいるように見せるプログラムを作りました。以下リンクを参照してください。
レースゲームを作ろうシリーズ
本レースゲームを作ろうシリーズを最初から始めたい方は、以下のリンクを参照してください。
スクラッチの始め方
スクラッチをゼロから始めてみたい人は以下記事を参考にしてください。
完成作品
完成作品はこのようになります。車がドンドン前進していっているように見えますね。さらに前回と違って、マイカーが同じ速度で走っているように見えますね。もちろん車は左右に動かすことができます。
安全運転第一でお願いします。
完成プログラム
修正プログラム
<左白線>
これは左白線のプログラムですが、右白線も同様に作ります。白線が近づくにつれて速くなるようにします。
スクラッチプロジェクト
スクラッチプロジェクトは以下です。プログラムや画像の素材は自由に使用してもらってOKです。
車を同じ速度で走っているように見せる方法
【結論】遠近感のある背景で車を同じ速度で走っているように見せるためには、遠くにいるモノは遅く動くようにして、近くにいるモノは早く動くように見せる必要があります。
遠くのものはゆっくり、近くのものは早く
あなたが電車に乗っていることを想像してみてください。
電車の窓から外の風景を眺めると、遠くにあるものはゆっくり動いているように見えて、近くにある電柱はサッと素早く動いているように見えると思います。
この人間の感じ方を利用して、遠くにある白線はゆっくり近づいていき、近くにある白線は素早く動くようにプログラムをしてみます。
作るモノ・コト(仕様)を考える
今回作るモノ・コト(仕様)を考えてみます。先ほどの考え方を実現するためにはこのようなものをプログラムする必要がありそうです。
- 白線が遠くにいるときはゆっくり動いて、近くにいるときは早く動く。
プログラミング
どんどん速度を大きくする
白線が近づくたびにドンドン速くするために、前回までで作ったプログラムでどこを修正すればよいか考えます。
白線の速さを決めているのは、プログラムの中では「x座標を〇ずつ変える」と「y座標を〇ずつ変える」ブロックですね。この値を大きくすると白線の速さが速くなります。
この「大きさ」「x座標」「y座標」の値を、繰り返しごとにだんだん大きくすることができればよさそうということがわかりますね。
どんどん値を変える→変数を使う
「大きさ」「x座標」「y座標」の値を繰り返しごとにだんだん大きくするためには、「変数」を使います。
変数とは
変数とは、プログラム中で値を書き換えることができる入れモノのことです。
プログラム中の好きなタイミングで中身を書き換えることが可能です。
プログラミングにおいて、プログラミング3大要素に加えて、最も重要な要素の1つです。ぜひ使えるようにマスターしましょう。
この変数を使って繰り返しごとに、大きさ、x座標、y座標の変化量を変化させていけば、今回の問題は解決できます。
変数の使い方
変数を作る
変数を使うためには、まず使うための変数を作る必要があります。
変数のつくり方は以下のとおりです。左側白線用に「大きさ(左白線)」「x(左白線)」「y(左白線)」を作ります。
- 画面左のブロックカテゴリーの「変数」をクリックします。
- 「変数を作る」をクリックします。
- 「新しい変数」というウインドウが表示されるので、「新しい変数名」に変数名を入力します。
- 「すべてのスプライト用」を選択します。
- OKをクリックします。
同様に右側白線用にも変数を「大きさ(右白線)」「x(右白線)」「y(右白線)」として作ります。
変数を使う
では次に作った変数をプログラミングで使ってみましょう。
次のように動くようにプログラムを修正します。
- 変数の初期化をする。
- 作った変数をだんだん大きくする。
- 大きさ、x座標、y座標を作った変数で変化させる。
右側の白線も同様にプログラムを組みます。x(右白線)の変化量を「-」→「+」に変えてやればOKです。
動作確認
白線の速度をだんだん速くするようにした場合の効果を確認します。
左が白線の速度がだんだん速くしたバージョンで、右が前回までの白線の速度を変えないバージョンです。左の車の方が同じ速度で走っているように見えると思います。
【小ネタ】よりスピード感を出す方法
ここで少しプログラムをいじってみて、よりスピード感を出す方法を説明します。
答えは白線の速度を速くすればよいので、「大きさ(左白線)」「x(左白線)」「y(左白線)」の変化量を大きくしてやればよいです。例えば、前回の値からすべて2倍の値にしてみましょう。
効果を確認してみます。左が変化量を2倍にした場合で、右が前回の場合です。
この方法を使うことで、例えば、アクセルを用意して、アクセルを踏むと速度が速くなるように見せることもできるようになります。
レースゲームでアクセルは必要不可欠な要素ですね。
さいごに
今回で車を同じ速度で走らせているように見せる方法を説明しました。車を同じ速度で走らせるようにするだけでもいろいろな工夫が必要なこと、実際の世界をよく観察しないといけないことがわかったと思います。
しかし、これらのことができるようになれば、プログラミングスキルの向上だけでなく、理科や物理の勉強になっていきます。プログラミングを学ぶことで遊びも勉強もできて一石二鳥になる感覚がわかったと思います。
スクラッチ学習 おススメ本
私も参考にしているスクラッチ参考書を紹介します。どれもわかりやすいものばかりです。
私の場合は、図書館で借りて試し読みして、分かりやすかったものを購入しています。試し読みは必須です。あと手元にずっと置いておきいつでも参照できるようにすることも重要です。
次回
次回は他の車も走らせて、さらに他の車に衝突した場合にクラッシュしたように見せるようにします。
次回の完成作品はこのような感じになります!ぜひ挑戦してみてください。
コメント