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/

 

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

 

ゲームブック制作ツール「Twine」の利用方法その1 パラグラフ遷移の見える化がわかりやすいのでビジネスシーンでもいいかも

こんにちは。

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

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

本日はゲームブック制作ツールでは、世界的に著名なオープンソースをご紹介しましょう。

筆者は以前、AXMA Story Makerを推しており、解説動画も何本か制作しています。(ああ、黒歴史)


ゲームブック作成講座 その8 ゲームブック作成ソフトAXMA Story Maker 1

スマホにも対応しており、制作者にも読者にも比較的簡単で乱数などによるバトルシステムもやろうと思えば出来るツールなので、いまでもいいと思っております。

でももう一つ、ご紹介した方がいいというツールがあるので、何回かに渡ってご紹介します。

おそらくゲームブック制作で世界で一番使われているツールと思われます。

その名もTwine。

より糸や麻、編むという意味合いがあります。

AXMA Story Makerも、Twineもかなりよく似たツールですがそれぞれに特色があり、パラグラフ遷移がわかりやすく図示される点ではTwineが優れています。

今回はスクショを提示し、導入方法、パラグラフ(passageとも言う)遷移の作り方を説明します。

 

目次

導入方法

Twineは多くのパソコンのOSに対応しています。

システム要件の詳細がないので完全保証はしませんが、Windows、MacOSX、Linuxで動きます。

それぞれどのWindows、MacOSXのどのバージョン、Linuxのどのディストリビューションとバージョンでインストールして動くかどうかはご自身でのご確認でお願いします。

まあ、そんなこんなでインストールはめんどくさいですよね?

そこでTwineにはオンライン版も用意されています。

f:id:oniisann:20171124193352j:plain

http://twinery.org/

簡単なので、オンライン版をお勧めします。

概要

さて、Twineの概要をお話しましょう。

f:id:oniisann:20171124193646j:plain

ハイ!

Twineはインタラクティブフィクションやノンリニアストーリー向けのオープンソースツールだよ。あなたが始めるのにちょいとばかり知っておくべき事があります。

インタラクティブフィクションは厳密に言うとチャットボットのように言葉を入力するUIのアドベンチャーゲームです。ノンリニアストーリーもよく意味がわかりませんが、要は時空を超えて物語がそれぞれ進んだりと、順序よい流れではないものぐらいの意味合いでしょうか。

まあ、要はゲームブックでいいです。

Twineでゲームブック作れます。

f:id:oniisann:20171124193651j:plain

コレって新しいの?

もしあなたがTwineを以前利用したことがなければ、初めまして!

Twine2のガイドがあるからそれを見てね。……Twineフォーラムもね。……

もしTwine1を利用したことがあるなら、……これはバージョンが変わったので、SugarCubeのフォーマットをつかってね。……。

実はTwineは現在のバージョンが2なのです。

更に2はフォーマットが3つあり、1と互換性のあるSugarCube、JavaScriptやCSSが得意な方向けのSnowMan、そしてデフォルトのHarloweがあります。

Harloweが一番初心者には扱いやすいと思います。

このエントリもHarloweで進めていきます。

f:id:oniisann:20171124193657j:plain

あなたの作業はブラウザにだけ保存されます。

これはあなたがTwine2ではアカウントを作る必要が無いことを意味します。……重要な点はあなたのブラウザにしか保存されないのでマメにArchiveボタンを押してね。……

あと誰もがブラウザであなたの作業を変更できるってことね。……。

オンライン版の特徴はブラウザに作成データが保存されることです。

そのためAと言うパソコンで創っていたものをBと言うパソコンで続きを作る場合、Aの作品のHTMLファイルをダウンロードし(アーカイブと呼ばれる)、BのパソコンでそのHTMLをインポートする必要があります。

f:id:oniisann:20171124193700j:plain

以上!

読んでくれてありがとう。Twineで楽しんでね。 

では早速始めましょう。

制作

Goto the Story Listを押すと、下記の画面が表示されます。

