掲載数No.1プログラミング教室・ロボット教室検索サイト

ありがとう!5周年

対戦型ゲームをつくってみよう~ホッケーゲーム~

株式会社しくみデザイン開発のビジュアルプログラミングアプリ「Springin’(スプリンギン)」

難しいプログラミング言語を覚えることなく、直感的な操作で”絵日記のように”取り組めるのが特長です。

この連載では、しくみデザイン代表・中村俊介(なかむら・しゅんすけ)さんが自ら「Springin'」の使い方をレクチャー!

毎回ひとつずつ機能を紹介しながら、作品作りを応援します!

(他の記事もCHECK!連載のまとめページへはこちら↓)

はじめに

Springin’は作ったアイテムに属性をつけることで、簡単にゲームをつくることができます。ゲームといっても、シューティングゲーム・もぐらたたき・迷路など、作れるゲームは様々。アイデアを膨らませていけば、世界に一つだけの新しいゲームもつくれちゃいますよ。

さて、Springin’では4月23日からゲームづくりのコンテストを開催しました。協賛してくださったのはパソコン専門店ツクモさん。パソコンや周辺機器の販売でおなじみですね。


応募されたワークの数は、なんと274!!!!

Springin’が開催したコンテストで、過去最高の応募数となり、たくさんの人たちがゲームづくりを楽しんでくれた2週間でした。

ということで、今回はゲームのつくり方。対戦型の「ホッケーゲーム」をつくってみることにしましょう。

ホッケーゲームのつくり方

まずはどんなものをつくるのか、完成したワークを見てみましょう。


ゲームセンターなどで見るお馴染みのゲームですね。早速つくってみましょう。

Springin’の始め方は覚えていますか?忘れちゃった人は、以前の講座「Springin'ってなに?~はじめてみよう」を見てみてください。


まずはアイテムづくり。つくり方は前回までと同じです。開発画面左上の+ボタンをタッチして始めましょう。タッチしたら、パック、壁、スマッシャーの3つをつくります。


これでアイテムは揃いました。今回はこの3つだけでゲームができるんです。
それではプログラミング開始です!!開発画面の真ん中にパックを置きましょう。


次は壁。まずは一つだけ、左の方に置きます。大きさを変えたいときは、2本の指でピンチアウトします。画面いっぱいに大きく広げましょう。


はい、これで壁とパックが完成です。一度プレイボタンで確認してみましょう。


パックは指で自由に動かせますよね。壁にパックをぶつけてみてください。
……壁が画面から消えて、なくなっちゃいました?


そりゃそうです。壁が動かないように指示してないんですから。

壁が動かないようにするためには……、そう「ピン」で止めてあげれば良かったですね。やり方を忘れちゃった人は「マルの大冒険①」を見直してみてください。



これで壁が動かなくなりました。でも「ちょっと物足りない」と感じませんでしたか?

それは、エアホッケーのように大きく跳ね返らないからです。

大きく跳ね返るとパックのスピードが速くなって楽しくなります。ゲームをつくるときは、どうすれば楽しくなるか考えることも大切ですね。

Springin’は、強く跳ね返る属性を設定できます。それが「高反発」。壁にボールが跳ね返ったようなマークです。「ピン」を設定したときと同じ手順で「高反発」をタッチ。


これでしっかり跳ね返るようになりました。プレイボタンで実行し、パックが跳ね返るのを確認してみましょう。

コピーを使って壁を増やそう

左側の壁はこれで完成です。次は右にも同じような壁を配置します。

でも、アイテムリストから壁を置いて、またピンで止めて…ってするのは大変!!そんなときは、今の画面にあるものをコピーしちゃいましょう。

コピーしたい左側の壁をタッチ。一覧の中に、丸が二つ重なったような絵柄の「コピー」のアイコンがあります。これをタッチすると、壁がコピーされるんです!


あれ?どこにコピーされたの?って思いました?

実は壁の上に重ねて置かれています。これを右に動かせば、同じ設定の壁を増やしていくことができます。


下にも壁を置きましょう。もう一度壁をタッチしてコピー。二本の指で大きさを調節し、回して下に動かします。

メニューバーがあって見えにくいと思うかもしれませんが、大丈夫。
メニューバーは移動させることができるんです。左側をタッチしたまま動かすとスムーズに作業できます。

ゴールをつくって遊んでみよう

上下とも、ゴールとなる真ん中を開けて配置しますが、大事なのは上と下のゴールのすき間が同じになること。画面上のマス目を見ながら置くと正確に配置できますね。


