ゲームブック制作ツール「Twine」の利用方法その2。色を変えたり画像を挿入したりも簡単!

ゲームブック作成

こんにちは。

さあみなさん、選択肢を創りましょう。

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

前回に引き続き、世界的に知名度のあるゲームブック制作ツール”Twine”の利用方法のご紹介第二回目です。

今回は

色をいろいろ出すにはどうしたら良いのでしょうか?

画像とかも表示したいんだけど出来るんですかい?

という事に触れていきたいと思います。

もしまだ前回のエントリを御覧頂いていない場合は、先にこちらを見ていただくほうがご理解が早いかと思います。

それでは早速書いていきますね。

色を変えたい!

そうですね。

筆者も印刷業に居ましたからデザイナーの方やクリエイターの方が色に拘るのはよくわかります。

デフォルトのTwineのフォーマットはHarloweです。

意味がよくわかりませんが、赤ちゃんにつける愛称っぽいですね。

まあとにかく初心者向けのフォーマットなんです。

Harloweは文字が白で背景が黒っぽい色です。

黒板じゃないんですから、もっとカラフルにしたいですよね。

そんなあなたにはこんな命令があります。

(enchant: ?page, (text-colour: ) + (background: ))

「色」の部分は文字列と言う種類の文言を入れます。

つまり赤にしたければ”red” (ダブルクオーテーションで囲う)ですし、#をつけてRGBの表記にすることも出来ます。

例えば文字色を赤、背景をグレーにしたければ下記の様に記述出来ます。

(enchant: ?page, (text-colour: “red”) + (background: “#888”))

 redの代わりに#e61919でもいいですし、#888の代わりにgrayでも当然OK。

実行するとこの通り。

あと、部分的に文字の色を変えたい時がありますね。

たとえばこんなコードがあり、 

このような実行画面があるとしましょう。 

「マンティコア」をもっとカラフルにしたくありませんか?

そんなときにはこれ!

(colour:)[テキスト]

今回はなぜかダブルクオーテーションで囲わなくて大丈夫なんです。

何故text-colourやbackgroundと違うのか突っ込みたいところですが、細かいところは気にしないでいきやしょう。

マンティコアの文字だけ赤に変えたい場合はこの様に記述します。

実行画面を確認しましょう。

はい。

見づらくて配色のセンスが問われますが、思い通りにはなっています。 

文字の特殊効果

じゃ、文字を太くしたり、斜体にしたり、エンボス加工もしたくなりますね。

さらにそれだけでは物足りないので、点滅させたり震えさせたりもしてみましょう。 

コードはこんな感じです。 

実行するとこの通り。

いかがですか?

このツールはテキストに多くの装飾が出来るようになっており、ディベロッパーの意気込みを感じます。

安心してゲームブックを制作して下さい。

画像や音を入れたい

文字だけのゲームブックもいいですが、たまに挿絵があると乙なもの。

TwineのHarloweでは、画像や動画、音声などはHTMLをそのまま挿入できます。

画像

HTMLをご存じの方はそのままの文法で挿入できます。

<img src=”画像のURL“>

↑このようなタグを思い出して下さい。

例えば↓こちらの画像。

この画像のURLが、仮に下記だったとして。(ホントは違うんですけど💦)

https://cdn-ak.f.st-hatena.com/images/fotolife/o/oniisann/20171125/20171125225752.jpg

下記のように記述しますと 

このように画像を表示できます。 

これで物語の世界観が広がりますね。

音楽

音楽や音も設定できます。

ただ、サーバーにデータを保存しておく必要があるので、レンタルサーバーなどを利用できる場合に限りますので要注意。

レンタルサーバーのことについては今回割愛しますので、興味はあるけどよくわからない方はググって下さいまし。

<audio src=”音楽データのURL“>

<audio src=”https://gamebook.xyz/wp-content/uploads/2015/09/devil.mp3″ autoplay>
</audio>

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

実行するとこの通り。

って、画像だけですが、よく見るとブラウザに音が出ている事を示すスピーカーアイコンが確認出ますよね?

音は出ています!

動画

実は動画も貼れるんです。

普通にYouTubeの埋め込みコードを入れればいいんです。

例えばこちらの動画↓

埋め込みコードは下記のとおりなので

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/WJzSBLCaKc8″ frameborder=”0″ allowfullscreen></iframe>

ご覧のとおりです。

まとめ

そんな感じで、Twineはブログエントリを認めるような感覚でゲームブックを作成可能なのです。

そして懸命な皆さまならお気付きの通り、画像や音を出せるので、ノベルゲームに近い作品も作成可能なのです。

様々な媒体で自由にゲームブックを作成出来るツール。

それが無料で使え、商用利用も認められているのです。

前回お伝えしたパラグラフ遷移と今回のマルチメディア出力の記述だけでかなり面白いゲームブックが作れるはずですよ。

もちろんTwineの機能はまだまだ計り知れないのですが!

ぜひ作品を認めて下さい。

Twine / An open-source tool for telling interactive, nonlinear stories

コメント

タイトルとURLをコピーしました