f:id:oniisann:20171124200018j:plain

+Storyボタンを押しましょう。

 

f:id:oniisann:20171124200021j:plain

作品のファイル名と言いますか、タイトルを付けます。

あとで変えることも可能です。

ここではテキトーに「Sample」にしておきます。

f:id:oniisann:20171124201807j:plain

f:id:oniisann:20171124200031j:plain

↑するとこのような「Untitled Passage」が表示されます。

Passageはゲームブックで表現されるパラグラフの事です。

マウスポインタを近づけるとアイコンが4つ表示されます。

それぞれ左からゴミ箱、編集、そこからテストする、スタート位置をここにする、と言う作用があります。

 

f:id:oniisann:20171124200039j:plain

↑さてスタートの文章を考えましょう。

とりあえずサンプルなので冒険に旅立つ主人公に立ちふさがる二択を入力と。

 

f:id:oniisann:20171124200028j:plain

↑「Untitled Passage」を「1」にしました。

そして選択肢は[[]]二重の大カッコでくくり、マイナス記号と大なり、パラグラフのタイトルを記載するとパラグラフ遷移を作ることが出来ます。

 

f:id:oniisann:20171124200849j:plain

左上のXを押すとこの通り。

パラグラフ1からパラグラフ2と3へ、それぞれ矢印が書かれているのがわかりますか?

 

では、パラグラフ2をダブルクリックして追記しましょう。

f:id:oniisann:20171124200035j:plain

英字で示されているとおり、本文をダブルクリックすれば本文入力ができます。

 

f:id:oniisann:20171124201234j:plain

↑こんな感じで。

 

f:id:oniisann:20171124201253j:plain

はい。パラグラフはこんなように図示されます。

これがとてもわかり易いです。

 

f:id:oniisann:20171124201324j:plain

なにせドラッグドロップして移動出来ます。

図はパラグラフ3を移動してみたところ。

 

f:id:oniisann:20171124201400j:plain

このように自由に並べ替えることが出来ます。

場所移動しても矢印はきちんと遷移を崩さずに表示されます。

とても滑らかに移動できますよ。

 

f:id:oniisann:20171124201458j:plain

右下に各種操作ボタンがあります。

左から、文字検索、置換、詳細、中間、最大表示、テストプレイ、本格プレイ、そしてPassage(パラグラフ)追加です。

さて、プレイを押して作品を楽しんでみましょう。

実行 

f:id:oniisann:20171124201705j:plain

実行画面です。

どうですか?

ハイパーリンクで選択肢が表示されますね。

試しに腹ごしらえをしてみましょう。

 

f:id:oniisann:20171124201750j:plain

そうしたらきちんと次のパラグラフが表示されます。

 

f:id:oniisann:20171124201754j:plain

やっぱりやめた~とか押し間違えた~という場合がありますね。

それに対する対策もバッチリです。

ご覧の通り、左側にUndoの矢印があります。

一度訪問して戻ったら、再度訪問するRedoもありますよ。

 

 HTML生成

f:id:oniisann:20171124201757j:plain

作品(ファイル)はブラウザに保存されると、図のように表記されます。

 

f:id:oniisann:20171124201800j:plain

↑左下の小さい三角形を押すと作品(ファイル)にいろいろな操作が出来ます。

ここではPublish to Fileを押してみます。

 

f:id:oniisann:20171124201803j:plain

↑このようにHTMLがダウンロードされました。

このファイルをクリックすると、先程Playした時と同様のものが表示されます。

 

f:id:oniisann:20171124201705j:plain

このファイルをゲームブック投稿サイトに投稿するといいわけです。

 

まとめ

そんな感じで、簡単に電子媒体のゲームブックを作成してくれる人気のツールTwine。

今回触れたのはほんの基本の基本のことなので、もっと奥深い機能を徐々にご紹介していきたいと思います。

 

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

 

eスポーツマガジンが届いたのでレビューを書いてみます。みんなでeSportsを応援しよう!

