無料の子ども向けプログラミングツール「ビスケット(Viscuit)」の基本的な使い方と、自分で描いた絵を動かす方法、簡単なシューティングゲーム作りをご紹介します。
ビスケットとは?
ビスケットは、文字を一切使わずに楽しめるプログラミングツール。自分で描いた絵に動きをつけたり、簡単なゲームを作ったりできます。
アプリを入手する
ビスケットは、iOSおよびAndroidアプリが提供されています。スマホから使うことも可能ですが、ある程度の画面サイズを確保できたほうが遊びやすいので、タブレットから利用するのがおすすめです。
また、PCから使いたい場合にはブラウザ版も提供されています。
遊ぶ場所を開く
アプリを起動して最初に表示される画面で「じゆうにつくる」を選択した後、作品の背景に使いたい色を選択します。続いて鉛筆ボタンをタップすれば制作画面に移動します。
4種類の背景色が用意されているので、作りたいものに合わせて選ぼう。
自分で描いた絵を動かす
まずは自分で描いた絵を動かしてみましょう。ボタンやパーツの役目さえ覚えてしまえば、直感的な操作で制作を進めることができます。
絵を前進させる
制作画面右列には、各種の操作を行うボタンやプログラムを作るための「メガネ」とよばれるパーツが用意されています。
中央の濃いグレーの部分は、メガネを並べるエリア。左右のメガネの中に描いた絵を配置することでプログラムを作っていきます。
また、左上のスペースでは、作ったプログラムの動きを確認することができます。
この画面の使い方さえ覚えれば、簡単にプログラミングができる。
制作画面の鉛筆アイコンを押すとお絵かき画面が現れるので、ここにプログラムで動かしたい絵を描きます。
ペンの色や太さ、透明度は右側のツールから変更が可能。描き間違えたときは、右下の「戻る」ボタンで操作を取り消すことができます。絵を描き終わったら「〇」ボタンで制作画面に戻りましょう。
あまり細かい描画はできないので、シンプルな絵がおすすめ。
制作画面に戻ると、右列に描いた絵が表示されているはずです。まず、メガネを中央のエリアにドラッグ。続いて、メガネの左側に絵を配置します。
中央のエリアにメガネを出し、そこに絵を並べていく。
さらに、メガネの右側にも絵を配置します。このときの位置によって、絵の動きが決まります。簡単にいうと「ビフォーアフター」のようなイメージです。
たとえば、魚を右方向に前進させたい場合は、メガネ左側で魚を置いた位置より右にずらして、メガネ右側の魚を配置します。
メガネの下に拡大画像が表示されるので、微調整がしやすい。
最後に、右列の絵を左上のステージにドラッグ&ドロップすれば、メガネで指定したとおりに絵が動きます。
メガネで指定したとおり、魚が右から左に前進する。
さまざまな動きをつける
前進などの位置の移動以外にも、さまざまな動きをつけることができます。たとえば、一部を変えた2種類の絵を用意して交互に表示すれば、パラパラ漫画のように動きをつけることが可能です。
お絵かき画面を再度表示すると、画面右側にこれまでに描いた絵が表示されているはずです。下絵として使いたいものをタップすると描画エリアに薄く絵が表示され、なぞって描くことで形やサイズを合わせやすくなります。今回は、魚の口とヒレの部分を変えた絵を描きました。
前回使ったペンの一覧も表示されるので、2枚目の絵を描きやすい。
先ほどのメガネ右側の魚を、右列のエリアにドラッグ&ドロップして削除した後、2つめの絵をメガネ右側に入れました。
さらに、新しいメガネを出し、左に2つ目の口を開けた魚を、右に最初の魚を配置します。これで、魚が口をパクパクさせてヒレを動かしながら前進する動きを作ることができます。
繰り返しの動きを作る場合は2つのメガネを使う。ステージには最初の絵を配置しよう。
同じ要領で、さまざまな絵を描いて動きをつけてステージに配置していけば、賑やかな画面をつくることが可能です。
たとえば、左右のメガネで絵の配置を上下にずらせば、上方向や下方向に移動させることができます。
また、ゆらゆら動く海藻のように、絵の位置は移動させずに動きをつけたい場合は、左右のメガネの絵を置く位置を変えずに2枚の絵を交互に表示させましょう。
タコと海藻を追加。ステージには同じ絵を複数配置することもできる
完成した作品を大きな画面で見たいときは、右列下から2番目の「遊ぶ」ボタンをタップします。
作品を保存する
完成したプログラムは、右上の「保存」ボタンでビスケットのサーバー上に保存することが可能です。ただし、これは全ユーザー共同の作品置き場。他のユーザーも閲覧・編集が可能な状態で保存されます。
保存の操作を行うと、制作画面が閉じて最初の画面に戻る。
保存した作品を見たり再編集したりするときは、最初の画面で背景色を選んだ後、右側のアイコンをタップ。保存日時ごとにフォルダが表示されるので、自分が保存した日時のフォルダから作品を探します。
自分が使った背景色を選んだ後、保存日時から作品を探す。
なお、作品はずっと保存しておけるわけではなく、一定期間が経過すると消えてしまいます。気に入った作品は、端末の画面収録機能などを使って動画として残しておくのがよさそうです。
シューティングゲームも自作できる!
右列のパーツ一覧にある指のボタンでは、絵をタップしたときの動きを指定することができます。このボタンと複数のメガネを使えば、より複雑なプログラムを作ることが可能です。今回はシューティングゲーム作りに挑戦してみました。
指ボタンと宇宙船、弾丸の絵を使い、「宇宙船の左右をタップすると、左右に移動する」「宇宙船の上をタップすると、弾丸を発射する」という動きを作りました。
宇宙船と弾丸、敵、消滅するときの火花の絵を用意。
さらに、画面上部には動き回る敵を配置。敵に弾丸が当たると、火花が散って消滅するようにしました。
複数のメガネを使って、ゲームに必要な動きをつけていく。
なお、指ボタンの動作は画面左側のステージでは反映されないので、「遊ぶ」ボタンで全画面表示にして遊びましょう。
まとめ
ビスケットは、小さな子どもでも取り組むことのできるプログラミングツール。自分で描いた絵を動かしたり、簡単なゲームを作ったりできます。
作り方はとてもシンプルですが、思い通りの動きを作るためには意外と頭を使います。大人のほうが思いがけずハマってしまうケースも……。おうち時間に、親子でチャレンジしてみてはいかがでしょうか?
文◆酒井麻里子(ITライター)
スマホ、PC、ガジェットなどのデジタル製品レビューや、アプリ・サービスの解説記事などを執筆。Twitter(@sakaicat)では、デジタル関連の気になる話題や、ちょっと役立つ小ネタを発信。
