Pixel Game Maker MV

Pixel Game Maker MV

Not enough ratings
初めての方向けガイドPart2:素材の登録と確認
By PLAYISM and 1 collaborators
初めての方向けガイドPart2は、Part1では触れていないツクールからの素材の取得方法、取得した後の登録と設定方法をガイドします。
 
Rate  
Favorite
Favorited
Unfavorite
Step1: 素材の取り出し
アクションゲームツクールMVを初めて触る方向けガイドのPart2は、「素材の登録・確認」がテーマです。

Part1では、既存のアニメーションの設定をそのままインポートしましたが、自分で一から登録する場合のガイドになります。

早速始めてみましょう。

①サンプルゲームのプロジェクトフォルダを活用する


まず、Part1で使用した「Universe」を開きます。
左上の「ファイル」から「プロジェクトフォルダを開く」をクリックします。


そうすると、以下のような画面が表示されたかと思います。

これは「Universe」のプロジェクトフォルダで、「Universe」に使われている様々な素材が登録されています。
今回は画像を取り出すので、「img」をクリックしましょう。


「Universe」に使用されている画像が表示されましたね。

ここから使用したい画像を右クリックなどで保存することができます。
アクションゲームツクールMVに入っているサンプルゲームからは、同様の方法で登録素材を取り出すことができます。インポートする場合、すべての設定を引き継いでしまうので、同じ画像を使って自分で違う設定をしてみたいときなどは、画像を素材として登録するのが便利です。

②ツクール素材一式をダウンロードする

もう一つの方法として、アクションゲームツクールMVのローカルに保存されているツクール素材を使用する方法があります。

















Steamの「Pixel Game Maker MV」を右クリックし、「プロパティ」を表示します。
































「ローカルファイル」の「ローカルファイルを閲覧」をクリックします。


この中の、「SampleGames」を開きます。


「Tkool_Characters.zip」というZIPファイルがあるので、右クリックなどで保存しましょう。

Tkool_Charactersファイルの中の画像を取り出すので、「img」をクリックしましょう。


展開すると、このようにツクールで使用可能な素材が入っています。


ここでは、「060」と「621」を取り出しました。

このように、アニメーション画像は等分になっている必要があります。
理由は、素材の登録時にわかります。

この「060」「621」を素材として登録してみましょう。
Step2: アニメーション作成前の確認事項
登録した素材でアニメーションを作成する前に、まず素材を登録して、そのあとに各アニメーションの設定がどうなっているか確認します。

①素材の登録

 左上のファイルを選択してプロジェクトを閉じるを選び「Universe」を閉じましょう。
次にPart1で作った「Test Game」を開いてください。
「素材」タブをクリックし、「画像」タブを選びます。デフォルトのフォントしか入っていませんね。


左端で右クリックして、
■「font 12×12」の下で■
「画像を追加」をクリックし、「060」を開きます。こうすることで、「font 12×12」の下に画像が追加されます。
(すでに入っている素材の上で右クリックすると、その素材の位置に新しく登録されてしまいます)


この時、「画面分割の初期値」という項目があります。
これは、登録した画像をアニメーション用に分割することができる機能です。
「060」は、横3×縦3の分割のため、その数字に合わせます。すると、1枚の画像に薄い線が入っていると思います。これが分割される線となります。(今回はわかりやすくするため赤線にしています)

この分割に沿ってこの画像を「アニメーション」として登録するとき、分割された1部分を1コマとして使用することができるようになるので、ここで分割数を確認しておきましょう。

次に、「621」を登録します。


「621」は横3×縦4のため、このように設定します。これで素材の登録ができました。

Tips
 右クリックで画像の名前を変えることができます。わかりやすいように名前を変更しておきましょう。

②各種判定の確認


アニメーションには「判定」という設定が4つあります。わかりやすいので、インポートされた素材の「crawling」を見てみましょう。「crawling」は4つすべての判定が設定されています。
設定されているかどうかは、「キーフレーム」という黒い■が、各種判定の行についているかどうかで確認できます。

それでは、4つの各判定の詳細を見ていきましょう。1つずつ判定を確認するために、判定の行にある目のマークを必要なもの以外は消しておきましょう。


この画像は、全ての判定が見えなくなっていて、アニメーションに使用した画像だけが表示されています。


・壁判定…オブジェクトがタイルなどに接触したとき、通り抜けできるか、それともぶつかるかは、互いの壁判定の範囲で判断されます。

「crawling」は体全体に壁判定があります。


・当たり判定…当たり判定は、敵の攻撃を受け付ける範囲を指します。

