【サンプル付き】イベントで使えるコメント連動ギミックをつくろう!「コメント取得 API」を使う

Cluster Creator Kit v2.30.1.2(以下、CCK)から、「コメント取得 API」を使うことができるようになりました。
このAPIを使うと、イベント中に投稿されたコメントをきっかけに何かしらの処理を追加できます。

この機能を使うことで、コメントが投稿された時に演出を追加したり、特定のコメントが投稿されると起こる特別な演出やオブジェクトを生成したり。

特定のコメントを投稿した人にだけ処理を適用するとクイズで正解した人だけ先に進めるようにしたり、色々な場面で使える機能になっています。

この記事では、サンプルの配布・基本的な使い方を紹介します。

この記事では、すぐに使えるサンプルを配布しています。
まずは使ってみたいという方は下記からダウンロードしてください。本記事では、サンプルについて解説していきます。

コメント取得APIが使用できるのは、イベントとテストスペースです。

本サンプルは特定のコメントが投稿されるとオブジェクトが生成されるというものです。
デフォルトでは「create」と投稿するとスフィアが生成されます。簡単に反応するキーワードと生成するオブジェクトを変更することができます。

サンプルの使い方は「CommentAPISample」というPrefabをシーン内に配置するだけ!
配置された場所にオブジェクトが生成されます。

コメント取得APIでつくったギミックを試す

コメント取得APIはイベントとテスト用スペースで使える機能です。
イベントを立ててテストすることもできますが、テスト用スペースを使用することで効率的にテストすることができます。

  • テスト用スペースはワールドアップロードから「テスト用にアップロードする」をした上で、該当のワールドに入り、「デベロッパーメニュー > 新しくテスト用スペースをはじめる」から利用できます。
  • デベロッパーメニューが表示されていない場合は、メニューを開き「設定 > その他」で「開発者向けの機能を有効にします」をオンにしてください。

テスト用スペースについての詳細は下記の記事をご覧ください。

反応するキーワードを変更する

デフォルトでは「create」でオブジェクトが生成されますが、反応するキーワードを変更できます。
キーワードはスクリプト側で設定されているので、下図の部分を好きなキーワードに変更してみてください!

生成されるオブジェクトを変更する

生成されるオブジェクトも変更することができます。
生成するオブジェクトはWorld Item Template Listに登録した上で、「targetTime」というIDでスクリプトから参照しています。InspectorでItem Templateに登録されているItemを変更することで生成されるオブジェクトを変更できます。

生成されるオブジェクトにはDestructableItemのスクリプトを適用してください。こちらが適用されていないと、オブジェクトの削除がされません。

生成されるオブジェクトの上限を変更する

オブジェクトを上限なく生成できてしまうとイベントの進行等に影響を与えてしまうため、サンプルでは生成するアイテムの最大数を10個にしています。10個以上生成されると、生成されたのが古い方から削除されます。

最大数はスクリプト側で設定されています。下図の数字を変更することで最大数を変えることができます。

下記が配布しているサンプル内のスクリプトになります。
CommentAPISampleでコメント取得API「onCommentReceived」を使用し、DestructableItem(生成されるオブジェクト側に適用)でアイテムの削除をしています。

CommentAPISample

const targetItem = new WorldItemTemplateId("targetItem"); // WorldItemTemplateListで指定した生成するアイテム

// 設定を変えたいときはここを変更
const maxItemCount = 10; // 生成するアイテムの最大数(超えた場合は古い方から消す)※1以上にしてください
const keyword = "create"; // createを実行するキーワード
const requiresStrictMatch = true; // trueのときはコメントとkeywordが完全一致、falseのときはコメント中にkeywordが含まれていたらcreateする

$.onStart(() => {
    $.state.createdItems = []; // 生成したアイテム
    $.state.lastTimestamp = 0; // 最後に取得したコメントのタイムスタンプ
});

$.onCommentReceived((comments) => {
    if (maxItemCount <= 0) {
        return;
    }

    const createdItems = $.state.createdItems;
    let lastTimestamp = $.state.lastTimestamp;

    let createCount = 0;
    comments.forEach(comment => {
        const commentBody = comment.body; // コメントの本文
        const commentTimestamp = comment.timestamp; // コメントのタイムスタンプ

        // 何らかの要因で古いコメントが読み込まれてしまった場合は無視する
        if (commentTimestamp <= lastTimestamp) {
            return;
        }

        // 特定の内容のコメントの数だけアイテムを生成する
        if (hasKeyword(commentBody)) {
            createCount++;
        }

        lastTimestamp = Math.max(lastTimestamp, commentTimestamp);
    });

    createCount = Math.min(createCount, maxItemCount);

    // 生成できるアイテムの残りが生成したい数に足りない場合は、生成済みのアイテムに対して古い方から"Destroy"メッセージを送信
    // メッセージを受け取った側でdestroy処理を実行するようにしておく
    while (maxItemCount - createdItems.length < createCount) {
        const item = createdItems.shift();
        item.send("Destroy", 0);
    }

    for (let i = 0; i < createCount; i++) {
        try {
            const createdItem = $.createItem(targetItem, $.getPosition(), $.getRotation());
            createdItems.push(createdItem);
        }
        catch (e) {
            $.log("createItemに失敗しました");
        }
    }

    $.state.createdItems = createdItems;
    $.state.lastTimestamp = lastTimestamp;
});

function hasKeyword(text) {
    if (requiresStrictMatch) {
        return text === keyword;
    }
    else {
        return text.includes(keyword);
    }
}

DestructableItem

$.onReceive((messageType, arg, sender) => {
    if (messageType === "Destroy") {
        $.destroy();
    }
});

Creators Guideベータ版では、「コメントを空間上に表示する」「特定のコメントに反応して花火が上がる」のサンプル付き記事を公開しています。コメント取得APIをいろいろ使ってみたい方は、そちらもぜひご覧ください!

コメントを空間上に表示する(コメント取得API)【サンプルunitypackage付き】
特定のコメントに反応して花火が上がる(コメント取得API)【サンプルunitypackage付き】
記事をシェアしてワールド制作を盛り上げよう!

Cluster Creators Guide|バーチャル空間での創作を学ぶならをもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む