ステージデザイナー・ヘルプファイル - チュートリアル

 背景を描画する
いままでチュートリアルで作成してきたマップでは、背景が真っ黒でしたね。
そこで、右のような背景をつくってみましょう。

右図の背景は、遠景が表現されています。マップのスクロール速度がプレイヤーの
いるレイヤーとは異なるため、遠くのものを映しているかのように表現できます。
このような表現は、レイヤーを用いることで簡単につくることができます。

★このチュートリアルにそって作成したゲームのサンプルプロジェクトを、
以下のリンクからダウンロードできます。
Floppy.ico(1406 byte)プロジェクトファイル:ダウンロード
tut13_main.png(37942 byte)


 背景をつくる
今回のチュートリアルでは、以下の画像を背景として使用します。
(ステージデザイナーのサンプルプロジェクト「TestPrjV2」で使用されているものとおなじですね。)

上の画像を保存し、プロジェクトに取り込んでください。
(使用しているブラウザによって異なりますが、画像上で右クリックし、「対象をファイルに保存」のような項目を選択します。)

取り込んだら、この画像を用いてマップチップを作成します。
先ほどの画像は、右図のように縦128px, 横256pxを編集単位とする
マップチップ画像であるので、これに合わせて編集単位を設定し、
名称を「背景」とし、先ほどの画像を用いてマップチップを作成
してください。

※名称に関しては本来は自由ですが、説明の都合上「背景」と
することをお勧めします。
tut13_back1.png(6653 byte)

bar.png(864 byte)

つぎに、背景をつくるマップにレイヤー「背景レイヤー」を追加し、
右画像のように背景レイヤーをリストの最上部へ移動させてください。

レイヤーはリスト上部にあるものから描画されるので、この場合は
背景がはじめに描画されます。よって、背景レイヤーに描く背景が
一番後ろ側になるように描画されることになります。
tut13_layerlist.png(6925 byte)

bar.png(864 byte)

つぎに、作成した背景レイヤーを選択し編集ボタンを
押すと、右図のような画面が現れます。

まずは、編集単位を背景用に作成したマップチップの
大きさ(幅256px, 高さ128px)とし、レイヤーサイズを
幅1, 高さ1として決定ボタンを押してみます。

すると、「レイヤーの大きさが不足しています。」という
エラーメッセージ(画像1)の後、最低必要な大きさが
表示されます。
エラーメッセージを閉じた後、レイヤーサイズをこの大きさに
設定します。
※このへんの操作性については今後改善したいと考えています。
 現状ではこんな感じで編集してください。

最後に、「無限ループマップ」にチェックを入れて、ウエイトを
2にします。

ウエイトとは、スクロールの度合いを表す数値で、1だと通常の
スクロール速度、1より大きいと通常のスクロール速度より遅くなり、
1より小さいと速くなります。
この数値を調整して、遠景の度合いを調整してみるのもいいでしょう。

無限ループマップを有効にすると、レイヤー端まで描画しても自動で
もう一方の端から描画を再開し、ループ描画します。
tut13_diag.png(6925 byte)

bar.png(864 byte)

最後に、作成したレイヤーに先ほど作成した背景用マップチップを下図のように配置します。
tut13_setchip.png(35784 byte)

ここまでできたら実行してみましょう。背景とプレイヤーの所属するレイヤーとでは、スクロールの度合いが違うことが
確認できるかと思います。

遠景を作成する手順はこのように、使用したい画像をマップチップとして登録し、スクロールのウエイトを調整して
無限ループマップを有効にするだけです。



bar.png(864 byte)

←チュートリアル12へ戻る  
←チュートリアルもくじへ戻る
←トップページへ戻る