▽カーソルキーでキャラクターを歩かせてみよう▽
今回はGameEngineフォルダのプロジェクトを使って、一からプログラムします。

ActionScript簡易ゲームライブラリ(以下、ゲームライブラリ)を
ダウンロードしていない場合は前回を参考に準備をしてください。

また、歩行させるキャラクタのドット絵もダウンロードします。
フリー素材からキャラクタドット絵をダウンロードし
「rpg_chara.gif」をGameEngineフォルダのbin/resourceフォルダに
コピーしてください。


準備できましたか?
では、FlashDevelopを実行して
GameEngineフォルダの「GameEngine.as3proj」を開いてください。

srcフォルダの「GameMain.as」が実際に開発するファイルです。



1.「rpg_chara.gif」の相対パスを定数にします。
/**
 * ゲームのエントリクラス
 * こちらのクラスに修正を加えて、ゲームを作ってください。
 */
public class GameMain extends GameLib
{
 //ゲームライブラリ群
 private var _sound:GameLib.SoundClass = null;
 private var _bgm:GameLib.BgmClass = null;
 private var _graphic:GameLib.GraphicClass = null;
 private var _key:GameLib.KeyClass = null;
 
 
 //画像ファイル用定数
 private static const GRAPHIC_CHARA:String = "resource/rpg_chara.gif";

ゲームライブラリのグラフィッククラスでは
 ・画像ファイルのロード
 ・画面への描画
 ・アンロード
などのすべての処理で画像ファイルの相対パスをキーにしています。
その都度で"resource/rpg_chara.gif"と直接記述しても良いのですが、
ファイル名の変更が発生した場合、複数箇所の修正が発生してしまいます。
定数にしておけば、ファイル名の変更が発生した際でも
定数定義の修正で済みます。
タイプミスによるバグの埋め込みを排除する意味でも
定数にしておくことをオススメします。


2.キャラクタ情報用プライベート変数を追加します。
//画像ファイル用定数
private static const GRAPHIC_CHARA:String = "resource/rpg_chara.gif";


//キャラクタ情報用変数
private var _x:int = 0; //キャラクタを表示するX座標
private var _y:int = 0; //キャラクタを表示するY座標
private var _dir:int = 0; //キャラクタの向き(0:上 1:左 2:下 3:右)
private var _animeWait:int = 0; //歩行アニメーションの更新時間
private var _anime:int = 0; //キャラクタの歩行アニメーション(0:左足を出す 1:右足を出す)



3.initメソッドにコードを追加します。
最初の数行でグラフィックやサウンドなどの初期化処理が
実行されています。
ここでは、大きく2つのコードを追加します。

・画像ファイルのロード処理
・キー入力クラスのキー登録

/**
 * 初期化処理
 * ゲームループ前に一度だけ実行されます。
 * 必要な修正を入れてください。
 */
protected override function init():void
{
 //リソース生成
 this._sound = new GameLib.SoundClass();
 this._bgm = new GameLib.BgmClass();
 this._graphic = new GameLib.GraphicClass(this._refStage);
 this._key = new GameLib.KeyClass(this._refStage);
 
 //ここから下に修正をいれてください。

 //画像ファイルのロード処理
 this._graphic.load(GRAPHIC_CHARA);
 
 //キー入力クラスのキー登録
 this._key.addKeyCode(Keyboard.UP);
 this._key.addKeyCode(Keyboard.DOWN);
 this._key.addKeyCode(Keyboard.LEFT);
 this._key.addKeyCode(Keyboard.RIGHT);

}
キー入力クラスのキー登録ですが
もともと定数クラスが用意されているので
それを利用して取得したいキーコードを登録しておきます。


4.runメソッドにコードを追加します。
ここではループ処理を記述していきます。

今回は
・キー入力クラスでキー入力状況を取得し、
 カーソルキーが押されている場合はキャラクタを移動させる。
・画面への描画

/**
 * ループ処理
 * 必要な修正を入れてください。
 */
public override function run():void
{
 this._graphic.clear();

 //ここから下に修正をいれてください。

 //キー入力クラスでキー入力状況を取得し、
 //カーソルキーが押されている場合はキャラクタを移動させる。
 var isMove:Boolean = false;
 if (this._key.getKeyState(Keyboard.UP) == true){
  this._y -= 2;
  this._dir = 0;//キャラクタの向きを上にする
  isMove = true;
 }
 if (this._key.getKeyState(Keyboard.DOWN) == true){
  this._y += 2; 
  this._dir = 2;//キャラクタの向きを下にする
  isMove = true;
 }
 if (this._key.getKeyState(Keyboard.LEFT) == true){
  this._x -= 2;
  this._dir = 1;//キャラクタの向きを左にする
  isMove = true;
 }
 if (this._key.getKeyState(Keyboard.RIGHT) == true){
  this._x += 2; 
  this._dir = 3;//キャラクタの向きを右にする
  isMove = true;
 }
 //移動していたら、歩くアニメーションをさせる
 if (isMove == true) {
  this._animeWait += 1;
  //アニメーションは5フレームごとに更新する。
  if (this._animeWait >= 5) {
   if (this._anime == 0) {
    this._anime = 1;
   }else {
    this._anime = 0;
   }
   //アニメーション更新時間をクリアする
   this._animeWait = 0;
  }
 }
 
 //画面への描画
 this._graphic.draw(this._x, this._y, 32 * this._anime, 32 * this._dir, 32, 32, GRAPHIC_CHARA);

 //ここから上に修正をいれてください。

 this._graphic.flip();
}


プログラムが終わりました。
実行ボタンを押してください。

カーソルキーを押すとキャラクタが移動しましたか?


次回はBGMや効果音を追加します。


ソースのダウンロード
▽改変履歴▽
2011/06/25
・新規作成