このガイドは無料でPDFをダウンロードすることができます。このファイルを今すぐダウンロードするご自由にコピーして、お友達やご家族とシェアしてください。

プログラミングをしなくても、誰でもビデオゲームを**遊ぶことができることをご存知ですか？初心者向けの言語はいくつかありますが、ゲームを作るために6ヶ月かけてjavaやC++を学ぶ必要はありません。様々な種類のゲームに対応する多くのツールから選ぶことができますが、子供（と**）にお勧めなのはMITのFree Crawlです。

スクラッチは、リソースをドラッグ＆ドロップしてゲームやアニメーションを作ることができるツールです。わかりやすく、でもその過程でプログラミングの基礎が学べる。Scratchで何が作れるのか、そして簡単なマリオのゲームをステップバイステップで作ってみましょう。

エンカウンター・スクラッチ

Scratchを始めるには、ホームページをご覧ください。すぐにアカウントを作成して、作品を保存できるようにしておくといいでしょう。ウィンドウの右上にある「スクラッチに参加する」ボタンをクリックします。ユーザー名とパスワードを作成し、生年月日と性別を入力すると、システムが保護者のメールアドレスを尋ねてきます。他のプロジェクトにコメントしたり、自分のプロジェクトを共有できるように、自分のものがあれば入力し、アドレスを確認します。

今なら、すぐにでも飛び込める。上部ツールバーの「作成」をクリックし、「ドラフトエディター」を起動します。また、オフラインエディタをダウンロードすれば、インターネットに接続していなくても作業することができます。

画面要素

エディタを起動すると、次のようなウィンドウが表示されます。その要素を分解してみましょう（下の小さな画像でわかりにくい場合は、フル画像を参照してください）。

1. ステージ - ゲームの簡単な概要を表示します。すべてのアクティブなスプライトと、選択した背景がここに表示されます。スプライトは自由に動かすことができます。上の欄に商品名を記入してください。
2. 背景 - ここでは、ゲームの背景を選択することができます。Scratchのライブラリから選ぶか、自分で描くか、ファイルをインポートします。また、コンピュータのウェブカメラから画像を取得することもできますが、ほとんどの人はこのオプションを必要としないでしょう。
3. エルフ......このプロジェクトの全スプリットの中心的存在。背景と同様に、デフォルトのものを追加したり、自分で作成したり、画像をアップロードしたりすることができます。スプライトの上にある小さな青いiのアイコンをクリックすると、スプライトの名前を変更したり、角度を変えたり、非表示にすることができます。
4. ワークスペース - あなたの仕事のほとんどがここで行われます。上のタブ（Script、Costume、Soundと書かれている）を使って、作業中のものを変更することができます。スクリプトは、これから説明するコードのブロックを追加するために使用します。コスチュームでは、スプライトのポーズを追加で作成することができます。このタブは、エリア2で背景を選択した場合は背景に変わり、エリア6でスプライトを選択した場合はコスチュームに戻ります。基本的な画像編集機能で、ゲーム内のグラフィックを変更することができます。また、アセット名の変更もここで行えます。サウンドの追加や編集には、間違いなくサウンドが中心です。
5. ブロック - 3つのタブのうちどれを選択するかによって、このエリアはコードブロック、スプライトのコスチューム/背景、サウンドクリップの間で切り替わります。
6. 操作ボタン - 緑の旗でゲーム開始、赤の停止旗でゲーム終了。

ブロックの使用

さて、Scratchのエディタに慣れたところで、このツールの最も重要な部分の1つであるコードブロックについて説明しましょう。これらのブロックは、実際のコードの入力を必要とせず、要素の動作を定義することができます。レゴのおもちゃのように組み合わされ、お互いにどのように作用しているのかがわかりやすいのです。

左のリストでスプライトをクリックし、スクリプトタブが選択されていることを確認して、このエレメントのブロックのドラッグを開始します。ブロックは色分けされ、パズルのように組み合わされることを示す端があることに注意してください。主な10個のカテゴリーとその役割は以下の通りです。

