Home-theater-designers
誰でもプログラミングなしでビデオゲームを作れることをご存知ですか？初心者向けの言語はいくつかありますが、ゲームを作成するためにJavaまたはC ++の学習に半年を費やす必要はありません。さまざまな種類のゲーム用の多くのツールから選択できますが、子供（および大人）にとっての1つの優れたオプションはMITの無料です 傷 。
Scratchは、アセットをドラッグアンドドロップしてゲームやアニメーションを作成できるツールです。理解するのは簡単ですが、その過程でプログラミングの構成要素を教えます。 Scratchで何を作成できるかを見てから、簡単なマリオゲームを作成する手順を見ていきましょう。
スクラッチに会う
Scratchの使用を開始するには、 ホームページ 。作成したものを保存できるように、すぐにアカウントを作成する必要があります。クリック Scratchに参加する ウィンドウの右上にあるボタン。ユーザー名とパスワードを作成し、生年月日と性別を入力すると、システムが保護者のメールアドレスを要求します。自分のプロジェクトがある場合は入力し、アドレスを確認して、他のプロジェクトにコメントしたり、共有したりできるようにします。
今、あなたはすぐに飛び込むことができます。クリック 作成 上部のツールバーでスクラッチエディタを起動します。必要に応じて、 オフラインエディタをダウンロードする インターネットに接続せずに動作します。
画面上の要素
エディタを起動すると、以下のウィンドウが表示されます。その要素を分解してみましょう（下の小さい画像が不明な場合は、フルサイズの画像を参照してください）。
- ステージ -ゲームの概要を表示します。すべてのアクティブなスプライトと選択した背景がここに表示されます。必要に応じて、スプライトを移動できます。この上のフィールドにプロジェクトに名前を付けます。
- 背景 -ここで、ゲームの背景を選択できます。 Scratchのライブラリから選択するか、独自にペイントするか、ファイルをインポートします。 PCのカメラから画像を取得することもできますが、ほとんどの人はおそらくこのオプションを必要としません。
- スプライト -プロジェクト内のすべてのスプライトの中心。背景と同様に、デフォルトの背景を追加したり、独自の背景を作成したり、画像をアップロードしたりできます。小さな青いクリック 私 スプライトのアイコンを使用して、名前を変更したり、角度を変更したり、非表示にしたりできます。
- 作業エリア --Scratchでの作業の大部分が行われる場所。上記のタブを使用してください（ラベル付き スクリプト 、 コスチューム 、 と 音 作業内容を変更します。
- スクリプト コードのブロックを追加するためのものです。これについてはすぐに説明します。
- コスチューム スプライトの追加のポーズを作成できます。このタブはに変わります 背景 エリアで選択した場合 2 、そして戻る コスチューム エリア内のスプライトを選択したとき 6 。基本的な画像エディタを使用すると、ゲームのグラフィックに変更を加えることができます。ここでアセットの名前を変更することもできます。
- 音 当然のことながら、サウンドを追加および編集するための中心です。
- ブロック -選択した3つのタブのどれに応じて、この領域はコードブロック、スプライトコスチューム/背景、およびサウンドクリップを切り替えます。
- コントロールボタン -緑の旗がゲームを開始し、赤い一時停止の標識の形がゲームを終了します。これらをテストに使用します。
ブロックの使用
Scratchのエディターについて理解したところで、ツールの最も重要な部分の1つであるコードブロックについて説明しましょう。これらのブロックを使用すると、実際のコードを入力する代わりに、要素の動作を定義できます。それらはレゴのようにスナップし、お互いにどのように影響するかを簡単に確認できます。
左側のリストからスプライトをクリックし、必ず選択してください スクリプト タブをクリックして、その要素のブロックのドラッグを開始します。ブロックは色分けされており、ジグソーパズルのようなエッジがあり、ブロックがどのように組み合わされているかを示していることに注意してください。 10のカテゴリとその機能は次のとおりです。
- モーション -指定されたスプライトを、ステップごと、別のオブジェクトに向かって、または直接座標を介して移動させます。
- ルックス -スプライトを非表示または表示したり、コスチュームを切り替えたり、サイズを変更したり、レイヤー間を移動したりできます。
- 音 -音を鳴らしたり、音量を変えたり、テンポを調整したりします。
- ペン -マーカーで描き、色と形を変えます。
- データ -独自の変数を作成できます。これは、Scratchに組み込まれていない要素に非常に便利です。
- イベント -緑色のフラグをクリックしたり、スペースバーを押したりしたときなど、他のアクションを開始するための基準。他のすべてのブロックが実際に何かをするためにこれらのブロックが必要です！
- コントロール -ループして、アクションを繰り返したり、if-elseステートメントを実行したり、何かを停止したりします。
- センシング -スプライトが別の要素に触れているとき、またはユーザーがキーを押しているときにアクションを実行するには、これらのブロックを他のブロックに配置します。
- 演算子 -変数に対して算術演算または基本的なブール演算を実行できるようにする数学要素。
- その他のブロック -これらが十分でない場合は、独自のブロックを作成してください。
簡単な例
これらのブロックがどのように組み合わされるかを段階的に説明するために、簡単な例を見てみましょう。スクラッチキャットにサッカーボールをゴールに蹴らせ、入ったときに音を鳴らします。
まず、クールなサッカーの背景が必要です。に向かう 背景 左下のセクションで画像アイコンをクリックして、Scratchの背景の1つを選択します。と呼ばれるものがあります 目標1 それは完全に機能します。次に、スプライトアイコンをクリックして、新しい既製のスプライトを追加します。あなたは見るべきです ボールサッカー リスト内-ダブルクリックしてスプライトに追加します。
グラフィックの準備ができたので、いくつかのブロックから始める必要があります。アクションを実行しているのは猫なので、猫を選択します。覚えておいてください イベント タブはスターティングブロックの多くを保持していますか？見てみると、緑色の旗をクリックすると発火するものが表示されます。それは完璧な出発点です-それを上にドラッグします スクリプト 作業エリア。
始めたら、猫に轢いてボールを蹴ってもらいたいですよね？それはに該当するもののように聞こえます モーション タブ。猫を動かすには、次のようないくつかのオプションがあります。 Xステップ移動 ブロック。しかし、猫がボールに到達するまでに何歩かかるかは保証できません。これにはもっと良いブロックがあります-試してみてください X秒をグライドして ブロック。 1秒は良い時間であり、青をクリックする必要があります 私 サッカーボールのアイコンで座標を確認できます。それらをブロックに入力すると、最初のアクションが完了します。
ボールを蹴る
猫がサッカーボールに触れると、ゴールに飛び込むはずです。だから、あなたがそれにいくつかのアクションを追加できるようにサッカーボールを選択してください。すべてのアクションは、 イベント -このインスタンスでは緑色のフラグで問題ありません。さて、猫がサッカーボールに触れるまでサッカーボールを動かしたくないでしょう。を見てください コントロール 動作を制限できるブロックのカテゴリ。 NS まで待つ ブロック音は正しいです！
どのように まで待つ ブロックの内部は細長い六角形です。多くの センシング ブロックはこの形状に合うので、それらを見て正しいものを見つけてください。を参照してください 触れる リストの一番上にあるブロック？あなたはそれを内側の穴の中にドラッグすることができます まで待つ 。ドロップダウンボックスをに変更します ネコ またはあなたが猫のスプライトと名付けたものは何でも。
今、あなたはただサッカーボールをゴールに飛ばす必要があります。 NS X秒をグライドして のブロック モーション 以前に猫に使用したカテゴリは問題なく機能します。そのブロックを下にスナップします まで待つ 、マウスポインタをゴールネットの上に置きます。わかるでしょ NS と と ステージの下の座標-それらをに接続します グライド ブロック。蹴るとボールがかなり速く動くはずなので、やってみましょう 0.5秒 タイミングについて。
そして群衆は荒れ狂う
最後のステップは音を追加することです！を選択 音 作業領域の上にあるタブをクリックして、新しいものを追加します。下のスピーカーアイコンをクリックします 新しい音 Scratchのライブラリから1つを取得します。と呼ばれるものがあります 応援 下 人間 完璧なカテゴリ。それをダブルクリックして追加し、サッカーボールのワークスペースに戻ります。
Windows10に最適なファイルマネージャー
ラベルの付いたブロックがあります 音を出す 下 音 カテゴリー。下にスナップします グライド ブロックすれば、すべて完了です。緑の旗をクリックしてアニメーションを再生します。猫はボールに駆け寄り、ボールに触れるとボールがゴールに飛び込み、観客は歓声を上げます。
[ビデオmp4 = 'https：//www.makeuseof.com/wp-content/uploads/2017/04/Scratch-Soccer-Example-Video.mp4'] [/ video]
それほど難しくはありませんでした！ブロックがどのように関連し、互いに適合するかを掘り下げたので、Scratchを使用してマリオゲームを構築する方法を見てみましょう。
基本的なマリオゲームの作成
上記の簡単なサッカーの例は、ブロックを使用してスプライトを制御する方法を示していますが、ゲームプレイ、アニメーション、または音楽はありません。もっと詳しく見て、簡単なマリオゲームを作りましょう。ゲーム制作のあらゆる側面に何千もの言葉を費やすことができるので、基本に固執します。
ご注意ください： 私はアーティストではないため、このチュートリアルでは、マリオのスプライトをWebからコピーしています。マリオのグラフィックは任天堂が所有しているため、著作権で保護されたスプライトを使用してゲームを公開しないでください。これは例としてのみ示されています。
グラフィックのインポート
最初のステップは、スプライトと背景をScratchにインポートすることです。 Webからの画像を使用しているので、画像をダウンロードしてからScratchにアップロードします。マリオが敵にジャンプして敵を倒すことができるが、敵の側面に触れることで死ぬようにロジックを作成することは、このチュートリアルにはあまりにも進んでいるので、代わりに彼にコインを集めてもらいます。
チュートリアルの最後に、使用した最終的なアセットを含むZIPファイルを提供します。それらを使用する場合は、チュートリアルの画像操作手順について心配する必要はありません。すべてを自分でダウンロードしたい場合は、続行してください。ダウンロードしたスプライトは次のとおりです。
- マリオランニング（2フレームで十分）
- マリオジャンプ
- アニメーションコイン
- グラウンドブロック
- 雲
スクラッチには ブルースカイ3 背景、これは私たちのニーズにうまく機能します。
スプライトコスチュームを編集する
マリオのランアニメーションを構成するスプライトは2つあるため、別々のコスチュームとして追加する必要があります。 Paint.NETなどの画像エディタを使用して2つのマリオフレームを別々のファイルとして保存します。3番目は無視してかまいません。最初のマリオスプライトをアップロードし、それを選択して使用します コスチューム タブをクリックして、他のスプライトを2番目のコスチュームとしてアップロードします。次のような識別可能な名前を付けます マリオ-1 と マリオ-2 。マリオの別のコスチュームとしてジャンプスプライトを追加します。
画像エディタを使用して、上記の画像からクラウドを抽出し、新しいスプライトとしてアップロードします。アニメ化されていないので、別のコスチュームを追加する必要はありません。
マリオがブロックに沿って走っているので、地面にはたくさんのブロックが必要になります。 Paint.NETを使用して、中央の6つのブロックを取得します。 グラウンドブロック 画像を作成し、別のファイルとして保存します。適切なサイズに縮小したら、画面の下部全体をカバーするために約12ブロックが必要になります。したがって、これらの6つのブロックの2つのコピーを並べて配置する必要があります。 接地 スプライト。これをアップロードしてから、Scratchで2つのグラウンドスプライトの複製を作成します。
コインはアニメーションGIFなので少し違います。アップロードするたびに、Scratchはアニメーションのすべてのフレームのコスチュームを作成します。この画像には合計11のフレームがありますが、残念ながら、周囲に白い境界線があり、青い背景に対して見下ろしています。スクラッチエディタ内でコインの各コスチュームを開く必要があります。ピペットツールを使用して青い背景色を選択してから、ペイントバケットツールを使用してコインの白いエッジを淡い青に変更します。
を使用してスプライトのサイズを変更する必要があります 育つ と 縮む 画面上部の緑色の旗ボタンのすぐ上にあるボタン。いずれかのボタンをクリックしてから、左側のステージで変更するスプライトをクリックします。これにより、すべてのコスチュームのサイズも変更されます。今のところそれらを球場にします。後で微調整できます。
サウンドのインポート
スプライトと同じように、ゲームを具体化するためにいくつかのサウンドを取得します。先に進んでこれらをダウンロードしてから、を使用してアップロードしてください 音 タブ。あなたがそれを見ている間、調べてください お使いの携帯電話のクールな着信音としてそれらを追加します 。
コインをアニメーション化する
すべてのアセットの準備ができたので、それらを生き生きとさせる時が来ました。コインは簡単なので、まずはコインから始めましょう。コインスプライトと スクリプト タブ。コインはアニメーションGIFであるため、一連のブロックを使用して、コスチュームを常にスクロールし、動いているように見せることができます。
アニメーションスクリプトは次のようになります。
つまり、このスクリプトは、緑色の旗をクリックすると、コインをデフォルトの状態に設定します。次に、設定した速度で、フレームを際限なく循環します。 FPS の変数 データ タブ。速度が気に入らない場合は、その番号で遊んでください。
横のチェックボックスをオフにします コイン-FPS の中に データ タブ（これは作成するカスタム変数です）なので、画面に表示されません。
マリオを動かす
さて、難しい部分です。マリオを動かすには多くのステップが必要ですが、実際には、グラウンドブロックをスクロールして動きのように見せかけるトリックです。すべてのブロックループを説明するのではなく、コードブロックのスクリーンショットを提供し、それらのハイライトを説明します。
まず、で4つの変数を作成する必要があります データ タブ。これらの4つすべては すべてのスプライト用 を除いて 速度 、これはマリオ専用です：
- 重力 マリオがジャンプしたときに地面に引き戻す定数です。
- 地面に マリオが地面に触れているかどうかを追跡します。
- ScrollX 画面の水平方向の動きを測定します。
- 速度 （マリオのみ）マリオがジャンプする速度を制御します。
地面をアニメーション化する
あなたはすでにあなたの2つの複製を作りました 接地 スプライトを右クリックして選択します 複製 。引っ張る グラウンド-1 画面の左端にあるため、左端のブロックが画面の左端に接触します。次に、他のグラウンドスプライトを最初のスプライトの右側にドラッグします。端を揃えると、地面が1つの固い部分のように見えます。
それぞれに必要なコードブロックは次のとおりです 接地 スプライト：
これにより、地面が画面の下部に配置され、マリオが移動するときにブロックがスクロールするだけです。 ScrollX ブロックの位置です。 0 緑の旗をクリックすると起動するデフォルトの位置です。開始直後は左に移動できないことに気付くでしょう。
2番目（およびそれ以上）のグラウンドブロックについては、 0 桁数 ScrollX + 480 * 0 新しい地面ごとに1つずつ。これによりオフセットされ、スムーズにスクロールします。
マリオの論理
ブロックに必要なのはそれだけですが、マリオにはさらに多くのコードブロックがあります。簡単な要約とともに、それぞれが行うことは次のとおりです。
このコードブロックは、 ScrollX マリオが動くときの変数。左または右を押すたびに、マリオは適切な方向を向いて一歩踏み出し、増分します ScrollX 左に移動したときにマリオが上下逆さまになっていることに気付いた場合は、青をクリックします。 私 彼のスプライトに 回転スタイル 2番目のオプションに設定されます。これにより、彼は円ではなく左右に反転します。
マイクボリュームウィンドウを増やす方法10
ここに、マリオの衣装の変更を処理するコードがあります。マリオが地面にいないとき、彼はジャンプの衣装を着ています。マリオは、左または右に移動するたびに、10分の1秒ごとにフレームを切り替えます。矢印キーを放すと、マリオはデフォルトで標準フレームになります。
を理解する簡単なコード 地面に 変数。彼がグラウンドブロックの1つに触れている場合、 地面に 1（真）に等しい。彼がジャンプしているとき、 地面に は0（false）です。
これらの2つのコードブロックは、マリオのジャンプ速度を処理します。左側は、マリオが地面にいる場合に勢いがないことを保証するブロックです。彼が空中にいる場合、彼の速度は重力によって徐々に遅くなります。これは一定の値です。右のブロックは、スペースバーを押すたびにマリオをジャンプさせます。彼のジャンプ音が鳴り、重力が引き継ぐまで速度が彼を空中に押し出します。
マリオの最後のコードブロックはすべてセットアップです。緑の旗をクリックして開始すると、音楽が始まり、すべての変数がデフォルト値に設定され、画面の中央にマリオが出現します。
コインを収集
コインに戻りましょう。マリオが1つをつかむと、音が鳴って消えることを確認する必要があります。そのために別のスクリプトを作成しましょう。スクリプトを関数ごとに分けることは、プログラミングにおける重要なプラクティスです。ブロックが大きく乱雑になると、問題が発生したときに問題を特定するのが難しくなります。
コイン収集スクリプトは次のとおりです。
これは非常に簡単です。マリオがコインに触れると、コレクションサウンドが再生され、コインが非表示になります。コインアニメーションコードでは、 見せる 再起動したときにコインが再表示されるようにブロックします。
スクロールコインと雲
もうすぐです！マリオは動かないが地面がスクロールするので、マリオがコインを集めることができるようにコインもスクロールすることを確認する必要があります。これがどのように機能するかです：
これはコインを と マリオが簡単につかむことができる値（つまり、画面の垂直位置）。次に、グラウンドブロックと同様のロジックを使用して、マリオに向かってスクロールします。スクロール速度をに上げたことに注意してください 0.75 コインがマリオに向かってすばやく移動するようにします。 2番目と3番目のコインについては、 yをに設定します フィールドに -40 と -20 だから彼らは少し高く、マリオがつかむのが難しいです。の中に xをに設定します ブロック、増加します 150 * 1 に 150 * 3 と 150 * 5 2番目と3番目のコインを画面外の右側に配置します。
クラウドはほぼ同じコードブロックを使用します。
繰り返しますが、これは特定の高さに雲を配置し、マリオが移動するにつれてそれをスクロールします。マリオの後ろではなく前にある2番目の雲の場合は、 xをに設定します ブロックして （ScrollX * 0.1）+（150 * 1） 、コインのように。
境界線を追加
地面とコインを実装した方法により、コインがスクロールして表示されるまで、画面の端にコインが詰まっているのがわかります。これは見苦しいので、背景と同じ色のクイックボーダースプライトを作成して、これを左側と右側の両方で非表示にする必要があります。
これを行う最も簡単な方法は、ステージを右クリックしてクリックすることです。 ステージの写真を保存 。これをPaint.NETで開き、ピペットツールを使用して青い背景色を選択します。右下のダイアログを使用して新しいレイヤーを追加します。次に、長方形ツールを使用して、画面の両側に塗りつぶされた青い長方形を描画します。各ブロックの約半分を覆ってから、背景レイヤーを削除します。
これをPNGファイルとして保存し、という新しいスプライトとしてアップロードします。 国境 。画面の真上にボーダーを描いているので、完璧に並べることができます。
次に、境界線が常に前面になるように、数ブロックが必要です。
ゲームを拡大する
試してみてください 最終製品はこちら ！
マリオゲームの基本だけを一緒に設定しました。ここからゲームに多くの要素を追加できます。スーパーマリオをパワーアップするためにスーパーマッシュルームを追加するか、マリオがクリアしなければならないいくつかのピットを作るか、エンドレベルのフラグを作成してみてください。ここで取り上げたビルディングブロックを使用して、スプライト、変数、ロジックを追加して、必要なものを作成できます。私たちはあなたが思いつくものを見るのを楽しみにしています！
Scratchユーザーdryd3418のコードの一部を使用したので、彼に叫び声を上げたいと思います。 スーパーマリオ：スクロール＆ジャンプチュートリアル この記事のための私たち自身のプロジェクトのプロジェクト。コピーできるスクリプトなど、より詳細なヘルプについては、チェックアウトしてください。 マリオゲームを作るための別のユーザーガイド 。より簡単なルートを利用したい場合は、 独自のマリオゲームプロジェクトを作成する これにより、スプライトをドラッグアンドドロップして簡単なゲームを作成できます。
どのScratchプロジェクトでも、クリックできることに注意してください 内部を参照してください 自分のプロジェクトで使用したのと同じように、エディターでプロジェクトを開きます。これにより、誰かがプロジェクトを機能させるために使用したブロックを垣間見ることができ、行き詰まったときにあなたを助けることができます。私は自分のプロジェクトをすべての人が利用できるようにしましたので、お気軽に それを見る ヘルプが必要な場合は、コードを確認してください。また、このゲームで使用したすべてのアセットを圧縮したので、次のことができます。 それらをダウンロードする 時間を節約するために。
これをステップアップすることに興味がありますか？そのプラットフォームでプロジェクトをビルドするには、Scratch ForArduinoをチェックしてください。飛び込む準備ができたら、iPhoneゲームをゼロから作るために必要なすべてをチェックしてください。
私の携帯電話に広告がポップアップし続ける
あなたがあなたの子供と一緒に作ることができる他の楽しいものについては、子供と十代の若者たちのためのDIY工芸品とプロジェクトのためにこれらのサイトを見てください。
共有 共有 つぶやき Eメール コマンドプロンプトを使用してWindowsPCをクリーンアップする方法Windows PCのストレージ容量が不足している場合は、これらの高速コマンドプロンプトユーティリティを使用してジャンクを一掃します。
次を読む 関連トピック- プログラミング
- 長い形式
- ロングフォームガイド
- 傷
ベンは、MakeUseOfの副編集長およびオンボーディングマネージャーです。彼は2016年にフルタイムで執筆するためにITの仕事を辞め、振り返ることはありませんでした。彼は7年以上にわたり、プロのライターとして技術チュートリアルやビデオゲームの推奨事項などを扱ってきました。
ベンステグナーのその他の作品ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください