2013年10月05日

HypeDynの使い方02

では「HypeDyn」で簡単な選択肢付きのゲームブックを作成していきます。

31.jpg

まず新しくパラグラフを作ります。

22.jpg

左上の「New node」のボタンをクリックするとパラグラフのタイトル名を訊いてきますので入力して設定します。例では「スタート」と入力しました。

21.jpg

新しいパラグラフのオブジェクトがフローチャートマップに表示されます。

20.jpg

そのオブジェクトをダブルクリックするか、選択して赤枠で表示させた後に「Edit node」をクリックすると新しいウィンドウが表示されます。これがパラグラフの編集ウィンドウです。

19.jpg

右の欄に本文を入力します。選択肢のテキストもまとめて書きます。画像の例では宝探しに島へやってきて山へ行くか海へ行くかの選択肢まで記載しました。

11.jpg

このパラグラフをスタートのパラグラフにしたいので上の「Set start node」ボタンをクリックします。
パラグラフのタイトルに(start node)と表記されます。これでプレイ時にはこのパラグラフからスタートすることになります。

選択肢のリンク設定はリンク先のパラグラフを先に作らないと指定できません。ここはそのままパラグラフ設定ウィンドウを閉じて、新たに山へ行くパラグラフと海へ行くパラグラフを同じ要領で作成します。パラグラフ名は「山」と「海」で本文は山と海共に「○○へやってきた」とだけ書きました。

10.jpg

上画像のように三つのパラグラフがフローチャートマップに作られました。今度はこの三つのパラグラフをリンクで繋げていきます。

18.jpg

スタートのオブジェクトをダブルクリックしてください。もう一度スタートのパラグラフの編集ウィンドウが立ち上がりました。今度は画像本文下の「山方面へ行く」というテキストを選択して反転させます。
 そうしたら左上の「New link」をクリックすると下のリンク名を入力するウィンドウが出ます。
尚、隣の「Edit Link」は設定済みのリンクを編集、「Rename link」はリンク名の変更、「Delete link」はリンクの削除のボタンです。

17.jpg

ここのリンク名はプレイには表示されません。適当に入力しましょう。例では「山へ行く」としました。

16.jpg

すると上のような画面が出ます。これは選択肢テキストをクリックした時のアクションを設定する画面です。左下の「Add Rule」をクリックしますと、

15.jpg

「new rule」というリストが現れました。これをダブルクリックするか、選択して青くした状態で下の「Edit Rule」をクリックします。

14.jpg

すると次はこちらの画面になります。画面上の「Rule name」に「山へ行く」と入力します。ここはプレイ時には表示されないので無記入でも構いません。
その下のウィンドウ上部分はこの選択肢を有効にさせるための条件です。今回は使わないので無視して、一番下の欄の「Add Action」に注目してください。その隣の欄が「follow link to」になっている事を確認して「Add Action」をクリック。

13.jpg

すると「follow link to」と下部のリストに表示されリンク先を指定出来ます。この選択肢は山へ行くという選択肢なのでリストから「山」を選びます。

09.jpg

「OK」を押すと元の画面に戻って反映されました。「Close」を押して閉じます。
同じように海へ行く選択肢もリンクで繋げます。

08.jpg

23.jpg

本文は下線付きのリンクになり、フローチャートマップのオブジェクトには矢印が設定されました。矢印の間の赤文字はリンクの名前です。


ここまで作ったところでテストプレイしてみましょう。画面左上の「Run」をクリックします。

06.jpg

ですが日本語では文字化けします。これは簡単に日本語表示できるのでそのためにまず出来たゲームブックをHTMLに出力しましょう。

07.jpg

「File」メニューの「Export for Web…」をクリックすると、保存先を訊いてくるので適当な場所に保存します。保存されるのはファイルではなくフォルダで出力されます。

05.jpg

そのフォルダには数多くのファイルがあります。ネットで公開するにはこのフォルダ下のこれらのファイルを全てアップロードする必要があります。

index.htmlファイルをテキストエディタで開いてみてください。右クリック、アプリケーションから開くでWindowsならメモ帳で開いてもいいでしょう。

04.jpg

上画像のように文字列が表示されます。上から6行目の反転している「utf-8」の部分が文字化けを起こしている元凶です。

03.jpg

ここを「Shift_JIS」に変えて上書き保存するだけで問題は解決します。
ではもう一度index.htmlファイルを開いてみましょう。ダブルクリックするとブラウザが立ち上がります。

02.jpg

今回はちゃんと日本語で表示されました。

01.jpg

「山方面へ行く」をクリックするとページが変わります。
今回はここまで作りました。次回ではフラグや変数を使ったものを記事にします。

おつかれさまでした。
posted by 文芸遊戯研究会 at 23:55| 制作ソフト | このブログの読者になる | 更新情報をチェックする