• 移動 - 指定されたスプライトを、ステップ移動、別のオブジェクトへの移動、または直接座標による移動を行います。
• 外観 - スプライトの表示・非表示、衣装の切り替え、サイズの変更、レイヤー間の移動ができます。
• サウンド - 音を再生したり、音量を変更したり、テンポを調整したりします。
• ペン - マーカーで描画し、その色と形を変更します。
• データ - 独自の変数を作成することができます。これは、Scratchに組み込まれていない要素に対して非常に便利です。
• イベント - 緑色のサインをクリックしたときやスペースバーを押したときなど、他のアクションを開始させる条件です。他のブロックを本当に機能させるためには、これらのブロックが必要なのです。
• 操作の繰り返し、if else文の実行、特定の操作の停止を行うための制御ループ。
• センス - スプライトが他の要素に触れたり、ユーザーがキーを押したりしたときに、これらのブロックを他のブロックに配置してアクションを実行します。
• 演算子 - 変数に対して算術演算や基本的なブーリアン演算を行うことができる数学的要素です。
• もっとブロックを - これだけでは物足りない方は、自分でブロックを作ってみてください。

簡単な例

では、ブロックの組み合わせの簡単な例を、順を追って説明しましょう。スクラッチキャットがサッカーボールを蹴ってゴールに入り、ボールがゴールに入ったら音を出すようにしてほしい。

まず、サッカーのかっこいい背景が必要です。左下の背景セクションに移動し、絵のアイコンをクリックしてScratchの背景を選択します。Goal1というメソッドがありますが、これはうまくいくでしょう。次に、スプライトのアイコンをクリックして、新しい既成スプライトを追加します。サッカーボールをダブルクリックして、スプライトに追加してください。

グラフィックの準備ができたので、まずはブロックをいくつか用意します。猫を選ぶのは、行動を起こしているのが猫だからです。イベント]タブには、たくさんのスタートブロックがあるのを覚えていますか？周りを見渡して、緑のバナーをクリックすると火が出てきます。これは完璧な出発点です。これをスクリプトのワークスペースにドラッグします。

スタートしたら、猫が駆け寄ってきてボールを蹴ってほしいですよね？ムーブメントタブで何かありそうですね。猫の動きには、移動Xステップブロックなど、いくつかの選択肢があります。しかし、猫が何歩でボールに辿り着くかは保証できません。ネットにはもっと良いブロックがある - ネットをブロックするためにX秒間スライドしてみてください。1秒という時間は、サッカーボールの青いiのアイコンをクリックして、その座標を確認する必要があります。これらをボックスに入力すれば、最初の一手は完了です。

ボールを蹴る

猫がサッカーボールに触れたら、ゴールに飛んでいきます。そこで、何かアクションを加えることができるように、サッカーボールを選択します。すべてのアクションはイベントから始まることを忘れないでください。この例では、緑の旗はOKです。さて、猫が触る前にサッカーボールが動いては困ります。コントロールカテゴリのブロックを見て、その動作を制限することができます。ブロックが正しく聞こえるまで待つ!

Wait-untilのブロックは、内部に細長い六角形の形状があることに注意してください。センスブロックはこの形状に合うものが多いので、これらを参考に探してみてください。リストの一番上にあるタッチブロックが見えますか？穴の中にドラッグして待つことができます。ドロップダウン・ボックスをCatまたはあなたが名付けたCatスプライトに変更します。

あとは、サッカーボールをゴールに飛ばすだけです。先ほど猫に使ったスポーツカテゴリーのグライドXのセックストゥーブロックは問題なく使えます。待ち時間にそのマスをポップアップし、ゴールネットにマウスポインタを置く。ステージの下にXとYの座標が表示されるので、それを**スライダーブロックに入れます。ボールが蹴られると非常に速く動くはずなので、0.5秒で時間を計ってみよう。

観客が熱狂する

最後は、サウンドを追加することですワークスペースの上部にあるSoundsタブを選択して、新しいサウンドを追加します。新規サウンド "の下にあるスピーカーアイコンをクリックし、Scratchのライブラリからサウンドを取得します。人間のカテゴリーでは、チアというものがあり、これは完璧です。ダブルクリックして追加し、フットボールのワークスペースに戻ります。