あとはスマッシャーを上と下に2つずつ配置すればゲームの完成。遊びやすいように大きさを調整することもできます。
真ん中にあるパックを弾いてゲームを行いましょう。

楽しくなるための工夫を

これで、十分ゲームとして楽しむことができるんですが、せっかくなら楽しくなるためのもう一工夫を。それは勝ち負けの画面です。「○○の勝ち!」と画面上に出るともっと楽しくなりますよね。
勝ち負けのシーンづくりやそのプログラミングをしていきましょう。

チームを明確に

まずは、チームが分かるようにします。左上の+ボタンをタッチし、AとBのアイテムをそれぞれつくります。できたら、上と下におきましょう(Bチームはアイテムを回転させて文字の上下を調整するとプレイヤーに合わせられますね)


次に「Aの勝ち」「Bの勝ち」のアイテムをつくります。また、何度も遊べるように「もう一度」のアイテムもつくります。

「○○の勝ち!」のページづくり

アイテムができたら、シーンづくりとシーンチェンジ。これについては「絵本をつくってみよう」の講座でも取り上げましたので簡単に説明します。

右の黒い四角の上の方にある+を押すと新しいシーンをつくることができます。
上から2番目に表れる白いシーンをタッチし、真ん中に「Aの勝ち」、下に「もう一度」を置きましょう。


「もう一度」のアイテムをタッチして、シーンチェンジを選びます。どのページにチェンジするかを設定する画面になりますので、はじめに作ったページをチェック。


続いて新しいシーンをつくり、同じ要領で「Bの勝ち」のシーンもつくりましょう。

パックが入ったらページが変わるように

そうしたら次は「ゴールに入ったことを判定するアイテム」をつくります。ここでは白い棒を使います。


白いアイテムを置くのは、上側のゴールの中。白なのでプレイすると見えませんが、作成画面では青い点線で囲まれています。


このアイテムをタッチしてシーンチェンジを設定。
上のゴールに入ればAの勝ちなので、「Aの勝ち」のシーンを選びます。


同じように、下側のゴールに白いアイテムを置いてシーンチェンジ。「Bの勝ち」を設定しましょう。


これで完成?
違いますよね。これだとパックが白いアイテムに当たっても何も起こりません。

白いアイテムが「どんな時にシーンチェンジすれば良いか」分かってないからです。

そこで、白いアイテムに「パックが白いアイテムに当たったらシーンチェンジだよ」というようにプログラミングしましょう。

パックをタッチすると表れるアイコンの中から、何かと何かがぶつかったようなイラストの「接触」をタッチ。この「接触」は、手の代わりになってタッチしてあげますよという性格を持たせるアイコンなんです。

そうすると「何に接触したとき?」と聞いてきますので、上と下に置いた白いアイテム選びましょう。


これで完成。どちらが勝ったかが表示されるホッケーゲームになりました。
  
ご家族やお友達と遊んでみてはいかがでしょうか?

世界のマーケットから

世界中のクリエイターが出品している作品を、僕やしくみデザインのスタッフがピックアップして紹介するコーナーです。

今回ピックアップするのはもちろん、対戦型のゲームワーク!!
「プログラミングコンテスト supported by ツクモ」で入賞した作品を紹介します。

「𝑺𝑶𝑪𝑪𝑬𝑹~ゴールに繋げ~」

ボールをゴールに入れたら勝ち。ピョンピョン跳ねるキャラクターが可愛いですね。今回のコンテスト最優秀作品です。
  

「玉球(たまきゅう)」

キャラクターを動かし、球を相手に3回当てれば勝ち。レベルが変えられる工夫が面白い!
  

「2人で対戦!冒険ゲーム2」

障害物を越えて先にゴールした方が勝ち。自分でステージをつくることもできます。
  

ぜひダウンロードして遊んでみてください。

次回の連載をお楽しみに!

中村さんの「Springin'」講座はこれから続々掲載予定!完全無料・絵日記感覚で始められるビジュアルプログラミングアプリ「Springin'」での作品作りに、ぜひチャレンジしてみてくださいね。

(ダウンロードはこちら)
新たなスキル「プログラミング教育」を先取りしませんか? 今後のプログラミング教育流れ図
今から、先取りしませんか?
コエテコ経由の体験申し込みでアマギフ2000円分プレゼント!
お近くの教室を探す →

あわせて読みたいガイド

ガイドを読めばプログラミング教育がスッキリわかる!
プログラミングまるわかりガイドを読む

RECOMMEND

この記事を読んだ方へおすすめ