Herlockで作るiOSアプリ(もちろんAndroidも!) – タッチイベント編 –

この記事はHerlockシリーズの続きです。

せっかくなのでゲームっぽく発展させていきたいと思います。
内容はともかくタッチでオブジェクトを移動させる処理は必須になりそうなので、イベント周りを調査してみました。

やってみる

まずは動きを決めます。
パズル系のゲームを考えているので、上部にドラッグできるオブジェクトを準備して左から順々にドラッグ出来るようにします。

仕様

シンプルにしたいので判定ロジックとTweenJSは無しで進めます。
まずはドラッグでオブジェクトを移動してドラッグ終了でステージから削除、新規オブジェクトの追加です。

ライブラリと新規ファイルの整理

後々使いそうなのでunderscoreを追加しておきましょう。
また、見通しを良くするためにゲームロジックは別ファイルに分離してしまいました。
scene/gamelogic.jsを追加して下さい。

ライブラリを読み込んだら依存関係も整理しておきます。

#・・省略
'../lib/underscore/underscore-min': {
     exports: '_'
},
#・・省略
'config' : {
     deps : ['SceneManager','../lib/JSDeferred/jsdeferred','../lib/underscore/underscore-min','../lib/TweenJS/tweenjs-0.4.1.min']
},
#・・省略

ロジックの追加

stageオブジェクトはグローバルにしてしまったのでちょっとあれですが、そのまま進めます。
現時点で必要なロジックは下記の通りです。

• ランダムの数字を生成
• 数字リストの生成
• Spriteの生成(今回はtextfieldで代用)
• Spriteリストの生成(今回はtextfieldで代用)
• Spriteリストの整列

/* ゲームのロジック */
define( ['config'], function ( config ) {
    //生成するオブジェクト数
    var maxCount = 5;
    //外部へ公開するAPI
    return {
        //ランダムの数字作成
        createNumber : function(){
          return parseInt(1+(Math.random()*8));
        },
        //数字のリストを生成する
        createNumberList : function(){
            var list = [];
            for(var i=0;i<maxCount;i++){
                list[i] = this.createNumber();
            }
            return list;
        },
        //Spriteを準備する
        createSprite : function(id,number){
            var numberSprite = _stage.addChild( new TextField() );
            numberSprite.autoSize = TextFieldAutoSize.LEFT;
            numberSprite.defaultTextFormat = new TextFormat( null, 30 );
            numberSprite.mouseEnabled = false;
            numberSprite.text = "[" + number + "]" ;
            return numberSprite;
        },
        //spriteの初期化
        initializeSprite : function(list){
            var numberSprite = [];
            for(var i=0;i<list.length;i++){
                numberSprite[i] = this.createSprite(i,list[i]);
            }
            return numberSprite;
        },
        //並び替え
        showList : function(list){
            var adjust = 0;
            _.each(list,function(obj){
                obj.x = 10 + ( adjust * 100);
                obj.y = 100;
                adjust++;
            });
        }
    }
});

ゲーム画面へ反映させる

では利用してみましょう。

追加、修正した部分だけ抜粋しますが、ランダムの数字とSpriteを管理するプロパティを準備して、背景アニメーション後にSpriteを追加します。
その後でタッチイベントを定義しましょう。

#・・省略
//数字配列
this.number = logic.createNumberList();
this.numberSprite = [];
#・・省略
createjs.Tween.get(_sprite_image_bg,{loop:false}).to({y:0},1000, createjs.Ease.backin).call(function(){
    //ステージにゲームオブジェクトを準備
    self.numberSprite = logic.initializeSprite(self.number);
    logic.showList(self.numberSprite);
    //タッチイベント
    _stage.addEventListener( "touchMove", function( event ){
        self.numberSprite[0].x = event.localX - self.numberSprite[0].width/2;
        self.numberSprite[0].y = event.localY - self.numberSprite[0].height/2;
    });
    _stage.addEventListener( "touchEnd", function( event ){
        _stage.removeChild(self.numberSprite[0]);
        var range = self.number.length;
        self.numberSprite = self.numberSprite.slice(1,range);
        self.number = self.number.slice(1,range);
        self.number[range-1] = logic.createNumber();
        self.numberSprite[range-1] = logic.createSprite(range,self.number[range-1]);
        logic.showList(self.numberSprite);
    });
});
#・・省略

Spriteを利用するときはスプライトシートを利用するほうが良さそうです。
ロジック整理後にチャレンジしてみたいと思います。