mywayなプログラミング生活ブログ

プログラミング関連の記事を書いています。作る様子がわかる様に動画も作っています。

Scratch2(スクラッチ2)でモグラたたきゲームを作ろう(1回目)

myway@おじさんです。
今回からモグラたたきゲームを作りたいと思います。

動作環境について
OS:MAC OS X(Windowsでも操作はほとんど変わりません)
エディタ:Scratch offline editor(ver.456)

完成イメージ
今回つくるのは、こんなゲームにしたいと思います。

f:id:mywayhaojisan:20170920124410p:plain
モグラたたきと言いつつ虫をたたくゲームです。
マウスで棒を操って、顔を出した虫をスペースキーでたたくゲームです。

1.準備

プロジェクトをしんきで作成して下さい。
画面左上の「ファイル」をクリックしてから、「しんき」をクリックして、あたらしいプロジェクトを作って下さい。
「スプライト」にあるネコは、使わないので、右クリックして「さくじょ」してください。

2.ゲームの内容を考える

いきなりスクリプトを作ってもよいのですが、何が必要かぐらいは考えておきます。
モグラたたきゲームなので、
(1)モグラをたたくハンマー
(2)モグラ
(3)モグラが隠れる穴
が、必要と思います。
ただ、Scratchのライブラーに上のものがなかったので、代わりになるものをさがしました。で、
(1)ハンマーを「Magic Wand」
(2)モグラを「Beetle」
(3)モグラが隠れる穴を「Rocks」
にしました。
虫たたきゲームになってしまいますが、そこはご了承下さい。

3.スプライトを追加する

上であげたスプライトをライブラーから追加します。

f:id:mywayhaojisan:20170920124518p:plain
追加した結果がこちら

f:id:mywayhaojisan:20170920124552p:plain

4.「Magic Wand」のスクリプト

「Magic Wand」のスクリプトを作ります。

f:id:mywayhaojisan:20170920124621p:plain
「Magic Wand」は横にむいているので、縦にするため「0どにむける」ブロックで、縦にしています。
「ずっと」ブロックの中に「マウスポインターへいく」ブロックをおくことで、マウスポインターと同じ位置に「Magic Wand」が表示されます。
これで、「Magic Wand」をマウスで操作する事ができます。

5.「Magic Wand」をふるスクリプト

今のままでは「Magic Wand」が動くだけですので、スペースキーを押したのスクリプトを作ります。

f:id:mywayhaojisan:20170920124649p:plain
「スペースキーがおされたとき」ブロックを使って、スペースキーが押されたときのスクリプトを動かします。
「ひだり90どまわす」、「0.2びょうまつ」、「みぎ90どまわす」ブロックで、「Magic Wand」をふっているようなうごきをさせています。



今回はここまでです。
作ったら、必ず、「ほぞん」をするように心がけて下さい。

それと、今回も動画がありますので、よければ、参考にしていただければと思います。

youtu.be



次回は、「Beetle」と「Rocks」を表示するスクリプト作っていこうと思っています。



最後まで読んで頂いてありがとうございます。
皆さんに少しでもお役に立てれば幸いです。

Scratch2(スクラッチ2)のチュートリアル「Getting Started with Scratch」をやってみる(後編)

myway@おじさんです。
前回の続きで「Getting Started with Scratch」になります。

f:id:mywayhaojisan:20170913190652p:plain
*)和訳した内容は、個人的な解釈ですので、ご注意下さい。

前回の内容はこちらから
Scratch2(スクラッチ2)のチュートリアル(Getting Started with Scratch)をやってみる(前編)

動作環境について
OS:MAC OS X(Windowsでも操作はほとんど変わりません)
エディタ:Scratch offline editor(ver.456)

「Green Flag」

「緑のはた」についての説明です。

f:id:mywayhaojisan:20170915175237p:plain
「緑のはたがクリックされたとき」ブロックはスクリプトの実行に使います。
今の状態では、スプライトが1つしかないので、ブロックをクリックすることで問題ありませんが、スプライトが2つ以上になると、この緑のはたが役に立ちます。
それと、赤い丸をクリックすることで、スクリプトの実行を止めることができます。