サウンド」カテゴリの下に「サウンドを再生する」と書かれたブロックがあります。スライダーの下に置いて、完成です緑色のマークをクリックすると、アニメーションが再生されます。猫がボールに駆け寄り、触るとボールがゴールに飛び込み、観客から歓声が上がります。

[video width="480" height="360" mp4="https://www.makeuseof.com/wp-content/uploads/2017/04/Scratch-Soccer-Example-Video.mp4"][/video].

そんなに難しくなかったよ!さて、ここまでブロックの関連付けや組み合わせについて掘り下げてきましたが、Scratchを使ってマリオのゲームを作る方法を見ていきましょう。

マリオの基本的なゲームを作成する

上記のシンプルなサッカーの例では、ブロックを使ってスプライトを制御する方法を示していますが、ゲームプレイやアニメーション、音楽はありません。さっそく、簡単なマリオのゲームを作ってみましょう。ゲームのあらゆる側面について何千もの言葉を費やすことができるので、基本に忠実でありたいと思います。

注意：私はアーティストではないので、このチュートリアルのために、インターネットからマリオのスプライトをコピーしてきました。マリオのグラフィックは任天堂の所有物であり、著作権のあるスプライトを使用したゲームを公開しないでください。これはあくまで一例です。

グラフィックの取り込み

まずはスプライトと背景をScratchにインポートします。ネット上の画像を使うので、ダウンロードしてScratchにアップロードします。マリオが敵に飛び乗って倒せるようにロジックを作成しますが、敵の側面に接触して死ぬのはこのチュートリアルでは高度すぎるので、代わりにコインを集めさせることにします。

チュートリアルの最後には、私が使用した最終的なアセットを含むZIPファイルを提供します。これらを使えば、チュートリアルの画像操作の説明で悩むことはないでしょう。自分で全部ダウンロードしたい人はどうぞ。ダウンロードしたスプライトはこちらです。

• 走るマリオ（2フレームで十分です）
• マリオジャンプ
• コインのアニメーション
• 接地プロット
• クラウド

Scratchは、私たちのニーズに合わせて、青空3の背景を用意しています。

Edit Elf コスチューム

マリオの走行アニメーションを構成するスプライトは2つあるので、別々のコスチュームとして追加する必要があります。Paint.NETなどの画像編集ソフトでマリオの2コマを別ファイルとして保存する場合は、3コマ目を無視すればよい。最初のマリオのスプライトをアップロードし、それを選択して、コスチュームタブを使用して、2番目のコスチュームとして別のスプライトをアップロードします。マリオ1、マリオ2といった具合に、それぞれ違う名前をつけて。マリオのもう一つのコスチュームとして、ジャンプするスプライトを追加します。

イメージエディターを使って、上で提供された画像から雲を抽出し、新しいスプライトとしてアップロードしてください。アニメーションではないので、別途コスチュームを追加する必要はありません。

地面には、マリオが走るので、たくさんのブロックが必要です。Paint.NETを使って、グランドブロック画像の真ん中にある6つのブロックを取り込み、別ファイルとして保存します。適当な大きさに縮小したら、画面の下全体を覆うように12個程度のブロックが必要です。したがって、この6つのブロックを2つ並べて地上のスプライトに配置する必要があります。これをアップロードして、Scratchで地面のスプライトのコピーを2つ作ります。

コインはアニメーションGIFなので、ちょっと違いますね。Scratchは、アップロードされるたびにアニメーションの各フレームのコスチュームを作成します。この画像には合計11個のフレームがありますが、残念ながら周囲に白い縁取りがあり、ブルーの背景を映し出しています。各衣類はScratchエディタで開く必要があります。ピペットツールで背景色のブルーを選択し、ペイントバケツツツールでコインの白い縁を水色に変更します。

画面上部の緑色のロゴボタンの真上にある「増加」「減少」ボタンでスプライトのサイズを変更する必要があります。どちらかのボタンをクリックし、左側のステージで変更したいスプライトをクリックします。これにより、すべての衣装のサイズも変更されます。今は大まかな見積もりを出し、後で微調整すればいいのです。

音声の取り込み

精霊のように、ゲームを彩るサウンドを手に入れるのです。どうぞダウンロードして、サウンドタグを付けてアップロードしてください。その際には、それらをあなたの**カッコイイ**にすることを検討してください。

