初心者が征く！オリジナルゲーム作成道　day6

こんにちは！インターン生の内村です！

今回は敵キャラクターの設定を作っていきたいと思いますが、その前に前回説明し忘れた「preloqd」について説明します。

「preload」とは、HTMLが読み込まれた時にあらかじめ画像などのresourceを読み込んでおいてくれる処理です。
つまり、画像などを一気に読み込んだうえでHTMLが起動するということです。
例)Webサイトに添付された画像、Flashなど
Webサイトのような静的なものの場合は画像の読み込みに待ち時間が発生しても構いませんが、ゲームのような動的なものの場合は操作やゲーム性から考えて死活問題です！
(いきなり敵キャラが操作キャラの前に表示されて被弾、ゲームオーバーなんてことになったらもう二度とプレイされなくなってしまうでしょう…)

実装はこのようになっています。

作成中のゲームはgamesceneを読み込むmain.jsファイルからpreloadしています。
とても大切な処理なのでお忘れなく！

では、いよいよ今回のメインである敵キャラクターの設定について解説します！

まずは敵キャラクターの設定です。
以下の手順で行います。
①画像の収集(加工も行います)
②resorce.jsの編集
以下のように書きます。

【解説】
ただ単にres配列に画像を追加しただけです。
弾の画像も前もって入れてあります。

③敵キャラクターが自動で生成され自壊する処理のプログラム
以下のように書きます。

【解説】
敵キャラクター生成関数spornEnemyを作成しその中にコーディングをしていきます。
まずは、cc.Sprite.createで敵キャラクターの画像を読み込みます。
次に、敵キャラクターを生成したいエリア(今回はシューティングゲームなので画面最上部から生成)を決めます。
敵キャラクターを生成する座標X,Yの変数を作り、座標XにMath.randumと画面横幅の最大値をかけ合わせた数値、座標Yに画面縦幅の最大値の数値をそれぞれ代入することで
画面上部からランダムな位置で出現するようになります。
これだけでは、移動してくれないので敵キャラクターに移動アクションを付与します。
ここで使うのがcc.MoveByで引数(メソッドのあとの()の中に記述されているもの)を指定することで画像などの位置を動かすアニメーションを作成できます。
ここでは2～4秒で画面端まで移動するようになっています。
移動した後に自壊するようにremoveで指定して、sequenceで連続させてアクションを行わせています。

以下のような結果になりました！

app.jsのvar gameにscheduleを追加して1秒ごとの処理にするのもお忘れなく！

今回は以上です！
次回は衝突判定を作成していきたいと思います！

画像はこちらのフリーサイトからいただきました！
https://www.irasutoya.com　敵キャラクターの画像

興味を持たれた方はお気軽にお問い合わせください。