PROPS GAMESの作品作成方法②――音楽・画像・変数・ループなど。

こんにちは。

あるいはこんばんは。

ゲームブック総合サイトの管理者です。

ノベルゲーム投稿サイト・高機能作成ツールとして提供されているWebサービス、Props Gamesについての操作方法第二弾です。

こちらのエントリも参考になると思いますのでぜひ御覧ください。

今回は表題の通り、音楽(BGM)の流し方、移動もできる背景画像の制御方法・プログラミングに不可欠の変数処理と繰り返し処理が可能なループついて説明させて頂きます。

Visula Studio Code(無料)

Props Gamesではコードはxmlを利用して記述します。

そして恐らくxmlコードをJavaScriptの様な何らかのプログラミング言語に自動変換(専門用語でコンパイル)して動作させていると推測されます。

制作者は独自の日本語xmlを操作、もっと言えば所定のボタンを押してダイアログボックスに入力等することでxmlの記述ですらProps Gamesが自動で生成してくれますが、xml自体を操作できたほうが圧倒的に制作しやすいです。

なのでコードエディタと呼ばれる、プログラミングに便利なツールをご利用することをおすすめします。

筆者の独断と偏見で、MicrosoftのVisual Studio Codeがナウい(死語:洗練されている・流行ってる)と思います。

azure.microsoft.com

↑ダウンロードはこちらから

Windows、Linux、Macに対応。無料で使えます。ありがたい。

インストールして起動させたら…

左端の□が4つ連なったところをクリック。

XML Toolsをインストールしておきます。

こうしておくことでいいことあります。

↑例えばこういうxmlタグを、Alt+Shift+fを押すと。

このようにタグを自動で見やすい配置にしてくれます。

またご覧のように、タグは青、属性は水色、値は朱色、コンテンツは白と言ったように自動で色分けされます。

プログラミングには非常に重宝するのです。

以下、Props Games付属のエディタをPropsエディタ、MicrosoftのVisual Studio CodeはVS Codeと記述します。(もっとも、今回の記事ではVS Codeを使っていませんが)

音楽の制御

では音楽、BGMの流し方について。

まずはフリー素材を入手しましょう。

もちろん自作で用意してもいいです。

ここではMusic-Note.jpさんの素材を利用させていただくことにします。

www.music-note.jp

利用規約を一読してください。

下記を表示させるようにしましょう。

音楽素材提供:Music-Note.jp
URL:http://www.music-note.jp/
運営:株式会社ピクセル
URL:http://pixel-co.com/

で、仮にここでは「preparation.mp3」と言う音楽ファイルを入手したとします。

音楽の鳴らし方

場面の編集画面を開いてください。

ここでは新規の場面を作って開いた想定で説明します。

「イベント」項目の「場面開始時」で「表示」のリンクを押してPropsエディタを開きます。

(この説明が分からん、という方はこちらのエントリからお読みください)

「音楽変更」と言うボタンを押します。

音楽ファイルをアップロード出来るダイアログボックスが開くので、「ファイルの選択」を押してファイルを選択、「音楽追加」ボタンを押します。

アップロードが完了し、「音楽ファイル選択」の項目にアップロードしたファイルを選択できる様になります。

①音楽ファイル選択の項目でファイル(ここではpreparation.mp3)を選択

②自動でファイル情報の欄のファイル名に「preparation.mp3」と表示されます。

③著作者情報欄に著作者名とURLを記載。

④以上が終わったら、「選択」ボタンを押します。

すると上記のようにコードが生成されます。

ところが保存してテストしてみても音楽ならないんですよね。

恐らく<小説>タグや<会話>タグと併用しないと音楽が鳴らない仕様なのかと。

ブラウザなどの規制もある(Chromeはデフォルトでは音は鳴らないで、ユーザーが音声オンにしないとダメって言うルールがあったりします。)ので、仕方のないこと。

よもや音楽だけでノベルゲームを創ることもないので、地の文に語らせてみましょう。

Propsエディタで改行し、1行目にカーソルを移動し、「小説」ボタン、空で「生成」ボタンを押します。

<小説 横="中央" 縦="枠中央" 幅="16" 高さ="10" 速度="10" >
<クリック />
</小説>
<音楽 ファイル="preparation.mp3" ループ="on" フェード="0" 音量="40" />

上記の様なコードになったら保存してテストしてみましょう。

まずは読者のマウスクリック待機画面になります。

マウスでクリックすると、音楽がなり始めます。

音楽を止めたい

結論から言うと、下記のコードで音楽を止めらます。

<音楽 フェード="0"/>