緑のはたをクリックして、ネコがダンスをしたらOKです。
「Next, you can change colors.」をクリックしましょう。

「Change Color」

スプライトの色を変えます。

f:id:mywayhaojisan:20170915175321p:plain
「みため」のなかにある「いろのこうかを25ずつかえる」ブロックをドラッグして、そのブロックをクリックしてみましょう。
ネコの色が変わるとおもいます。
このブロックはスプライトの色を変えるブロックになります。

「Now, make it interactive.」をクリックしましょう。

「Key Press」

キーを押したときの説明です。

f:id:mywayhaojisan:20170915175422p:plain
キーを押したときにうごくブロックの説明です。
「スペースキー」を押せばネコの色が変わるようにしています。
それと「スペース」の横の三角をクリックすれば、メニューが表示されて、好きなキーを選ぶことができることが書いています。

スペースキーを押してネコの色が変わればOKです。
「Now, choose a backdrop.」をクリックしましょう。

「Add a Background」

背景についての説明です。

f:id:mywayhaojisan:20170915175527p:plain
「あたらしい背景」のアイコンをクリックすれば、ライブラリーの一覧が表示されるので、「Spotlight-Stage」をさがして、選んでみて下さい。
そうすると、背景が変わります。
(Spotlight-Stageがみつからない場合は、何でも構わないと思います)

背景の変更ができれば、「Next, add a new sprite.」をクリックしましょう。

「Add a Sprite」

スプライトを追加する説明です。

f:id:mywayhaojisan:20170915175618p:plain
はじめのうちは「ライブラリーからスプライトを選ぶ」ボタンからスプライトを追加するのがおすすめです。

「Cassy Dance」を追加して、ステージに追加してみましょう。
できたら、「Now, explore sound or animation.」をクリックしましょう。

「Explore!」

スプライトのおととアニメーションについての説明です。

f:id:mywayhaojisan:20170915175734p:plain
「おと」を追加すると、「おとをならす」ブロックのプルダウンに自動的に追加されるので、スクリプトエリアにドラッグしてから追加した音を選んでください。
そのブロックをクリックすれば、おとがなります。

「コスチューム」を切り替えることでアニメーションさせます。
「Cassy Dance」スプライトに上のスクリプトを作って動かせば、Cassyがダンスします。

「おと」と「コスチューム」の確認ができたら、「Share your project.」をクリックしましょう。

「Share!」

作成したプロジェクトを共有する方法についての説明です。

f:id:mywayhaojisan:20170915175907p:plain


この内容は、オンライン(ブラウザ)でプロジェクトを作成した時の内容です。
offline editorの場合は、画面左上の「ファイル」にある「Webサイトできょうゆう」をクリックすれば、Webサイトにアップロードされます。
ただし、サイトにアップロードする場合、前もってScratchのアカウントが必要ですので作成してからアップロードして下さい。

「What do you want to try next?」をクリックしましょう。

「Now What?」

f:id:mywayhaojisan:20170915180140p:plain


他の人が作ったプロジェクトを探して、気に入ったプロジェクトがあれば、リミックス(コピー)して勉強してくださいね、という内容です。
ScratchのWebサイトでは、自由にプロジェクトを作って公開しています。
もし、興味があったら、どのようなプロジェクトを作っているか、見てみてはどうでしょうか?


チュートリアルの「Getting Started with Scratch」は、これで以上です。

最後まで読んで頂いてありがとうございます。
皆さんに少しでもお役に立てれば幸いです。

前回の内容はこちらから
Scratch2(スクラッチ2)のチュートリアル(Getting Started with Scratch)をやってみる(前編)

Scratch2(スクラッチ2)のチュートリアル「Getting Started with Scratch」をやってみる(前編)

myway@おじさんです。
Scratch2には、チュートリアルがついています。
内容はわかりやすいのですが、英語でかかれているので、小さいお子さんにはハードルが高い内容となっていると思いました。
なので、Scratchを何からやっていいのかわからない初心者さんのためにチュートリアルの内容を実際にやってみたいと思います。

