先生！
Scratchを使って友達と対戦できるようなゲームを作ってみたいです！
自分で作ったゲームを友達や家族とプレイするのは楽しいし、何より嬉しいよね。
今回は 1台のパソコンで二人でプレイできる ゲーム作りを始めていくよ！
簡単に作れるから、ささっと作って友達を驚かせよう！
１台のパソコンで遊べる。
どんなゲームなんでしょうか？
それじゃあ、エアホッケーのゲーム を作ってみよう！
はい！がんばります！！
まずは完成したゲームをプレイ！！
まず、今から作成するエアホッケーゲームのイメージをつかんでもらうために完成後のゲームを実際にプレイしてみよう!
操作方法は
右側プレイヤー
矢印キー（←↑↓→）で移動
左側プレイヤー
WASDキー で移動
5点先に取ったほうが勝ちだよ。実際にプレイしてみよう！
うおぉお！なかなか勝てません！
ふっふっ、私はかなり強いですよ。
背景を描こう
まずは、背景から作っていくよ！
背景はゲーム画面では床とテーブルになるよ。
1. 編集画面を開こう
それでは、まずタイトル画面の背景から用意していきます。今回は自分で背景を作っていきましょう。背景はゲームの雰囲気を大きくかえるので、ゆっくり考えてきめていきます。まずは大まかな形から考えて、その後具体的な色や線などを選んでいくと作りやすいかもしれません。以下の手順を参考にしてください。
右下 、 ステージ をクリックして、スプライトからステージに切り替えましょう。次に、 左上 の 背景 を選択して画面を切り替えます。
画面が切り替わったと思います。ここでは左側のツールの一覧から自分で 四角形 や 円、文字 などいろんなの機能を使って自由な背景を描いていくことができます。
2. 床を描こう
まずは下地となる床部分を作っていきます。ここは目立ちませんがないと少し不自然ですので、手を抜かずに作っていきましょう。左側のツール一覧から 四角形 を選択して色を変えましょう。今回、色の値は上から 60 65 70 にしました。色が変更できたら大きな四角を描いていきましょう。枠からはみ出るくらいの大きなものを書きます。
この四角形が床として、ゲームに少し立体感をだしてくれます。ぜひ自分の好きな色も試してみてください。この後に作るテーブルの色と少し似せると全体の色がまとまってゲーム画面が見やすくなります。
3. テーブルを描こう
続いてテーブル部分を描いていきます。このゲームを印象づける一番の主役とも言えるので、丁寧に描いていきましょう。
まず、先程と同じように 四角形 を選択します。選択できたらまず 色 を変更しましょう。今回は、上から 65 60 70 にしました。続けて 枠線の色 も変えていきます。枠線の色は上から 15 100 90 です。色が変更できたら 枠線の太さ ももう少し太くしておきましょう。枠線の太さは 8 にしました。これで四角形を書く準備はOKです。ゲームの枠より少し小さい四角を描きましょう。書いたあとに少し微調整するときれいに収まると思います。
テーブルの四角形を枠線から離しすぎるとゲームが不自然になるので注意してください。床が少し見えるくらいがベストです。
これでテーブルは設置できたのですが、このままだと少し味気ないのでセンターラインなどを書いてデコレーションしていきましょう。ここは完全にお好みです。満足行くまで線を引きましょう。
ここでは、簡単に白い 線 と 円 を使用しました。これだけでも少しゲーム画面っぽくなりますね。
これで背景は以上になります。えっゴール部分がまだだろって？ご安心を。そちらはスプライトを使って表現していきます。
背景の完成！しんぷるいずべすと
スプライトを用意しよう
このゲームで使うスプライトは 8コ だよ
まずはゲーム画面で特に重要な 5つ のスプライトを作っていくよ
1. プレイヤーを作ろう
それでは、まずはプレイヤーのスプライトから用意していきましょう。背景の時と同じように１からスプライトを描いていきます。このゲームは2人プレイなのでプレイヤーを２つ用意することになりますが、まずは１人目のプレイヤーを用意していきます。
画面右下のアイコンの上にカーソルを置き、出てきたポップアップの中から描くをクリックしましょう。スプライトが作成されコスチューム画面が開くと思います。
コスチューム画面が開けたら、背景を描いた時と同じようにプレイヤーを描いていきましょう。ゲームセンターのエアホッケーをイメージすると描きやすいかもしれません。
ここでは、２つの円を利用して表現しました。まずは少し大きめの円を描いていきましょう。円が描けたら、色を変えていきましょう。左から、塗りつぶしは 15 100 90 枠線は 16 100 100 枠線の太さは 8 です。枠の色を変えることで立体感を出しています。
次は、最初に描いた円の中に小さな円を描いていきます。色と太さは左から、塗りつぶし 16 100 100 枠線の色 16 100 82 枠線の太さ 4 です。これが描けたらプレイヤーの完成です。
さて、１人目のプレイヤーができたので２人目も追加していきましょう。ですがこれまでの手順をいちから作り直すのは大変です。そこで スプライト の複製機能を利用しましょう。
スプライトを右クリックして複製を選択しましょう。すると全く同じスプライトがもう一つ作成されます。複製機能を利用すると簡単にスプライトを増やすことができます。同じものを２つ作らなくてもいいので便利ですね。
２人分のプレイヤーが完成しました！
スプライトの作り方にも慣れてきたかな？
ここからは少しペースを上げていくよ！
2. パックを作ろう
次は、エアホッケーのパックを作っていきます。パックはエアホッケーのボールのようなもののことを言います。そのパックを１つの円と枠線を使って再現していきましょう。
まずは少し大きい円を描いていきます。円を選択し色と枠線の太さを変更していきます。それぞれ左から 塗りつぶし 8 100 100 枠線の色 6 100 88 枠線の太さ 8 に設定しました。円を描いて形が気に入らなければ選択モードからきれいな円に近づけていきましょう。形を調整できたら完成です。
3. ゴールを作ろう
今回は背景とは別にゴールのスプライトを作ります。背景にゴールを描いてしまうと得点時の当たり判定が難しくなってしまうためスプライトを利用して表現しました。
それでは描いていきましょう。長方形１つでゴールを表現していくので四角を選択しましょう。色と枠線は 塗りつぶし が 17 100 86 で 枠線の色 を 16 100 88 枠線の太さ を 8 にしました。
プレイヤーと同じようにゴールも２つ必要です。ここでも複製機能を利用していきましょう。
4. 位置を調整をしよう
最後に下の画像のようにそれぞれの位置と大きさを調整しましょう。
これで、スプライトの用意ができました。続いてコードを書いていきましょう。
コードを書いていこう
1. 背景のコードを書こう
それでは背景のコードを書いていきます。ここではゲーム全体の流れを書いていきましょう。ここからで全体の流れを制御することでスプライト間のずれをなくしています。写真を見てわからない箇所の解説を読むと理解しやすいかもしれません。
完成コード
解説
“イベント”から🚩が押されたとき を追加してその下に同じくイベントから メッセージ1▽を送る を追加します。追加したコードの▽ボタンを押して 新しいメッセージ を選択し、ゲームスタート という名前のメッセージを作成します。
次に、”変数”から変数を作るをクリックし、右ゴール と 左ゴール の２つの変数を作成しましょう。変数が作成出来たら演算から <>または<> と ()>50 を追加します。上の写真のように入力して制御 まで待つ にそれぞれ入れましょう。
最後に”イベント”からもう１つ メッセージを送る を追加し ゲームセット という名前のメッセージを作成します。上の写真のようになれば背景のプログラムは完成です。
2. 左側プレイヤーのコードを書こう
次にプレイヤーのコードを書いていきましょう。まずは2人のプレイヤーが動けるようにしていきます。２つ作ったプレイヤーのスプライトの片方を選択して左側のプレイヤーのコードを書いていきます。
完成コード
解説
プレイヤーのスプライトを開いき”イベント”から ゲームスタート▽を受け取った時 を追加します。（もしみつからなければ xxx▽を受け取ったとき の▽をクリックして ゲームスタート を選択しましょう）”動き”から x座標を()、y座標を()にする を追加しましょう。中の数字を -150, -80 に変更しておきます。
次に、”制御”から ずっと を追加します。そしてそのなかに同じく”制御”から もし<>なら を４つ追加します。そして”調べる”から (スペース▽)キーが押された を４つ追加しましょう。▽を押して、それぞれ w a s d を選択していきます。４つとも選択出来たら写真のように もし<>なら の中に入れていきます。
最後に、”動き”から x座標を()ずつ変える を２つと y座標を()ずつ変える を２つ追加します。それぞれ写真のように配置し、値を変更してください。順番を間違えるとうまく動かないので注意して設置していきましょう。
3. 右側プレイヤーのコードを書こう
右側のプレイヤーのコードですが、左側のプレイヤーとほとんど形は変わりません。そこで複製を利用して楽に作っていきましょう。
完成コード
解説
先ほど作った左側プレイヤーのコード画面をひらき、ゲームスタート▽を受け取ったとき を右クリックして複製を選択します。そして、複製してできたものを一度置きましょう。
次に、複製されたコードをドラッグ＆ドロップで右側プレイヤーのスプライト（もう１つのプレイヤースプライト）にまで持って行きましょう。
コードを複製出来たら完成コードの写真のように x座標を()、y座標を()にする と キーが押されたとき の値を変更しましょう。これで右側のプレイヤーの完成です。
4. 左側ゴールのコードを書こう
それでは次は２つのゴールスプライトの片方、左側ゴールのコードを書いていきましょう。左ゴールのスプライトには、パックのスプライトが触れたときに 変数左ゴール に値を今の得点数を保存しておく役割があります。それではコードを見てみましょう。
完成コード
解説
完成コード
まず”イベント”から🚩が押されたとき を追加します。その下に”変数”から 左ゴールを０にする を追加します。（なければ▽ボタンを押して左ゴールを選択してください）
次に、”制御”から ずっと を追加してそのなかに同じく”制御”から もし<>なら を追加します。もしならの<>内には”調べる”から “パックのスプライト名”に触れた を入れておきましょう。（なければ▽ボタンから”パックのスプライト名”を選択します）
もし<>なら のなかにはゴールした際の処理を書いていきます。”変数”から 左ゴールを１ずつ変える を追加します。（なければ▽ボタンを押して左ゴールを選択してください）
その下に、”イベント”から メッセージ▽を送る を追加して ゴール という名前のメッセージを作成します。（▽ボタンから作成できます）続いて”制御”から ()秒待つ を追加して値を 0.5 に変更しておきます。
最後にゴールした時の処理を書いていきましょう。”見た目”から ()と()秒言う を追加します。値の左側には”演算”から ()と() を追加し完成コードのように変数左ゴールと文字”点”を入れます。値の右側には 1 を入力しましょう。
5. 右側ゴールのコードを書こう
右側のゴールを書いていきます。ですが左側のゴールとコードの形がよく似ているのでここでも複製機能を利用しましょう。コードの複製は “3. 右側プレイヤーのコードを書こう” を参考にしてください。
完成コード
解説
左側ゴールのコードを複製できたら、コード内の 左ゴール をすべて 右ゴール に変更しましょう。
6. パックのコードを書こう
それではエアホッケーでのボールのような存在であるパックのコードを書いていきます。パックはプレイヤーに触れたときに跳ね返るようにしていきましょう。
完成コード
解説
まず、”イベント”から ゲームスタート▽を受け取ったとき を追加します。（▽ボタンを押すことでメッセージを選択できます）その下に、”動き”から x座標を()、y座標を()にする を追加しましょう。追加したらそれぞれの値を変更します x座標を 0 y座標を 0 にします。これがゲーム開始時の初期位置になります。
次に、”制御”から ()秒待つ を追加します。秒数を 0.5 に変更しておきましょう。その下に同じく”制御”から <>まで待つ を追加しましょう。<> 内には、”演算”から <>または<> を入れます。そして、左側の<> のなかに”調べる”から “左側プレイヤーのスプライト名”▽に触れた場合 を入れましょう。（▽から左側プレイヤーのスプライト名を選択します）同じく 右側の<> のなかにも”調べる”から “右側プレイヤーのスプライト名”▽に触れた場合 を入れましょう。（▽から右側プレイヤーのスプライト名を選択します）
そして、”制御”の ずっと を追加します。そのなかに同じく”制御”の もし<>なら を２つ追加しましょう。上の もしなら の <> 内には “左側プレイヤーのスプライト名”▽に触れた場合 を入れます。下の もしなら の <> 内には “右側プレイヤーのスプライト名”▽に触れた場合 を入れます。完成コードを参考にしてください。
２つの もしなら の内には”動き”から ()へ向ける と ()度回す を追加します。()へ向ける に完成コードを参考にはそれぞれの “プレイヤーのスプライト名” を入れましょう。()度回す には 180 を入力します。この２つコードで跳ね返りを表現しています。
もしなら の下に”動き”から ()歩動かす と もし端に着いたら、跳ね返る を追加します。()歩動かす には 15 を入力します。
最後に、ゴールした際の処理を書いていきましょう。”イベント”から ゴール▽を受け取った時 を追加します。（▽ボタンを押すことでメッセージを選択できます）その下に”制御”から すべてを止める▽ を追加し、▽ボタンを押して スプライトの他のスクリプトを止める▽ に変更しておきます。そのしたに”イベント”から ゲームスタート▽を送る を追加して完了です。このコードでゴール時に初期位置に戻ることができます。
ゲームをおもしろくしよう
1. ゴール時にわかりやすくしよう
今のままでもゲームとして遊ぶことはできますがまだ少し地味です。そこでいくつかのスプライトを追加してゲームらしくしていきましょう。
まず、ゴール時のエフェクトが地味なのでもっと派手にしてみましょう。下のようなスプライトを作成しましょう。文字の色は 塗りつぶし 0 0 100 枠線の色 28 100 100 枠線の太さ 3 です。
作成出来たらスプライトを画面の中央に持って行きましょう。
続いて以下のようなコードを書いていきましょう。このコードは上で作った Goal という文字のスプライトを移動しながら表示するコードです。ゴール時をより派手にしていきます。
完成コード
解説
まず、🚩が押された際には Goal の文字を隠しておきます。
右側の ゴールを受け取った時 で得点時の処理を書いています。始めに座標を中央より少し左に配置し、流れるように中央まで出てくるといった流れです。そして 0.5秒後 には文字を消しています。
2. ゲーム結果を表示しよう
最後にゲーム終了時の処理を書いていきましょう。ゲームに終わりがありません。そこで結果を表示しましょう。
結果を表示するためのスプライトを２つ作っていきましょう。それぞれ勝者と敗者を見分けるために制作します。
3. 勝者を表示するスプライト
まず、勝者を表すスプライトを作成していきます。文字の色は 塗りつぶし 0 0 100 枠線の色 28 100 100 枠線の太さ 3 です。
つづいて、勝者のスプライトのコードを書いていきましょう。
完成コード
解説
まず、🚩が押された際にはまだ表示しないため隠しておきます。
右側のコードで、ゲームが終わった際に右プレイヤーに表示するか左プレイヤーに表示するかを決め、表示しています。
4. 敗者を表示するスプライト
続いて、敗者を表すスプライトも作成していきます。文字の色は 塗りつぶし 0 0 100 枠線の色 8 100 100 枠線の太さ 3 です。
完成コード
解説
勝者のスプライトと内容はあまり変わりません。まず、🚩が押された際にはまだ表示しないため隠しておきます。
右側のコードで、ゲームが終わった際に右プレイヤーに表示するか左プレイヤーに表示するかを決め、表示しています。
5. 位置を調整をしよう
最後に下の画像のようにそれぞれの位置と大きさを調整しましょう。これでScratchで作るエアホッケーゲームの完成です。
最終的なコード
背景
スプライト “パック”
スプライト “左プレイヤー”
スプライト “右プレイヤー”
スプライト “左ゴール”
スプライト “右ゴール”
スプライト “ゴール”
スプライト “勝者”
スプライト “敗者”
最後に
Scratchでのゲーム作成お疲れ様！
エアホッケーゲームの作成どうだったかな？このゲームをもっと改良して自分好みのゲームにしていってね。動く速度を変えるだけでもゲームの印象が大きく変わるよ！
ぼくは音を追加して BGM や 効果音 を付けていきます！
今日はありがとうございました！
おつかれさまです。今回のエアホッケーのゲーム制作はうまくできましたか？２人のプレイヤーや跳ね返るパックを自分で作成していきました。
思ったように動かない場合はプログラム確認用の画像で、自分が作成したプログラムに間違いがないかをもう一度確認してみて下さい。
ゲームを改良してみたり、他の人が作ったゲームのコードを見たりすると、新しい発見や学びがありますので、ぜひチャレンジしてみてください。
