子どもプログラミング

Visucuit(ビスケット)講座 応用編- Visucuitで弾幕ゲームを作ろう

こんにちは。教育ヲタ母です。
昨日、新一年生の女の子とお話をしました。
 
私「明日の入学式は、どんなお洋服を着ていくの?」
女の子「えーっとね。白いワンピースと、黒い・・・うーんと・・・
    あ!黒いブラジャー!
私「・・・お、大人だね(汗)」
 
→後ほどもう一度確認したところ、黒いブレザーでした。
 

1. 新しくなったViscuitの「回転」

Viscuitの回転機能が新しく、使いやすくなりました!
 
▼以前の「回転」はこちら
http://i-learn.jp/article/3762
 
回転モードにして、回転させたい絵をタッチすると・・・このような表示になります。

 
黒丸を回転させたい方向へドラッグさせましょう。

 

2. Visucuitで弾幕ゲームを作ろう

さて、回転機能が新しくなったので回転をつかうものを作ってみたいですね。
今日は、Viscuitで弾幕ゲームを作ってみます。
 
この作品は
 ・ひとりでつくるで作ります。(みんなでつくるでは動作しません。)
 ・画面から出た絵が、再度画面内に戻ってこない設定(下図)

 
弾幕については以前、Scratchでご紹介しましたのでこちらの記事をどうぞ。
 
▼Scratchで弾幕を作ろう
http://i-learn.jp/article/3489
 

2-1. 弾とキャラの準備

弾幕にする弾(たま)とキャラの部品(絵)を準備します。
このとき「弾」は矢印にしてください。
 
■弾を矢印で描く理由
Viscuitは絵を直接回転させるので、丸い「弾」だと弾がどっちを向いているかわからなくなるからです。まず方向がはっきりとわかる「矢印」を使うのがコツです。
 
このようなメガネをつくりましょう。

 
回転モードにして、矢印を回転させて下の図のようにします。

ほら!矢印だと「方向」が一目瞭然でしょ?
 

2-2. 弾の絵を書き換える

ですが、矢印だとちょっと雰囲気でませんのでメガネを作ったあとに、絵を書き換えます
書き換えるには、書き換えたい絵を長押しします。

 
お絵かきの画面に行きますので、絵を書き換えましょう。
最初に書いた矢印の絵を消したら、「弾」の絵を書きます。


 
書き換え終わったらいつものように、◯ボタンを押してメガネの画面にもどると・・・じゃじゃーん!

メガネの中の絵も書き換わっています。この「弾」の絵だと弾がどっちを向いているのか、方向がよくわかりませんがさっき矢印のときに方向を設定してあるので大丈夫!
 

2-3. 弾が前に進むメガネを作る

ここまでできたら、弾が前に進むメガネをつくりましょう。

 
この状態で、タッチ画面に行き動作確認をしましょう。結果はこちら。

 

2-4. 敵キャラなどを追加

最後に敵キャラを追加して、被弾したら爆発するメガネなどを作ったら完成です。

 
ステージ上にも敵キャラを配置。

 
完成したゲームはこんな感じです。

 

3. Visucuitで弾幕ゲームを作ろう まとめ

今回は弾幕ゲームをつくってみました。
今回のポイントは
「矢印の絵で先に方向を決めておく → 絵を書き換える」です。
 
さらに追加でアレンジするとしたら
 ・敵キャラの動きを複雑にする
 ・弾幕を発射するキャラを動かしてみる
など、動きをつけるのもいいですね。
 
また、弾幕のように四方八方に何かが広がっていくという部分を応用して、花火など別のアート作品も作れますよー。
 

今回の作品のリンクはこちらです。
https://develop.viscuit.com/env/view.html?control=play%3A00300015%3A3477%2F1-1%2F018.json%3A
※PCのみ

伴野悠佳 / YUKA TOMONO
この記事の著者伴野悠佳 / YUKA TOMONO
教育ヲタクの1児の母。自称ニコニコキッズクリエーター。東京理科大学大学院卒。元SE。小学生の頃から教育書を読んでいた教育ヲタク。大学では、電池の素材の性質について実験とコンピューターシミュレーションを比較する研究を行っていたことがきっかけでSEになる。出産&育休後、子ども向けプログラミング教室講師、子どもたちの考える力を育てるオンライン塾の講師。