(いい)プログラマーになろう!

かっこいいプログラマーになろう!

scratch 大乱闘スマッシュブラザーズ風ゲーム パート1

名古屋市瑞穂区で子供を対象としたプログラミングサークルを開いているサハラです!

子供の中の1人に大乱闘スマッシュブラザーズが好きな子供がいたのでscratchで作ってみました。このページを参考にゲームを作れる様に手順を紹介します。

 

f:id:yeah_boboi:20181223215758j:plain

 

1.ステージを用意しよう

 1.ステージの画像を探そう

 

  画面右下の背景を選ぶボタンから、好きな背景を選んでください。  

f:id:yeah_boboi:20181223132517j:plain

 

色々選べます。私は街中で大乱闘が起こったという体でurbanを選択しました。f:id:yeah_boboi:20181223132828j:plain

 

選択後、背景に画像がセットされたらOKです。

f:id:yeah_boboi:20181223133025j:plain

 

2.batterを動かすコードを作ろう

 1.キャラクターを用意しよう。

 キャラクターを用意します。

f:id:yeah_boboi:20181223133723j:plain

ここでは1人目のキャラクターとして、バッター(batter)を選択しました。

f:id:yeah_boboi:20181223133804j:plain

大きさに数字を入れて、キャラクターの大きさを調整してください。

f:id:yeah_boboi:20181223134556j:plain

 

 2.キャラクターを移動させよう

  キャラクターの移動用プログラムを書く前にコスチュームの確認をして、移動するときに使用する絵を選んでください。コスチュームの確認は左上のタブを選択するととで確認できます。

 

  

f:id:yeah_boboi:20181223134903j:plain

移動している感じの絵がなかったのですが、とりあえずコスチューム1の「batter-a」とコスチューム2の「batter-b」を使用するように決めました。

 

次にコードを書いていきます。選んだキャラクターが選択されていると、真ん中に薄くキャラクターが表示されます。その状態でコードタブを選択してください。

f:id:yeah_boboi:20181223135217j:plain

 

十字キーの左が押されたら左に移動、右がおされたら右に移動するコードを書きます。

まずイベントブロックから「スペースキーがおされたとき」を選んで、真ん中にドラッグしてください。その後、矢印ボタンを押すとキーを切り替えられるので、「左向き矢印」を選択してください。

f:id:yeah_boboi:20181223135626j:plain

 

続いて、十字キーの左が押されたら移動するコードを書きます。動きブロックの中からx座標を10ずつ変えるブロックを探して、左向き矢印キーが押されたときブロックにくっつけてください。

f:id:yeah_boboi:20181223140920j:plain

 

次に中の値を10から-10に変更してください。x座標がマイナスの場合、キャラクターは左に動き、プラスの場合は右に動きます。

 

f:id:yeah_boboi:20181223141047j:plain

座標について、詳しくは下記を参考にしてください。
progra.org

 

同様に右に移動するコードも書いてください。

f:id:yeah_boboi:20181223141228j:plain

次に移動したときにコスチュームを変えて、歩いている感じを出します。下記のブロックを作ってください。このプログラムは今のコスチュームが1(batter-a)のとき、batter-bに変更、それ以外の時はaに変更する、というコードです。

f:id:yeah_boboi:20181223141607j:plain

このコードを先ほどのコードにくっつけてください。キーを押すたびにコスチュームを変更することができるようになります。

f:id:yeah_boboi:20181223142057j:plain

 

最後に移動する方向にキャラクターの向きを変えるコードを書きます。

「90度に向ける」、「-90度に向ける」ブロックを追加してください。また、旗がクリックされたときに「回転方向を左右のみにする」を設定するようにしてください。キャラクターが回転するのを防ぐことができます。

f:id:yeah_boboi:20181223143244j:plain

これで移動用のコードが完成です。動かして試してみてください。

 

 3.キャラクターをジャンプさせよう

ジャンプさせる方法は色々ありますが、ここでは一番シンプルな方法を紹介します。

