Storyline360で魔女のゲームを作る!

原文「How I Built This Broomstick Brew Game in Storyline 360

ゲームを体験する


筆者は子供の頃、いつもハロウィンを楽しみにしていました。私の中では、ハロウィンそれは最高の休日の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つの長い背景のように見せました。


このゲームを作るのに、何度もズームイン/ズームアウトしました😆

星空の紫/青の空の背景にも同様の手法を使用しましたが、視差効果のためにアニメーションをゆっくりと移動させるために後でアニメーションを追加する予定だったため、グラフィック全体の幅を狭くしました。

背景を設定した状態で、タイムライン上の各グループを一時的にロックして、他の画像をインポートして作業する際に誤って背景画像をクリックしないようにしました。


魔女

次に、魔女の画像を挿入しました。ゲーム設定は夜なので、暗い背景に対して魔女を目立たせたいと思いま