こんにちは。

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

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

本日は格闘ゲーム、eSportsの話題です。  

eスポーツマガジン (白夜ムック565)

eスポーツマガジン (白夜ムック565)

 

↑今回こちらのムックが発売されることとなり、先行予約して届いたのでその時の模様をお届けします。

 

予約していた

プロゲーマーの代名詞、梅原さんがこんなTweetをしていましたので、早速予約していました。 

発売日前に届く

ネット通販では届くのが遅かったり、送料が高い北海道に筆者は住んでいます。

でも今回は発売日が11月22日のところ20日に届きました。

f:id:oniisann:20171121201515j:plain

↑雪が降り積もり悪路のところ佐川急便で届きました。

お疲れ様でした。

表紙

f:id:oniisann:20171121201754j:plain

↑表紙はご覧のとおりです。

「世界で闘うということ」って煽り文句が踊りますが「格闘ゲームの世界で闘うということ」と言う方がより内容にあっています。

何というのか、格ゲーは世界中のアスリートと闘うのがデフォルトなので、野球みたいに日本のプロ野球が、メジャーリーグが……という話にはなりません。

そもそも東京に一番多くの強いプロゲーマーが揃っていますからね。

なのに肝心の日本で格ゲーのeSportsが盛り上がってないのはヤバイです。

東京オリンピックの正式種目として採用する以外選択肢はありませんぜ。

上手く行けば金銀銅総なめですよ。

裏表紙

f:id:oniisann:20171121202041j:plain

↑裏表紙こんな感じです。

何かの広告なんですが、大変に字が読みにくく、いいちこの宣伝より分かりにくいです。

LEDライトのようですが、格ゲーと関連性が高いようには思えないんですが……。

予約特典

f:id:oniisann:20171121201808j:plain

はい。特典ついてました。

「eスポーツマガジン」のステッカーです。

(…って小さ!)

十円玉で大きさが分かりますかね?

これ、最初先程の梱包資材の中に入っていることすら最初は分からず、

特典なしかな?

と思ったほどでした。

あとは特別な動画を見ることが出来ます。

これはいいですねぇ。

(もちろんそのURLやQRコードをステッカーや10円玉で隠してますよー)

あと、すみませんがもう予約特典は締め切られておりまする。

コンテンツ

プロゲーマーのインタビュー記事に多くを割いています。

見どころはやはり梅原さんやときどさんの記事の他、ゴールデンボンバーの歌広場淳さんとかずのこさんの対談ですね。

あと個人的にはネモさんと、Hatsumeさんのインタビューが面白かったです。

f:id:oniisann:20171121201801j:plain

↑Hatsumeさんの記事。

ネタバレしないようにモザイク処理をしておきました。

今では女子ゲーマーも徐々に現れていますが、まだまだマイノリティで、女性蔑視や女性ならではの嫌な思いも沢山してきたと綴られています。

興味深かったのは、筆者がHatsumeさんに抱いていたイメージが、ご自身も自覚しているという文が多数見受けられたこと。

どんなイメージかはぜひお読み下さい。

まあ、筆者のこのブログのどっかのエントリで触れている事なんですけどね。

eSportsを応援したい……が

先にも触れましたが、海外ではビッグニュースにもなるeSportsが、日本ではまだまだマイナーです。

f:id:oniisann:20171121205949j:plain

↑このように、意見広告が最後のページに掲載され、意気込みを感じます。

筆者も同意します。

f:id:oniisann:20171121210031j:plain

↑と思ったらその前のページに援助金として売上の一部が使われるそうです。

それは素晴らしいです。

でも、災害の募金は別の機会、場で良くないですかね?

そもそもこのムックを買う人こそeSportsが好きだったり、応援したい人であったり、ファンであったり、興味を持ち始めている人なわけです。

だから普通に、売上の一部をeSports推進のために使えば良いのでは?

読者の多くはそれを望むと想いますけどね……。

ハガキを切り取って応募!

