前回はキャラクターの表示まで実施しましたね。
それだけではちょっとつまらないのでキャラクターを色々と動かしてみます。
コードでキャラクタを動作させる
まずは動きを確認してみます。
動き確認用サンプルその前に一旦解説です。
ソースは次の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
enchant(); // Knightコンストラクタをつくる Knight = Class.create(Sprite, // Spriteの機能を継承 { initialize: function(x, y) { //初期化する Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化 this.image = game.assets['chara5.png']; this.x = x; this.y = y; this.frame = 0; game.rootScene.addChild(this); }, onenterframe: function(){ //メソッド追加 this.y++; //y軸（縦方向に移動 } }); window.onload = function() { game = new Game(320, 320); game.preload('chara5.png'); game.onload = function() { knight = new Knight(128, 128); // 一人目のナイト作成 } game.start(); } |
注目して欲しいところは14~16行目のメソッドを追加しているとこです。
onenterframeというのが「新しいフレームが描画される前」に実行される
処理になります。つまり、画面が切り替わるたびに1pxづつ移動していくわけですね。ここまでは簡単です。
プチ課題：ナイトを斜め右上に移動させてください！
そういえば大事なことを忘れていました。
今はゲーム開始があるのに終了がないですね・・・。
ゲームオーバーを入れましょう。条件はナイトが画面がら消えたら！
こんな感じ。
次が実際のソースです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
enchant(); // Knightコンストラクタをつくる Knight = Class.create(Sprite, // Spriteの機能を継承 { initialize: function(x, y) { //初期化する Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化 this.image = game.assets['chara5.png']; this.x = x; this.y = y; this.frame = 0; game.rootScene.addChild(this); }, onenterframe: function(){ this.y++; if(this.y > 320){ game.end(); } } }); window.onload = function() { game = new Game(320, 320); game.preload('chara5.png'); game.onload = function() { knight = new Knight(128, 128); // 一人目のナイト作成 } game.start(); } |
追加したのは16~18行目。
yは一番したが320になるのでそれを超えた場合はゲームオーバということになりますね。
プチ課題：今は下を超えた時だけゲームオーバになりますが、
左右上を超えた場合もゲームオーバにして実際に確かめてください。
ゲームっぽくなってきましたね。
次です。このナイトは地面を滑るように進みますね。
足を前後に動かすようにしましょう。
こんな感じ。
落ち着きのない感じですが、無事動きましたね。
もっとゆっくりにしたいところですが、とりあえず説明です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
enchant(); // Knightコンストラクタをつくる Knight = Class.create(Sprite, // Spriteの機能を継承 { initialize: function(x, y) { //初期化する Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化 this.image = game.assets['chara5.png']; this.x = x; this.y = y; this.frame = 0; this.walk =[1,0,1,2]; game.rootScene.addChild(this); }, //フレームが始まる前に実行するんだぜ。 onenterframe: function(){ this.y++; //走るモーション this.frame = this.walk[this.age%4]; //下超えたらゲームオーバだぜ。 if(this.y > 320){ game.end(); } } }); window.onload = function() { game = new Game(320, 320); game.preload('chara5.png'); game.onload = function() { knight = new Knight(128, 128); // 一人目のナイト作成 } game.start(); } |
重要なとこは11行目と19,20行目ですね。
この２つの部分ででジタバタする動きになっています。
this.ageというものが、ナイトが今まで何回表示されたか数を持っています。
つまり1秒間に30づつ増えていくことになりますね。
このthis.ageを4で割ったあまりを表示しているので必ず0~3の値が得られます。
|
1 2 3 |
this.age: 0 1 2 3 4 5 6 7 8 9 10 .... this.age%4: 0 1 2 3 0 1 2 3 0 1 2 .... this.frame: 1 0 1 2 1 0 1 2 1 0 1 |
0~3の値をthis.frameの値を1,0,1,2と繰り返し続けています。
そしてthis.walkの配列の中身をthis.frameに入れ続けてます。
つまりthis.frameは1,0,1,2を繰り返します。
ではthis.frameって何？となりますね。
これは、ナイトの画像の表示する場所をさしています。
フレーム番号は左上から0、1、2となります
先ほど計算して算出した1、0、1、2の繰り返しは「ナイトの画像の左上から３つを切り替えろ」という意味になります。パラパラ漫画の要領です。
足を揃える、右足出して、揃えて、左足出して、揃える・・・という画像を切り替えていきます。
- 歩くモーションをゆっくりにするにはどうした良いか考えてみましょう
- ナイトが剣を振りながら下に移動するように変更してください。
- ナイトが画面外に出ようとしたら反対側に移動するようにしてください。
