【オンライン講座+作り方解説】ビスケット(Viscuit)で太鼓の達人ゲームを作ろう!

KIDSPROは、オンライン講座を10/12(土)に実施します。
今回は、ビスケット(Viscuit)で太鼓の達人ゲームを作ります。

ビスケット(Viscuit)で太鼓の達人ゲームを作ろう!

ビスケット(Viscuit)で太鼓の達人ゲームを作ります。ドンが枠の中に入ったときにタイミングよく太鼓をタップするとドンやカツが右上に飛んで行き、タイミングがズレるとミスという表示が出るゲームです。

 

日時: 2024/10/12(土)  17:30 ~ 18:30
場所: オンライン講座
対象: KIDSPROスクール生、KIDSPRO eラーニングをご利用の方
必要なもの: ビスケット(Viscuit)をインストールしたタブレット
費用: 無料

初期設定

STEP.1
歯車のマークをタップ
STEP.2
縦横ループをなしに設定する

※この設定により、キャラクターは左右および上下のループをしなくなります。
STEP.3
マス目の設定を右端にする

※この設定によりキャラクターはマス目を基準に表示されるようになります。マス目は、ステージをタップすると表示されます。また、キャラクターを描く時にもステージのマス目の大きさを表す四角い枠が表示されます。
STEP.4
速度設定を少し遅くする

※この設定により、Viscuit(ビスケット)の処理速度を変えることができます。亀側にすると遅くなり、うさぎ側にすると速くなります。
STEP.5
マス目の設定を右端にする

設定が完了したら、画面右下の決定ボタンをタップする。

必要となるキャラクター

キャラクターを描く

以下の12個のキャラクターを描く。

キャラクターの配置

注意)上図のマス目は通常は表示されません。上図では配置位置を分かりやすくするために画面をタップして表示させました。

キャラクターの配置
  1. レーンを、横一列に並べる。
  2. レーンの左側、真上に枠置く。
  3. 太鼓を、枠の2マス下に置く。
  4. レーンの左側、1マス下に生成機を置く。

ドンが1/5の確率で生成されるプログラム

STEP.1
生成機の1マス上にドンAが生成されるメガネ
STEP.2
生成機がステージ上で変化しないメガネ
STEP.3
ステージ上で変化しないメガネを全部で4つ作る

※このメガネの数を増やせば、ドンAが生まれる確率が減り、このメガネの数を減らせば、ドンAが生まれる確率が増えます。上図の例ですと、1/5の確率でドンAが生まれます。
STEP.4
ドンAが左に移動し続けるメガネ

※右側のドンAを1マス分だけ左側にずらして配置する。これにより、ドンAが生まれると、ドンAは左方向に動き続ける。

ドンの当たり判定プログラム

STEP.1
太鼓をタイミング良くタップすると、エフェクトや文字が表示され、ドンAがドンBになるメガネ

※このメガネにより、ドンAが枠  の上まで移動したときに、タイミングよく太鼓をタップすると、枠にエフェクトが表示され、ドンAがドンBに変わります。

当たり判定のメガネの作り方
  1. 太鼓と枠を左右のメガネに置く
  2. 左側のメガネの枠の上にドンAを置く。
  3. 左側のメガネの太鼓の上にタップマークを置く。
  4. 右側のメガネの枠の上に、エフェクトを置く。
  5. 右側のメガネの枠の上に、さらにドンBを置く。
  6. 右側のメガネにドンの文字を置いて完成!
STEP.2
ドンBが斜め上に動き続けるメガネ
STEP.3
エフェクトが自動的に消えるメガネ
STEP.4
ドンの文字が自動で消えるメガネ

ドンのミス判定プログラム

STEP.1
太鼓を間違ったタイミングでタップすると、ミスという文字が表示されるメガネ

※このメガネにより、枠にドンAがいないのに太鼓をタップすると、枠にミスという文字のキャラクターが表示されます。

ミス判定のメガネの作り方
  1. 太鼓と枠を左右のメガネに置く
  2. 左側のメガネの太鼓の上にタップマークを置く。
  3. 右側のメガネにミスの文字を置く。
STEP.2
ミスの文字が自動で消えるメガネ

カツが生成されるプログラム

STEP.1
生成機の1マス上にカツAが生成されるメガネメガネ
STEP.2
カツAが左に移動し続けるメガネ

カツの当たり判定プログラム

STEP.1
太鼓をタイミング良くタップすると、エフェクトや文字が表示され、ドンAがドンBになるメガネ

※このメガネにより、カツAが枠の上まで移動したときに、タイミングよく太鼓をタップすると、枠にエフェクトが表示され、ドンAがドンBに変わります。

当たり判定のメガネの作り方
  1. 太鼓と枠を左右のメガネに置く
  2. 左側のメガネの枠の上にカツAを置く。
  3. 左側のメガネの太鼓の右側にタップマークを置く。
    ※ドンのときは太鼓の真上でしたが、カツは太鼓の右側にです。
  4. 右側のメガネの枠の上に、エフェクトを置く。
  5. 右側のメガネの枠の上に、さらにカツBを置く。
  6. 右側のメガネにカツの文字を置いて完成!
STEP.2
カツBが斜め上に動き続けるメガネ
STEP.3
カツの文字が自動で消えるメガネ

カツのミス判定プログラム

STEP.1
太鼓を間違ったタイミングでタップすると、ミスという文字が表示されるメガネ

※このメガネにより、枠にカツAがいないのに太鼓の右側をタップすると、枠にミスという文字のキャラクターが表示されます。

ミス判定のメガネの作り方
  1. 太鼓と枠を左右のメガネに置く
  2. 左側のメガネの太鼓の右にタップマークを置く。
  3. 右側のメガネにミスの文字を置く。
ビスケット(Viscuit)とは?

アニメーション、ゲーム、デジタルえほんなどが作れるビジュアルプログラミング言語です。左側のメガネの条件が成立したら(もし~なら)、右側のメガネの状態になる(~する)というメガネの仕組みを使った、ルールベースのプログラミング言語です。こちらのページからインストールすることができます。