第19回キャラクターを操作してみよう

キャラクターをマウスで操作する方法

今日はキャラクターを実際に操作してみましょう。
まずはムーンブロックでもよく利用したタップ、クリックした
位置に移動するものを実装してみましょう。
こんな感じ。

動かすプログラムは次の通り

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.tx = this.x;
        this.ty = this.y;
        
        this.frame = 0;
        game.rootScene.addChild(this);
    },
    //フレームが始まる前に実行する。
    onenterframe:function(){
        //走るモーション
        this.frame = this.age%3;
        
        //タッチ場所に移動する処理        
        var speed = 10;    //数字が小さいと高速移動するね   
        this.x += (this.tx - this.x) / speed; //xを画面更新毎に近づける
        this.y += (this.ty - this.y) / speed; //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.rootScene.ontouchend = function(){
            knight.tx = event.x;  //タッチの位置をx位置をknight.txに入れる
            knight.ty = event.y;  //タッチの位置をx位置をknight.tyに入れる
        }
    
    }
    game.start();
}

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.tx = this.x;

this.ty = this.y;

this.frame = 0;

game.rootScene.addChild(this);

//フレームが始まる前に実行する。

onenterframe:function(){

//走るモーション

this.frame = this.age%3;

//タッチ場所に移動する処理

var speed = 10; //数字が小さいと高速移動するね

this.x += (this.tx - this.x) / speed; //xを画面更新毎に近づける

this.y += (this.ty - this.y) / speed; //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.rootScene.ontouchend = function(){

knight.tx = event.x; //タッチの位置をx位置をknight.txに入れる

knight.ty = event.y; //タッチの位置をx位置をknight.tyに入れる

}

game.start();

}

ざっと説明します。
まずは11と12行めからです。

        this.tx = this.x;
        this.ty = this.y;

1 2	this.tx = this.x; this.ty = this.y;

上の2行でナイトにプロパティを追加しました。
タッチした場所のxとタッチした場所のyを保存するプロパティです。
記載した場所はinitialのとこなので、初回は画面の初期表示位置が入ります。
ココマデいいですか？次です次。

      　 //タッチ場所に移動する処理        
        var speed = 10;    //数字が小さいと高速移動するね   
        this.x += (this.tx - this.x) / speed; //xを画面更新毎に近づける
        this.y += (this.ty - this.y) / speed; //yを画面更新毎に近づける

　 //タッチ場所に移動する処理

var speed = 10; //数字が小さいと高速移動するね

this.x += (this.tx - this.x) / speed; //xを画面更新毎に近づける

this.y += (this.ty - this.y) / speed; //yを画面更新毎に近づける

22-25行目、記載されているところは何処でしょうか。
そうですonenterframeに記載してますね。ここは画面が描画される前に実行されますね。つまり１秒間に30回実行されるとこです。
処理の内容は、

speedの変数に10を入れる。
タッチされたx位置と現在のx位置を引いてspeedで割ってthis.xに入れる
タッチされたy位置と現在のy位置を引いてspeedで割ってthis.yに入れる

画面描写ごとに行われるので徐々にキャラクターが移動しているように
見えるということですね。
図で書いてみると次のようになります。

こんな感じです！
「うわー面倒！」と思いましたか？
安心してください。もう少し便利な機能があります。

タイムラインオブジェクト

キャラクターを動かす上ですごく便利な機能です。
ちょっとサンプルみてみましょう。
動き確認用サンプル

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.tx = this.x;
        this.ty = this.y;
        
        this.frame = 0;
        this.walk = [1,0,2]
        
        game.rootScene.addChild(this);
    },
    //フレームが始まる前に実行するんだぜ。
    onenterframe:function(){
        //走るモーション
        this.frame = this.walk[this.age%3];
        
        //下超えたらゲームオーバだぜ。
        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.rootScene.ontouchend = function(){
            knight.tl.moveTo(event.x,event.y,30);
        }
    
    }
    game.start();
}

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.tx = this.x;

this.ty = this.y;

this.frame = 0;

this.walk = [1,0,2]

game.rootScene.addChild(this);

//フレームが始まる前に実行するんだぜ。

onenterframe:function(){

//走るモーション

this.frame = this.walk[this.age%3];

//下超えたらゲームオーバだぜ。

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.rootScene.ontouchend = function(){

knight.tl.moveTo(event.x,event.y,30);

}

game.start();

}

40行目

knight.tl.moveTo(event.x,event.y,30);

1	knight.tl.moveTo(event.x,event.y,30);

この部分、event.x,event.yは覚えてますね。タッチされた場所の座標です。
30というのが、30回画面を書き換える間という意味です。
つまり、「30回書き換える間にx,yに移動しな！」という意味です。
この書き方もしっかり覚えて使えるようにしておきましょう。

ボタンによる操作

