ゲームエンジン開発③ キャラクターを自作の画像にする

前回:自作ゲームエンジンに挑戦②「さっそくゲーム作ってみる」

やっぱただの四角だと見た目につまらない。ゲームらしい画像を使わなけりゃ面白くないですよね。ってことで今回は画像を表示させてみます。

で、まず画像を用意していただきたいんですが、プレイヤー、敵、弾の3つ作成してください。大きさはプレイヤー、敵が64×64、弾が16×16です。それらをimagesフォルダに入れてください。

前回のサンプルの画像を入れ替えたのがこちらです→サンプル

では作ってきましょう(・∀・)

画像の読み込み

まずは使う画像をASSETSオブジェクトにまとめて入れておきます。それぞれの画像の名前とファイルの場所を入れます。ASSETSという言い方は最近のトレンドらしいんですが、まぁ使うデータのことみたいです。

で、画像の読み込みなんですが、まず画像を扱うにはImageオブジェクトを作成してそこに画像を読み込んで使います。

基本、上記のような感じで書きます。onloadメソッドは画像の読み込みが完了したら発生するイベントです。大きな画像だったりすると読み込むのに時間がかかったりするので必要な処理は読み込みが終わってからする必要があります。

ただ、ゲームだとたくさん画像を扱うので全部読み込んだかどうかの確認が必要です。

で、Coreクラスに以下のような処理をつけました。引数のdataはASSETSです。画像はすべてCoreクラスのassetsオブジェクトに読み込みます。

画像の枚数をカウントしておいて、読み込みの完了した数が画像の枚数と同じになればCoreクラスのonloadメソッドを実行します。

で、それを追加したCoreクラスがこんな感じです

画像の読み込み完了後

画像の読み込みが完了したらゲームプログラムが動き始めるようにします。

core.onloadメソッドに読み込み完了後の処理を記述します。ここで初めてrequestAnimationFrameを使います。この後は自動で更新処理が行われるようになります。

画像を描画する

もっとも大事な画像を描画する部分を忘れてましたね(^^;)

Charaクラスのレンダーメソッドに画像を描画するdrawImageメソッドを記述します。

キャラクターはすべてこのCharaクラスを継承しているのでこの一か所変更するだけでOKです。

これで画像を使ったゲームになります。

まとめ

ただの四角から画像に変わっただけでものすごく進化した気がしますね( *´艸`)

なんだかゲームエンジン作るのなんて簡単なんじゃないか?って錯覚してしまいそうですが、まぁそんなのは今だけの話ですよ。。

じゃ(‘ω’)ノ


コメントを残す

メールアドレスが公開されることはありません。