• スーパーマリオブラザーズのテーマ
• マリオのジャンプ音
• コイン収集音

コインのアニメーションを設定する

すべてのアセットが揃ったので、いよいよ命を吹き込みます。まずは簡単なので、コインから始めましょう。Coin Sprites and Scripts "タブを選択します。コインはアニメーションGIFなので、ブロックを使ってコスチュームを転がし続けることで、動いているように見せることができます。

アニメーションスクリプトは以下の通りです。

つまり、緑の旗をクリックすると、スクリプトがコインをデフォルトの状態に設定するのです。そして、データタブのFPS変数に設定した速度で、フレーム間を無限に循環させます。このスピードが嫌なら、この数字で勝負すればいいんです。

DataタブのCoin FPS（これは作成したカスタム変数です）の横のチェックを外し、画面に表示されないようにします。

マリオを動かし続ける

ここからが一番難しいところです。マリオを動かすには多くの手順が必要ですが、実は地面ブロックをスクロールさせることで動いているように見せる仕掛けがあるのです。各ブロックのループを説明するのではなく、コードブロックのスクリーンショットを提供し、そのハイライトを説明します。

まず、Dataタブで4つの変数を作成します。4つともすべてのスプライトに適用されますが、SpeedはMario:にのみ適用されます。

• 重力は一定で、マリオがジャンプすると、地面に引き戻されるのです。
• OnGroundは、マリオが地面に触れたかどうかを追跡します。
• ScrollXは、画面の水平方向の動きを測定します。
• スピード（マリオのみ） マリオのジャンプのスピードをコントロールします。

グランドアニメーションの設定

Groundスプライトを右クリックして「Copy」を選択することで、2つのコピーを作成しました。Ground-1を画面左端にドラッグして、その左端のブロックが画面左端に接するようにします。次に、もう一つの地面のスプライトを、最初のスプライトの右側にドラッグします。地面が一枚の固まりに見えるように、端を揃える。

各グラウンドスプライトには、以下のコードブロックが必要です。

scrollXはブロックの位置で、0は緑の旗がクリックされたときに開始されるデフォルトの位置です。最初は左に動けないことに気がつくと思います。

2つ目以降の接地ブロックについては、ScrollX+480*0に新しい接地ブロックの番号を追加してください。そうすることで相殺され、スムーズにスクロールさせることができます。

マリオの論理

これがすべてのコードブロックですが、マリオにはもっと多くのコードブロックがあります。ここでは、それぞれのコードブロックが何をするのか、簡単な要約を示します。

このコードでは、マリオが移動したときに変数ScrollXを変更します。左や右を押すと、マリオは右方向に一歩進み、ScrollXが3増加します。もし、左方向に動いたときにマリオがひっくり返ってしまう場合は、彼のスプライト上の青いiをクリックして、回転スタイルが2番目のオプションに設定されていることを確認してください。そうすると、円ではなく左右に反転するようになります。

ここでは、マリオのコスチュームチェンジを処理するコードを見てみましょう。マリオが地上にいないときは、ジャンプスーツを着ています。左右に移動するたびに、マリオは10分の1秒ごとにフレームを切り替えています。矢印キーを離すと、マリオの標準的なフレームになります。

OnGround変数を計算するシンプルなコードです。もし彼が地面の一部に触れたなら、OnGroundは1（真）に等しくなる。ジャンプするとOnGroundは0（偽）になる。

この2つのブロックは、マリオのジャンプのスピードを制御するコードです。左側には、マリオが地面で勢いを失わないようにするためのブロックがあります。空中にいる場合は、一定である重力によって徐々に速度が落ちていく。スペースバーを押すと同時に、右のブロックがマリオをジャンプさせる。ジャンプ音とスピードで、重力がかかるまで宙を舞う。

マリオの最後の1枚は、すべてセットされています。緑の旗をクリックしてスタートすると、音楽が始まり、すべての変数が初期値に設定され、画面中央にマリオが生成されます。

コインの収集

