cocos2dの使い方【説明】② 〜タッチ機能とスプライト〜

今週のお題「桜」


今回はiPhoneの目玉機能であるタッチ機能についての説明をします。

iPhoneにはユーザーから入力機能として主にタッチ機能と加速度センサーがありますが,ほとんどのアプリで使用するであろうタッチ機能の説明をまずします。

まずタッチ機能を有効にするところから始めたいのですが,いつまでもHelloWorldLayerを使っていてもしょうがないので簡単に自分で新しくSceneとLayerをとりあえず作ってみましょう。

とりあえず私が用意した用意したコードはここに置いておきます。


ちなみに新しいファイルの作り方は
メニューバーの[ファイル]→[New]→[NewFile]→[iOS]→[cocos2d]→[CCNode class]→[CCLayer](付け足したい種類(なかったらとりあえずCCNode))→名前を入力する。

追加の仕方はxcodeの左の所にドラッグ&ドロップでも追加できます。


サンプルコードを追加したことを前提に進めていきます。

新しいことはあまり記述していませんがなるべくコメントアウトしましたのでそちらを参考にして下さい。

サンプルコードには6つのファイルが入っているかと思いますが,AppDelegateは上書きしてください。

そして基本的に編集するのはGameLayer(特に.m)になります。GameSceneはレイヤーを追加したりというときに編集します。


ではタッチ機能を追加していきます。

GameLayer.m

#import "GameLayer.h"


@implementation GameLayer

- (id)init
{
    if(self = [super init])
    {
        //画面サイズを取得
        CGSize screenSize = [[CCDirector sharedDirector] winSize];

        //GameLayer上にLabel生成
        CCLabelTTF *title = [CCLabelTTF labelWithString:@"sampleGame" fontName:@"Marker Felt" fontSize:32] ;
        //Spriteの座標の基準位置を変更(デフォルトでは(.5f, .5f)で画像なら真ん中)
        title.anchorPoint = ccp(.5f, 1.f);
        //位置変更(デフォルトでは(0, 0)で左下)
        title.position = ccp(screenSize.width * .5f, screenSize.height);
        //GameLayerの子として追加(selfは自分(GameLayerのこと)),z値は画面の奥,手前の概念で大きい方が手前
        [self addChild:title z:0];
        
        //GameLayer上にSprite生成
        CCSprite *player = [CCSprite spriteWithFile:@"sakura.png"];
        //位置
        player.position = ccp(screenSize.width * .5f, screenSize.height * .5f);
        //追加
        [self addChild:player z:1];

        //タッチ機能ON
        self.isTouchEnabled = YES; ←ここ

    }
    return self;
}

- (void)dealloc
{
    [super dealloc];
}

@end

ここというところに機能を追加し,あたらしいメソッドを追加していきます。

//タッチし始めの時
- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;
//タッチして動いている時
- (void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;
//タッチし終わった(離した)時
- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;

実際にタッチしたところにSpriteを持っていき, 動かすと大きくなるプログラムを書いてみます。

すると先に準備するものが2つあり, 動かすSpriteのポインタとSpriteのサイズをタッチしたときのメソッドが知る必要があるため,

最初の#importの下に先に定義します.

static CCSprite *player = nil;
static float playerScale; 

そして先ほど定義したplayerはかぶってしまうのでCCSprite*の部分を消してしまいましょう。

そして以下のプログラムを追加します。

//タッチし始めの時
- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //タッチした場所を変換
    UITouch *touch = [touches anyObject];
    CGPoint location = [self convertTouchToNodeSpace: touch];
    //playerの位置をタッチした位置にする
    player.position = location;
    //playerの縮尺を0.1倍に
    player.scale = .1f;
    //playerScaleに値を保存しておく
    playerScale = player.scale;
}

//タッチして動いている時
- (void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint location = [self convertTouchToNodeSpace: touch];
    player.position = location;
    //playerScaleを動かすごとに増やしていく
    playerScale += .1f;
    player.scale = playerScale;
}

//タッチし終わった(離した)時
- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint location = [self convertTouchToNodeSpace: touch];
    player.position = location;
    //scaleを元に戻しておく
    player.scale = 1.f;
}

新しいコードはここに置いておきます。

そして[Run]して画面をマウスでクリックして動かしてみるとうまく出来たと思います。


次回はタッチ機能+αの実践を行います。