JJ SHIMA Blog

二児のパパがゲーム開発アレコレを書いているブログ。Unity / UE / Scratch / プログラミングゼミ / プログラミング教育

[Scratch] サッカーゲーム(PK戦)を作ろう!-じゅんび(1/6) -

スクラッチ

サッカーゲームPK戦を作ろう 準備編(1/6)

初回はスプライトや背景素材の準備します。

(解説まとめはこちら) www.papa-sensei.com

[目次]


スプライト一覧

今回のサッカーゲームで使う素材は以下のものです。 まずは試合画面で使う、スプライトを準備していきましょう!

素材名 画像 用途
背景
f:id:papa-sensei:20200226193528p:plain
サッカーゴール背景
選手
f:id:papa-sensei:20200226193548p:plain
シュートする人
審判
f:id:papa-sensei:20200226193605p:plain
結果を喋る主審
キーパー
f:id:papa-sensei:20200226193617p:plain
ゴールキーパー
ボール
f:id:papa-sensei:20200226193629p:plain
シュートするボール
方向矢印
f:id:papa-sensei:20200226193729p:plain
左・真ん中・右 3種類
方向矢印下地
f:id:papa-sensei:20200226193740p:plain
シュート、キーパーを操作しろ!
結果文言
f:id:papa-sensei:20200226193804p:plain
勝ち・負け2種類
(結果画面作るときに一緒に作ります)
タイトル文言
f:id:papa-sensei:20200226193816p:plain
タイトル画面用
(タイトル画面作るときに作ります)
先攻・後攻選択画面下地
f:id:papa-sensei:20200226193827p:plain
先攻・後攻選んでねの画面
(選択画面作るときに作ります)

背景を変える

背景をサッカーゴールの絵に変えます。 「背景を選ぶ」を選択して、スポーツカテゴリを開きましょう。 今回はPK戦なので、正面からサッカーゴールが見える「Soccer」を使います。 f:id:papa-sensei:20200227094806p:plain

 

選手を作成する

次にシュートを打つ選手のスプライトを作成します。
選手は先攻・後攻でユニフォームを分けたいので、2種類の絵を使います。
「スプライトを選ぶ」からスプライトを作成し、スポーツカテゴリの中の
男の子「Ben」と、女の子「Jordyn」がサッカー選手として使えそうです。
f:id:papa-sensei:20200227095352p:plain

まず、Benを選んでスプライトを作成します。
今回は「選手」という1つのスプライトの中で、コスチュームを切り替えて先攻・後攻を作るので、
Benで作ったコスチュームの中に、女の子の「Jordyn」も追加してあげます。

コスチュームで使うのは、ボールを蹴る前のポーズ(Ben-a)と、蹴るポーズ(Ben-b)だけです。
同じように、女の子の蹴る前のポーズ「Jordyn-a」と蹴るポーズ「Jordyn-b」を追加しましょう。

f:id:papa-sensei:20200227100115p:plainf:id:papa-sensei:20200227100127p:plain

4つのコスチュームが登録されていれば選手スプライトの作成は終わりです。 登録するときはわかりやすいように、「先攻」「先攻シュート」など、コスチュームに名前をつけておきましょう!
f:id:papa-sensei:20200227100320p:plain

 

レフェリー・ボール・キーパーを作成する

次に、レフェリー(審判)、ボール、キーパーのスプライト作成です。
選手と同様に、「スプライトを選ぶ」からそれぞれ作成していきます。
この3つともスポーツカテゴリの中にあるスプライトを使います。

名前 スプライト名
レフェリー Referee
ボール Soccer Ball
キーパー Goalie

f:id:papa-sensei:20200227100905p:plain

それぞれ選んでスプライトを作成すれば完了です!

 

方向矢印を作成する

シュートや、キーパーが飛ぶ方向を選ぶための矢印スプライトです。
右・正面・左 の3つの方向のスプライトを作ります。
コスチュームにはArrow1を使います。
f:id:papa-sensei:20200227102144p:plain

まずは右方向の矢印から作成します。
Arrow1のコスチュームには、上下左右の4つのコスチュームが登録されているため、
使う方向のコスチュームだけ残し、他は消してしまいましょう。

f:id:papa-sensei:20200227102606p:plainf:id:papa-sensei:20200227102614p:plain

これで右方向の矢印は完成です。
正面・左方向の矢印も同様に、Arrow1でスプライトを作成し、必要な方向のコスチュームだけ残すだけです。
f:id:papa-sensei:20200226193641p:plain

 

方向矢印の下地を作成する

最後に、方向の矢印を表示する際の下地部分です。
f:id:papa-sensei:20200227103236p:plain

シュートを打つときは「シュートを決めろ!」
キーパーを操作するときは「キーパーを操作しろ!」
と、それぞれ表示する文字を変えます。

下地はスプライトを「描く」から作成していきます。
f:id:papa-sensei:20200227105545p:plain

まずは四角形で下地を作ります。
大きさや色は自由ですが、画面下に表示するので、半分くらいのサイズが良いでしょう。 f:id:papa-sensei:20200227110305p:plain

次に、「シュートを決めろ!」の文字を追加します。
テキストツールを使い文字を入力しましょう!
シュートを決めろ!は、自分がシュートを打つときの表示にで使います。
f:id:papa-sensei:20200227111456p:plain

次にキーパー操作時の表示です。
今作成したコスチュームを選択して右クリック、
「複製」からコスチュームをコピーしましょう。 f:id:papa-sensei:20200227111616p:plain

下地の色や位置はそのままで、文字だけを「キーパーを操作しろ!」に変えましょう。 f:id:papa-sensei:20200227111713p:plain

これでキーパー操作時の下地もできました。

ここまでで試合で使うスプライトの準備は完了です!    f:id:papa-sensei:20200227111845p:plain

次回から、このスプライトにプログラムを追加していきます!