筆者は子供の頃、いつもハロウィンを楽しみにしていました。私の中では、ハロウィンそれは最高の休日の1つですが、かかりつけの歯医者さんはおそらく同意しないでしょう。昔ながらのキャンディーバケツである真っ白な枕カバーにたくさんのキャンディーを集めるだけでなく、一年に一度、クリエイティブになって仮装を計画するようになりました。
今年、私は自分の創造的なアイデアをStoryline 360に向け、楽しいハロウィンの御馳走としてこのほうきゲームを構築することにしました。ゲームのさまざまなコンポーネントをどのように作成したのか？という質問を数人から受けたので、プロセスを共有したいと思います。
1. ストーリーボードを作成
各プロジェクトで、自分のビジョンをストーリーボードに描くのが好きです。付箋紙やビジュアルストーリーボードテンプレートにアイデアを描くことがあります。アイデアを描くことで全体像を把握できるので、足りない部分を埋めたり、うまくないアイデアを削ったりすることができます。
ビジョンの実現方法をしっかりと理解したら、Storyline 360でストーリーボードを具現化します。必要なスライドをすべて追加し、各スライドとレイヤーにタイトルを付けます。この例では、Title、Game、Resultsの3つのスライドを用意する予定でした。
もしストーリーボードに慣れていない場合は、「eラーニングストーリーボードのベストプラクティス」で詳細を学ぶことができます。
2. イメージ画像を探す
ストーリーボード化されたアイデアにより、ゲームを構築するために必要な素材がわかりました。時々私自身でグラフィックを作成する時がありますが、このゲームのためにそれをやった場合、私はおそらく来年になっても準備ができないので、Content Library 360の中にあるアイコンを使って開発時間を節約することにしました。
Content Library 360で画像を検索し、このクモの巣アイコンを見つけました。
Content Library 360のアイコンの色は、他の図形と同じように編集できるので、Storyline360で色を簡単にカスタマイズできました。
もし必要なものが見つからない場合は、他の無料のリソースをオンラインで検索することもできます。
このプロジェクトでは、Freepikで様々な画像を見つけました。気に入ったスタイルの背景画像を見つけた時、ユーザー名をクリックして、同じテーマのグラフィックをアーティスト名から探すことができました。検索バーを使って、検索キーワードを追加することもできます。また同じアーティストのグラフィックを使えば、ルックアンドフィールの一貫性を保つことができます。
プロジェクトによっては、グラフィックの一部を編集する必要がある場合があります。例えば、配色を変更したり、画像から何かを削除したりするケースです。これが、Freepikを本当に気に入っているもう1つの理由です。Freepikのデータには、Adobe Illustratorファイルが含まれています。ニーズに合わせて画像を非常に簡単にカスタマイズできます。
ゼロから作成するのではなく、これらの素材を調達することで、時間を大幅に節約できました。
素材の調達に関するその他のヒントについては、この記事「eラーニングコースに必要な素材を手に入れる」を参照してください。
3. オーディオを追加する
私がプロジェクトに追加したいもう1つの要素は、サウンドです。プロジェクトを生き生きとさせる適切なBGMや効果音です。このプロジェクトでは、必要なすべての音楽とサウンドエフェクトのリストを作成しました。YouTubeオーディオライブラリで音楽トラックを検索し、Freesound.orgで効果音を検索しました。含めるオーディオファイルを決定する前に、いくつかのオーディオファイルを聴きました。
これまでeラーニングで効果音を使用したことがない場合は、この役立つ記事「eラーニングで効果音を使用するためのヒント」を確認してください。
4. スライドを作成する
すべての素材を入手したら、様々なアニメーションとトリガーを使用して3つのスライドを作成します。各スライドの作成方法を見ていきましょう。
スライド＃1：タイトルスライド
冒頭のスライドは、体験全体のトーンを設定することができます。これは、学習者がコース開始時に最初に目にするものです。このスライドがゲームのルックアンドフィールを反映していることを確認します。
イメージ画像
画像のソースファイルがあったので、イラストから魔女、2本の木、クモ、岩、大釜、空などの要素を抜き出し、アニメーション化してこのスライドを作成することができました。プロジェクト全体で使用されているこれらすべての画像を見ることができますが、方法は異なります。素材の転用は、時間を節約し、すべてをまとまりのあるものに見せるための優れた方法です。
アニメーション
画像を配置したのでアニメーションを設定する準備が整いました。アニメーションを使用すると、エクスペリエンスが向上し、学習者をコンテンツに没入させることができます。このスライドに含めたアニメーションのいくつかを見てみましょう。
このゲームは魔女に関するものなので、魔女を画面に飛ばしてゲームのタイトルを紹介するのは雰囲気に合っていると思います。この効果を作成するために、魔女にArc（円弧）モーションパスを追加し、タイトルテキスト「Broomstick Brew」に右からワイプするアニメーションを追加しました。
これだけではオープニングスライドは完成しません。結局、これはBroomstick Brewを作るゲームです。そこで複数のLineモーションパスを使用して、大釜に沸き立つ泡を追加しました。
泡が沸き上がっているのに魔女がいないと寂しかったので、魔女を画面にアニメーションさせて大釜の上に浮かせることにしました。fly-inエントランスアニメーションを使用して魔女をスライドにアニメーションさせ、フリーフォームモーションパスを使用してその場で浮かんでいる効果を設定しました。また、プレイヤーが再生アイコンを選択すると、魔女が画面から飛び出すように、Arc（円弧）モーションパスを追加しました。
タイムライン/トリガー
アニメーションのタイミングを調整してタイムラインに配置する際、一連のイベントがあるストーリーのように考えることがあります。アニメーションもストーリーを伝えるため、適切なタイミングでアニメーションを設定することが重要です。アニメーションのある各画像をタイムラインに戦略的に配置して、最も意味のあるときに再生できるようにしました。それぞれのタイムラインが開始されたときに、指定されたモーションパスに沿ってさまざまな画像（魔女1、魔女2、クモ、大釜の泡）をアニメーションさせるためのトリガーをいくつか追加しました。たとえば、大釜の泡のトリガーは次のようになります。
そして、タイムラインでどのように設定しているかを垣間見ることができます。
サイズの異なる泡をさまざまな時間に均等に分散させて、よりリアルに見えるようにしました。
スライドを再生させると、浮かぶ魔女と大釜の泡のアニメーションが止まらないことに気づいたかもしれません。しかし、スライドの長さはわずか9.25秒です。では、どのようにしてGIFのようなアニメーションを実現したのでしょうか。タイムラインが終了すると、タイムラインの特定の時間にジャンプするjump-to-timeトリガーを設定しました。
スライド全体を最初からもう一度再生したくなかったので、アニメーションをループさせたい場所にジャンプするようにタイミングを合わせました。
オーディオ
前のセクションで説明した、jump-to-timeトリガーを使ってループアニメーションを作成したので、あなたは疑問に思われるかもしれません。それは、スライドがタイムラインの別の部分にジャンプした時に、音楽を継続して再生し続けるにはどうすればよいのかという点です。実現する方法としては、音楽を別のレイヤーに追加し、ベースレイヤーにトリガーを設定して、タイムラインの開始時に音楽レイヤーを表示し、実現しました。
この小さなトリックにより、ユーザーは、音楽レイヤーのオーディオが継続的に再生されるのを聞きながら、ベースレイヤーのアニメーションを表示し、インタラクティブで、アニメーションループを表示することができます。このスライドで使用したレイヤーを見てみましょう。
そしてユーザーが再生アイコンをクリックすると、右からワイプするentrance アニメーションでトランジションレイヤーが表示され、次のスライドにジャンプします。
スライド＃2：Gameスライド
ゲームの時間です！最初に、このスライドに使用した様々なコンポーネントをすべて見てみましょう。
レイヤー
このスライドにはいくつかのレイヤーが含まれています。
プロセス全体でこれらの様々なレイヤーを参照します。
すべてを機能させるにはかなりトラブルシューティングを行う必要があったため、このゲームスライドを2つの別々のスライド（手順とゲーム）に分割した方がおそらく効率的だったと思います。
幸い、Storyline 360のトリガーを無効にする機能を使用して、様々なトリガーを簡単に試し、すべてを機能させることができました。
様々なゲームコンポーネントについて詳しく見ていきましょう。
インストラクション
ゲームスライドに最初に表示されるのは「How1」レイヤーです。これには終了時に右からワイプする紫色のトランジションが含まれ、プレイ方法の説明が表示されます。
ボタン
紫色のボタンは見覚えありますよね、最初のスライドで使用したボタンです。プロジェクト全体で同じボタン背景を使用して、異なるContent Library 360アイコンを追加できるように、Photoshopでボタンを作成した時に意図的にアイコンは空白のままにしました。
また、明るさのレベルを下げることで、ホバーステイトを追加しました。
ボタンのステイトについては、「Storyline 360のステイト機能について知っておくべきこと」をご覧ください。
そして、下の画像はどのように見えるかを示したものです。
独自のアイコンを作成したり、複数のボタン画像をStorylineにインポートしたりする必要がなかったため、多くの時間を節約できました。カスタムボタン背景を1つ作成するだけで、Storyline 360内で、プロジェクト全体ですばやく簡単にカスタマイズできました。
インストラクションをクリックすると、カウントダウンタイマーが表示され、ゲームが始まります。
背景
魔女が森の中を飛んでいるようにするために、Adobe Illustratorで背景ファイルを開き、それらを組み合わせ、色を変更し、いくつかのアイテムを移動して、1つの長いシーンのように見せました。Storyline360の画像の最大サイズは2,048x 2,048ピクセルであるため、高品質を維持するために非常に横に長い画像をいくつかに分割しました。
各背景画像をStoryline360に挿入し、それらをつなぎ合わせて1つの長い背景のように見せました。
このゲームを作るのに、何度もズームイン/ズームアウトしました😆
星空の紫/青の空の背景にも同様の手法を使用しましたが、視差効果のためにアニメーションをゆっくりと移動させるために後でアニメーションを追加する予定だったため、グラフィック全体の幅を狭くしました。
背景を設定した状態で、タイムライン上の各グループを一時的にロックして、他の画像をインポートして作業する際に誤って背景画像をクリックしないようにしました。
魔女
次に、魔女の画像を挿入しました。ゲーム設定は夜なので、暗い背景に対して魔女を目立たせたいと思いました。これを実現するために、Glow効果を使用しました。
これで、魔女ははるかに目立つようになりました。魔法がかかっているようですね。
魔女を動かすために、オブジェクトに2つのLineモーションパスアニメーション（上下）を追加しました。
パスごとに、中断したところからオブジェクトが移動するように、Relative Start Point（相対開始点）を選択しました。
魔女がかなり速く動くように、各モーションパスのdurationを00.10秒にしました。
また下記画像のように魔女の動きを合計5つの垂直領域に制限したかったのです。
各モーションパスの長さを決定するために、スライドの高さ（720ピクセル）を移動範囲（5）で割った結果、モーションパスの長さは144ピクセルになりました。各モーションパスで青い点線を選択しまし、アニメーションタブで長さを編集しました。
キーボードで上下に動かけるように、2つのトリガーを設定しました。
プレイヤーが魔女を5つの垂直領域を超えて移動した場合、範囲外に出たことを示すレイヤーを表示するトリガーをベースレイヤーに設定しました。
魔女がスライド内に戻るまでゲームは一時停止します。
このゲームに追加要素を与えるために、魔女がお化けに当たった時に反時計回りにスピンするアニメーションを追加しました。これを実現するために、オブジェクトにCrashステイトを追加設定しました。
すでにあなたはお気づきになっているかもしれません。そう、ステイトにアニメーションを追加することはできません。すでにステイト設定上のオブジェクトにアニメーションを追加することはできませんが、裏技的にいったんオブジェクトを目的のステイトからカット（CTRL + X）し、スライドに貼り付け（CTRL + V）、アニメーションを追加設定してから、オブジェクトをカットし、目的のステイトに戻りペーストします。
まさに私が行ったテクニックです。これで、オブジェクトにはそのステイトでアニメーションが追加されました。また、オレンジ色の-5というテキストを含め、クラッシュするたびに5ポイントを失うことをプレイヤーに知らせました。
すべての素材をStoryline360に入れ込むと、Crashトリガーは次のようになります。
ベースレイヤーに、次のように設定しています。
Crashレイヤーに、次のトリガーを設定しています。
また、クラッシュした時のオーディオファイルをインポートして、ヒットしたことをプレイヤーに知らせるようにしました。このレイヤーのタイムラインは1秒間です。
ポーションボトル（薬瓶）
ゲームの目的はポーションを集めることなので、暗い背景に対して目立つようにしたかったのです。魔女と同じように、4つのポーションのそれぞれにglow効果を追加しました。
魔女が各ポーションを集めると、ポーションは消えます。各ポーションにDisableステイトを追加し、画像を削除することで、その効果を実現しました。
次に、魔女がポーションと交差した時にステイトを変更するために、各ポーションのトリガーを設定しました。
例として、キノコのポーションのトリガーは次のようになります。
4つのポーションすべてのトリガーを設定した後、それらを複製しました。あるポーションから別のポーションにトリガーをコピーして貼り付け、トリガーパネルで微調整しました。
これがキノコのポーションのトリガーパネルです。
33つのポーションすべてをスクロールする背景全体に散らばらせました。これが、前もって計画する理由です。Disableステイトは、新しい各ポーションについています。ポーションを挿入して複製した時に個別にクリックして33回異なるステイトを編集する必要がある？その考えはNoです！👻
魔女が各ゾーン内のポーションしか収集できないように、私は戦略的に各ポーションを5つの各垂直ゾーンに1つしか配置しませんでした。
5つの透明な図形は、各ポーションを橋、墓石、枝、岩、ユリなど、どこに配置して、シーンの一部のように見えるように確認するのに役立ちました。
プレイヤーに達成感を与えるために、ポーションを集めるたびにポジティブな効果音を鳴らすトリガーを作成しました。
背景の時と同様に、ポーションをグループ化し（CTRL + G）、他の画像をインポートして作業する際に誤ってクリックしないように、タイムラインでグループを一時的にロックしました。
カラス
さて、お化けやクリーチャーをインポートする時が来ました。私はカラスを探し始めました。上の画像を見つけて、Adobe Illustratorファイルで作り直して、2種類のカラスを作成しました。
1. フライング：画像の一番上のカラスを使用し、Lineモーションパスを追加しました。
2. 食べる：残りの2つのカラスを組み合わせて、PhotoshopでアニメーションGIFを作成し、それをStoryline360にインポートしました。
私はカラスを複製し、やりがいのあるゲームになりそうな場所に配置しました。そして、透明なカラスGIFの周りに変な白い線があることに気づきました。
Photoshopは背景が白であると想定したため、半透明のエッジが白に合わせてフェードしていたことに私は気づきました。暗い色にフェードするバージョンを保存するには、Photoshopに戻る必要がありました。しかし幸いなことに、私はすべてのカラスを手動で一つ一つ置き換える必要はありませんでした。メディアライブラリの置換機能を使って、修正前のカラスGIFを修正後のカラスGIFに一括で置換できました。
お化け
適したお化けを見つけるための私の目標は、微調整しやすいものを見つけることでした。上の画像を見つけて、使いたいゴーストを選びました。Adobe Illustratorで背景を削除して、お気に入りの2つのゴーストをStoryline360にインポートしました。
少し透けて見えるようにするために、透明度を21％に設定しました。
最初のゴーストにArc（円弧）モーションパスを設定し、残りのゴーストにCircle（円）モーションパスを追加しました。
クモ
クモを探すのは日常ではありません。ありがたいことに、これは本物ではありません。私はたくさんのクモの画像をふるいにかけ、その大きなクモの笑顔が途方もなく完璧だったので、最終的に上の画像を選びました。ゲームでは、それを逆さまにし、Content Library 360で見つけたクモの巣アイコンに配置しました。
障害物として、クモを下に動かすのは楽しいだろうと思いました。クモの巣と同じ色で直線を作成し、クモとグループ化し、lineモーションパスを追加しました。
コウモリ
最後のクリーチャーとして、コウモリを追加することにしました。オンラインでコウモリのアニメーションGIFを見つけましたが、動きが多すぎました。私はコウモリに2つの飛行動作を持たせたかっただけです。見つけたコウモリのGIFを使用して、カラスに使用したのと同じ手法でPhotoshopでGIFを再作成し、独自のバージョンを作成しました。
コウモリにアニメーションを追加する必要はありませんでしたが、すでにGIFであったため、ゲーム難易度を上げるために、いくつかのアニメーションにlineモーションパスを追加することにしました。
スライド上ですべてのクリーチャーが表示されたら、それぞれを名前でグループ化しました。
このスライドにはたくさんのオブジェクトがあるので、似たオブジェクト群に名前を付けてグループ化することで、いくつかのことをテストして調整しながら、トリガーとタイムラインを整理することができました。
スコアリングシステム
ゲームの難易度を決めるのに苦労しました。ゲーマーは簡単すぎるゲームをいつも嫌うので、私は難易度を本当に難しくしました。しかし、私は難易度を上げすぎたかもしれないことに今、気づきました😆
スコアリングシステムは次のとおりです。
スコアリングをシンプルにしたかったのです。合計スコアを取得するために1つの変数を作成しました。
集めたポーションごとに、スコアが2ずつ増えます。これを実現するために、ベースレイヤーにトリガーを作成しました。
プレイヤーがお化けやクリーチャーに衝突した場合、スコアから5ポイントが差し引かれます。
また、変数の参照機能で、上部にスコアを表示するようにしました。
一緒に機能させる
スライドにすべての素材が用意できたので、それらを画面上でシームレスに稼働させる時が来ました。背景、クリーチャー、ポーションをすべて同時に同じ速度で動かすために、私は最初にそれらをグループ化しました。
スライドビューでズームアウトし、Gameグループにlineモーションパスアニメーションを追加しました。グループの右側がスライド領域に到達するまで、グループを左にドラッグしました。
イージング方向を「None」にしました。
そして、Duration時間を58秒に変更しました。
Skyグループには、Lineモーションパスアニメーションも追加しました。グループの右側がスライド領域に到達するまで、グループを左にドラッグしました。
Gameグループと同様に、イージング方向を[None]に編集し、Duration時間を58秒に変更しました。Gameグループと同じDuration時間でしたが、グループとモーションパスの幅が狭かったため、Skyグループの移動ペースは遅くなりましたが、結果的に視差効果が出て良かったです。
ゲームはすべて設定されています！魔女がスライドの終わりに達すると、Houseレイヤーに絶妙なフェードと共にドアが開いて魔女が入ります。ドアが閉じると、Entrance-Growアニメーションを備えた紫の楕円形を使用して次のスライドに移動します。
スライド#3：結果スライド
最後のスライドで、プレイヤーはゲームの評価と結果を確認できます。画像、アニメーション、音声を使って体験を作り続けました。
画像
背景を切り替えて、大釜、ポップアップボックス、ボタン、ポーション、魔女などの一部の素材を再利用して、すべてをまとめました。
アニメーション
画像を配置したら、アニメーションを追加する準備が整いました。前述のように、関連するアニメーションを使用すると、エクスペリエンスが向上し、人々をコンテンツに結び付けることができます。このスライドに含めたアニメーションのいくつかを見てみましょう。
この前のシーンで、魔女がドアに入るとドアが閉まるので、魔女をこのシーンに飛ばして、集めたポーションを大釜に落とすのは理にかなっています。この効果を作成するために、2つのモーションパスアニメーションを魔女に追加しました。フライインするArc（円弧）モーションパスとフライアウトするLineモーションパスです。また、各ポーションと各バブルにLineモーションパスを追加しました。
ステイト
ゲーム全体に詳細を追加して、エクスペリエンスを面白くすることを楽しんでいます。魔女が大釜の上にいる時によく見ると、ポーションをポケットから引き出して落とすように手が上がってきます。カスタムステイトを追加することで、この効果を実現しました。
タイムライン/トリガー
アニメーションのある各画像をタイムラインに戦略的に配置しました。ステイトを変更するか、タイムラインの特定のポイントに到達したときに指定されたモーションパスに沿ってさまざまな画像（魔女、ポーション、大釜の泡）を移動するために、いくつかのトリガーを追加しました。
最初のスライドと同様に、jump-to-timeトリガーを使用して、このスライドのアニメーションをループしました。
オーディオ
前述のように、スライドがタイムラインのある部分にジャンプした時でも音楽の再生を継続させるために、音楽を別レイヤーに追加し、ベースレイヤーにトリガーを作成して、タイムラインの開始時に音楽レイヤーを表示しました。
結果
最近の流行では、5つ星で評価していることが多いようです。プレイヤーが魔女を操作しているので、星の数を追加してその様子を示すのは楽しい要素だと思いました。
下記の作成したトリガーをご覧ください。Score変数を使用して、プレイヤーが獲得した星の数を決定しています。
これがこのゲームを作成した方法です！まだプレイしていない場合は、ぜひプレイしてみください。
株式会社ディーシェは日本におけるArticulate製品の販売代理店です