「Animate」Animateでドラクエ風RPGを作ってみる
 |
今回、自作ゲーム制作でコンを詰めすぎたので、一度別のことをして、リフレッシュしたいと思い、Adobe Animateで「ドラクエ風RPG」を作ってみようと思いました。
なんでドラクエ風ゲームを今回作ってみようと思った？
2019年の「Fate/Grand Order」のエイプリルフール企画「Fate/Grand Order Quest」を見たのがきっかけです。
とっても気まぐれですがｗ
Animateで作れるゲームの参考にもなるかなっと思い、作ってみようと思いました。
では早速、制作プロセスを書いていこうと思います。
本来なら、最初にストーリーや仕様などを決めてからになりますが、勢いで作りながら、考えて行こうと思います。（とはいえ、ある程度は少しは考えています。）
あくまで、ドラクエ風と言う方向性で試作していき、最終的には全く違うものにしたいと思います。良いところは活かし、今ならこうじゃない？っていうのをやれたらいいですね。
ファイルの「新規」をクリックすると、「新規ドキュメント」というウィンドウが開きます。
テンプレートの一覧が表示されますので、今回は「Android 16:9 (1280 × 720)」の画面サイズで、作成したいと思います。
（最終的に、スマホ・PC向けのアプリにしていきます。）
細かい設定を変更することができますが、今回は新規で作成したファイルのまま、制作していきます。
ぶっちゃけて言えば、あとのことととか何も考えずに、140 × 140pxの正方形で並べて、マップを作りました。途中で色々追加・変更していきますが、雰囲気が付いた感じです。
キャラクターを中央に配置するので、ゲーム画面で表示される正方形の数は奇数にしてあります。
もう少し、マップを広くしても良いかなと思い始めています。
右下に、メニューボタンを配置していますが、まだ何も機能しません。
今回は、中央のグレーの正方形をキャラクターに見立てて、配置位置として作りました。
今はやっつけですが、徐々にキャラクターらしくしていきます。
マップをシンボル化して、インスタンス名を付けます。
X軸・Y軸に140pxずつ、移動するアクションスクリプトを追加します。
まだ試作段階なので、試しに「キーボード操作・矢印キー（↑←↓→）」で、動作するようにしています。徐々に、スマホでのタッチ操作も追加しますが、試作段階では省きたいと思います。
パッと見、逆に動くように見えますが、マップ側が動くのでこのようになります。
「mc_map」は、マップをシンボル化した際に付けたインスタンス名です。
当初「Object(root).」は要らなかったのですが、必要になったので入れています。
37（←キー）,38（↑キー）,39（→キー）,40（↓キー）は、キーボードのキーコードになります。
山、岩、木、海、壁など、キャラクターが突き破らないようにしたいと思います。
（突き破れる場所を設けても面白いかもですね。）
とっても気まぐれですがｗ
Animateで作れるゲームの参考にもなるかなっと思い、作ってみようと思いました。
では早速、制作プロセスを書いていこうと思います。
本来なら、最初にストーリーや仕様などを決めてからになりますが、勢いで作りながら、考えて行こうと思います。（とはいえ、ある程度は少しは考えています。）
あくまで、ドラクエ風と言う方向性で試作していき、最終的には全く違うものにしたいと思います。良いところは活かし、今ならこうじゃない？っていうのをやれたらいいですね。
新規ファイルを作成する
最初にAnimateで新規にファイルを作成します。ファイルの「新規」をクリックすると、「新規ドキュメント」というウィンドウが開きます。
テンプレートの一覧が表示されますので、今回は「Android 16:9 (1280 × 720)」の画面サイズで、作成したいと思います。
（最終的に、スマホ・PC向けのアプリにしていきます。）
細かい設定を変更することができますが、今回は新規で作成したファイルのまま、制作していきます。
マップを作る
いっきに勢いでマップを作ることにします。 |
| Animateで制作したマップ |
キャラクターを中央に配置するので、ゲーム画面で表示される正方形の数は奇数にしてあります。
もう少し、マップを広くしても良いかなと思い始めています。
 |
| 横９マス × 縦５マスのマップ |
右下に、メニューボタンを配置していますが、まだ何も機能しません。
今回は、中央のグレーの正方形をキャラクターに見立てて、配置位置として作りました。
今はやっつけですが、徐々にキャラクターらしくしていきます。
矢印キーでキャラクターを移動させる
今回作ろうとしているRPGでは、キャラクターの位置が固定なので、マップを移動させることによって、キャラが移動しているように見せます。 |
| キャラクターが移動できるようにする |
マップをシンボル化して、インスタンス名を付けます。
X軸・Y軸に140pxずつ、移動するアクションスクリプトを追加します。
まだ試作段階なので、試しに「キーボード操作・矢印キー（↑←↓→）」で、動作するようにしています。徐々に、スマホでのタッチ操作も追加しますが、試作段階では省きたいと思います。
//mc_mapを移動させて、CHARAの移動したように見せる。
stage.addEventListener(KeyboardEvent.KEY_DOWN, function (e:KeyboardEvent) :void{
//← (左矢印)を押すと、マップが右へ140px移動する。
if(e.keyCode == 37){
Object(root).mc_map.x += 140;
}
//↑ (上矢印)を押すと、マップが下へ140px移動する。
if(e.keyCode == 38){
Object(root).mc_map.y += 140;
}
//→ (右矢印)を押すと、マップが左へ140px移動する。
if(e.keyCode == 39){
Object(root).mc_map.x -= 140;
}
//↓ (下矢印)を押すと、マップが上へ140px移動する。
if(e.keyCode == 40){
Object(root).mc_map.y -= 140;
}
});
パッと見、逆に動くように見えますが、マップ側が動くのでこのようになります。
「mc_map」は、マップをシンボル化した際に付けたインスタンス名です。
当初「Object(root).」は要らなかったのですが、必要になったので入れています。
37（←キー）,38（↑キー）,39（→キー）,40（↓キー）は、キーボードのキーコードになります。
障害物でキャラクターが移動できないようにする
マップを移動できるようにしましたが、どこまでも移動できてしまうので、移動できないようにしていきます。山、岩、木、海、壁など、キャラクターが突き破らないようにしたいと思います。
（突き破れる場所を設けても面白いかもですね。）
＊後日更新で追加したいと思います。
城、町、ダンジョンのマップを作る
メインのマップを移動していくと現れる城、町、ダンジョン入口のアイコンを作り、キャラクターがアイコンに重なると、別のマップが切り替わる仕組みを作っていきます。
今回はダンジョンのマップを先に制作します。
 |
| 制作途中のダンジョン |
＊後日更新で追加したいと思います。
中途半端な投稿記事ですが制作を進ませつつ、投稿記事の見直しと更新を行っていきます。
よろしくどうぞ。
よろしくどうぞ。
