この記事では、2Dゲームの背景の作り方として、Asepriteで２Dゲーム用の背景タイルを作成し、GMS2(GameMakerStudio2)で取り込む方法までを解説します。
・GMS2やAsepriteを使った2Dゲーム用の背景の作り方を知りたい
・Asepriteのタイルモード(Tiled Mode)の活用方法を知りたい
・GMS2での背景レイヤーの使い方を整理したい
といった方向けの情報になります。
それではAsepriteでの背景スプライト作成から始めていきましょう。
Asepriteでの背景スプライト作成
まずはAsepriteで背景に使うためのスプライトを作成していきます。
ゲームの背景のように縦方向あるいは横方向にループするようなスプライトを作成する場合は、Asepriteに搭載されている「タイルモード(Tiled Mode)」を活用すると便利です。
タイルモードは、上部メニューの[View]→[Tiled Mode]から有効化できます。
今回は背景として山を作成していきますので、横方向(X軸)のタイルになる[Tiled in X Axis]をクリックします。
タイルモードが有効になると、指定した軸方向にタイルが展開され、以下のgifのようにタイル状のびょいう画が可能になります。
この機能を有効化した状態で以下のように背景スプライトを描いていきます。
タイルモードで描画をするときはタイルのつなぎ目に違和感が出ないように、スプライトの中心部分で描いていくのがコツです。
ここで、タイルモードをオフにしてスプライトの実態を確認してみましょう。
タイルモードを無効化するときは、上部メニューの[View]→[Tiled Mode]から[None]を選択します。
タイルモードを無効化してみると、以下のようなスプライトが実態であることが確認できます。
この記事では練習用の為行っていませんが、細かいディティールの調整などはタイルモードを無効化した状態のほうが作業をすすめやすいです。(タイルの境界部分には注意)
スプライトを書き終わったら、GMS２で取り込めるようにデータを出力(エクスポート)していきます。
データのエクスポートは、上部メニューの[File]→[Export] (またはCtrl+Alt+Shift+S)から行います。
右下にエクスポートウィンドウが展開するため、必要な設定を確認した後、ウィンドウ下部の[Export]をクリックして、エクスポートは完了です。
エクスプローラーを確認すると出力先のディレクトリにpng形式でファイルが出力されていることがわかります。
GMS2でのゲーム背景作成
背景用のスプライトデータが用意できたところで、GMS2での作業に取り掛かっていきましょう。
ここでの作業は大きく以下の手順になります。
- スプライトデータの取り込み
- ルームの作成(省略可)
- ルームでの背景レイヤー作成
スプライトデータの取り込み
まずは先ほど作成した背景スプライトデータ(pngファイル)をGMS2に取り込んでいきます。
GMS2のエディタ右側にある[Sprites]フォルダで右クリックしてメニューを開き、
[Create]→[Sprite]をクリックして新規スプライトを作成します。
新規スプライトが作成できたら、[Import]ボタンをクリックして先ほど作成したpngファイルを選択することで取り込みが完了します。
ルームの作成(省略可)
次に、GMS2で背景を追加するルームを作成していきます。(既存のルームに追加する場合は読み飛ばして下さい)
ルームを作成するときは、エディタ右側にある[Rooms]フォルダで右クリックしてメニューを開き、
[Create]→[Room]をクリックします。
以下のようにルーム編集画面が表示されたら、新規ルームの作成は完了です。
ルームでの背景レイヤー作成
ここまでの作業で背景画像であるスプライトと、背景を配置するルームの用意ができました。
GMS2でルームに背景を配置するためには、「背景レイヤー」を作成します。
ルームに背景レイヤーを追加するには、ルーム編集画面の左側にあるレイヤータブの下にある、[Create New Background Layer]アイコンをクリックします。
＊ここで、背景レイヤーとその他レイヤーの前後関係に注意して下さい。
→全面に表示したい要素が含まれるレイヤーをレイヤタブの上へ、背面に表示したい要素が含まれるレイヤーを下へ配置します。
背景レイヤーを追加したら、同じく画面左側にある背景レイヤーの編集タブにて、先程用意したスプライトデータを参照します。(以下画像参照)
背景レイヤーにスプライトを設定できたら、タイルの設定をしていきます。
今回の場合は横方向にループする背景の適用になるため、背景レイヤーの編集タブにある、
[Horizonatal Tile]にチェックを入れます。
→チェックを入れるとすぐに、右側のプレビューでAsepriteの編集画面と同じような右側のタイル設定が適用されていることが確認できます。
背景スプライトの表示位置は、編集タブ内にある[X/Y Offset]の値を増減することで調整可能です。
おわりに
今回はAsepriteで作成した背景用スプライトをGMS2で利用する方法について、基本的な作業手順を紹介しました。
今回の内容と別の記事(↓)で紹介したタイルセットを組み合わせることで、以下のようなマップになります。
また、今回は要点を抜粋しての紹介になりましたが、背景レイヤーには他にも様々な設定項目があり、様々な演出のために活用できます。
例：カラー設定とエフェクトレイヤーを活用して夕暮れを表現する
例：Speed値の設定で流れる背景を表現する(今回は山でやっているため違和感がありますが…)
これらについても別記事でまとめる予定ですので、よろしければご参照下さい。
コメント