ジオメトリーダッシュの作り方 ①

スクラッチに挑戦している皆さん、どうも！スクラッチコーチです。

スクラッチ・ジオメトリーダッシュの作り方がついに開幕！

• チュートリアルの続きが読みたい人へのお願い

  このチュートリアルの続きを読みたい人は 見本の作品のハートをクリックして 教えてね！もし要望がそこそこあれば続きも執筆します。みんなの読みたいチュートリアルに力を入れたいのでアンケートみたいなもんです(^o^) よろしく！

今回のゴール

一発目はジオメトリーダッシュの土台となるコスチュームと、なんちゃって物理演算を作っていこう思う。

• プレイヤーのコスチュームを作る（スタータープロジェクトにある）
• コースのコスチュームを作る（スタータープロジェクトにある）
• ステレオマッドネスの音源をゲットする（スタータープロジェクトにある）
• コースが動くようにする
• プレイヤーが動くようにする

このチュートリアルではスタータープロジェクトがあるから、それを使えばコスチューム作りは途中まで終わった状態で始められるよ。ただまぁコスチュームを作るのが楽しい人は、ゼロから一緒に作っていこう。

プレイヤーを作る

では新しくプロジェクトを作ってくれ。名前はジオメトリーダッシュ01とか、君の好きなようにしてOKだ。

スクラッチキャットのスプライトを開こう。

スプライト名を「プレイヤー」にする

コスチュームを描く

じゃあ描いていこう！

34 x 34 の四角を描く

色は適当で大丈夫。

顔も描こう！

好きな顔を描いてね！別になんでもいいけど、なんか四角があるとクリーパーを描きたくなるｗ

他のコスは消していいよ。

これだけ残してね。

ステレオマッドネスの音源を手に入れる

スタータープロジェクトを使っている人はすでに音源にステレオマッドネスが入っているよ。もしスタータープロジェクトを使ってないなら、こちらのグリフパッチさんの作品に入ってるステレオマッドネスをバックパックして持ってこよう。

BGMを鳴らす

ゲーム中はこの音楽を無限ループしておこう！

開発中はOFFにしたい人はこちら

私の場合は、開発中はBGM鳴らしたくない。かといって緑の旗から外して置いておくとうっかり削除しがちだから、空の条件分岐ブロックで囲っておくことをオススメする。

もちろん開発中からじゃんじゃん鳴らしてもOK！

なんちゃってジャンプを作る

あきらかに手抜きだけど、とりあえず最初はこんな感じにしておこうｗ

ステージ（背景）を整える

背景を塗りつぶす

塗りつぶしの色はこちら。違ってもOK。

• 色70
• 鮮やかさ60
• 明るさ100

枠線は透明にしておこう。

枠からはみ出るくらいに大きな四角を描けば終わり。

プレビューを見てみる

たぶんこんな感じだよね。

コースを作る

サクサク進もう！次はコースだ。

新しいスプライトを作るよ。

名前はコースにしよう。

地面を描く

四角形ツールを使う。色は以下の通り！

塗りつぶし色

違っても大丈夫だよ。

• 色70
• 鮮やかさ70
• 明るさ100

枠線の色

透明です！

長方形を描く

大きめの長方形を描いて地面としよう。

座標をセンターにする

XとYをゼロにしてセンターに合わせよう。

4つ正方形を描く

スピード感（動いてる感）を出すために地面に四角形を描き込むよ。

色はちょっと濃くする。

塗りつぶし色

• 色70
• 鮮やかさ80
• 明るさ100

こんな感じで地面の中に描き込むように正方形を4つ配置しよう。

白線を引く

直線ツールを選ぼう。

太さは４で。

地面のちょうど上辺にまっすぐ線を引こう。SHIFTキーを押しながら引くとまっすぐ描けるよ。

こんなかんじ〜。

せっかくなのでスタートポジションにプレイヤーをドラッグして持っていってみよう。

コースが動くようにする

ジオメトリーダッシュでは、コースがどんどん左にズレることで「ダッシュ感」を出していくぞ。

ダッシュ感を作る

とりあえずサクッと動くようにしようか。

ダッシュ感をテストする

おっと、コースは動くけどコースが画面の端に残ってしまったね。

この現象はいろんな解決方法があるけど、今回は超シンプルに解決しちゃう。

地面より長い直線を引く

色は何色でもOK。あからさまに目立つように赤くしておく。

地面よりも長い直線を画面外に描く。

地面が全部消えるかテストする

はい解決〜！楽勝♪

コースが繰り返されるようにする

このままだと1つの地面しかなくて残念な感じだから、本家ジオメトリーダッシュみたいにどんどん地面がでてくるようにしていく。

理屈はこんな感じだ↓

そのためのロジックを追加するぞ。

今はこれだけ！

地面が繰り返されるかテストする

うん、まぁOK。じゃあ連続して繰り返すような実装をしていこう。

コスチュームを増やす

とりまコスチューム名を「コース1.1」みたいにしようか。

そしてこれを複製する。

そしたらコース1.2ができるね。

ちょっと違いが分かるように、一時的に落書きをしておく。

ちょっと濃い目の色にしよう。まぁ何色でもOK。

四角形ツールを選ぶ。

どこでもいいから四角を描いておこう。

クローンを作る仕組みに変える

コスチュームの繰り返しを使いたいときはクローンが便利。

作ったコーディングに少しだけ変更を加えるよ。

この位置で切り離して。

クローンを作るブロックと、クローンされたときブロックを追加しよう。

本体は隠してクローンだけ表示するようにもする。

コスチュームを指定する。1番最初はコース1.1だ。

連続させる

さっきは本体だけだったから穴が空いているようになっていたけど、クローンを2つ作って穴を埋めよう。

地面が連続して表示されるようになったかテストする

やっほー！これで何時間でもダッシュしていられるぜ〜！危険なブロックも穴のトゲトゲなスパイクも無い安全な世界だ！‥‥いや、さすがにそれじゃダメかｗ

まぁとりあえず土台はできたってことで！

まとめ

よしよし、順調にジオメトリーダッシュの土台を作ることに成功したね。まぁここまでは序の口だよね。こっからアクセルをベタ踏みして急加速していく！着いてきてくれぃ！

大切なお願い

• チュートリアルの続きが読みたい人へのお願い

  このチュートリアルの続きを読みたい人は 見本の作品のハートをクリックして 教えてね！もし要望がそこそこあれば続きも執筆します。みんなの読みたいチュートリアルに力を入れたいのでアンケートみたいなもんです(^o^) よろしく！

要望が少なくても今のところジオメトリーダッシュのチュートリアルを、あと3記事は書く予定だよ。

グリフパッチさんのジオメトリーダッシュはこちら