「crawling」は壁判定同様、体全体に当たり判定があります。


・攻撃判定…攻撃判定は、触れた敵にダメージを与える範囲を指します。
「crawling」は壁判定同様、体全体に攻撃判定があります。



・接続点…あるオブジェクトに、別のオブジェクトをくっつけて表示させるとき、2つのオブジェクトをつなげる位置が接続点です。

「crawling」は目の部分に接続点があります。

③いろいろなアニメーションの設定

続けて、アニメーションを設定する際に必要なほかの設定も見ていきます。


「インポートされた素材」>「wait」> 「shoot」を選びます。「表示方向」という項目と「right」と「left」という表示がありますね。

右側には、矢印が表示されています。緑になっている方向が、このアニメーションが表示される方向になります。「right」は右方向ですね。

「left」は左方向になっています。
では、右方向と左方向の両方設定しなければいけないのかと思いがちですが、アクションゲームツクールMVには「左右反転」という機能があります。


これは、「right」で設定されたアニメーションを右クリックでコピーして「left」をつくり、「左右反転」にチェックを入れて作ることができます。

Tips
 一枚の画像を加工するアニメーション(飛ばしても構いません)


















初めての方向けではありませんが、こんな風に登録することもできます。
※Part1でインポートしたアニメーションではないのですが、プロジェクト「Universe」>「アニメーション」>「UI/GAUGE」>「strategy」から確認できます。

これは、一枚の画像を不透明度を変えてあたかも消しているように見せているアニメーションです。

設定を見ていきましょう。


このアニメーションに使われている画像は、右の一枚のみで分割されていません。

ですが、最初の画像の不透明度を「0」にすることで、透明にしています。

こうすることで、2枚目が出てくるように見せているのです。
ちなみに、右上に「フレーム」という数字がありますね。
これは「30」で設定されています。これは、「30」フレームのスピードで次の画像が来る設定になっています。



2枚目のアニメーションを見てみましょう。

今度は不透明度がマックスになっていますね。
さらに、30フレーム目で二枚目の画像が表示されるように設定されています。

このように設定することで、一枚の画像を工夫して利用することができます。
Step3: 登録した画像のアニメーション化
①人間編


それでは、さきほど素材として登録した画像を使ってアニメーションを作っていきましょう。
「アニメーション」タブの左端のセクションで右クリックして、「アニメーションを追加」を選びましょう。


右上の「✛」ボタンを押して、「060」を選び、先ほど確認した横縦3の等分割で登録します。

「OK」を押して「待機」モーションを作りましょう。


「モーション」の下の枠をダブルクリックして、名前を「立ち」に変えます。


最初に左向きを作るので、「表示方向」欄を同じくダブルクリックして、名前を「←」に変えます。「表示方向の設定」は左向きのため、右の赤枠内の左矢印をクリックして方向を設定します。


今のままだと正面を向いているので、キャラクターのグラフィックを左向きのものに変えましょう。

一番右の「フレーム」の緑の枠をクリックして、右下の「フレームに表示する画像を選択」で左に向いている画像をクリックします。これで左向きになります。

これで左向きの「立ち」アニメーションができました。

次は、右向きを作りましょう。といっても、登録した画像には右向きの絵がありません。
こういう時は「左右反転」を使います。


「表示方向」の「←」を「Ctrl」+「C」でコピーし、「Ctrl」+「V」でペーストします。
この「←(1)」の名前を「→」にして、表示方向も右側に設定します。


右側の「フレーム」の画像をクリックして、横にある「左右反転」にチェックを入れます。

そうすると、左向きのアニメーションが右向きになりました。


忘れずに原点も設定しておきましょう。そのアニメーションがシーンで配置される際の起点となる点になります。

左のアニメーション一覧の「人間」をクリックすると、原点の設定が可能になります。
現在は左上の設定になっていて、このままシーンに配置すると、左上の地点を起点にして設置されてしまいますので、自然な位置になるように「足元」に設定しなおしましょう。

足元に設置されました。

続けて、「歩き」モーションも作りましょう。


①「立ち」のある「モーション」の「+」をクリックします。
②「モーション001」の名前を「歩き」に変更し、右隣の「表示方向」を「立ち」と同様
 「←」に設定します。この時点ではキャラクターは正面を向いていると思います。
③これを、左向きの歩きモーションに変更するため、右隣の「フレーム」のキャラクター
 画像をクリックし、「フレームに表示する画像の選択」で左向きの画像に変更します。


次に、歩いているように見せるためのモーションを作っていきます。

