ビスケット（Viscuit）は、自分で描いた絵を使って、動く作品や簡単なゲームを作れるビジュアルプログラミング言語です。
前回の記事では、メガネを使って絵を動かす方法を紹介しました。
今回は、ビスケットでタッチすると変化する簡単なゲームを作ってみます。
文字でコードを書かなくても、メガネと指マークを使うだけで、タッチゲームのような動きを作れます。
今回作るタッチゲーム
今回は、ステージにいる魚をタッチすると、魚がキラキラに変わるゲームを作ります。
とてもシンプルですが、
- 魚を描く
- キラキラの絵を描く
- 魚をステージに置く
- メガネに魚と指マークを入れる
- タッチするとキラキラに変わる
という流れで、ビスケットらしいゲームの仕組みを体験できます。
タッチゲームの作り方
1. ビスケットを開く
まず、ビスケットを開きます。
画面の表示は、使っている端末やビスケットのバージョンによって少し違うことがあります。
でも、基本の流れは同じです。
ひとりで作品を作れる画面に進み、絵を描いたり、メガネを置いたりできる状態にします。
2. タッチする絵を描く
はじめに、タッチする絵を描きます。
今回は、魚の絵を描いてみます。
魚以外でも大丈夫です。
たとえば、
- りんご
- 星
- 風船
- うさぎ
- たまご
など、タッチしたら変化しそうな絵なら何でも使えます。
きれいに描けなくても大丈夫です。
ビスケットは、自分で描いた絵を動かしたり、変化させたりできるところが楽しいので、まずは気軽に描いてみます。
3. タッチした後の絵を描く
次に、魚をタッチした後に表示する絵を描きます。
今回は、魚がキラキラに変わるようにしたいので、星やキラキラの絵を描きます。
魚が消えたように見せたい場合は、魚の代わりに小さな星や泡を描くと、タッチした感じがわかりやすくなります。
4. 魚をステージに置く
魚の絵ができたら、ステージに置きます。
ステージは、実際に作品を動かしたり、遊んだりする場所です。
まずは、魚を1匹だけ置いてみます。
慣れてきたら、魚を何匹か置くと、タッチゲームらしくなります。
最初は1匹だけで試すと、仕組みがわかりやすいです。
5. メガネを置く
次に、メガネを置きます。
メガネは、ビスケットで絵の動きや変化を作るための道具です。
今回は、
「魚をタッチしたら、キラキラに変わる」
という命令を作ります。
6. メガネの左側に魚を入れる
メガネの左側には、「今の状態」を入れます。
今回は、タッチする前の魚を入れます。
メガネの左側に、魚の絵を入れてください。
この左側に入れた魚が、ステージの中から探されます。
7. 魚に指マークを重ねる
ここが、タッチゲームで大事なところです。
メガネの左側に入れた魚に、指マークを重ねます。
指マークは、「さわると」「タッチすると」という意味の命令です。
魚に指マークを重ねることで、
「この魚をタッチしたとき」
という条件を作れます。
指マークをステージに置くのではなく、メガネの左側に入れた魚に重ねるのがポイントです。
8. メガネの右側にキラキラを入れる
メガネの右側には、「次にどうなってほしいか」を入れます。
今回は、魚をタッチしたらキラキラに変わってほしいので、右側にキラキラの絵を入れます。
これで、
「魚をタッチしたら、キラキラに変わる」
という命令になります。
9. 遊ぶ画面でタッチしてみる
メガネができたら、遊ぶ画面に切り替えます。
制作画面のままでは、タッチの命令が思ったように動かないことがあります。
遊ぶ画面に切り替えてから、ステージに置いた魚をタッチしてみます。
魚がキラキラに変わったら成功です。
魚を増やすとゲームらしくなる
1匹の魚でうまく動いたら、ステージに魚を増やしてみます。
魚を何匹か置くと、タッチして遊ぶゲームらしくなります。
たとえば、
- 魚を見つけてタッチする
- タッチするとキラキラに変わる
- 全部キラキラにできたらクリア
という遊び方ができます。
点数やタイマーを作らなくても、「タッチしたら変わる」だけで、簡単なゲームになります。
タッチしたら消えるようにしたいとき
タッチした魚を、キラキラではなく消したように見せたい場合は、右側に小さな泡や背景に近い絵を入れる方法もあります。
ただ、完全に消えるだけだと、タッチできたかどうかがわかりにくいことがあります。
初心者向けには、まずはキラキラや星に変える方がわかりやすいです。
もっと楽しくする工夫
タッチゲームに慣れてきたら、少し工夫してみます。
魚の大きさを変える
大きい魚と小さい魚を作ると、見た目が楽しくなります。
小さい魚は少しタッチしにくくなるので、ゲームっぽさも出ます。
魚以外の絵も入れる
魚だけでなく、星や貝、クラゲなどを入れても楽しいです。
「魚だけタッチする」「星はタッチしない」など、自分でルールを考えることもできます。
キラキラの絵を変える
タッチした後の絵を変えるだけでも、雰囲気が変わります。
たとえば、
- 星
- 花
- 泡
- にっこりマーク
- 宝石
などに変えてみると、作品の印象が変わります。
うまく動かないときに見るところ
タッチしても魚が変わらないときは、次のところを見てみてください。
遊ぶ画面に切り替えているか
指マークを使った命令は、遊ぶ画面でタッチして確認します。
制作画面のままタッチしても、思ったように動かないことがあります。
まずは、遊ぶ画面に切り替えているか確認してください。
指マークがメガネの左側に入っているか
指マークは、メガネの左側に入れた絵に重ねて使います。
ステージの上に置くのではなく、メガネの中の魚に重ねます。
左側に魚、右側にキラキラが入っているか
メガネの左側には、タッチする前の魚を入れます。
メガネの右側には、タッチした後のキラキラを入れます。
左右が逆になっていると、思ったように動かないことがあります。
ステージに魚が置かれているか
メガネを作っても、ステージに魚が置かれていないとタッチできません。
まずは、ステージに魚があるか確認します。
似ているけれど別の絵になっていないか
魚を描き直した場合、見た目が似ていても、ビスケットでは別の絵として扱われることがあります。
ステージに置いた魚と、メガネの左側に入れた魚が同じものか確認してみてください。
メガネの基本がわかると作れるものが増える
今回のタッチゲームでは、
「魚をタッチしたら、キラキラに変わる」
という仕組みを作りました。
これは、とてもシンプルですが、ビスケットのゲーム作りの基本になります。
この仕組みがわかると、
- タッチすると花が咲く
- 卵をタッチするとひよこが出る
- 星をタッチすると消える
- キャラクターをタッチすると表情が変わる
といった作品も作れるようになります。
まずは、絵を変えるだけでも十分楽しいです。
作った作品を残したいとき
作った作品をあとで見返したいときは、保存や録画をしておくと便利です。
ビスケットの作品をパソコンに保存したい場合は、こちらの記事で紹介しています。
まとめ
ビスケットでは、メガネと指マークを使うと、タッチしたときに絵が変わるゲームを作れます。
今回作ったのは、
「魚をタッチしたら、キラキラに変わる」
というシンプルなタッチゲームです。
作り方の流れは、次のとおりです。
- タッチする絵を描く
- タッチした後の絵を描く
- 魚をステージに置く
- メガネの左側に魚を入れる
- 魚に指マークを重ねる
- メガネの右側にキラキラを入れる
- 遊ぶ画面でタッチして確認する
難しいコードを書かなくても、自分で描いた絵をタッチして変化させることができます。
まずは1匹の魚から、気軽にタッチゲームを作ってみてください。