*)和訳した内容は、個人的な解釈ですので、ご注意下さい。

動作環境について
OS:MAC OS X(Windowsでも操作はほとんど変わりません)
エディタ:Scratch offline editor(ver.456)


チュートリアルは「Getting Started with Scratch」をしていきたいと思います。

f:id:mywayhaojisan:20170913190652p:plain


はじめに、画面右上の?をクリックしてください。

f:id:mywayhaojisan:20170913190718p:plain


すると、ウィンドウが表示されるので、「Getting Started with Scratch」をクリックしてください。

f:id:mywayhaojisan:20170913190750p:plain


では、はじめていきます。

「Getting Started with Scratch」

f:id:mywayhaojisan:20170913190836p:plain
このページにはチュートリアルの完成イメージがかかれています。
「こんな感じになるんだな」と思っておいて下さい。
「Srart moving」をクリックして、次のページに進んで下さい。

「Start Moving」

f:id:mywayhaojisan:20170913190949p:plain
内容のみですが、日本語に変えてみました。

「10ほうごかす」ブロックを、スクリプトエリアにドラッグし、そのブロックをクリックすることで、画面左のネコが動くことを確認します。

このように、Scratchでは、ブロックをおいて、動きなどをプログラミングしていきます。

では、次にいきます。
「Now, add a sound.」をクリックします。


「Add a Sound」
今度は「おと」を出すようにする内容です。

f:id:mywayhaojisan:20170913191036p:plain
ブロックをクリックすると、スネアドラムのおとがなります。

こでれ「うごき」と「おと」のスクリプトができました。

「Next, start a dance.」をクリックします。


「Start a Dance」
今度はネコにダンスをさせます。

f:id:mywayhaojisan:20170913191129p:plain
1つめは、「うごき」にある「10ほうごかす」ブロックを、今まで作ったブロックの下に追加します。
次に「10」をクリックして、「10」の前に「-」を入力します。

2つめは、「おと」にある「1のドラムを0.25はくならす」ブロックを追加して、「1」の横の三角(プルダウンメニュー)をクリックして、「(4)クラッシュシンバル」をクリックします。

3つめは、どのブロックでもよいので、ブロックをクリックすれば動くということが書いています。

動かしてみると、ネコが前後に動いて、ドラムの音がするようになると思います。

確認できたら、「Next, add a repeat.」をクリックします。


「Again and Again」
今のままでは1回しか動かないので、くりかえし動くようにします。

f:id:mywayhaojisan:20170913191246p:plain
「せいぎょ」にある「10かいくりかえす」ブロックを、今まで作ったブロックを囲むようにおきます。
囲むようにおくには、少しコツがひつようですが、ブロックの上にもっていけば、自動で変形しますので、わかると思います。
ブロックをおいたらクリックして動かしてみましょう。
10回くりかえされるのを確認して下さい。

確認できたら、「Next, say something.」をクリックします。


「Say Something」
今度は、ネコがセリフを言うようにします。

f:id:mywayhaojisan:20170913191434p:plain
「みため」の中にある「Hello!と2びょういう」ブロックを他のブロックに当たらない場所におきます。
ブロックの中の「Hello!」をクリックして、「Watch me dance!」に変えます。
(ちなみに、意味は「私のダンスを見て!」という意味です。)
変えたら、「10かいくりかえす」ブロックの上におきます。
で、 ブロックをクリックすれば、ふきだしに「Watch me dance!」と表示され、2びょうたてば、ネコのダンスがはじまります。



今回はここまでです。

最後まで読んで頂いてありがとうございます。
皆さんに少しでもお役に立てれば幸いです。


後編はこちらから
Scratch2(スクラッチ2)のチュートリアル(Getting Started with Scratch)をやってみる(後編)

「シューティングゲームをつくろう」記事一覧

 シューティングゲームをつくろう」の記事一覧です。

f:id:mywayhaojisan:20170426174839p:plain