①②③「+」をクリックして左向き画像の一番端、真ん中、右と3枚増やしていきます。
この画像がちゃんとアニメーションになるか確認します。
④現在のままだと表示が小さいので、「▲」マークを選択して倍率を「200%」に変更しておきましょう。



















⑤倍率の横にある 「▶」をチェックして、歩いているように見えるか確認しましょう。



















このままだと、2枚目・3枚目を表示するフレーム間隔が「1」ずつになっているため、とても速いアニメーションになってしまいます。これをそれぞれ「6」にしましょう。

画像のように、フレームのそれぞれの画像から次の画像を表示するフレーム数を変更することができます。
さきほどより自然な速度のアニメーションが作成できました。

次に、右向きを「立ち」の時と同様に作成します。


「表示方向」 > 「←」に合わせてコピーでしたね。名前を「→」表示方向も「→」に設定しておくことも忘れないでください。

右隣の「フレーム」の3つの画像を「Shift」で選択して左右反転させると、右向きの歩きモーションができました。

「▶」で動きを確認してみてください。

これで「人間」追加は終了です。「フレーム」数も「1」から「6」に変えておくことを忘れないでくださいね。

②判定の設定

次は、各種判定を設定します。


デフォルトだと少しすでに設定されている判定が大きいので、サイズを変更します。

このアニメーションにはほかの壁判定と接触する「壁判定」と攻撃を受ける範囲の「当たり判定」が設定されています。

「当たり判定」の目のマークをクリックして見えなくして幅を設定します。

設定した際のサイズが右側に表示されるので、メモしておきましょう。


次は、「壁判定」の目のマークをクリックして消し、「当たり判定」の目のマークをクリックして表示させて「壁判定」と同じサイズにしましょう。

これで設定できました。

次に、Step3で使用予定の弾を撃つアニメーションのために、ほかのオブジェクトとつなげる「接続点」を設定しておきます。


接続点のキーフレームの位置に合わせて右クリックし「キーフレームを追加」をクリックします。


右端のセクションの「サイズと位置を指定」をクリックし、エリアを表示させて位置を調整しましょう。

接続点が表示されるので、位置を調節しましょう。
今回は該当の画像がないため、「撃つ」専用のアニメーションを作成しません。「立ち」の手のあたりから弾が出ているように位置を調整しましょう。

以上で人間編の設定は終了です。

②モンスター編

では次に、モンスターの登録も同様に行います。


「アニメーション」タブの一番左端のセクション「アニメーション一覧」で右クリック > 「アニメーションを追加」で画像を以下のように選択します。

・画像:621
・画面分割数:横3 縦4

「OK」を押して登録しましょう。



「モンスター」は飛んでいる設定のため、「中心を原点」に設定しておきます。

現在は正面を向いているので、これを人間と同様右向き、左向きにして設定します。
今回は「立ち」を「待機」、「歩き」を「飛行」という名前にします。

■「立ち」の作り方のおさらい
①「フレーム」のセクションで設定されているモーションを右下の「フレームに設定する素材を選択」で左向きの画像の変更。
②「表示方向」で「←」をコピー&ペーストして「フレーム」をクリックして「左右反転」にチェック

■「飛び」の作り方のおさらい:
①「モーション」の「+」でモーションを追加。
②表示方向を「←」にリネーム、右側「表示方向の設定」も左側に表示するように設定。
③左向きの画像をを選択 > 「+」マークで新しいモーションを追加。先ほどの右隣の画像をクリック > 「+」でさらに右隣の画像を選択。それぞれ「表示するフレーム数」は「8」に設定しておく。
④「表示方向」>「←」をコピー&ペーストして「→」にリネーム。表示方向も右にセット。
⑤「フレーム」を「Shift」で複数選択して「左右反転」をクリックすると右向きになります。

各フレームは「8」で設定しましょう。


設定が終わると、このようになっているはずです。
できていますでしょうか?

各種判定をチェックしていきましょう。先ほど、「Universe」の敵の各種判定を確認しましたが、同様の設定をします。


「壁判定」、「当たり判定」が大きいので少し狭めます。


現在は接触するとダメージを与えられる「攻撃判定」が設定されていないため、設定します。「攻撃判定」の上で右クリック「キーフレームを追加」で設定できます。

右端の基本設定のセクションの「サイズと位置を指定」にして、さきほど壁判定・当たり判定で設定した値に合わせて設定します。

これでアニメーションの設定が完了しました。

Part2はこちらで終了になります。お疲れさまでした。
Part3は、実際に登録したアニメーションから弾を発射し、敵を倒すまでを設定する予定です。