【オンライン講座＋作り方解説】Viscuit新機能！コントローラーが簡単に作れる迷路ゲームチュートリアル

KIDSPROは、2025年4月26日（土）、27日（日）にオンライン講座を開催します！

今回は、新しくなったViscuitの機能を活用し、キャラクターをコントローラーで操作できる迷路ゲームの作り方をわかりやすくご紹介します！

【Viscuit新機能】かんたんコントローラーで迷路ゲームをつくろう！

🎉 Viscuitがアップデートされ、メガネを連結して動作を組み合わせる新機能が追加されました！
この機能を使うことで、キャラクターをタップで操作する「コントローラー機能」がよりシンプルに作れるようになりました。

今回のオンライン講座では、Viscuit初心者の方でも楽しみながら作れる「コントローラー付き迷路ゲーム」を一緒に作っていきます。

🔍 講座で学べること

✅ Viscuit新機能：メガネ連結の使い方

✅ コントローラーでキャラクターを動かす仕組み

✅ レイヤー（背景・キャラクター）の配置方法

✅ 敵に当たったらゲームオーバー、ゴールしたらクリアになる判定の作り方

📅 開催日：2025年4月26日（土）・27日（日）
🕔 時　間：各日 17:30 ～ 18:30
💻 開催形式：オンライン（Zoom予定）
🎓 対　象：KIDSPROスクール生、およびeラーニング受講者の方
📱 準備物：Viscuitをインストールしたタブレット端末
💰 参加費：無料

2025年04月27日のオンライン授業をそのままアップしました！

※質問などがあれば、YouTubeのコメント欄に質問するか、教室に来たときに遠慮なく聞いて下さい。

チャプター：
00:00　はじめに（オンライン授業で作るゲームの説明）
01:54　画面設置（歯車ボタン）
03:03　キャラクターを描く & ステージへの配置
12:37　コントローラーでマイキャラを動かすプログラム作り
20:18　当たり判定のプログラム作り
21:40　ゴール判定のプログラム作り
29:46　まとめ

初期設定

STEP.1

歯車マークをタップして設定画面を開く

STEP.2

方眼紙の設定を「あり」にする

STEP.3

ループの設定は縦横共に「なし」にする

STEP.4

設定完了

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

キャラクターを描く

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

※コントローラーは、できるだけ大きく描いてください。大きさが小さいと、プログラムが正しく動作しない場合がありますのでご注意ください。

※コントローラーは、できるだけ大きく描いてください。

※コントローラーは、できるだけ大きく描いてください。

※コントローラーは、できるだけ大きく描いてください。

※コントローラーは、できるだけ大きく描いてください。

キャラクターをステージに置く

STEP.1

迷路ゲーム用のキャラクターを置く

☑️ドクロのキャラクターを迷路の壁として設置
☑️マイキャラ1をスタート地点に設置
☑️イチゴをゴール地点に設置
☑️ステージ左下にコントローラーを設置

STEP.2

キャラクター設置の拡大画面

※上記キャラクターの配置は一例ですので、皆さんの好きなように設置してください。マイキャラが通れるルートだけは確保してください。

コントローラーでマイキャラを動かす

Viscuit新機能：めがねを連結するやり方

STEP.1

メガネの矢印部分をタップ

STEP.2

メガネの設定画面が開く

STEP.3

「メガネの連結」ボタンをクリック

STEP.4

メガネが連結される！

STEP.5

設定完了

設定が完了したら、設定画面左下の決定ボタン

をタップする。

[/timeline]

コントローラーでマイキャラを左に動かすプログラム

STEP.1

マイキャラを左に動かすメガネを作る

STEP.2

Viscuit新機能でメガネを連結する

メガネの矢印部分をタップして、メガネの絵sってい画面を開いて、メガネを連結してください。
※メガネを連結する方法は、Viscuit新機能：めがねの連携方法を見てください。

STEP.3

連結したメガネにコントローラーを置く

左側のメガネにコントローラー（赤い矢印がない）を置き、右側のメガネには左矢印が赤いコントローラー（左タップ）を同じ位置に置きます。

STEP.4

コントローラーの左矢印部分にタップマークを置く

左側のメガネにおいたコントローラー（赤い矢印がない）の左矢印の真上付近にタップマークを置きます。

STEP.5

連結したメガネはどのように動くか？

①コントローラー（赤い矢印がない）の左矢印の当たりをタップすると、右側のメガネには左矢印が赤いコントローラー（左タップ）に変わります。

②①のメガネが実行されると同時に、マイキャラ1が左に動きます。

※タップの機能は、画面左側の「遊ぶボタン（拡大ボタン）」をタップして拡大画面（あそぶ画面）に切り替えないと有効になりません。ご注意ください。

STEP.6

コントローラー（赤い矢印がない）に戻す

※STEP.4のメガネによって、コントローラー（赤い矢印のない状態）の左矢印のあたりをタップすると、右側のメガネにより「左矢印が赤くなったコントローラー（＝左タップ状態）」に変化します。
そのため、「左タップ状態（赤い左矢印）」を、元の状態（赤い矢印がないコントローラー）に戻すためのメガネも必要になります。

STEP.7

コントローラーでマイキャラを左に動かすプログラム完成！