旗がクリックされたとき(=ゲームが始まった時)から十字キーの矢印が押されるかどうかを「ずっと」ブロックの中で監視します。矢印が押されたら、y座標を50変える、0.5秒待ち、y座標を-50変えることでジャンプしたようにbatterを動かせます。

f:id:yeah_boboi:20181223144011j:plain


もっとジャンプ感を出したければ下記を見てください。色々なジャンプの実現方法について書かれています。


https://ja.scratch-wiki.info/wiki/ジャンプする

 

 4.キャラクターを攻撃させよう

 キーボードのaを押したらbatterがバットを振ります。敵がバットがに当たったら敵のHPが10減るコードを書いてみましょう。

キーボードのaを押したらバットを振るコードは以下です。

f:id:yeah_boboi:20181223215226j:plain

 

次に敵のキャラクターを用意します。魔法使い(Wizard)を敵として採用しました。

f:id:yeah_boboi:20181223215758j:plain

WizardのHPを減らすコードは下記です。まずはWizardのHPを作ります。HPは変数を使うので、変数を作るボタンを押してください。

f:id:yeah_boboi:20181223215500j:plain

変数を作るボタンを押したら下記の画面が出てくるので、変数に名前をつけてください。またこの変数の使用をWizardのスプライトに限定するため、「このスプライトのみ」を選択してください。

f:id:yeah_boboi:20181223215710j:plain

すると、画面に変数が表示されます。

f:id:yeah_boboi:20181223215758j:plain

HPに初期値として50を設定します。またWizardの初期化処理として、HPを表示する、コスチュームをwizard-aにするを設定しましょう。

f:id:yeah_boboi:20181227112852j:plain

攻撃を受けたら、HPを減らし、また攻撃が受けたことがわかるようなアクションも加えてみましょう。

 

f:id:yeah_boboi:20181223220539j:plain

複製を押すと、同じコスチュームが複製元の真下に作られます。この複製したコスチュームの色を変えて、攻撃を受けた感じを出してみましょう。

f:id:yeah_boboi:20181223220813j:plain

バットに当たったらHPが減り、かつコスチュームが変わるコードは下記です。少し後ろに移動させると、さらにバットに当たった感じが出ます。

f:id:yeah_boboi:20181223222117j:plain

XX色に触れたの色をバットに色に合わせるため、「〇色に触れた」ブロックの色の部分をクリックしてください。色を直接選択して色を合わせることができますが、今回は簡単に色を合わせるため、スポイトボタンを押してください。

f:id:yeah_boboi:20181223222239j:plain

拡大メガネが表示されるのでバットに合わせてクリックすると、バットの色を吸い上げてくれます。

f:id:yeah_boboi:20181223222514j:plain

batterがWizardを攻撃するとWizardの攻撃を受けた処理が動きます。

f:id:yeah_boboi:20181227113342j:plain

 

 

scratch 大乱闘スマッシュブラザーズ風ゲーム パート2に続きます。
次はWizardのコードを書きましょう 

プログラミングサークルについて

CoderDojo瑞穂という団体名でプログラミングのボランティアサークルをやっています。scratch(スクラッチ)やプログラミングの体験ができる他、Viscuit、テキストプログラミングも体験ができます。非営利団体のため、特に参加料を徴収しておりません。

f:id:yeah_boboi:20181229191312p:plain

f:id:yeah_boboi:20181229191334p:plain

 

月2回開催しているので、良かったら遊びに来てください!! 申し込み等、詳細は下記からご確認ください。

 

coderdojo-mizuho.connpass.com

 

instagram

Dojoの写真やニンジャのビスケット作品を上げてます。

www.instagram.com

 

facebook

インスタの写真+ニンジャのスクラッチ作品やネットで見つけたスクラッチ作品の紹介やってます。

www.facebook.com

https://www.facebook.com/CoderDojo%E7%91%9E%E7%A9%82-296874087614515/