コインの話に戻ろう。マリオが捕まえたら、音を立てて消えていくようにしたいですね。このために別のスクリプトを書きましょう。スクリプトを機能別に分けることは、プログラミングの重要な練習です。ブロックがごちゃごちゃしていると、何かあったときに何が問題なのかがわかりにくくなります。

当社のコイン収集用スクリプトを紹介します。

マリオがコインに触れるたびにコレクションサウンドが鳴り、コインが隠れるというシンプルな仕組みです。コインアニメーションのコードでは、再スタート時にコインが再表示されるようにディスプレイブロックを配置しています。

リールコインと雲

あと少しです!マリオは動かず、地面が転がるので、コインも転がってマリオが回収できるようにする必要があります。その仕組みはこうだ。

これにより、マリオがつかみやすいY値（＝画面の縦位置）にコインが置かれる。そして、グランドキャッチャーと同じような理屈で、マリオに向かって転がっていく。コインをマリオの方に素早く移動させるために、スクロール速度を0.75に上げていることに注意してください。2枚目、3枚目のコインは、「y」フィールドを-40、-20と高くし、マリオがキャッチしにくいようにしました。Set x to blockで、2枚目、3枚目のコインの150*1を150*3、150*5に増やして、画面右側に寄せます。

クラウドでは、ほとんど同じコードのブロックが使われています。

この場合も、雲を特定の高さに配置し、マリオの移動に合わせてスクロールさせます。2つ目の雲は、マリオの後ろではなく前にあるため、コインと同じようにセットXをブロック(ScrollX*0.1)+(150*1)に変更します。

ボーダーを追加する

地面とコインを実装しているため、コインがスクロールして表示されるまで、画面の端に張り付いているのが見えます。これは見苦しいので、背景と同じ色のボーダー・スプライトを素早く作って、左右に隠すとよいでしょう。

最も簡単な方法は、ステージ上で右クリックし、「ステージ画像を保存」をクリックすることです。このPaint.NETを開き、ピペットツールで背景色のブルーを選択します。右下のダイアログボックスを使用して、新しいレイヤーを追加します。次に、矩形ツールを使って、画面の左右に塗りつぶしのある青い矩形を描きます。各ブロックの半分をカバーし、背景レイヤーを削除します。

これをPNGファイルとして保存し、Borderという新しいスプライトとしてアップロードします。これで画面に枠線が描けたので、ぴったりと並べることができます。

そうすると、ボーダーが常に手前に来るように、数ブロックだけでいいんです。

ゲームの幅を広げる

完成品はこちらでお試しください

マリオのゲームの土台を一緒に用意したのです。ここから様々な要素を追加していくことができます。スーパーキノコを追加してマリオをチャージしたり、落とし穴を作ったり、終盤の目印を作ったりしてみましょう。ここで学んだ構成要素で、さらにスプライト、変数、ロジックを追加して、何でも作ることができます。皆様のご意見をお待ちしております。

この記事のプロジェクトには、Scratchユーザーのdryd3418さんのチュートリアルプロジェクト「Super-Mario:Scroll&Jump」のコードを一部使用させていただいています。コピーできるスクリプトなど、より詳細なヘルプは、別の**マリオのゲームのユーザーガイドをチェックしてください。もっとシンプルにしたい場合は、Create Your Own Mario Gameプロジェクトをご覧ください。スプライトをドラッグ＆ドロップして、**シンプルなゲームを作ることができます。

なお、Scratchのプロジェクトでは、自分のプロジェクトと同じように、「View Inside」をクリックして、エディタでプロジェクトを開くことができます。これは、誰かがプロジェクトを成功させるために使ったブロックを垣間見ることができ、行き詰ったときにマンネリ化を解消するのに役立ちます。私のプロジェクトは誰にでも公開されているので、もし助けが必要なら気軽にコードを見てください。また、このゲームで使用したすべてのリソースを圧縮しましたので、ダウンロードして時間を節約してください。

さらに上を目指すならScratch For Arduinoをチェックして、プラットフォーム上でプロジェクトを構築してください。ゼロから始めるために必要なものをご紹介します** iPhoneゲーム

子供と一緒にできるその他の楽しいことについては、子供やティーンエイジャー向けのDIYクラフトやプロジェクトのサイトをチェックしてみてください。