Yoyogi Jotaro の何だかよく分からないブログ

主にゲームブックについて語ります。他、北海道ネタ、ホリエモン、雑談など

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

こんにちは。

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

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

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

今回は

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

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

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

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

blog.gamebook.xyz

それでは早速参りやしょうッ!

 

目次

色を変えたい!

そうですね。

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

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

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

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

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

f:id:oniisann:20171126203645j:plain

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

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

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

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

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

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

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

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

f:id:oniisann:20171126203742j:plain

実行するとこの通り。

f:id:oniisann:20171126203706j:plain

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

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

f:id:oniisann:20171126203810j:plain

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

f:id:oniisann:20171126203820j:plain

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

そんなときにはこれ!

(colour:)[テキスト]

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

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

f:id:oniisann:20171125221232j:plain 

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

f:id:oniisann:20171126203835j:plain

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

f:id:oniisann:20171126203844j:plain

はい。

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

文字の特殊効果

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

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

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

f:id:oniisann:20171126203902j:plain

実行するとこの通り。

f:id:oniisann:20171125225228g:plain

いかがですか?

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

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

画像や音を入れたい

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

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

画像

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

<img src="画像のURL">

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

例えば↓こちらの画像。

f:id:oniisann:20171125225752j:plain

この画像のURLは

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

です。

なので、下記のように記述しますと 

f:id:oniisann:20171126203920j:plain

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

f:id:oniisann:20171126203929j:plain

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

音楽

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

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

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

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

<audio src="http://gamebook.xyz/wp-content/uploads/2015/09/devil.mp3" autoplay>
</audio>

f:id:oniisann:20171126205854j:plain

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

 

実行するとこの通り。

f:id:oniisann:20171126210134j:plain

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

音は出ています!

動画

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

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

例えばこちらの動画↓


YouTubeテーマソング/ヒカキン&セイキン

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

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

f:id:oniisann:20171126203950j:plain

ご覧のとおりです。

f:id:oniisann:20171126204001j:plain

まとめ

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

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

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

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

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

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

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

f:id:oniisann:20171124193352j:plain

http://twinery.org/

 

以上、北海道からでした。

 

さて、あなたはどうする?
GameBook.xyzへもどる→1
Googleへ行く→14