4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

IPFactoryAdvent Calendar 2023

Day 14

イントロクイズが作りたい(ツール紹介)

Last updated at Posted at 2023-12-13

はじめに

はじめましてみっきーです。ミッキーではありません。みっきーです。
Unityを初めてまともに触り、8月からイントロクイズが可能なブラウザでできるクイズゲームをのんびり制作をしています。今回は活動報告や過程で見つけたツールの紹介をします。

動機と目標

作業開始直前、友人にやりたいゲームを聞いたところアクションRPG、音ゲーなどの案が出る中、一人がアニソンイントロドンしたいと言ったのがきっかけです。Unityを触るのが初めてで3Dのゲームは難しそうだと考え、ついでに「パっと遊べて」「みんなで」「出題者も楽に」「開発者も楽に」という怠惰で欲張りな4つの目標が誕生しました。達成できるかはわかりません。
UnityにWebGLなるものがあり、それでビルドするとブラウザゲームが作れるということだけ知り、一つ目の目標「パっと遊べて」が達成できそうなのでいろいろ試してみようと思い開発を始めました。

活動の概要

1.Unity・C#の勉強

8月前半に周囲とある程度ペースを合わせながら「はじめてでも安心 Unityの教科書 Unity2023完全対応版 (北村愛実 著)」の半分程度まで学習しました。
以降は個人の作業に入り、わからないことが出るたびに教科書やWebの記事、ChatGPTに聞きながら作業しました。

2.資料集めとちょっとした実験

今回の本題。サボりながらのんびりやった結果、この作業に2、3ヶ月かけることになった…。内容は以下の詳細に記載します。

詳細

準備

クイズゲームの基礎になるボタンだけ配置していきます。My project - Quiz - Windows, Mac, Linux - Unity 2021.3.23f1 Personal DX11 2023_12_13 2_06_44(1).png

次に正誤判定をするプログラムを雑に作ります。

Ruler.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Ruler : MonoBehaviour
{
    public static int Correct = 0;

    // Start is called before the first frame update
    void Start()
    {
        Correct = 1;
        ///Correct = UnityEngine.Random.Range(1, 5);
        Debug.Log(Correct);
    }

    // Update is called once per frame
    public static void Check(int Ans)
    {

        Debug.Log(Ans);

        if (Correct == Ans)
        {
            Debug.Log("Correct Answer");
        }
        else
        {
            Debug.Log("False Answer");
        }
    }
}

見てわかる通り変数Ansの値を外部から受け取り、変数Correctと等しければ「Correct Answer」を、それ以外であれば「False Answer」をコンソールに出力するだけのプログラムです。
(うまくいかなかった時にどこで止まってるか確認するのと選択肢の番号と値をそろえるために1から始めています。実験の名残がありますが見なかったことにしてください)

このプログラムを適当な空のオブジェクトにアタッチしましょう。

もちろんこのままでは動かないのでボタンにつけるプログラムも雑に作ります。

Ans_1.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Ans_1 : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        Button button = GetComponent<Button>();
        button.onClick.AddListener(Ans_button);
    }

    // Update is called once per frame
    void Update()
    {

    }

    public void Ans_button()
    {
        Ruler.Check(1);
    }
}

ボタンコンポーネントを取得して、アタッチしているボタンが押されたときに下のAns_button()を実行するだけのプログラムです。Ans_button()も先ほどのCheck()の変数Ansに1を入れて実行するだけのものです。

というかUnityのボタンにはクリックしたときにどの関数を実行するかをInspectorから選択できるはずなので、Start()すら書く必要はありません。ない、はずです。僕はなんでかできませんでした。
とりあえずこれを1~4までそれぞれ作り、選択肢それぞれにアタッチします。

1
UnityEngine.Debug:Log (object)
4
UnityEngine.Debug:Log (object)
False Answer
UnityEngine.Debug:Log (object)
3
UnityEngine.Debug:Log (object)
False Answer
UnityEngine.Debug:Log (object)
2
UnityEngine.Debug:Log (object)
False Answer
UnityEngine.Debug:Log (object)
1
UnityEngine.Debug:Log (object)
Correct Answer
UnityEngine.Debug:Log (object)

選択肢4から順に実行するとこんな感じになります。最初にCorrectが1に設定され、選択肢1以外が押されても「False Answer」を出力し、選択肢1が押されると「Correct Answer」を出力しています。正しく動きました。
あとは文字を出力したり文字を変えたりいろいろすればクイズにいったんなるのですが、めんどくさいのでとりあえずここで止めました。