ま、あとかなり筆者ががっくり膝をついてしまったのがこちらの企画。

f:id:oniisann:20171121210351j:plain

↑この点線部分を切り取ってアンケートを記入し、ハガキなどに貼り付けて応募すると抽選で5名様に梅原さんご提供のTシャツがもらえるのです。

さらにダブルチャンスで外れた人の中から10名に500円クオカードプレゼントです。

……ってさ~。

はあぁぁぁ~~。( ´Д`)=3

どんだけアナログなの?

まだハガキで消耗してるの?

普通に応募フォームとかで良くね? 

その方が集計とかも楽だし。

第一記入する方の手間を考えていただきたいのですが。

クオカードもAmazonとか楽天とかのポイントが手軽でいいと思うけどなあ。

切手代もかかるしさ。

日にちもかかるしょや、北海道とかだと。

まあね~

多分企画した人は、本当にこのムックを買ったという証拠が欲しいんでしょうね。

その気持は分かるけど、そんなの今の時代どうでも良さげな……。

たとえ買ってない人であっても、アンケートこそ重要だと思うけどな。

新たなムックを考える上でもね。

切って書いてハガキに貼ってポストに投函……。

これほど手間のかかることを筆者はやろうとは到底思えないですね。

Tシャツは欲しいし、別に何の見返りもなくともアンケートに協力したいという気持ちはあってもですよ。

だってそれがeSportsを推進する一歩になりうるんじゃないの?

そんなんだからeSportsが日本では盛り上がらないんだよ……。

(新たな事実を発見)

口直し

誤解のないように。

内容は素晴らしいです。

後味が悪いので、別のサイトからの画像引用ですが、貼っておきます。

http://www.4gamer.net/games/283/G028399/20170924057/TN/005.jpg

www.4gamer.netより画像引用

はい。にっこり笑顔のスリーショットです。

↑チョコブランカさんがTweetで言及している、その画像です。 

いいですね。

プロゲーマーはお互い本当に仲がいいんです。

それでいてライバルとして認め合い、尊重しあい、協力しあい、ともに強くなっていっているんです。

どっかの業界みたいに酒の場でビール瓶とか使ったり、女性に排他的ではありません。

そういう雰囲気や意識を創ったのは梅原さんといっても過言ではないでしょう。

多くのプロゲーマーが梅原さんを尊敬し、慕い、追いつき追い越そうという感じが本当に良く見て取れるんですよね。 

勝ち続ける意志力 世界一プロ・ゲーマーの「仕事術」 (小学館101新書)

勝ち続ける意志力 世界一プロ・ゲーマーの「仕事術」 (小学館101新書)

 

↑著作もためになりますよ。 

東大卒プロゲーマー 論理は結局、情熱にかなわない (PHP新書)

東大卒プロゲーマー 論理は結局、情熱にかなわない (PHP新書)

 

↑あとコレも良かったです。

いかに梅原さんがときどさんから尊敬されているか伺えます。 

まとめ

そんな感じでeSports界隈は大変に興味深くエキサイティングです。

Evo Japan 2018と言う大会が来年年明けにありますから注目ですよ。

なので、このムックがあるとより存分にeSportsのことに詳しくなり、より楽しめますので、非常にお勧めの逸品です。

ぜひお買い求め下さい! 

eスポーツマガジン (白夜ムック565)

eスポーツマガジン (白夜ムック565)

 

宣伝

あと、筆者もeSportsをテーマにしたゲームブックを作成中ですので、遊んでやって下さい。

 

f:id:oniisann:20171026003330j:plain

白杖の女子ゲーマー

たまたま立ち寄ったゲーセンで見かけたJKは脇に白い杖を立てかけていた……。目が不自由なのに格ゲーがめちゃ強い!

一体何なんだこの子は……。主人公は一目惚れ。

さてあなたは主人公を操作し、彼女のプロゲーマーになりたいという想いを叶えてあげられるだろうか??

 

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

 

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