ビスケット（Viscuit）は、自分で描いた絵を使ってプログラミングできる、とても楽しいビジュアルプログラミング言語です。
文字でコードを書かなくても、絵を描いて、動きをつけることができます。
ビスケットで絵を動かすときに大事なのが、メガネです。
最初は「メガネって何？」と思うかもしれませんが、使ってみると仕組みはとてもシンプルです。
この記事では、ビスケットのメガネを使って、絵をうごかす基本の作り方を紹介します。
ビスケットのメガネとは
ビスケットのメガネは、絵に動きや変化をつけるための道具です。
メガネには、左と右に丸い場所があります。
ざっくり言うと、こんなイメージです。
- 左の丸：今の状態
- 右の丸：次にどうなってほしいか
たとえば、左の丸に入れた絵より、右の丸に入れた絵を少し右にずらすと、ステージに置いた絵が右へ動きます。
右にずらせば右へ。
上にずらせば上へ。
下にずらせば下へ。
この「少しずらす」という考え方が、ビスケットのメガネの基本です。
今回作るもの
今回は、かんたんな絵を描いて、その絵を横に動かしてみます。
絵はなんでも大丈夫です。
たとえば、
- 魚
- 星
- 車
- うさぎ
- ボール
など、動いたら楽しそうなものがおすすめです。
この記事では、例として「魚」を動かすイメージで説明します。
ここからは、実際に魚の絵を描いて、メガネを使って右に動かすところまで作ってみます。
ビスケットでうごく絵を作る手順
1. ビスケットを開く
まず、ビスケットを開きます。
画面の表示は、使っている端末やビスケットのバージョンによって少し違うことがあります。
でも、基本の流れはだいたい同じです。
ビスケットを開いたら、ひとりで作品を作れる画面に進みます。
はじめて使う場合は、細かい設定は気にしなくて大丈夫です。
まずは、絵を描いて動かすところまで試してみます。
2. 動かしたい絵を描く
制作画面で、絵を描くボタンを押します。
お絵かき画面が開いたら、好きな絵を描きます。
今回は、魚のような絵を描いてみます。
きれいに描けなくても大丈夫です。
ビスケットは、上手な絵を描くことよりも、「自分で描いた絵が動く楽しさ」を感じられるところが魅力です。
描き終わったら、完了ボタンを押して制作画面に戻ります。
3. 絵をステージに置く
絵を描くと、画面の下の方に描いた絵が表示されます。
その絵をステージに置きます。
ステージは、実際に絵が動く場所です。
まずは、魚をステージの真ん中あたりに置いてみます。
4. メガネを置く
次に、メガネを使います。
メガネのアイコンを、メガネ置き場に置きます。
メガネを置くと、左と右に丸い場所がある形になります。
ここに、さっき描いた魚の絵を入れていきます。
5. メガネの左と右に絵を入れる
まず、メガネの左の丸に魚を入れます。
次に、メガネの右の丸にも同じ魚を入れます。
このとき、右の丸に入れた魚を、左の丸に入れた魚よりも少し右にずらします。
これで、
「この魚を、少し右に動かしてね」
という命令になります。
ステージに置いた魚が、右に動き出したら成功です。
メガネで絵が動くしくみ
右に動く理由
メガネの左側と右側を比べると、右側の魚の位置が少し右にずれています。
ビスケットは、この違いを見て、
「魚を右に少し動かす」
と判断します。
そして、その動きがくり返されるので、魚がどんどん右に進んでいきます。
少しだけずらすと、ゆっくり動きます。
大きくずらすと、速く動きます。
動きが速すぎると感じたら、メガネの右側の魚を、左側の魚に近づけるとゆっくりになります。
上・下・左にも動かせる
メガネの右側の絵をどこに置くかで、動く方向が変わります。
| 動かしたい方向 | メガネの右側の絵 |
|---|---|
| 右に動かす | 左側の絵より右にずらす |
| 左に動かす | 左側の絵より左にずらす |
| 上に動かす | 左側の絵より上にずらす |
| 下に動かす | 左側の絵より下にずらす |
| ななめに動かす | ななめ方向にずらす |
たとえば、魚を左に動かしたいときは、右の丸に入れた魚を少し左へずらします。
上に動かしたいときは、右の丸に入れた魚を少し上へずらします。
メガネの中で、どれくらいずらすかを変えるだけで、動き方が変わります。
絵をゆらゆら動かすこともできる
メガネを使うと、まっすぐ動かすだけでなく、ゆらゆらした動きも作れます。
たとえば、魚を少し上に動かすメガネと、少し下に動かすメガネを作ると、魚が上下にゆらゆらするような動きになります。
最初から複雑に作る必要はありません。
まずは、
- 右に動かす
- 左に動かす
- 上に動かす
- 下に動かす
この4つを試してみるだけでも、かなり楽しいです。
うまく動かないときに見るところ
絵がうまく動かないときは、次のところを見てみてください。
ステージに絵が置かれているか
メガネを作っても、ステージに絵が置かれていないと動きません。
まずは、動かしたい絵がステージに置かれているか見てみます。
メガネの左側に同じ絵が入っているか
メガネは、左側に入っている絵を探して動かします。
ステージに置いた絵と、メガネの左側に入れた絵が違っていると、思ったように動かないことがあります。
右側の絵が少しずれているか
左側と右側の絵がまったく同じ位置にあると、絵は動きません。
動かしたい方向に、右側の絵を少しだけずらします。
メガネが赤くなっていないか
初心者向けの画面では、メガネの左と右に入れる絵の数が合っていないと、メガネが赤くなることがあります。
メガネが赤くなっているときは、左と右に入れた絵の数が同じになっているか見てみてください。
まずは、左に1つ、右に1つ、同じ絵を入れる形から始めるとわかりやすいです。
速すぎるときは、ずらし方を小さくする
絵がびゅーんと速く動きすぎるときは、メガネの右側の絵をずらしすぎているかもしれません。
右側の絵を、左側の絵に少し近づけると、動きがゆっくりになります。
逆に、もっと速く動かしたいときは、右側の絵を大きくずらします。
メガネに慣れるとゲームも作れる
メガネの使い方に慣れてくると、動く絵だけでなく、簡単なゲームも作れるようになります。
たとえば、
- タッチすると絵が変わる
- キャラクターが逃げる
- アイテムが落ちてくる
- 当たったら消える
といった動きも作れます。
まずは、今回のように「絵を動かす」だけで十分です。
自分で描いた絵が動くと、それだけでかなり楽しいです。
次の記事では、ビスケットで簡単なタッチゲームを作る方法も紹介します。
作った作品を残したいとき
ビスケットで作った作品は、あとで見返したくなることがあります。
作品をパソコンに保存したり、動いている様子を録画したりしたい場合は、こちらの記事で紹介しています。
まとめ
ビスケットのメガネは、絵に動きや変化をつけるための大事な道具です。
難しそうに見えるかもしれませんが、基本はとてもシンプルです。
メガネの左側に今の絵を入れて、右側に少しずらした絵を入れる。
これだけで、絵が動き出します。
右にずらせば右へ。
上にずらせば上へ。
大きくずらせば速く。
少しだけずらせばゆっくり。
この仕組みがわかると、ビスケットでできることがぐっと広がります。
まずは好きな絵を描いて、少しずつ動かして遊んでみてください。