Scratch2(スクラッチ2)でシューティングゲームを作ろう(1回目)

[記事の内容]
・スプライトを追加(Spaceship)。
・Spaceshipを矢印キーで上下左右に動くようにスクリプトを作成。

Scratch2(スクラッチ2)でシューティングゲームを作ろう(2回目)

[記事の内容]
・スプライトを追加(Ball)。
・SpaceshipからBallを発射するスクリプトを作成。

Scratch2(スクラッチ2)でシューティングゲームを作ろう(3回目)

[記事の内容]
・スプライトを追加(Octopus)。
・Octopusを複数表示させるスクリプトを作成。

Scratch2(スクラッチ2)でシューティングゲームを作ろう(4回目)

[記事の内容]
・Spaceshipから発射されたBallがOctopusに当たった時のスクリプトを作成。

Scratch2(スクラッチ2)でシューティングゲームを作ろう(5回目)

[記事の内容]
・表示したOctopusからBallを発射するスクリプトを作成。

Scratch2(スクラッチ2)でシューティングゲームを作ろう(6回目)最終回

[記事の内容]
・てんすうを表示させるスクリプトを追加。
・ゲームオーバーのスクリプトを追加。


Scratchのサイト(https://scratch.mit.edu)にプロジェクトをアップしています。
よければ、参考にしてください。

https://scratch.mit.edu/projects/172111504/

「壁打ちゲームをつくろう」記事一覧

 「壁打ちゲームをつくろう」の記事一覧です。

f:id:mywayhaojisan:20170628124242p:plain


Scratch2(スクラッチ2)で壁打ちゲームを作ろう(1回目)

[記事の内容]
・スプライトを追加(BallとPaddle)。
・Paddleを矢印キーで左右に動くようにスクリプトを作成。


Scratch2(スクラッチ2)で壁打ちゲームを作ろう(2回目)

[記事の内容]
・PaddleがBallをはね返すスクリプトを作成。

Scratch2(スクラッチ2)で壁打ちゲームを作ろう(3回目)

[記事の内容]
・前回では、Paddleの中にBallが入ってしまったので、中に入らないようにスクリプトを変更。

Scratch2(スクラッチ2)で壁打ちゲームを作ろう(4回目)

[記事の内容]
・スプライトを追加(Apple)。
・BallがAppleをはね返えるスクリプトを追加。

Scratch2(スクラッチ2)で壁打ちゲームを作ろう(5回目)

[記事の内容]
・前回では、はね返える向きが横だけだったので、縦にはね返えるようにスクリプトを変更。

Scratch2(スクラッチ2)で壁打ちゲームを作ろう(6回目)

[記事の内容]
・BallがAppleに当たったときの角度によって、縦もしくは横にはね返えるようにスクリプトを変更。

Scratch2(スクラッチ2)で壁打ちゲームを作ろう(7回目)

[記事の内容]
・スプライトを追加(Orange)。
・緑のはたをクリックした時、AppleとOrangeが重ならないようにスクリプトを変更。

Scratch2(スクラッチ2)で壁打ちゲームを作ろう(8回目)

[記事の内容]
・BallがOrangeにはね返えるようにスクリプトを変更。

Scratch2(スクラッチ2)で壁打ちゲームを作ろう(9回目)最終回
[記事の内容]
・ゲームオーバーのスクリプトを追加。
・スコアを表示するスクリプトを追加。


Scratchのサイト(https://scratch.mit.edu)にプロジェクトをアップしています。
よければ、参考にしてください。

https://scratch.mit.edu/projects/172117347/

Scratch2(スクラッチ2)で壁打ちゲームを作ろう(9回目)最終回

myway@おじさんです。
今回で、壁打ちゲームの最終回となります。
今のままでは、終わらないゲームになりますので、ゲームオーバーを作っていきます。



動作環境について
OS:MAC OS X(Windowsでも操作はほとんど変わりません)
エディタ:Scratch offline editor(ver.456)

1.準備

前回保存したプロジェクトを開いて下さい。
画面右上の「ファイル」をクリックしてから、「ひらく」をクリックして、プロジェクトを開いて下さい。

2.ゲームオーバーのスプライトを追加

ゲームオーバーは「Paddle」の下の壁に当たったら、ゲームオーバーにしたいと思います。

f:id:mywayhaojisan:20170825054312p:plain
今回は、スプライトを手書きします。
といっても、線を引くだけですので、簡単です。

 

f:id:mywayhaojisan:20170825054429p:plain
「あたらしいスプライト」の右にあるペンのアイコンをクリックします。

(「あたらしいスプライトをえがく」のアイコンです)

f:id:mywayhaojisan:20170825054333p:plain
こんな感じに線を引きます。
線を引くのは、中心でなくて構いません。
ただ、まっすぐに引くことが大切です。「Shift」を押しながら線を引くとまっすぐに引けます。
それと、今回は黒色で書いていますが、何色でも構いません。

 

f:id:mywayhaojisan:20170825054511p:plain


画面右上にある「+」アイコンを利用すれば、線を中心に持っていけます。

f:id:mywayhaojisan:20170825054535p:plain
こんな感じに作れます。
動画でもおなじことをしていますので、こまかい部分はそちらで確認してください。

3.スクリプト

ゲームオーバーのスクリプトを作ります。
まずは、上で追加したスプライトのスクリプトです。

f:id:mywayhaojisan:20170825054605p:plain
表示場所を指定しているだけです。

次に「Ball」のスクリプトです。

f:id:mywayhaojisan:20170825054621p:plain
「10ほうごかす」ブロックの下にブロックを追加しています。
内容は「スプライト1にふれたら、ゲームオーバーといってスクリプトをおわらせる」という内容です。

4.「スコア」も出してみる

ゲームには「スコア」がないと、張り合いが無いので追加します。

スコアは「Apple」か「Orange」にあたれば、スコアを増やすようにしたいとおもいます。

まずは、へんすうを追加します。

f:id:mywayhaojisan:20170825054651p:plain
へんすうめいは「スコア」にします。
それと、画面にスコアを表示したいので、へんすうの左のチェックは入れたままにしておきます。

次は「Ball」のスクリプトを変更します。

f:id:mywayhaojisan:20170825054722p:plain
「データ」の「スコアを0にする」ブロックを「まえにだす」ブロックの下におきます。
ちなみにですが、「緑のはたがクリックされたとき」の下であれば、どこでも構いません。

「ていぎ」スクリプトも変更します。

f:id:mywayhaojisan:20170825054745p:plain
最後に「スコアを1ずつかえる」ブロックを追加します。

これで、「Apple」もしくは「Orange」にあたればスコアの数字がふえていきます。

では、緑のはたをクリックしてみましょう。

今回はここまでです。
作ったら、必ず、「ほぞん」をするように心がけて下さい。

それと、今回も動画がありますので、よければ、参考にしていただければと思います。

youtu.be



この壁打ちゲームはこれで最終回になります。
ただし、ゲームとして未完全な部分があるので、自分なりに追加・変更して、おもしろいゲームにしてみてください。

それと、はじめのイメージではバナナもありましたが、オレンジとおなじようにすれば、追加できますもで、よかったらチャレンジしてみてください。



最後まで読んで頂いてありがとうございます。
皆さんに少しでもお役に立てれば幸いです。

<<壁打ち(8回目)  

Scratch2(スクラッチ2)で壁打ちゲームを作ろう(8回目)

myway@おじさんです。
今回は、ボールがオレンジをはね返えるスクリプトを追加します。


動作環境について
OS:MAC OS X(Windowsでも操作はほとんど変わりません)
エディタ:Scratch offline editor(ver.456)

1.準備

前回保存したプロジェクトを開いて下さい。
画面右上の「ファイル」をクリックしてから、「ひらく」をクリックして、プロジェクトを開いて下さい。

2.「Ball」のスクリプト

「Ball」のスクリプトに、「Orange」がはね返えるスクリプトを追加します。

f:id:mywayhaojisan:20170820172351p:plain
「へんすう」に「Orangeにふれた」を追加しています。

f:id:mywayhaojisan:20170820172426p:plain
「もしAppleにふれたなら」ブロックをふくせいして、その中のブロックにある「Apple」を「Orange」に変えただけです。

これで、やりたいことはできているのですが、「むき」を決める同じようなブロックができてしまいました。
じつは、プログラミングの世界では、同じようなプログラム(ここではスクリプト)が2つ以上あると「悪いプログラム」とされています。
理由としては、いくつかありますが、「分かりにくい」が大きな理由の一つです。
今はブロックの数が少ないので、すぐわかりますが、実際のプログラミングは、このブロックが数百から数千個になります。
そうなると、見るのも、作るのも大変です。

3.「分かりやすく」するには?

では、「分かりやすく」するには、どうすればよいか?
それは「同じスクリプト」を「一つにまとめる」方法です。

Scratchでは「そのた」にある「ブロックをつくる」を使います。
「ブロックをつくる」でブロックを作って、おなじスクリプトをまとめることができます。

では、作っていきます。

f:id:mywayhaojisan:20170820172503p:plain
「そのた」にある「ブロックをつくる」をクリックします。

f:id:mywayhaojisan:20170820172525p:plain
なにも書いていないむらさき色のブロックがあるのでクリックして「むきをきめる」と書きます。
次に「もじれつのひきすうをついか」の右にある四角のアイコンをクリックします。
そうするとむらさき色のブロックの中に「string1」と文字が表示されますので、「しゅるい」に変えます。
最後に「OK」をクリックすれば、ブロックが作られます。

f:id:mywayhaojisan:20170820172559p:plain
それと、

f:id:mywayhaojisan:20170820172633p:plain
こんなブロックも作られると思います。
このブロックは必要なので、消さないでください。

このブロックは「ていぎ」と書かれています。
簡単に説明すると、上のブロック(むきをきめるブロック)を呼ぶことで、「ていぎ」ブロックのスクリプトが動く、ということになります。

ちなみにですが、この「ていぎ」、「このスクリプトをていぎする」の「ていぎ」です。

操作がよくわからないときは、動画でもおなじことをしていますので、そちらを参考にしてください。

4.「Ball」のスクリプト

作ったブロックを使った「Ball」のスクリプトです。

f:id:mywayhaojisan:20170820172707p:plain
変えたところは、「もしAppleにふれた=0なら」と「もしOrangeにふれた=0なら」の中のブロックを作ったブロック「むきをきめる」におきかえました。(赤い四角の部分)
それと、「むきをきめる」ブロックの中に、「リンゴ」や「オレンジ」と書いています。
これは「引数(ひきすう)」といって、別のスクリプトに値をわたすものです。
Appleにふれたとき」は、「リンゴ」、「Orangeにふれたとき」は「オレンジ」としています。

つぎは「ていぎブロック」をつくります。

f:id:mywayhaojisan:20170820172746p:plain
上で作った「むきをきめる」ブロックとおきかえたブロックをここに移動してきました。
あとは「もししゅるい=リンゴなら」ブロックと、「もししゅるい=オレンジなら」ブロックはついかしています。
この「しゅるい」というブロックには、「リンゴ」もしくは「オレンジ」が入っていますので、どの障害物にむけるのかを判断しています。

これで、おなじようなブロックがなくなりました。
ぜんたいてきに、スッキリしたように思いませんか?

では、緑のはたをクリックしてみましょう。
Apple」にあたったときと、「Orange」にあたったとき、それぞれただしくはねかえりますか?

今回はここまでです。
作ったら、必ず、「ほぞん」をするように心がけて下さい。

それと、今回も動画がありますので、よければ、参考にしていただければと思います。

youtu.be



次回は、この壁打ちゲームの最終回になります。
今のままでは、終わらないゲームですので、ゲームオーバーを作りたいと思います。



最後まで読んで頂いてありがとうございます。
皆さんに少しでもお役に立てれば幸いです。

<<壁打ち(7回目) 壁打ち(9回目)>>