【スクラッチ】レースゲーム(車運転ゲーム)を作ろう！車が走っているように見せる その１ 2023 6/07 スクラッチ入門 スクラッチ プログラミング 簡単 2023年4月16日 2023年6月7日 この記事のポイント⇩ 車が走っているように見せる方法がわかります。 学べるスクラッチテクニック⇩ クローンの使い方がわかります。 目次はじめに 車が走っているように見せる 前回の記事で車をキーボードで左右に動かすプログラムを作ることができました。しかし、これだけでは車が前に進んでいっているようには見えません。 今回は、車が前に進んでいっているように見せるための方法を説明して、さらにレースゲームらしくしていきます。 参考記事 前回記事 前回は車をキーボードで操作するプログラムを作成しました。今回の記事では前回記事で作ったプログラムから続けます。以下リンク先を参照してください。 ファミプログ 【スクラッチ】レース（車運転）ゲームを作ろう！キー操作でモノを動かす。 | ファミプログ この記事のポイント キーボードのキー操作でモノを動かせるようになります。 はじめに カーレースゲーム（車運転ゲーム）をつくってみよう！ このコースではカーレースゲ… スクラッチの始め方 スクラッチをイチから始めたい方は、以下リンク先の記事を参考にしてください。 ファミプログ 【すぐできる】【簡単】スクラッチ（Scratch）のはじめ方 現役エンジニアが解説するスクラッチ入門。【今回のテーマ】5分で、スクラッチ（Scratch）プログラミングのを解説します。【対象者】プログラミングをこれから始めたいと思… 完成作品 完成作品はこのようになります。車がドンドン前進していっているように見えますね。もちろん車は左右に動かすことができます。 </noscript><iframe data-src="https://scratch.mit.edu/projects/835756262/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen class="lazyload" > ろぼてく 安全運転第一でお願いします。 完成プログラム 新規追加スプライト ＜左白線＞ 左白線が前方からせまってくるように作ります。 ＜右白線＞ 右白線もほとんど同じように作ります。x座標の変化のさせ方を「－」から「＋」に変えればよいですね。 スクラッチプロジェクト スクラッチプロジェクトは以下です。プログラムや画像の素材は自由に使用してもらってOKです。 レース（車運転）ゲームを作ろう！２回目 車が走っているように見える＝道路が動いているように見える 車を画面の真ん中に固定して、かつ、車が走っているように見せる方法を考えます。 まず、歩道に立って道路を走る車を見てみる場合を考えてみましょう。その場合、もちろんですが、道路は止まって見えて車がヒューっと動いて見えるでしょう。 つぎは、道路を走る車を同じ速度で後ろから追っている場合を考えてみましょう。 その場合、前方の車は止まって見えて、道路が動いているように見えますね。特に道路の白線がヒューっと流れて動くように見えるでしょう。 すなわち、今回のレースゲームでは車を真ん中に固定して、道路の白線を動かしてやれば、あたかも車が走っているように見えるようになるはずです。 ゲームにおいて、キャラクターを画面中央に固定していながら、キャラクターを動いているように見せるものはほとんどがこの考え方を使っています。 ろぼてく 初代マリオカートなんかもこの考え方です。懐かしい。 作るモノ・コト（仕様）を考える では、今回の作るモノ・コト（仕様）を考えます。 白線が道路の遠くから近くへ移動する。＝上から下へ移動する。 移動する白線は徐々に大きくなっていく。 白線は何度も繰り返し出てくる。 ろぼてく はじめに作りたいモノをおおざっぱでもいいので、書き出すことがプログラミングで重要です。いきなりプログラムを組み始めるよりスムーズに進みます。 スプライトを用意する 今回用意するのは白線のスプライトとなります。白線は左白線、右白線をそれぞれ用意します。 ろぼてく 白線なので背景にしようと考えるかもしれませんが、動かすものはスプライトで用意することになります。 プログラミング それでは仕様で考えたことを１つずつプログラムしていきます。 白線を道路の遠くから近くへ大きくしながら移動させる これは前回の記事で車を左右にスムーズに動かすための方法を参考にすればよいです。 ただし、遠くにある白線は小さく見えて、近くにある白線は大きくみせると言った遠近感を出すために、遠く（上）から近く（下）へ移動させるとともに徐々に白線を大きくしていくことが必要です。 従って、左側の白線のプログラムはこのように組みます。 だんだんと大きさと位置を変えることの調整は難しいので、「値を変えて・動かして」を何回か実際にくりかえして決めましょう。これをトライ＆エラーと言います。 右側の白線も同様にプログラムを組めばOKですが、「x座標」はプラスとマイナスが逆になります。 動作確認 ではこれで一旦動かしてみましょう。 ※【注意】上記画像はgifファイルのため、自動で繰り返し再生されますが、実際のプログラムは白線は1度しか移動しません。 このように白線が徐々に大きくなりながら、近づいてくるように見せることができました。 白線を何度も出現させる→クローンを使う 先ほどの章で、白線が徐々に大きくなりながら、近づいてくるプログラムを作ることができました。ただし、このプログラムでは１度白線を表示して消えたら２度目以降の白線は現れません。 ずっと車が走っているように見せるためには、ずっと白線が表れて近づいてくるようにしなければなりません。 ろぼてく 白線が来なければ、車が止まって見えてしまいますね。 このように何度も同じスプライトを表示させて同じように動かすためには、「クローン」を使います。 ろぼてく スクラッチでゲームプログラミングをするには、この「クローン」を上手に使う必要があります。 では、「クローン」を使って、何度も同じスプライトをつくって、同じ動作をさせるようにしてみましょう。 スクラッチでクローンのプログラミングでは、 クローンを作るプログラム クローンの動作のプログラム を分けて記述します。 まずは左側の白線のプログラムはこのようになります。 今回はプログラムが実行されてからずっとクローンが作られるようにします。 クローンが作られたときの動きは先ほどの動きをそのまま使います。 右側の白線も同様にプログラムを組みます。x座標が右白線ではすべて「+」の値になります。 動作確認 ここで一旦動作確認をしてみます。白線が何度もやってくるようになれば成功です。 ただし、画面の下はしについた白線が左右に流れていくような動きをしていますね。次はこれを解決します。 画面のはしについたクローンを消す 先ほどのプログラムのままでは、画面下はしについた白線が、張り付きながら左右に流れていくような動きをしていました。これを解決するためには、 もしクローンが画面端にふれたら、 クローンを消す をプログラムに追加します。 左白線のスクリプトに以下のような赤枠の部分を追加します。 右白線も同様に修正します。 動作確認 では一旦動きを確認してみましょう。 何度も白線が表れて近づいてきて、画面下に来たらその白線が消えるようになっていれば成功です。 車を一定速度で動いているように見せる方法 これで車が前に進んでいるように見えるなりました。 しかし、今のプログラムでは白線が近づいてくるに従って、車の速度が遅くなっているように見えます。 車を一定速度で動いているように見せるためにはもう一工夫が必要になります。それは次回説明していきます。 さいごに 今回は、車が走っているように見せるためのプログラミングを説明しました。ゲームプログラミングでは、ちょっとしたカラクリを入れることでより現実に即した見え方を実現することができます。 ただし、自分で思いつくことはなかなか難しいです。そういった場合には、書籍やインターネットでドンドン調べて学んでいきましょう。 知識がある程度身についてくるといつの間にか自分で応用ができるようになります！ スクラッチ学習 おススメ本 私も参考にしているスクラッチ参考書を紹介します。どれもわかりやすいものばかりです。 リンク リンク ろぼてく 私の場合は、図書館で借りて試し読みして、分かりやすかったものを購入しています。試し読みは必須です。あと手元にずっと置いておきいつでも参照できるようにすることも重要です。 次回 次回は車が同じ速度で走っているように見せる方法を説明します。ぜひチャレンジしてみてください。 ファミプログ 【スクラッチ】レースゲーム(車運転ゲーム)を作ろう！車が走っているように見せる その２ | ファミプログ この記事のポイント 車が「同じ速度」で走っているように見せる方法がわかります。 スクラッチでできるようになること 変数の使い方がわかります。 はじめに 前回の記事で… 次回の完成作品はこんな感じです！ 白線の速度をだんだん速くするようにした場合(次回) 白線の速度を同じにした場合(今回) スクラッチ入門 スクラッチ プログラミング 簡単 よかったらシェアしてね！ URLをコピーしました！ URLをコピーしました！ 【スクラッチ】レース（車運転）ゲームを作ろう！キー操作でモノを動かす。 【スクラッチ】レースゲーム(車運転ゲーム)を作ろう！車が走っているように見せる その２ この記事を書いた人 ろぼてく 現役エンジニア 歴12年。 仕事でプログラミングをやっています。 長女がスクラッチ（学習用プログラミング）にハマったのをきっかけに、スクラッチを一緒に学習開始。 このサイトではスクラッチ／プログラミング学習、エンジニアの生態、エンジニアによる生活改善について全力で解説していきます！ 関連記事 【スクラッチ】キャッチゲームを作ろう アイテムをキャッチする 2023年6月5日 【スクラッチ】キャッチゲームを作ろう アイテムを落下させる 2023年6月4日 【スクラッチ】重力・加速度を表現する ～リンゴを上手に落とす～ 2023年6月4日 【スクラッチ】アクションゲームを作ろう 色違いキャラを作る 2023年5月30日 【スクラッチ】アクションゲームを作ろう キャラ選択＆画面切替 2023年5月30日 【スクラッチ】レースゲームを作ろう！タイムアップ・ゲームオーバーを作る 2023年5月30日 【スクラッチ】レースゲームを作ろう！ゲームクリアを作る 2023年5月30日 【スクラッチ】レースゲームを作ろう！スマホタッチ操作対応 2023年5月30日 コメント コメントする コメントをキャンセルコメント ※ 名前 ※ メール ※ サイト 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。 上に表示された文字を入力してください。
コメント