最近はスマホでタッチだけでプレイできるゲームも多いですが、
一般的なゲームにはコントローラがありますね。
ボタン操作はゲームにはつきものということで、ボタンによるキャラクター操作の方法です。
まずはサンプル。
上下左右で移動します。そして[z]キーがaボタン、[x]キーをbボタン
に割り当てています。

動き確認用サンプル

続いてソースですね。

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.tx = this.x;
        this.ty = this.y;
        
        this.frame = 0;
        this.walk = [1,0,2];
        this.attack = [6,7,8];
        this.attackFlg = false;
        game.rootScene.addChild(this);
    },
    //フレームが始まる前に実行するんだぜ。
    onenterframe:function(){
     
        //走るモーション
        this.frame = this.walk[this.age%3];
        
        if (game.input.up) {
          //↑キー
          this.y -= 1;
        }
        if (game.input.down) {
          //↓キー
          this.y += 1;
        }
        if (game.input.right) {
          //→キー
          this.x += 1;
        }
        if (game.input.left) {
          //←キー
          this.x -= 1;
        }
        
        //aボタン
        if (game.input.a) {
          console.log("aボタン");
        }

        //bボタン
        if (game.input.b) {
          console.log("bボタン");
        }
        
        //下超えたらゲームオーバだぜ。
        if(this.y > 320){
            game.end();
        }
    }
});

window.onload = function() {
    game = new Game(320, 320);
    game.preload('chara5.png');
    game.onload = function() {
    
    //キーバインド(Aボタンをzキーに割り当て)
    game.keybind(90, 'a');
    
    //キーバインド(Bボタンをxキーに割り当て)
　　game.keybind(88, 'b');

    
    knight = new Knight(128, 128); // 一人目のナイト作成
    
    }
    game.start();
}

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.tx = this.x;

this.ty = this.y;

this.frame = 0;

this.walk = [1,0,2];

this.attack = [6,7,8];

this.attackFlg = false;

game.rootScene.addChild(this);

//フレームが始まる前に実行するんだぜ。

onenterframe:function(){

//走るモーション

this.frame = this.walk[this.age%3];

if (game.input.up) {

//↑キー

this.y -= 1;

}

if (game.input.down) {

//↓キー

this.y += 1;

}

if (game.input.right) {

//→キー

this.x += 1;

}

if (game.input.left) {

//←キー

this.x -= 1;

}

//aボタン

if (game.input.a) {

console.log("aボタン");

}

//bボタン

if (game.input.b) {

console.log("bボタン");

}

//下超えたらゲームオーバだぜ。

if(this.y > 320){

game.end();

}

});

window.onload = function() {

game = new Game(320, 320);

game.preload('chara5.png');

game.onload = function() {

//キーバインド(Aボタンをzキーに割り当て)

game.keybind(90, 'a');

//キーバインド(Bボタンをxキーに割り当て)

　　game.keybind(88, 'b');

knight = new Knight(128, 128); // 一人目のナイト作成

}

game.start();

}

今回タッチ（クリック）で動く機能は外しています。
それでは説明です。

        if (game.input.up) {
          //↑キー
          this.y -= 1;
        }
        if (game.input.down) {
          //↓キー
          this.y += 1;
        }
        if (game.input.right) {
          //→キー
          this.x += 1;
        }
        if (game.input.left) {
          //←キー
          this.x -= 1;
        }
        
        //aボタン
        if (game.input.a) {
          console.log("bボタン");
        }

        //bボタン
        if (game.input.b) {
          console.log("aボタン");
        }

if (game.input.up) {

//↑キー

this.y -= 1;

}

if (game.input.down) {

//↓キー

this.y += 1;

}

if (game.input.right) {

//→キー

this.x += 1;

}

if (game.input.left) {

//←キー

this.x -= 1;

}

//aボタン

if (game.input.a) {

console.log("bボタン");

}

//bボタン

if (game.input.b) {

console.log("aボタン");

}

この部分、gameオブジェクトのinputについて上下左右のキーが押された場合に
trueが入るのでその場合ナイトの現在位置をプラスしたりマイナスしたりします。
次にこの部分です。

    //キーバインド(Aボタンをzキーに割り当て)
　　   game.keybind(90, 'a');
    
    //キーバインド(Bボタンをxキーに割り当て)
    game.keybind(88, 'b');

//キーバインド(Aボタンをzキーに割り当て)

　　 game.keybind(90, 'a');

//キーバインド(Bボタンをxキーに割り当て)

game.keybind(88, 'b');

aボタンとbボタンをそれぞれzとxキーに割り当てています。
90というのが「z」88というのが「x」を指します。
キーコードについては他に参考になるサイトがいくつかありますので
参考にしてみてください

https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/keyCode

https://www.w3.org/2002/09/tests/keys.html

aボタンを押したら、攻撃モーションを実行するようにしてみよう。
※フレーム6, 7, 8が攻撃モーションです。

キーを左右上下方向に押した時、ナイトの向きも合わせて変更してみよう

Pocket

OP1：演算子とfor文

第20回　タイムラインでキャラクタを動かしてみよう。