【Viscuit】ビジュアルプログラミング言語でゲーム作ってみた

2022.11.25

2022.11.25

Fabeee社員ブログ

【Viscuit】ビジュアルプログラミング言語でゲーム作ってみた
 
みなさまこんにちは、○いかわと申します。
 
先日社員の方からブログ書いてください!と連絡が来たのとほぼ同時に、ビスケット(Viscuit)というプログラミング言語の話を耳にする機会があったという経緯から、Viscuitって聞いたことないし実際触りながらブログ書くかー!と筆を執りました。本記事ではViscuitについて自分自身も初めて触ったのでその勉強がてら書いていこうと思います、どうぞお付き合いください。

Viscuitとは?

Viscuit(ビスケット)というのは、2003年2月に原田康徳氏により当時在籍していたNTTの研究所で開発されたビジュアルプログラミング言語です。
ビジュアルプログラミング言語とは、従来のようにプログラムをテキストで記述する(以下:テキスト言語)のではなく、図形やイラストを組み合わせて記述することを指します。ビジュアルプログラミング言語だと他にはScratchも有名ではないのでしょうか。
テキスト言語のようにまず

  • キーボードでの操作を覚える必要がある
  • 英語が母語でないと英語を覚えるのがそもそも大変

というようなプログラムを作るまでのハードルをなくしたのがビジュアルプログラミング言語です。
実際このViscuitも対象年齢は4歳からとのことで、子供にもわかりやすく直感的な手法でプログラムを作っていく事ができます。
また、Viscuitは文字や数字で論理構造を作ったり考えたりするのではなく、自分で描いた絵を使ってプログラムを作れるのが大きな特徴です。この特徴についてはまた後でもう少し詳しく書いていきます。

環境構築

テキスト言語を扱うときのようなめんどうな環境構築はいっさい必要ありません。インターネットに繋がっていればスマホやタブレット、もちろんPCでも使用できます。つまりこのブログを読んでいるあなたも今すぐ使うことができます!

  • PCだったらViscuit公式HPの「ビスケットであそぶ」ボタンを押すだけ
  • スマホやタブレットだったらアプリケーション(無料)をダウンロードして起動するだけ

前述の通り自分で描いた絵を使ってプログラムを動かすのでタブレットのようなタッチスクリーン式の端末が一番遊びやすいかなと思っています。

どんなものか実際に触ってみる

以下はPC上のスクリーンショットです。タブレットやスマホだと若干レイアウトが変わります。


 
テキストでの説明はなく、シンプルな画面で、最小限のボタンとエリアで構成されています。
これだけだとどれが何かが伝わらないかもしれないので箇条書きで説明します。

  1. 「ステージ」と呼ばれるプログラムを置く画面
  2. 「メガネ」を置く場所
  3. 設定や保存ボタンなど

 
今回Viscuitでプログラムを動かすにあたって大事なのは☆マークをつけた「えんぴつ」「メガネ」マークです。これはのちほど説明します。
また、青の◇マークをつけたボタンは「ビスケットランド」と呼ばれ、プログラムの実行画面を見ることができます。

えんぴつとメガネって何?

えんぴつはプログラムを動かすための部品を描くことができるツールです。色や太さ、透明度のカスタマイズが可能です。
メガネはViscuitの最大の特徴といってもいいでしょう。
向かってレンズの左側が実行前(最初の状態)、右側が実行後、つまりプログラムにやってほしいことと捉えてください。
たとえばレンズの左側に

  • 絵を置いて指マークを左側に配置する
  • 右側のレンズには絵を左にドラッグさせた状態のものを置きます。

ここでの指マークは画面のタップやクリックのことを指します。
すると左にタップしたら絵も左に移動する、というプログラムを実行することができます。
 
下の絵は実際私がメガネを使って書いた(描いた)命令なのですが、オレンジのバーの左側をクリックするとバーも左側に移動する、という命令です。

上記のようにえんぴつでお絵かきをしてはメガネマークでやりたいことを設定する、という作業を続けます。

実際に作ってみる

今回は簡単なゲームとして「バーを左右に動かして跳ね返ってくるボールを打ち返すゲーム」を作ってみました。
完成したゲームはこんな感じです。

 

どんな命令を書いた≒メガネを作ったのかを説明していきます。

前提としてViscuitでは方眼紙モードという設定があって、そちらを設定しています。
方眼紙モードを使わなくてもゲームは作れるのですが、これを使うとマス目に沿って絵がキレイに動くのでメガネの判定がしやすくなるというメリットがあります。
 
次にパーツの説明です。
 

・ボール


 
上のゲーム実行画面で飛んでいる緑色の球体です。

  • 右斜め上に飛ぶボール
  • 左斜め上に飛ぶボール
  • 右斜め下に飛ぶボール
  • 左斜め下に飛ぶボール

の4つを用意しており、方眼紙上で斜めのマスに飛んでいく命令をメガネに書いています。
実際の命令です。

 

・壁


 
ただの壁ですが、これにも命令が仕込まれています。
壁にボールが接触したら「く」の字にボールが跳ね返るような命令を書きます。

  • 右斜め下から左の壁に当たったら右斜め上に飛ぶ
  • 左斜め上から右の壁に当たったら左斜め下に飛ぶ

…のようにパターン分けしてメガネをどんどん増やしていきます。
 

・オレンジのバー


 
ボールを打ち返すバーです。1*3マスのサイズで描かれていて、

  • 右端
  • 真ん中
  • 左端

にボールが接触したときの挙動を示すメガネと

  • 右端をタッチしたら右に移動する
  • 左端をタッチしたら左に移動する

挙動のメガネを作りました。ボールの接触パターンは壁と同じで「く」の字に跳ね返るようなメガネを作っていきます。
 

・炎

 
絵心なくて恐縮ですが、炎です。
炎にボールが接触するとゲームが終了する≒ボールが消えるメガネを作りました。

所感

最初PCで絵を描こうとしたのですが、今使用しているPCがタッチスクリーン式でなく、タブレット上で指で描いたほうが楽だし比較的キレイに描けるので途中でそちらにシフトしました。
このようにシンプルなゲームでもそこそこの数のメガネを用意する必要があるので、マウスでお絵かきは結構時間かかるし部品が多ければ多いほど大変だろうなというのが実際触った感想です。
また、普段業務においてもゲームを作るというのは無縁でして、題材を決めたはいいけどどういう動きのゲームにするか、Viscuit上で実現可能かどうかというのを考えるのは思った以上に大変でした。
そして、Viscuitは子供向けだからといって侮れるものではなく、大人でもじゅうぶんに楽しめるビジュアルプログラミング言語であることが実際手を動かしてよくわかりました。非常に奥が深い。
また何かゲームのアイディアが思い浮かんだら記事にしたいと思います。
 

Fabeee編集部

Fabeee編集部

こちらの記事はFabeee編集部が執筆しております。