「音楽変更」での操作方法は下記の通り。

ダイアログボックスで「制御」タブを押します。

シンプルに「選択」ボタンを押せば、<音楽 フェード="0"/>と自動でコードが生成されます。

なかなか気づきにくいと思います。

フェードアウトもできますので、いい感じで設定しましょう。

クリック➯音楽がなる➯クリック➯3秒掛けてフェードアウト、と言った場合のコードサンプルは下記の通りです。

<小説 横="中央" 縦="枠中央" 幅="16" 高さ="10" 速度="10" >
<クリック />
</小説>
<音楽 ファイル="preparation.mp3" ループ="on" フェード="0" 音量="40" />
<クリック />
<音楽 フェード="3000"/>

実行すると下記の通り。

<小説>タグで囲まれていない<クリック />タグは上記のように画面上にタップを促すアイコンが表示されることが確認できます。

背景画像の挿入・移動

新規で場面を創り、開いた想定で話を進めます。

画像アップロード

「ファイルの選択」で1MB未満の画像を選択し、「透過しない・左上の同色は透過する」のどちらかを選び、「画像追加」ボタンで画像をアップロード出来ます。

仮にここでは「ba-miyan.png」をアップロードしたとしましょう。(著作権に要注意、テストなので)

↑こんなやつですね。縦横150ピクセル。

次にレイヤー(層)の欄で素材選択で「ユーザーの素材」を選び、右隣でここでは「ba-miyan.png」を選択、「新規レイヤー(層)」追加ボタンを押してください。

アップロードした画像(ここでは桃)が表示されます。

保存してテストしてみても、きちんと桃が表示されます。

これは背景画像なので、桃の代わりに背景を設定すると言う使い方が一般的です。

でもこれはテストで、この画像を動かしたいので敢えて150ピクセルの小さめの画像を使ってます。

動かす

動かしたいときはまずアップロードしたあと「保存」を忘れないようにしてください。

さらに、場面編集画面を一度リロード(F5キーを押す)しておいてください。

Propsエディタの「画像移動」ボタンを押すとダイアログボックスが開きます。

ここでは「282」と言う番号が表示されています。

このブログを読んでいる方は別の数字が表示されているかと思います。

それは先程アップロードした時に作られたレイヤーのID番号と一致するんですね。

画像を幾層も重ねられる仕様になっています。

そこで、ここでは「282」を選び、横縦を0のまま、速度を200にして「決定」ボタンを押してみます。

保存してテストしてみると。

一瞬で左上(横0、縦0)の位置に桃が表示されます。

秒速200ピクセルで移動するかと思われるかもしれませんが、アニメーションの様に移動するにはもう一つ命令が必要です。

Propsエディタにて、最上段に一行<クリック />タグを追加してください。

<クリック />

<画像移動 ID="282" 横="0" 縦="0" 速度="200"/>

保存してテストしてみると…。

ユーザーからのクリック待機状態になり、クリックすると

ゆっくりと左上に移動するアニメーション効果が確認できます。

ではさらに左上から真っ直ぐ下に移動させてみましょう。

縦に200と入れて「決定」ボタン。

<クリック />
<画像移動 ID="282" 横="0" 縦="0" 速度="200"/>
<画像移動 ID="282" 横="0" 縦="200" 速度="200"/>

コードは上記の通り。

保存してテストしましょう。

桃が真ん中で待機➯クリックで左上に移動した後、そのまま真下に移動という挙動が確認出来るかと思います。

クリックすることなしに、場面表示とともに自動で画像移動の挙動を試しましたが、画像移動タグが最低2つ必要で、その間を行ったり来たりするような、ちょっと変わった動きをしたので、クリック必須と考えたほうが扱いやすいです。

繰り返し…ループ

ループはプログラミングではお馴染みのfor文のことです。

変数を使って繰り返し処理ができます。

  1. ある変数を1に設定
  2. その変数がある数値、例えば3以下なら続ける
  3. 何らかの処理、例えば動かしたり、表示をしたり
  4. 変数に1を足す
  5. 2に戻って、繰り返す。

ざっと述べると上記のような仕組みです。

まず下記のコードを考えます。

<クリック />
<画像移動 ID="282" 横="0" 縦="0" 速度="200"/>
<画像移動 ID="282" 横="0" 縦="200" 速度="200"/>
<画像移動 ID="282" 横="200" 縦="200" 速度="200"/>
<画像移動 ID="282" 横="200" 縦="0" 速度="200"/>

先程の画像移動のコードに2行付け加えたものです。

どんな動きをするか分かりますか?