ツール紹介

ここからは「出題者も楽に」「開発者も楽に」のため、問題文を作らず、音声ファイル・動画ファイルを作りたくなく、コードもあんまり書きたくないの心で探したいくつかのツールを2つ紹介します。

UnityYoutubePlayer

とても素晴らしいツールです。こいつを導入するとUnityでYoutubeが見られます!ステキ
導入も手順をしっかり書いてくれているサイトがありそこそこ簡単です。こいつが使えればリンクを張るだけで「パっと遊べて」、「出題者も楽」で、導入するだけなので「開発者も楽」!ステキ!
使い方も非常にシンプル!ここに見たいYoutubeのリンクを張るだけ!
UnityYoutubePlayer-master - Simple - Windows, Mac, Linux - Unity 2022.1.16f1_ DX11 2023_12_13 17_39_50.png

時間指定はできませんでしたがとても便利です。実際に動かしてみるとこんな感じ1
TTT_music.gif

個人的な欠点は、(実際はどうかわかりませんが)画面サイズと音量が変更できないこと。いろいろ試してみましたが何故か変わらない。私よりも頭のいい皆さんはぜひ挑戦してください。
Simple以外にも便利なものが入っており個人的に使いたかったのは「Player」。Canvas風になっているのでボタンが置けてクイズに使えそうだと思いました。イイネ!

しかし最大の欠点はWebGLに対応していないこと。Gitのページに書いてあった。10月11月になってようやく気が付きました。
どうやらCORSというものに止められるそう。HTTPリクエストを許可するかどうかの仕組みらしくブラウザで止められている…?正直あまり理解できていないです。

とりあえず他のビルドならできるそうですが、それは「パっと遊べて」「開発者も楽に」に反するので無し!

ということでUnityYoutubePlayerは惜しまれつつもここでリタイアです。

uDesktopDuplication(uDD)

こちらはUnityで画面共有ができるものになります。
Videotogif.gif

Unityで実行すると無限ループが楽しめます。これがレクイエム。

こちらは画面のサイズも変えられますし、全画面化もしないので使いやすいです。もちろんこの上にボタンも置けますし、通話中を想定するなら出題者と開発の私はとっても楽。

欠点は音が拾えないこと。実際に試したわけではないですが、画面を共有しても音が二重に聞こえることありません。というかそもそも音を拾う部分が無いので共有できるのはおそらく映像だけになります。
正直Discord等の画面共有を期待していたので少ししょんぼりしました。それでも問題文作成の手間と文字の更新の手間を省いてくれることには変わりないのでuDDはありがたく使わせて頂くことにしました。

やった活動はこれで以上です。

苦戦したこと(愚痴)

冒頭でも話しましたが、Unityをまともに使うのは今回が初めてでした。ですので教科書やWebにあふれる先人の知恵の力借りながら制作するわけですが、途中で問題が起きました。

ボタンにOnClickの関数が割り当てられない
ボタンを押しても関数が実行されない
どのボタンを押してもCorrect Answerと出力される
どこの何でエラーが起きているのか見てもわからない

など初歩的な部分で大きく躓きました。サークルの活動後に発生し、初歩的過ぎて仲間達には聞きづらい。ここまで初歩的だと先人達もさすがに記事を残していない。どうしたものか…。
そんな時に私の前に現れたのがChatGptでした。

Videotogif (2).gif

このようにエラーコードや実際のプログラムを出しながら聞くとものの数秒で解決案を提示してくれます。
実際の仕事では漏洩や信頼度などから利用しにくいかもしれません。しかし学習においては取返しが付かないなんてことになりませんし、手詰まりで困っている時に聞いてみるとことがスムーズに進みます。ボッチにも優しくお勧めです。

最後に

今回の報告・紹介は以上になります。以後はゲームとして形にすること、目標のうちの一つ「みんなで」を達成するためマルチプレイにできないか試していこうと思います。

参考・注釈

使用した教科書

  • Unityの教科書 Unity 2023完全対応版(北村愛実)
  • UnityではじめるC# 基礎編 改訂版(リブロワークス)

参考

注釈

  1. お借りした動画
    https://www.youtube.com/watch?v=cfelSXUTXyc

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?