チュートリアル
ログイン
サイトにアクセスしたら、まずはログインを行います。右上のloginボタンからユーザー登録とログインを行います。
Flocon のユーザー認証システムは Google のFirebase Authenticationというサービスを用いており、それぞれのウェブサイトの管理者がセットアップしています。そのため、（Flocon 作者が運用しているウェブサイトを除き）登録されたユーザーの情報は Flocon 作者によって一元的に管理される、というわけではありません。
ウェブサイトの管理者は登録したユーザーのパスワードなどを閲覧することはできませんが、メールアドレスなどは閲覧することができます。もし万全を期したい場合は、新たに作成したメールアドレスやアカウントでログインすることなどを検討してください。
ログインが完了すると、右上に自分の Firebase ユーザー UID が表示されます。
部屋を作成する
次に、部屋を作成してみましょう。トップ ページから、部屋一覧をクリックします。
サイトの設定によってはエントリーパスワードを求められることがあります。その場合はサイトの管理者などからエントリーパスワードを教えてもらってください。
次に、部屋を作成から、部屋を作成します。各項目の詳細は以下の通りです。
- 部屋の名前
部屋の名前を設定します。あとからでも編集できます。 - 自分の名前
部屋中で使用する GM もしくは PL の名前を入力します。入室者一覧や、Message ウィンドウでの「○○ が入力中……」という表示などに使用されます。 - 参加フレーズを有効化
参加者が入室する際のパスワードを設定します。ここを設定することで、参加フレーズを知っている参加者のみが部屋に入室できるようになります。 - 観戦フレーズを有効化
観戦者が入室する際のパスワードを設定します。ここを設定することで、観戦フレーズを知っている観戦者のみが部屋を観戦きるようになります。
入力が完了したらOKを押下して、部屋を作成しましょう。
これでサーバーに部屋を用意することが出来ました！
キャラクターの作成
名前だけのキャラクターの作成
部屋に入ると様々なウィンドウが表示されていますが、今回用いるのは下の 2 つです。
- キャラクターウィンドウ
キャラクターを作成・編集したり、キャラクターのパラメーターを設定するウィンドウです。キャラクターに関わる設定は基本的にこちらを使用します。 - メッセージウィンドウ
プレイヤーやキャラクターがテキストチャットを行うウィンドウです。ここで各キャラクターがダイスを振ったりします。
まずはキャラクターを作成してみましょう。
部屋に入ると様々なウィンドウが表示されていますが、この中からキャラクターウィンドウをクリックします。
キャラクターを作成を押下すると、キャラクターの新規作成というモーダルが表示されます。
ここにキャラクターの情報を打ち込んでいきましょう。パラメーター項目の名前に、作成したいキャラクターの名前を入力します。入力し終えたら、右下の作成を押下します。これでキャラクター作成完了です。キャラクターウィンドウに作成したキャラクターの名前が表示されていることを確認しましょう。
次に、作成したキャラクターで発言して みましょう。発言はメッセージウィンドウで行います。
メッセージウィンドウのキャラクタープルダウンをありに設定すると、その右に新しくプルダウンメニューが現れます。ここから先ほど作成したキャラクター名を選択してください。その状態でメッセージウィンドウ最下部の入力欄にテキストを入力し、投稿してみましょう。これでキャラクターとして発言することができました。
メッセージウィンドウには、これ以外にも次の機能があります。
文字色からはキャラクターの発言色を変更することができます。- Flocon では、チャットタブの
編集から、各個人でどのチャンネルを表示するかを選択し、チャットタブを作成することができます。
たとえば、各チャンネルを分けて表示させたい人は 1 タブ 1 チャンネル表示、全チャンネルをまとめて閲覧したい人は 1 タブに集約して閲覧するといったユーザーごとのカスタムが可能です。
キャラクターの画像の設定
作成したキャラクターデータに様々な要素を追加してみましょう。まずはキャラクターのアイコン・立ち絵を設定してみます。
キャラクターウィンドウから、作成したキャラクター列の左方にある⚙(編集)をクリックし、キャラクターの編集メニューを開きます。アイコン画像からOpenを押下し、 ファイルアップローダーメニューを開きます。メニュー中のアップロードしたいファイルをここにドラッグするか、クリックしてくださいから、立ち絵やアイコンとして利用したい画像ファイルをアップロードしましょう。
Flocon では 2 種類のアップローダーをサポートしていますが、使用可能なアップローダーはサイトの設定によって異なります。
Firebase Storage 版アップローダーには画像のサムネイルを生成する機能はありません。アップロードしたファイルを見分けやすくするためにも、ファイル名をきちんと設定しておくとよいでしょう。
テキストチャンネルにアイコンとして表示される画像は、元の画像が長方形のものであった場合正方形にトリムされるため、最初から正方形の画像を用意しておくことをお勧めします。
アップロードが完了したら当該ファイルの選択を押下し、アイコン画像を設定します。
同じように、立ち絵画像も設定してみましょう。
設定が完了したら、メッセージウィンドウからキャラクターを選択して発言してみましょう。メッセージ欄に先ほど設定した立ち絵が表示されていたら成功です。
キャラクターのパラメーターの設定
次に、キャラクターのパラメーターを設定しましょう。
キャラクターウィンドウのパラメーターを追加・編集・削除ボタンから、各パラメーターを設定します。ここで設定するパラメーターは参加者全員に対して反映されるので注意しましょう。
まず、数値パラメーターからパラメーター1を選択し、追加を押下して数値パラメーターを設定します。
数値パラメーター1の名前を設定というウィンドウが表示されるので、ここではHPと入力してOKを押下しましょう。これでHPという名前の数値パラメーターが作成されました。
続けてチェックマークパラメーター 転倒と、文字列パラメーター バフ・デバフを追加しましょう。
これでパラメーターの枠を準備することが出来ました。
では、キャラクターのパラメーターに値を入力していきましょう。キャラクターウィンドウから、自分のキャラクターを編集し、各パラメーターに値を入力します。
これで、キャラクターウィンドウにキャラクターのステータス等を表示することができました。
メッセージからパラメーターを参照する
メッセージウィンドウでキャラクターをありにした状態の場合、メッセージ入力欄でキャラクターのパラメーターを参照することができます。
例えば私のHPは{HP}ですと投稿すると、私のHPは10ですなどのようにHPというパラメーターの値に自動的に置き換えられます。
ただし、パラメーター名に英数字以外の文字が含まれている場合は、パラメーター名を"で囲む必要があります。例えばバフ・デバフという名前のパラメーターを参照する場合は{"バフ・デバフ"}と入力する必要があります。
パラメーター名が英数字のみで構成されている場合は " の有無は任意です。例えば{HP}と{"HP"}は全く同じ動作をします。
2.ボードとコマ
2-1.ボードの作成
部屋にボードを作成してみましょう。Flocon でいうボードとは、他のツールでいうところの「マップ」や「テーブル」に相当します。ここで使用するのは下記のウィンドウです 。
- ボードエディターウィンドウ
ボードを作成・編集できます。ここで表示するボードを切り替えても、他参加者には反映されません。 - ボードビュアー
ボードエディターで作成したボードを表示します。ここで表示するボードを切り替えると、参加者全員のボードビュアーに表示されるボードが切り替わります。デフォルトでは部屋の背景がボードビュアーです。
ではまず、ボードエディターウィンドウの右上にあるプルダウンメニューから＋新規作成を押下し、ボードを作成しましょう。
名前にテストボードと入力し、背景画像に立ち絵の時と同様に好きな画像を選択したら、作成を押下しボードを作成します。背景画像の拡大率やセルの大きさなどはデフォルトで構いません。
これでテストボードという名前のボードが完成しました。早速ボードビュアーウィンドウに表示してみましょう。
ボードビュアーウィンドウの右上表示ボードの変更から、先ほど作成したボードテストボードを選択しましょう。先ほど背景画像に設定した画像がビュアーに表示されていれば成功です。(画像が小さいと見えない場合があるので、ホイールでボードを拡大してみましょう)
2-2.コマの作成
作成したボードにキャラクターのコマを配置してみましょう。
ボードビュアーウィンドウ上で右クリックし、新規作成よりキャラクターコマ>(自身の作成したキャラクター名)>セルにスナップさせないをクリックします。
これにてキャラクターのアイコン画像と同じ画像でキャラクターのコマがボード上に作成されました。
セルにスナップさせるを選択した場合、コマはボードのセルに従って配置されます(移動させるときも同様です)セルのマス目に合わせてコマが配置されるため、マスを用いるシステムでは重宝するでしょう。
セルにスナップさせないを選択した場合、コマはセルに関係なくボード上の自由な場所に配置することができます。
次に、キャラクターの立ち絵コマを配置してみましょう。
立ち絵コマは通常のコマとは異なり、設定した立ち絵画像を半透明で表示します。一般チャンネル(デフォルトではメイン n)でのキャラクターの発言に対応して不透明となり、コマの上部にその発言を吹き出しで表示します。先ほど作成したように新規作成より立ち絵コマ>(自身の作成したキャラクター名)>セルにスナップさせないをクリックし、立ち絵コマを作成します。
この状態で Message ウィンドウで送信先をメインにして、立ち絵コマを設定したキャラクターで発言してみましょう。
コマが不透明となり、吹き出しで発言が表示されていれば成功です。