図のように左上➯左下➯右下➯右上と移動します。

コレを、例えば3回繰り返したいとします。

カーソルは左端にあると、枠と同化して見えないのですが、一度<クリック />タグの端にマウスポインタを持ってきてマウスクリック後、下(キーボードの↓)のボタンを押せばカーソルは上図の矢印位置に来ます。

「変数変更」ボタンを押すと上記ダイアログボックスが現れます。

「変更した変数欄」で「$システム変数値1」を選びます。

「変更値」の欄で1と入力した後、「生成」ボタンを押します。

<クリック />
<変数変更 変数="$システム変数数値1" 値="1" />


<画像移動 ID="282" 横="0" 縦="0" 速度="200"/>
<画像移動 ID="282" 横="0" 縦="200" 速度="200"/>
<画像移動 ID="282" 横="200" 縦="200" 速度="200"/>
<画像移動 ID="282" 横="200" 縦="0" 速度="200"/>

コードが上記の様に生成されます。次にマウスポインタを

<変数変更 変数="$システム変数数値1" 値="1" />

の次の行に持っていってそこでクリックし、カーソルを<変数変更>タグのすぐ下段に待機させます。

その位置でボタンを押します。

「ループ」ボタンを押すと下記のダイアログボックスが現れます。

「数値」ボタンを押します。

次のダイアログボックスが現れるので、「変数と数値を比較する」を選択肢、不等号の「<」を選択、数字の3を入力して「生成」ボタンを押します。

<クリック />
<変数変更 変数="$システム変数数値1" 値="1" />
<ループ 条件="$システム変数数値1<=3" タイプ="数値" >

</ループ>


<画像移動 ID="282" 横="0" 縦="0" 速度="200"/>
<画像移動 ID="282" 横="0" 縦="200" 速度="200"/>
<画像移動 ID="282" 横="200" 縦="200" 速度="200"/>
<画像移動 ID="282" 横="200" 縦="0" 速度="200"/>

上記のように、<ループ>タグが生成されます。

繰り返したい処理を</ループ>終了タグで囲ってあげる必要があります。

<クリック />
<変数変更 変数="$システム変数数値1" 値="1" />
<ループ 条件="$システム変数数値1<=3" タイプ="数値" >

<画像移動 ID="282" 横="0" 縦="0" 速度="200"/>
<画像移動 ID="282" 横="0" 縦="200" 速度="200"/>
<画像移動 ID="282" 横="200" 縦="200" 速度="200"/>
<画像移動 ID="282" 横="200" 縦="0" 速度="200"/>

</ループ>

こんな感じで、</ループ>タグを移動させます。

このままだと無限に繰り返してしまうので、変数を加算させます。

</ループ>タグの直前にカーソルを移動し、「数値計算」ボタンを押します。

「数値計算」ボタンを押す。

計算のダイアログボックスが開きます。

「結果を代入する変数」の欄が「$システム変数数値1」になっていることを確認。

計算式の欄で「$システム変数数値1」になっている事を確認して「挿入」ボタンを押す。

すると「計算式」欄に「$システム変数数値1」と記載されるので、続いて「+」ボタン、「1」ボタン、「生成」ボタンを押す。

<クリック />
<変数変更 変数="$システム変数数値1" 値="1" />
<ループ 条件="$システム変数数値1<=3" タイプ="数値" >
<画像移動 ID="282" 横="0" 縦="0" 速度="200"/>
<画像移動 ID="282" 横="0" 縦="200" 速度="200"/>
<画像移動 ID="282" 横="200" 縦="200" 速度="200"/>
<画像移動 ID="282" 横="200" 縦="0" 速度="200"/>
<計算 結果="$システム変数数値1" 式="$システム変数数値1+1" />


</ループ>

保存してテストしてみましょう。

上手く行きましたでしょうか?

<ループ>タグは条件を満たす限り</ループ>タグまでの処理を繰り返す命令です。

大事なのは</ループ>閉じタグの直前に、必ず変数を加算させることです。

さもなくば無限ループに陥ります。

まとめ

如何でしょうか。

変数やループはかなりプログラミングの思考に近いので慣れるまでが大変かもしれません。

今回は冒頭で触れておきながら一切VS Codeを活用しませんでした。

でも慣れてきたらVS Code上でタグを編集し、Propsエディタにコピペすると行った編集方法が一番効率良いと思います。

また、VS Code上で編集したファイルを自分のパソコンのローカルに保存しておけば、バックアップとしてより安全性が高まります。

次回は条件文やダイスについて触れたいと思います。

次の記事

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA